✨ Login actions

app/auth/login/page.jsx

@@ -4,23 +4,27 @@
 //!                                                      Imports
 // ---------------------------------------------------------------------------------------------------------------------
 
+// -------------------------------------------------- React & Next -----------------------------------------------------
+import { useState } from 'react';
+// ---------------------------------------------------------------------------------------------------------------------
+
 // --------------------------------------------------- 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 Loader from '@/assets/Loader';
 import '../styles.scss';
 // ---------------------------------------------------------------------------------------------------------------------
 
 const Login = () => {
-	const { emailRef, passwordRef } = useData();
-	const { handleSubmit } = useActions({ emailRef, passwordRef });
+	const [error, setError] = useState(null);
+	const [isLoading, setIsLoading] = useState(false);
+	const { handleSubmit } = useActions({ setError, setIsLoading });
 
 	return (
 		<div className='authContainer'>
@@ -30,27 +34,30 @@ const Login = () => {
 				alt='appLogo'
 				width={1024}
 				height={1024}
+				priority
 			/>
-			<div className='formContainer'>
+
+			<form
+				className='formContainer'
+				onSubmit={handleSubmit}
+			>
 				<h1 className='formTitle'>Connexion</h1>
 
-				<div
-					role='form'
-					className='form'
-				>
+				<div className='form'>
+					{error && <p className='error'>{error}</p>}
 					<div className='inputContainer'>
 						<input
-							ref={emailRef}
-							type='email'
-							name='email'
+							type='text'
+							name='username'
 							className='input'
 							required
 						/>
-						<label className='inputLabel'>Adresse e-mail</label>
+						<label className='inputLabel'>
+							Nom d&apos;utilisateur
+						</label>
 					</div>
 					<div className='inputContainer'>
 						<input
-							ref={passwordRef}
 							type='password'
 							name='password'
 							className='input'
@@ -61,13 +68,15 @@ const Login = () => {
 				</div>
 				<div className='buttonsContainer'>
 					<button
+						type='submit'
 						className='submitButton'
-						onClick={handleSubmit}
+						disabled={isLoading}
 					>
 						Se connecter
+						{isLoading && <Loader />}
 					</button>
 				</div>
-			</div>
+			</form>
 		</div>
 	);
 };