✨ Display & Delete in love list

app/auth/login/page.tsx

@@ -0,0 +1,79 @@
+'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;