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
85
86
87
88
89
90
|
import axios from 'axios';
import { FormEvent, useContext, useEffect } from 'react';
import * as cookie from 'react-cookies';
import { NavBar } from '../components/navbar';
import { CenteredPage } from '../components/page';
import { ToastContext, toastType } from '../components/toast';
import { Button, Input, Vierkant } from '../components/ui';
import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
import ReportProblemOutlinedIcon from '@material-ui/icons/ReportProblemOutlined';
import VpnKeyIcon from '@material-ui/icons/VpnKey';
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() {
useEffect(() => {
var loggedIn = !!cookie.load('token');
if (loggedIn) window.location.href = '/';
}, []);
var { toast } = useContext(ToastContext);
return (
<div>
<NavBar />
<CenteredPage width={500} className='h100vh'>
<div className='posrel center centeredForm'>
<Vierkant className='pad-l bg-800'>
<form onSubmit={(e) => submitLogin(e, toast)}>
<Input
autofocus
autocomplete='username'
id='email'
label='email of gebruikersnaam'
className='pad-m fullwidth bg-900 round-t'
/>
<Input
autocomplete='current-password'
id='password'
label='wachtwoord'
type='password'
className='pad-m fullwidth bg-900 round-t'
/>
<div className='sidebyside'>
<Button
href='/register'
text='Registreren'
className='register bg-700 fg-100'
/>
<Button text='Inloggen' className='login' onclick={() => submitLogin(null, toast)} />
</div>
<input type='submit' className='dispnone' />
</form>
</Vierkant>
</div>
</CenteredPage>
</div>
);
}
|