106 lines
3.7 KiB
React
106 lines
3.7 KiB
React
import styles from "./RegisterPage.module.css";
|
|
import Background from "../../components/background/background.jsx";
|
|
import Input from "../../components/ui/input/input.jsx";
|
|
import Button from "../../components/ui/button/button.jsx";
|
|
import { useState } from "react";
|
|
import register from "../../utils/register.js";
|
|
import { useNavigate } from "react-router";
|
|
|
|
|
|
function RegisterPage() {
|
|
|
|
const navigate = useNavigate();
|
|
|
|
const [email, setEmail] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [name, setName] = useState("");
|
|
const [lastName, setLastName] = useState("");
|
|
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
|
|
|
|
async function handleSubmit(e) {
|
|
e.preventDefault();
|
|
const res = await register(email, password, name, lastName);
|
|
if (!res || res.status !== 200) throw new Error("Register error");
|
|
navigate("/login");
|
|
}
|
|
|
|
return <Background>
|
|
|
|
<div className={styles.container}>
|
|
|
|
<div className={"glassCard"}>
|
|
|
|
<h1>Créer un compte</h1>
|
|
|
|
<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}>
|
|
<div style={{ position: 'relative', width: '100%' }}>
|
|
<Input
|
|
type={showPassword ? "text" : "password"}
|
|
value={password}
|
|
placeholder="Mot de passe"
|
|
onChange={e => setPassword(e.target.value)}
|
|
style={{ width: '100%' }}
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPassword(!showPassword)}
|
|
style={{
|
|
position: 'absolute',
|
|
width: '30px',
|
|
right: '10px',
|
|
top: '50%',
|
|
transform: 'translateY(-50%)',
|
|
background: 'none',
|
|
border: 'none',
|
|
cursor: 'pointer',
|
|
fontSize: '16px',
|
|
}}
|
|
>
|
|
{showPassword ? '👁️' : '🔒'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={styles.logButton}>
|
|
<Button variant={"transparent"} onClick={() => navigate("/login")}>Vous avez déjà un compte ?</Button>
|
|
<Button variant={"default"} onClick={handleSubmit}> Se connecter </Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</Background>
|
|
}
|
|
|
|
export default RegisterPage;
|
|
|
|
|