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
|
import axios from 'axios';
import { validate as validateEmail } from 'email-validator';
import { FormEvent, useContext } from 'react';
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() {
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) => submitRegister(e, toast)}>
<Input
autofocus
autocomplete='username'
id='username'
label='gebruikersnaam'
style={{ marginBottom: 12 }}
>
</Input>
<Input autocomplete='email' id='email' label='email' style={{ marginBottom: 12 }}></Input>
<Input autocomplete='new-password' id='password' label='wachtwoord' type='password'></Input>
<Button
text='Registreren'
style={{ marginTop: 24 }}
onclick={() => submitRegister(null, toast)}
>
</Button>
<input type='submit' style={{ display: 'none' }} />
</form>
</Vierkant>
</div>
</CenteredPage>
</div>
);
}
|