94 lines
2.9 KiB
JavaScript
94 lines
2.9 KiB
JavaScript
import { useRouter } from "next/router";
|
|
import { useEffect, useState } from "react";
|
|
import Input from "../components/Input.jsx";
|
|
import Layout from "../components/Layout.js";
|
|
import { useSessionContext } from "../context/session.context.js";
|
|
import { registerNewUser } from "../requests/requests.users.js";
|
|
import styles from "../styles/login.module.scss";
|
|
import { isBrowser } from "../utils/utils.js";
|
|
|
|
export default function Register() {
|
|
const [entry, setEntry] = useState({
|
|
username: "",
|
|
password1: "",
|
|
password2: "",
|
|
});
|
|
const [error, setError] = useState({
|
|
username: "",
|
|
password1: "",
|
|
password2: "",
|
|
non_field_errors: "",
|
|
});
|
|
const router = useRouter();
|
|
const { login } = useSessionContext();
|
|
|
|
useEffect(() => {
|
|
if (isBrowser && localStorage.getItem('token') !== null) {
|
|
router.push({ pathname: "/dashboard" }, undefined, { shallow: true });
|
|
}
|
|
}, []);
|
|
return (
|
|
<Layout page="S'inscrire">
|
|
<form
|
|
className={styles["main"]}
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
registerNewUser({ ...entry })
|
|
.then((r) => {
|
|
login(r.key);
|
|
router.push({ pathname: "/dashboard" });
|
|
})
|
|
.catch((err) => {
|
|
|
|
setError({ ...err.response.data });
|
|
});
|
|
}}
|
|
>
|
|
<h1>S'inscrire</h1>
|
|
<div className={styles["login"]}>
|
|
<Input
|
|
type="text"
|
|
value={entry.username}
|
|
onChange={(e) => {
|
|
setEntry({ ...entry, username: e.target.value });
|
|
}}
|
|
placeholder="Nom d'utilisateur"
|
|
error={error.username != "" && error.username != null}
|
|
/>
|
|
<p className={styles.errors}>{error.username}</p>
|
|
<Input
|
|
type="password"
|
|
value={entry.password1}
|
|
onChange={(e) => {
|
|
setEntry({ ...entry, password1: e.target.value });
|
|
}}
|
|
placeholder="Mot de passe"
|
|
error={error.password1 != "" && error.password1 != null}
|
|
/>
|
|
<p className={styles.errors}>{error.password1}</p>
|
|
<Input
|
|
type="password"
|
|
value={entry.password2}
|
|
onChange={(e) => {
|
|
setEntry({ ...entry, password2: e.target.value });
|
|
}}
|
|
placeholder="Confirmez le mot de passe..."
|
|
error={
|
|
(error.password2 != "" && error.password2 != null) ||
|
|
entry.password1 != entry.password2
|
|
}
|
|
/>
|
|
<p className={styles.errors}>{error.password2}</p>
|
|
<button
|
|
className="exo-btn"
|
|
disabled={entry.password1 != entry.password2}
|
|
>
|
|
Valider
|
|
</button>
|
|
<p className={styles.errors}>{error.non_field_errors}</p>
|
|
</div>
|
|
</form>
|
|
</Layout>
|
|
);
|
|
}
|