import * as React from 'react'; import {Avatar, Checkbox, FormControlLabel, Grid, Link, Stack} from "@mui/material"; import Typography from "@mui/material/Typography"; import Container from "@mui/material/Container"; import LockOutlinedIcon from '@mui/icons-material/LockOutlined'; import TextField from "@mui/material/TextField"; import Button from "@mui/material/Button"; import Box from "@mui/material/Box"; import api from "../app/Api"; import {useNavigate} from "react-router-dom"; import routes from "./routes"; import session from "../app/Session"; const Copyright = (props) => { return ( <Typography variant="body2" color="text.secondary" align="center" {...props}> {'Copyright © '} <Link color="inherit" href="https://mui.com/"> Your Website </Link>{' '} {new Date().getFullYear()} {'.'} </Typography> ); }; const Login = () => { const handleSubmit = async (event) => { event.preventDefault(); const data = new FormData(event.currentTarget); console.log({ email: data.get('email'), password: data.get('password'), }); const user = { username: data.get('email'), password: data.get('password'), } const token = await api.userAuth("http://localhost:2586"/*window.location.origin*/, user); console.log(`[Api] User auth for user ${user.username} successful, token is ${token}`); session.store(user.username, token); window.location.href = routes.app; }; return ( <> <Box sx={{ marginTop: 8, display: 'flex', flexDirection: 'column', alignItems: 'center', }} > <Avatar sx={{m: 1, bgcolor: 'secondary.main'}}> <LockOutlinedIcon/> </Avatar> <Typography component="h1" variant="h5"> Sign 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" /> <FormControlLabel control={<Checkbox value="remember" color="primary"/>} label="Remember me" /> <Button type="submit" fullWidth variant="contained" sx={{mt: 3, mb: 2}} > Sign In </Button> <Grid container> <Grid item xs> <Link href="#" variant="body2"> Forgot password? </Link> </Grid> <Grid item> <Link href="#" variant="body2"> {"Don't have an account? Sign Up"} </Link> </Grid> </Grid> </Box> </Box> <Copyright sx={{mt: 8, mb: 4}}/> </> ); } export default Login;