2022-12-02 21:37:48 +01:00
|
|
|
import * as React from 'react';
|
2022-12-14 11:36:53 +01:00
|
|
|
import {Avatar, Checkbox, FormControlLabel, Grid, Link} from "@mui/material";
|
2022-12-02 21:37:48 +01:00
|
|
|
import Typography from "@mui/material/Typography";
|
|
|
|
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 routes from "./routes";
|
|
|
|
import session from "../app/Session";
|
2022-12-15 05:11:22 +01:00
|
|
|
import logo from "../img/ntfy2.svg";
|
|
|
|
import {NavLink} from "react-router-dom";
|
2022-12-02 21:37:48 +01:00
|
|
|
|
|
|
|
const Login = () => {
|
|
|
|
const handleSubmit = async (event) => {
|
|
|
|
event.preventDefault();
|
|
|
|
const data = new FormData(event.currentTarget);
|
2022-12-03 21:20:59 +01:00
|
|
|
const user = {
|
2022-12-09 02:50:48 +01:00
|
|
|
username: data.get('username'),
|
2022-12-02 21:37:48 +01:00
|
|
|
password: data.get('password'),
|
|
|
|
}
|
2022-12-08 02:44:20 +01:00
|
|
|
const token = await api.login("http://localhost:2586"/*window.location.origin*/, user);
|
2022-12-02 21:37:48 +01:00
|
|
|
console.log(`[Api] User auth for user ${user.username} successful, token is ${token}`);
|
|
|
|
session.store(user.username, token);
|
|
|
|
window.location.href = routes.app;
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
2022-12-15 05:11:22 +01:00
|
|
|
<Box
|
|
|
|
sx={{
|
|
|
|
display: 'flex',
|
|
|
|
flexGrow: 1,
|
|
|
|
justifyContent: 'center',
|
|
|
|
flexDirection: 'column',
|
|
|
|
alignContent: 'center',
|
|
|
|
alignItems: 'center',
|
|
|
|
height: '100vh'
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<Avatar
|
|
|
|
sx={{ m: 2, width: 64, height: 64, borderRadius: 3 }}
|
|
|
|
src={logo}
|
|
|
|
variant="rounded"
|
|
|
|
/>
|
|
|
|
<Typography sx={{ typography: 'h6' }}>
|
|
|
|
Sign in to your ntfy account
|
|
|
|
</Typography>
|
|
|
|
<Box component="form" onSubmit={handleSubmit} noValidate sx={{mt: 1, maxWidth: 400}}>
|
|
|
|
<TextField
|
|
|
|
margin="dense"
|
|
|
|
required
|
|
|
|
fullWidth
|
|
|
|
id="username"
|
|
|
|
label="Username"
|
|
|
|
name="username"
|
|
|
|
autoFocus
|
|
|
|
/>
|
|
|
|
<TextField
|
|
|
|
margin="dense"
|
|
|
|
required
|
|
|
|
fullWidth
|
|
|
|
name="password"
|
|
|
|
label="Password"
|
|
|
|
type="password"
|
|
|
|
id="password"
|
|
|
|
autoComplete="current-password"
|
|
|
|
/>
|
|
|
|
<Button
|
|
|
|
type="submit"
|
|
|
|
fullWidth
|
|
|
|
variant="contained"
|
|
|
|
sx={{mt: 2, mb: 2}}
|
|
|
|
>
|
2022-12-02 21:37:48 +01:00
|
|
|
Sign in
|
2022-12-15 05:11:22 +01:00
|
|
|
</Button>
|
|
|
|
<Box sx={{width: "100%"}}>
|
2022-12-16 04:07:04 +01:00
|
|
|
<div style={{float: "left"}}><NavLink to={routes.resetPassword} variant="body1">Reset password</NavLink></div>
|
|
|
|
<div style={{float: "right"}}><NavLink to={routes.signup} variant="body1">Sign up</NavLink></div>
|
2022-12-02 21:37:48 +01:00
|
|
|
</Box>
|
|
|
|
</Box>
|
2022-12-15 05:11:22 +01:00
|
|
|
</Box>
|
2022-12-02 21:37:48 +01:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export default Login;
|