135 lines
4.6 KiB
React
135 lines
4.6 KiB
React
import styles from "./RegisterPage.module.css";
|
|
import Background from "../../components/Background/background.jsx";
|
|
import Input from "../../components/ui/Input/input.tsx";
|
|
import Button from "../../components/ui/Button/button.tsx";
|
|
import {useContext, useEffect, useState} from "react";
|
|
import register from "../../utils/register.js";
|
|
import { useNavigate } from "react-router";
|
|
import { AuthContext } from "../../contexts/auth/AuthContext.js";
|
|
import Modal from "../../components/ui/modal/modal.tsx";
|
|
|
|
|
|
function RegisterPage() {
|
|
|
|
const navigate = useNavigate();
|
|
|
|
const [email, setEmail] = useState("");
|
|
const [phone, setPhone] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [confirmPassword, setConfirmPassword] = useState("");
|
|
const [name, setName] = useState("");
|
|
const [lastName, setLastName] = useState("");
|
|
const [open, setOpen] = useState(false);
|
|
const [title, setTitle] = useState("");
|
|
const [message, setMessage] = useState("");
|
|
|
|
const { user, loading } = useContext(AuthContext)
|
|
|
|
useEffect(() => {
|
|
if (!loading && user) {
|
|
navigate("/");
|
|
}
|
|
}, [loading, user]);
|
|
|
|
const handleModal = (t, m) => {
|
|
setTitle(t)
|
|
setMessage(m)
|
|
setOpen(true);
|
|
}
|
|
|
|
async function handleSubmit(e) {
|
|
e.preventDefault();
|
|
|
|
if(!(password === confirmPassword)) handleModal("Mot de passe invalide", "Les mots de passes ne conrrespondent pas");
|
|
else if(password.length < 8) handleModal("Mot de passe invalide", "Le mot de passe doit faire plus de 8 charactères");
|
|
else {
|
|
|
|
const res = await register(email, password, name, lastName, phone);
|
|
|
|
if (res.status === 422) {
|
|
if (res.errors.email) handleModal("Adresse Email invalide", "Le formet de votre adresse Email n'est pas valide");
|
|
if (res.errors.phone) handleModal("Numéro de téléphone invalide", "Le formet de votre numéro de téléphone n'est pas valide");
|
|
} else navigate("/login");
|
|
|
|
}
|
|
}
|
|
|
|
const handlePhone = (e) => {
|
|
const value = e.target.value;
|
|
if (value === "" || /^[0-9 +]+$/.test(value)) {
|
|
setPhone(value);
|
|
}
|
|
};
|
|
|
|
|
|
return <Background>
|
|
|
|
<div className={styles.container}>
|
|
|
|
<h1 className={styles.title}>Créer un compte</h1>
|
|
|
|
<div className={`glassCard ${styles.inputContainer}`}>
|
|
|
|
<div className={styles.formGroup}>
|
|
<Input
|
|
value={name}
|
|
placeholder="Prénom"
|
|
onChange={e => setName(e.target.value)}
|
|
style={{ width: '100%' }}
|
|
/>
|
|
</div>
|
|
|
|
<div className={styles.formGroup}>
|
|
<Input
|
|
value={lastName}
|
|
placeholder="Nom"
|
|
onChange={e => setLastName(e.target.value)}
|
|
style={{ width: '100%' }}
|
|
/>
|
|
</div>
|
|
|
|
<div className={styles.formGroup}>
|
|
<Input
|
|
type="email"
|
|
value={email}
|
|
placeholder="Adresse mail"
|
|
onChange={e => setEmail(e.target.value)}
|
|
style={{ width: '100%' }}
|
|
/>
|
|
</div>
|
|
|
|
<div className={styles.formGroup}>
|
|
<Input
|
|
value={phone}
|
|
placeholder="Numéro de téléphone"
|
|
onChange={handlePhone}
|
|
style={{ width: '100%' }}
|
|
/>
|
|
</div>
|
|
|
|
<div className={styles.formGroup}>
|
|
<Input password={true} onChange={e => setPassword(e.target.value)} value={password} placeholder={"Mot de passe"}/>
|
|
</div>
|
|
|
|
<div className={styles.formGroup}>
|
|
<Input password={true} onChange={e => setConfirmPassword(e.target.value)} value={confirmPassword} placeholder={"Confirmer le mot de passe"} />
|
|
</div>
|
|
|
|
<div className={styles.logButton}>
|
|
<Button variant={"transparent"} onClick={() => navigate("/login")}>Vous avez déjà un compte ?</Button>
|
|
<Button variant={"default"} onClick={handleSubmit}> Créer le compte </Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Modal open={open} onClose={() => setOpen(false)} title={title}>
|
|
<p>{message}</p>
|
|
</Modal>
|
|
|
|
</Background>
|
|
}
|
|
|
|
export default RegisterPage;
|
|
|
|
|