80 lines
2.5 KiB
TypeScript
80 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
//! Imports
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// -------------------------------------------------- React & Next -----------------------------------------------------
|
|
import { useState } from 'react';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// --------------------------------------------------- Components ------------------------------------------------------
|
|
import Image from 'next/image';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// -------------------------------------------------- Hooks & Utils ----------------------------------------------------
|
|
import { useActions } from './hooks/useActions';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// ------------------------------------------------- Assets & Styles ---------------------------------------------------
|
|
import Loader from '@/assets/Loader';
|
|
import './styles.scss';
|
|
import Input from '@/components/Input/Input';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
const Login = () => {
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
const { handleSubmit } = useActions({ setError, setIsLoading });
|
|
|
|
return (
|
|
<div className='authContainer'>
|
|
<Image
|
|
src={'/logo-transparent.png'}
|
|
className='appLogo'
|
|
alt='appLogo'
|
|
width={1024}
|
|
height={1024}
|
|
priority
|
|
/>
|
|
|
|
<div className='formContainer'>
|
|
<h1 className='formTitle'>Connexion</h1>
|
|
|
|
<form
|
|
className='form'
|
|
onSubmit={handleSubmit}
|
|
>
|
|
{error && <p className='error'>{error}</p>}
|
|
<Input
|
|
name='username'
|
|
type='text'
|
|
placeholder="Nom d'utilisateur"
|
|
autoComplete='username'
|
|
required
|
|
/>
|
|
<Input
|
|
type='password'
|
|
name='password'
|
|
placeholder='Mot de passe'
|
|
autoComplete='password'
|
|
required
|
|
/>
|
|
|
|
<button
|
|
type='submit'
|
|
className='submitButton'
|
|
disabled={isLoading}
|
|
>
|
|
Se connecter
|
|
{isLoading && <Loader />}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Login;
|