/
RegisterPage.jsx
127 lines (115 loc) · 3.3 KB
/
RegisterPage.jsx
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
import React, { useState } from "react";
import Field from "./../components/forms/Field";
import { Link } from "react-router-dom";
import UsersAPI from "../services/usersAPI";
import { toast } from "react-toastify";
const RegisterPage = ({ history }) => {
const [user, setUser] = useState({
firstName: "",
lastName: "",
email: "",
password: "",
passwordConfirm: ""
});
const [errors, setErrors] = useState({
firstName: "",
lastName: "",
email: "",
password: "",
passwordConfirm: ""
});
// Gestion des changements des inputs dans le formulaire
const handleChange = ({ currentTarget }) => {
const { name, value } = currentTarget;
setUser({ ...user, [name]: value });
};
// Gestion de la soumission
const handleSubmit = async event => {
event.preventDefault();
const apiErrors = {};
if (user.password !== user.passwordConfirm) {
apiErrors.passwordConfirm =
"Votre confirmation de mot de passe n'est pas conforme avec le mot de passe original";
setErrors(apiErrors);
toast.error("Des erreurs dans votre formulaire !");
return;
}
try {
await UsersAPI.register(user);
setErrors({});
// TODO : Flash success
toast.success(
"Vous êtes désormais inscrit, vous pouvez vous connecter !"
);
history.replace("/login");
} catch (error) {
const { violations } = error.response.data;
if (violations) {
violations.forEach(violation => {
apiErrors[violation.propertyPath] = violation.message;
});
setErrors(apiErrors);
}
toast.error("Des erreurs dans votre formulaire !");
}
};
return (
<>
<h1>Inscription</h1>
<form onSubmit={handleSubmit}>
<Field
name="firstName"
label="Prénom"
placeholder="Votre joli prénom"
error={errors.firstName}
value={user.firstName}
onChange={handleChange}
/>
<Field
name="lastName"
label="Nom de famille"
placeholder="Votre nom de famille"
error={errors.lastName}
value={user.lastName}
onChange={handleChange}
/>
<Field
name="email"
label="Adresse email"
placeholder="Votre adresse email"
type="email"
error={errors.email}
value={user.email}
onChange={handleChange}
/>
<Field
name="password"
label="Mot de passe"
type="password"
placeholder="Votre mot de passe ultra sécurisé"
error={errors.password}
value={user.password}
onChange={handleChange}
/>
<Field
name="passwordConfirm"
label="Confirmation de mot de passe"
type="password"
placeholder="Confirmez votre super mot de passe"
error={errors.passwordConfirm}
value={user.passwordConfirm}
onChange={handleChange}
/>
<div className="form-group">
<button type="submit" className="btn btn-success">
Confirmation
</button>
<Link to="/login" className="btn btn-link">
J'ai déjà un compte
</Link>
</div>
</form>
</>
);
};
export default RegisterPage;