You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
67 lines
2.2 KiB
TypeScript
67 lines
2.2 KiB
TypeScript
2 years ago
|
import {withLayout} from "../layout_auth/Layout";
|
||
|
|
import {useState} from "react";
|
||
|
|
import axios from 'axios';
|
||
|
|
import Cookie from 'js-cookie';
|
||
|
|
import {useRouter} from "next/router";
|
||
|
|
import jwtDecode from "jwt-decode";
|
||
|
|
import 'bootstrap/dist/css/bootstrap.min.css';
|
||
|
|
import {
|
||
|
|
Container, Row, Col, Form, Input, Button, Navbar, Nav,
|
||
|
|
NavbarBrand, NavLink, NavItem, UncontrolledDropdown,
|
||
|
|
DropdownToggle, DropdownMenu, DropdownItem
|
||
|
|
} from 'reactstrap';
|
||
|
|
|
||
|
|
function setUserIDLocalStrorage(token: string): void{
|
||
|
|
const decoded_token = jwtDecode<{user:{ID:string} }>(token);
|
||
|
|
localStorage.setItem('user_id', decoded_token.user.ID);
|
||
|
|
}
|
||
|
|
|
||
|
|
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_in', formData, {withCredentials: true})
|
||
|
|
.then(function(response){
|
||
|
|
let cook = response.headers['set-cookie']
|
||
|
|
//Cookies.set('api_session', cook)
|
||
|
|
router.push('/blog');
|
||
|
|
//Perform action based on response
|
||
|
|
})
|
||
|
|
.catch(function(error){
|
||
|
|
console.log(error);
|
||
|
|
alert("Bad creads")
|
||
|
|
//Perform action based on error
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
// ... submit to API or something
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<form style={{gridArea: "form"}} onSubmit={handleSubmit}>
|
||
|
|
<h1>Sign In</h1>
|
||
|
|
<Input onChange={handleChange} name={"username"} placeholder={"Username"}/>
|
||
|
|
<Input onChange={handleChange} name={"password"} placeholder={"Password"}/>
|
||
|
|
<Button>Sign In</Button>
|
||
|
|
<NavLink href={"/register"} style={{justifySelf: "center", alignSelf: "center"}}>Sign out</NavLink>
|
||
|
|
</form>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default withLayout(Home);
|