mirror of
https://github.com/binwiederhier/ntfy.git
synced 2024-07-06 06:50:38 +12:00
114 lines
3.9 KiB
JavaScript
114 lines
3.9 KiB
JavaScript
|
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;
|