119 lines
4.9 KiB
TypeScript
119 lines
4.9 KiB
TypeScript
import { Token } from '@/types';
|
|
import logo from '@assets/images/logo.svg';
|
|
import { toastError, toastSuccess } from '@controllers/Toasts';
|
|
import { signup } from '@controllers/UserController';
|
|
import { Link, useNavigate } from 'react-router-dom';
|
|
|
|
export default () => {
|
|
const navigate = useNavigate();
|
|
const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
const data = new FormData(e.target as HTMLFormElement);
|
|
signup(data).then((data: Token) => {
|
|
toastSuccess('You have successfully signed up!');
|
|
navigate('/login');
|
|
}).catch((err) => {
|
|
toastError(err as string);
|
|
});
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="flex flex-col min-h-full items-center justify-center py-12 px-4 bg-grey-dark sm:px-6 lg:px-8">
|
|
<div>
|
|
<img className="mx-auto h-20 pb-2 w-auto" src={logo} alt="Groupomania" />
|
|
</div>
|
|
<div className="w-full max-w-md space-y-4 bg-grey rounded-lg p-5">
|
|
<form className="m-6 mb-0" action="#" method="POST" onSubmit={(e) => onSubmit(e)}>
|
|
<div className="-space-y-px rounded-md shadow-sm">
|
|
<div>
|
|
<label htmlFor="lastName" className="sr-only">
|
|
Nom
|
|
</label>
|
|
<input
|
|
id="lastName"
|
|
name="lastName"
|
|
type="text"
|
|
autoComplete="lastName"
|
|
required
|
|
className="relative block w-full appearance-none rounded-lg border px-3 py-2 my-2 placeholder-grey-light focus:z-10 focus:border-red focus:outline-none focus:ring-red sm:text-sm"
|
|
placeholder="Nom"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="firstName" className="sr-only">
|
|
Prénom
|
|
</label>
|
|
<input
|
|
id="firstName"
|
|
name="firstName"
|
|
type="text"
|
|
autoComplete="firstName"
|
|
required
|
|
className="relative block w-full appearance-none rounded-lg border px-3 py-2 my-2 placeholder-grey-light focus:z-10 focus:border-red focus:outline-none focus:ring-red sm:text-sm"
|
|
placeholder="Prénom"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="email-address" className="sr-only">
|
|
Adresse e-mail
|
|
</label>
|
|
<input
|
|
id="email-address"
|
|
name="email"
|
|
type="email"
|
|
autoComplete="email"
|
|
required
|
|
className="relative block w-full appearance-none rounded-lg border px-3 py-2 my-2 placeholder-grey-light focus:z-10 focus:border-red focus:outline-none focus:ring-red sm:text-sm"
|
|
placeholder="Adresse e-mail"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="password" className="sr-only">
|
|
Mot de passe
|
|
</label>
|
|
<input
|
|
id="password"
|
|
name="password"
|
|
type="password"
|
|
autoComplete="current-password"
|
|
required
|
|
className="relative block w-full appearance-none rounded-lg border px-3 py-2 my-2 placeholder-grey-light focus:z-10 focus:border-red focus:outline-none focus:ring-red sm:text-sm"
|
|
placeholder="Mot de passe"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="password-confirm" className="sr-only">
|
|
Confirmez votre mot de passe
|
|
</label>
|
|
<input
|
|
id="password-confirm"
|
|
name="password-confirm"
|
|
type="password"
|
|
autoComplete="current-password"
|
|
required
|
|
className="relative block w-full appearance-none rounded-lg border px-3 py-2 my-2 placeholder-grey-light focus:z-10 focus:border-red focus:outline-none focus:ring-red sm:text-sm"
|
|
placeholder="Confirmez votre mot de passe"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<button
|
|
type="submit"
|
|
className="group relative flex w-full justify-center rounded-md border border-red bg-red py-2 px-4 text-sm font-medium text-white hover:bg-white hover:text-red focus:outline-none focus:ring-2 focus:ring-red focus:ring-offset-2"
|
|
>
|
|
Enregistrer un nouveau compte
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<p className="text-center text-sm text-grey-dark">
|
|
<Link to="/login" className="font-medium text-red-light hover:text-red">
|
|
Retournez à la page de connexion
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|