✨ Added map

app/auth/forgot/page.jsx

@@ -0,0 +1,48 @@
+// ---------------------------------------------------------------------------------------------------------------------
+//!                                                      Imports
+// ---------------------------------------------------------------------------------------------------------------------
+
+// --------------------------------------------------- Components ------------------------------------------------------
+import Image from 'next/image';
+// ---------------------------------------------------------------------------------------------------------------------
+
+// ------------------------------------------------- Assets & Styles ---------------------------------------------------
+import '../styles.scss';
+// ---------------------------------------------------------------------------------------------------------------------
+
+const Forgot = () => {
+	return (
+		<div className='authContainer'>
+			<Image
+				src={'/logo-transparent.png'}
+				className='appLogo'
+				alt='appLogo'
+				width={1024}
+				height={1024}
+			/>
+			<div className='formContainer'>
+				<h1 className='formTitle'>Connexion</h1>
+
+				<div
+					role='form'
+					className='form'
+				>
+					<div className='inputContainer'>
+						<input
+							type='password'
+							name='password'
+							className='input'
+							required
+						/>
+						<label className='inputLabel'>Mot de passe</label>
+					</div>
+				</div>
+				<div className='buttonsContainer'>
+					<button className='submitButton'>Se connecter</button>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default Forgot;

app/auth/login/hooks/useActions.js

@@ -0,0 +1,7 @@
+export const useActions = ({ emailRef, passwordRef }) => {
+	const handleSubmit = () => {};
+
+	return {
+		handleSubmit,
+	};
+};

app/auth/login/hooks/useData.js

@@ -0,0 +1,11 @@
+import { useRef } from 'react';
+
+export const useData = () => {
+	const emailRef = useRef(null);
+	const passwordRef = useRef(null);
+
+	return {
+		emailRef,
+		passwordRef,
+	};
+};

app/auth/login/page.jsx

@@ -0,0 +1,88 @@
+'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 Login = () => {
+	const { emailRef, passwordRef } = useData();
+	const { handleSubmit } = useActions({ emailRef, passwordRef });
+
+	return (
+		<div className='authContainer'>
+			<Image
+				src={'/logo-transparent.png'}
+				className='appLogo'
+				alt='appLogo'
+				width={1024}
+				height={1024}
+			/>
+			<div className='formContainer'>
+				<h1 className='formTitle'>Connexion</h1>
+
+				<div
+					role='form'
+					className='form'
+				>
+					<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>
+
+					<Link
+						href={'/auth/forgot'}
+						className='forgetLink'
+					>
+						Mot de passe oublié ?
+					</Link>
+				</div>
+				<div className='buttonsContainer'>
+					<button
+						className='submitButton'
+						onClick={handleSubmit}
+					>
+						Se connecter
+					</button>
+					<Link
+						href={'/auth/register'}
+						className='submitButton secondary'
+					>
+						S&apos;inscrire
+					</Link>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default Login;

app/auth/register/hooks/useActions.js

@@ -0,0 +1,12 @@
+export const useActions = ({
+	usernameRef,
+	emailRef,
+	passwordRef,
+	confpasswordRef,
+}) => {
+	const handleSubmit = () => {};
+
+	return {
+		handleSubmit,
+	};
+};

app/auth/register/hooks/useData.js

@@ -0,0 +1,15 @@
+import { useRef } from 'react';
+
+export const useData = () => {
+	const usernameRef = useRef(null);
+	const emailRef = useRef(null);
+	const passwordRef = useRef(null);
+	const confpasswordRef = useRef(null);
+
+	return {
+		usernameRef,
+		emailRef,
+		passwordRef,
+		confpasswordRef,
+	};
+};

app/auth/register/page.jsx

@@ -0,0 +1,110 @@
+'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&apos;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&apos;inscrire
+					</button>
+					<Link
+						href={'/auth/login'}
+						className='submitButton secondary'
+					>
+						Se connecter
+					</Link>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default Register;

app/auth/styles.scss

@@ -0,0 +1,131 @@
+.authContainer {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	width: 100svw;
+	height: 100svh;
+
+	& > .appLogo {
+		position: absolute;
+		top: 5svh;
+		width: 30svw;
+		height: auto;
+	}
+
+	& > .formContainer {
+		display: flex;
+		flex-direction: column;
+		align-items: stretch;
+		gap: 10px;
+		padding: 30px 60px;
+		width: 95svw;
+		max-width: 450px;
+		border: 3px solid #fefefa;
+		border-radius: 7px;
+		background-color: #d94253;
+
+		& > .formTitle {
+			margin-bottom: 20px;
+			font-size: 2rem;
+			font-weight: 300;
+			text-align: center;
+			color: #fefefa;
+		}
+
+		& > .form {
+			display: flex;
+			flex-direction: column;
+			align-items: stretch;
+			gap: 15px;
+
+			& > .inputContainer {
+				position: relative;
+				display: grid;
+
+				& > .inputLabel {
+					position: absolute;
+					top: 50%;
+					left: 15px;
+					transform: translateY(-50%);
+					padding: 5px;
+					background-color: #d94253;
+					color: #fefefa;
+					user-select: none;
+					pointer-events: none;
+					transition: top 0.3s ease, left 0.3s ease,
+						font-size 0.3s ease, transform 0.3s ease;
+				}
+
+				& > .input {
+					padding: 10px;
+					border: 2px solid #fefefa;
+					border-radius: 5px;
+					background-color: #d94253;
+					outline: none;
+					font-size: 1em;
+					color: #fefefa;
+
+					&:focus + .inputLabel {
+						top: 0;
+						left: 10px;
+						transform: translateY(-50%);
+						font-size: 0.9em;
+					}
+				}
+			}
+
+			& > .forgetLink {
+				position: relative;
+				width: max-content;
+				font-size: 0.8rem;
+				color: #dff8f2;
+				cursor: pointer;
+
+				&::after {
+					content: '';
+					position: absolute;
+					bottom: 0;
+					left: 0;
+					display: block;
+					width: 0;
+					height: 1px;
+					background-color: #dff8f2;
+					transition: width 0.3s ease;
+				}
+
+				&:hover::after {
+					width: 100%;
+				}
+			}
+		}
+
+		& > .buttonsContainer {
+			display: grid;
+			grid-template-columns: repeat(2, 1fr);
+			align-items: center;
+			gap: 30px;
+			margin-top: 15px;
+
+			& > .submitButton {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				gap: 5px;
+				padding: 7px 21px;
+				border: 2px solid #fefefa;
+				border-radius: 5px;
+				background-color: #fefefa;
+				font-size: 0.9rem;
+				color: #d94253;
+				cursor: pointer;
+
+				&.secondary {
+					background-color: #d94253;
+					color: #fefefa;
+				}
+			}
+		}
+	}
+}