1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
import axios from 'axios';
import { FormEvent, useContext } from 'react';
import { NavBar } from '../components/navbar';
import { CenteredPage } from '../components/page';
import { Vierkant, Input, Button } from '../components/ui';
import { ToastContext, toastType } from '../components/toast';
import ReportProblemOutlinedIcon from '@material-ui/icons/ReportProblemOutlined';
import VpnKeyIcon from '@material-ui/icons/VpnKey';
import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
function submitLogin(event?: FormEvent<HTMLFormElement>, toast?: toastType) {
event?.preventDefault();
var formData = {
email: (document.getElementById("email") as HTMLInputElement).value,
password: (document.getElementById("password") as HTMLInputElement).value
}
if ( !formData.email ||
!formData.password ) {
toast({ message: "Vul alsjeblieft alle velden in!",
type: "error",
icon: <ReportProblemOutlinedIcon/>});
return;
}
axios({
method: "post",
url: `${window.location.origin}/api/auth/login`,
headers: {"content-type": "application/json"},
data: formData
})
.then(() => window.location.pathname = "/")
.catch(error => {
if (error.response.status === 401) {
toast({ message: "Verkeerde gebruikersnaam of wachtwoord!",
type: "error",
icon: <VpnKeyIcon/>});
return;
}
toast({ message: "Er is iets fout gegaan",
type: "error",
icon: <ErrorOutlineIcon/>});
});
}
export default function LoginPage() {
var { toast } = useContext(ToastContext);
return (
<div>
<NavBar/>
<CenteredPage width={500} style={{ height: "100vh" }}>
<div style={{
position: "relative",
top: "50%",
transform: "translateY(-50%)",
margin: "0 auto",
textAlign: "center"
}}>
<Vierkant>
<form onSubmit={(e) => submitLogin(e, toast)}>
<Input autofocus autocomplete="username" id="email" label="email of gebruikersnaam" style={{ marginBottom: 12 }}></Input>
<Input autocomplete="current-password" id="password" label="wachtwoord" type="password"></Input>
<div style={{
marginTop: 24,
gridGap: 24,
display: "grid",
gridTemplateColumns: "1fr 1fr"
}}>
<Button href="/register" text="Registreren" style={{ backgroundColor: "var(--background-alt)"}}></Button>
<Button text="Inloggen" onclick={() => submitLogin(null, toast)}></Button>
</div>
<input type="submit" style={{ display: "none" }}/>
</form>
</Vierkant>
</div>
</CenteredPage>
</div>
);
}
|