QkoSad
86 lines
2.4 KiB
TypeScript
Executable File
86 lines
2.4 KiB
TypeScript
Executable File
import * as React from 'react';
|
|
import { Link, Navigate } from "react-router-dom";
|
|
|
|
import { useAppDispatch, useAppSelector } from "../../utils/hooks";
|
|
import { login } from "../../actions/auth";
|
|
|
|
import Avatar from '@mui/material/Avatar';
|
|
import Button from '@mui/material/Button';
|
|
import CssBaseline from '@mui/material/CssBaseline';
|
|
import TextField from '@mui/material/TextField';
|
|
import Box from '@mui/material/Box';
|
|
import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
|
|
import Typography from '@mui/material/Typography';
|
|
import Container from '@mui/material/Container';
|
|
|
|
export default function Login() {
|
|
|
|
const dispatch = useAppDispatch();
|
|
const isAuthenticated = useAppSelector((state) => state.auth.isAuthenticated);
|
|
|
|
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault();
|
|
const data = new FormData(event.currentTarget);
|
|
const email = data.get('email') as string
|
|
const password = data.get('pasword') as string
|
|
if (email && password)
|
|
dispatch(login(email, password));
|
|
};
|
|
|
|
if (isAuthenticated) {
|
|
return <Navigate to="/dashboard" />;
|
|
}
|
|
|
|
return (
|
|
<Container component="main" maxWidth="xs">
|
|
<CssBaseline />
|
|
<Box
|
|
sx={{
|
|
marginTop: 8,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
}}
|
|
>
|
|
<Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
|
|
<LockOutlinedIcon />
|
|
</Avatar>
|
|
<Typography component="h1" variant="h5">
|
|
Log In
|
|
</Typography>
|
|
<Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
|
|
<TextField
|
|
margin="normal"
|
|
required
|
|
fullWidth
|
|
id="email"
|
|
label="Email Address"
|
|
name="email"
|
|
autoComplete="email"
|
|
autoFocus
|
|
/>
|
|
<TextField
|
|
margin="normal"
|
|
required
|
|
fullWidth
|
|
name="password"
|
|
label="Password"
|
|
type="password"
|
|
id="password"
|
|
autoComplete="current-password"
|
|
/>
|
|
<Button
|
|
type="submit"
|
|
fullWidth
|
|
variant="contained"
|
|
sx={{ mt: 3, mb: 2 }}
|
|
>
|
|
LOG IN
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
<p> Don't have an account? <Link to="/register">Sign Up</Link></p>
|
|
</Container>
|
|
);
|
|
}
|