67 lines
2.2 KiB
JavaScript
67 lines
2.2 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 { loginRequest } from "../requests/requests.users.js";
|
|
import styles from '../styles/login.module.scss'
|
|
import { isBrowser } from "../utils/utils.js";
|
|
|
|
export default function Login() {
|
|
const [entry, setEntry] = useState({ username: "", password: "" })
|
|
const [error, setError] = useState({ username: "", password: "" })
|
|
const router = useRouter()
|
|
const { login} = useSessionContext()
|
|
useEffect(() => {
|
|
if (isBrowser && localStorage.getItem('token') !== null) {
|
|
router.push({ pathname: "/dashboard" }, undefined, { shallow: true });
|
|
}
|
|
}, [isBrowser && localStorage.getItem('token') ])
|
|
return (
|
|
<Layout page="Se connecter">
|
|
<form
|
|
className={styles["main"]}
|
|
onSubmit={(e) => {
|
|
e.preventDefault();
|
|
loginRequest({ ...entry })
|
|
.then((r) => {
|
|
login(r.key);
|
|
router.push({ pathname: "/dashboard" });
|
|
})
|
|
.catch((err) => {
|
|
|
|
setError({ ...err.response.data });
|
|
});
|
|
}}
|
|
>
|
|
<h1>Se connecter</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.password}
|
|
onChange={(e) => {
|
|
setEntry({ ...entry, password: e.target.value });
|
|
}}
|
|
placeholder="Mot de passe"
|
|
error={error.password != "" && error.password != null}
|
|
/>
|
|
<p className={styles.errors}>{error.password}</p>
|
|
|
|
<button className="exo-btn">Se connecter</button>
|
|
|
|
<p className={styles["errors"]}>{error.non_field_errors}</p>
|
|
</div>
|
|
</form>
|
|
</Layout>
|
|
);
|
|
} |