111 lines
3.0 KiB
React
111 lines
3.0 KiB
React
'use client';
|
|
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
//! Imports
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// --------------------------------------------------- Components ------------------------------------------------------
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// -------------------------------------------------- Hooks & Utils ----------------------------------------------------
|
|
import { useData } from './hooks/useData';
|
|
import { useActions } from './hooks/useActions';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// ------------------------------------------------- Assets & Styles ---------------------------------------------------
|
|
import '../styles.scss';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
const Register = () => {
|
|
const { usernameRef, emailRef, passwordRef, confpasswordRef } = useData();
|
|
const { handleSubmit } = useActions({
|
|
usernameRef,
|
|
emailRef,
|
|
passwordRef,
|
|
confpasswordRef,
|
|
});
|
|
|
|
return (
|
|
<div className='authContainer'>
|
|
<Image
|
|
src={'/logo-transparent.png'}
|
|
className='appLogo'
|
|
alt='appLogo'
|
|
width={1024}
|
|
height={1024}
|
|
/>
|
|
<div className='formContainer'>
|
|
<h1 className='formTitle'>Inscription</h1>
|
|
|
|
<div
|
|
role='form'
|
|
className='form'
|
|
>
|
|
<div className='inputContainer'>
|
|
<input
|
|
ref={usernameRef}
|
|
type='text'
|
|
name='name'
|
|
className='input'
|
|
required
|
|
/>
|
|
<label className='inputLabel'>
|
|
Nom d'utilisateur
|
|
</label>
|
|
</div>
|
|
<div className='inputContainer'>
|
|
<input
|
|
ref={emailRef}
|
|
type='email'
|
|
name='email'
|
|
className='input'
|
|
required
|
|
/>
|
|
<label className='inputLabel'>Adresse e-mail</label>
|
|
</div>
|
|
<div className='inputContainer'>
|
|
<input
|
|
ref={passwordRef}
|
|
type='password'
|
|
name='password'
|
|
className='input'
|
|
required
|
|
/>
|
|
<label className='inputLabel'>Mot de passe</label>
|
|
</div>
|
|
<div className='inputContainer'>
|
|
<input
|
|
ref={confpasswordRef}
|
|
type='password'
|
|
name='confpassword'
|
|
className='input'
|
|
required
|
|
/>
|
|
<label className='inputLabel'>
|
|
Confirmer le mot de passe
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div className='buttonsContainer'>
|
|
<button
|
|
className='submitButton'
|
|
onClick={handleSubmit}
|
|
>
|
|
S'inscrire
|
|
</button>
|
|
<Link
|
|
href={'/auth/login'}
|
|
className='submitButton secondary'
|
|
>
|
|
Se connecter
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Register;
|