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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
|
import axios from 'axios';
import { validate as validateEmail } from 'email-validator';
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';
function submitRegister(event?: FormEvent<HTMLFormElement>, toast?: toastType) {
event?.preventDefault();
var formData = {
username: (document.getElementById('username') as HTMLInputElement).value,
email: (document.getElementById('email') as HTMLInputElement).value,
password: (document.getElementById('password') as HTMLInputElement).value,
};
if (
!formData.username
|| !formData.email
|| !formData.password
) {
toast({ message: 'Vul alsjeblieft alle velden in!', type: 'error', icon: <ReportProblemOutlinedIcon /> });
return;
}
var passwordRegex: RegExp = /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9]).{8,}$/;
/*
* ^ Begin string
* (?=.*[A-Z]) Minimaal één hoofdletter
* (?=.*[a-z]) Minimaal één kleine letter
* (?=.*[0-9]) Minimaal één getal
* .{8,} Minimaal acht tekens in lengte
* $ Ende string
* https://stackoverflow.com/questions/5142103/regex-to-validate-password-strength
*/
if (formData.username.length < 3 || formData.username.length > 35) {
toast({
message: 'Ongeldige gebruikersnaam',
description: 'Je gebruikersnaam moet tussen de 3 en 35 letters zijn',
type: 'error',
icon: <ReportProblemOutlinedIcon />,
});
return;
}
if (!validateEmail(formData.email)) {
toast({ message: 'Ongeldig email-adres', type: 'error', icon: <ReportProblemOutlinedIcon /> });
return;
}
// TODO: wachtwoord max 72 tekens ivm bcrypt
if (!formData.password.match(passwordRegex)) {
toast({
message: 'Ongeldig wachtwoord',
description: 'Je wachtwoord moet een hoofdletter, kleine letter en een getal bevatten',
type: 'error',
icon: <ReportProblemOutlinedIcon />,
});
return;
}
axios({
method: 'post',
url: `${window.location.origin}/api/auth/signup`,
headers: { 'content-type': 'application/json' },
data: formData,
})
.then(() => {
// TODO: email verificatie
// redirect naar home, automatische login
window.location.pathname = '/';
})
.catch(error => {
toast({ message: 'Er is iets fout gegaan', type: 'error', icon: <ErrorOutlineIcon /> });
console.log(error);
});
}
export default function RegisterPage() {
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) => submitRegister(e, toast)}>
<Input
autofocus
autocomplete='username'
id='username'
label='gebruikersnaam'
className='pad-m fullwidth bg-900 round-t'
/>
<Input
autocomplete='email'
id='email'
label='email'
className='pad-m fullwidth bg-900 round-t'
/>
<Input
autocomplete='new-password'
id='password'
label='wachtwoord'
type='password'
className='pad-m fullwidth bg-900 round-t'
/>
<Button
text='Registreren'
onclick={() => submitRegister(null, toast)}
/>
<input type='submit' className='dispnone' />
</form>
</Vierkant>
</div>
</CenteredPage>
</div>
);
}
|