59 lines
No EOL
1.9 KiB
TypeScript
59 lines
No EOL
1.9 KiB
TypeScript
import {withLayout} from "../layout_auth/Layout";
|
|
import {useState} from "react";
|
|
import axios from 'axios';
|
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
|
import {useRouter} from "next/router";
|
|
import {
|
|
Container, Row, Col, Form, Input, Button, Navbar, NavLink
|
|
} from 'reactstrap';
|
|
|
|
function Home() {
|
|
const router = useRouter();
|
|
const initialFormData = Object.freeze({
|
|
username: "",
|
|
password: ""
|
|
});
|
|
const [formData, updateFormData] = useState(initialFormData);
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
updateFormData({
|
|
...formData,
|
|
|
|
// Trimming any whitespace
|
|
[e.target.name]: e.target.value.trim()
|
|
});
|
|
};
|
|
|
|
const handleSubmit = (e: React.ChangeEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
|
|
axios.post('http://10.50.20.5:13377/api/auth/sign_up', formData)
|
|
.then(function(response){
|
|
|
|
router.push('/auth');
|
|
//Perform action based on response
|
|
})
|
|
.catch(function(error){
|
|
console.log(error);
|
|
//Perform action based on error
|
|
});
|
|
|
|
|
|
// ... submit to API or something
|
|
};
|
|
|
|
|
|
return (
|
|
<>
|
|
<form style={{gridArea: "form"}} onSubmit={handleSubmit}>
|
|
<h1>Sign Out</h1>
|
|
<Input onChange={handleChange} name={"username"} placeholder={"Username"}/>
|
|
<Input onChange={handleChange} type={"password"} name={"password"} placeholder={"Password"}/>
|
|
<Input onChange={handleChange} type={"password"} name={"password_repeat"} placeholder={"Password (repeat)"}/>
|
|
<Button>Sign Out</Button>
|
|
<NavLink href={"/auth"} style={{justifySelf: "center", alignSelf: "center"}}>Sign In</NavLink>
|
|
</form>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default withLayout(Home); |