🐛 Fixed login page & delete forgot + register page

app/auth/forgot/page.jsx

@@ -1,48 +0,0 @@
-// ---------------------------------------------------------------------------------------------------------------------
-//!                                                      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/page.jsx

@@ -58,13 +58,6 @@ const Login = () => {
 						/>
 						<label className='inputLabel'>Mot de passe</label>
 					</div>
-
-					<Link
-						href={'/auth/forgot'}
-						className='forgetLink'
-					>
-						Mot de passe oublié ?
-					</Link>
 				</div>
 				<div className='buttonsContainer'>
 					<button
@@ -73,12 +66,6 @@ const Login = () => {
 					>
 						Se connecter
 					</button>
-					<Link
-						href={'/auth/register'}
-						className='submitButton secondary'
-					>
-						S&apos;inscrire
-					</Link>
 				</div>
 			</div>
 		</div>

app/auth/register/hooks/useActions.js

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

app/auth/register/hooks/useData.js

@@ -1,15 +0,0 @@
-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

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

@@ -2,15 +2,16 @@
 	position: relative;
 	display: flex;
 	flex-direction: column;
-	justify-content: center;
 	align-items: center;
+	gap: 50px;
+	padding: 15svh;
 	width: 100svw;
 	height: 100svh;
 
 	& > .appLogo {
-		position: absolute;
-		top: 5svh;
+		margin-top: -50px;
 		width: 30svw;
+		max-width: 150px;
 		height: auto;
 	}
 
@@ -19,10 +20,10 @@
 		flex-direction: column;
 		align-items: stretch;
 		gap: 10px;
-		padding: 30px 60px;
+		padding: 20px 30px;
 		width: 95svw;
 		max-width: 450px;
-		border: 3px solid #fefefa;
+		border: 2px solid #fefefa;
 		border-radius: 7px;
 		background-color: #d94253;
 
@@ -60,7 +61,7 @@
 
 				& > .input {
 					padding: 10px;
-					border: 2px solid #fefefa;
+					border: 1px solid #fefefa;
 					border-radius: 5px;
 					background-color: #d94253;
 					outline: none;
@@ -102,8 +103,8 @@
 		}
 
 		& > .buttonsContainer {
-			display: grid;
-			grid-template-columns: repeat(2, 1fr);
+			display: flex;
+			justify-content: center;
 			align-items: center;
 			gap: 30px;
 			margin-top: 15px;
@@ -113,8 +114,8 @@
 				justify-content: center;
 				align-items: center;
 				gap: 5px;
-				padding: 7px 21px;
-				border: 2px solid #fefefa;
+				padding: 7px 35px;
+				border: 1px solid #fefefa;
 				border-radius: 5px;
 				background-color: #fefefa;
 				font-size: 0.9rem;

app/layout.jsx

@@ -1,6 +1,6 @@
 import { Inter } from 'next/font/google';
+import Provider from './provider';
 import './globals.scss';
-import Navbar from '@/components/Navbar/Navbar';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -12,8 +12,7 @@ const RootLayout = ({ children }) => {
 	return (
 		<html lang='fr'>
 			<body className={inter.className}>
-				{children}
-				<Navbar />
+				<Provider>{children}</Provider>
 			</body>
 		</html>
 	);

app/provider.jsx

@@ -0,0 +1,48 @@
+'use client';
+
+// ---------------------------------------------------------------------------------------------------------------------
+//!                                                      Imports
+// ---------------------------------------------------------------------------------------------------------------------
+
+// -------------------------------------------------- React & Next -----------------------------------------------------
+import { useEffect, useState } from 'react';
+import { redirect, usePathname } from 'next/navigation';
+import Navbar from '@/components/Navbar/Navbar';
+// ---------------------------------------------------------------------------------------------------------------------
+
+const Provider = ({ children }) => {
+	const pathname = usePathname();
+	const [isSuccess, setIsSuccess] = useState(false);
+
+	useEffect(() => {
+		if (pathname.startsWith('/auth')) {
+			setIsSuccess(true);
+			return;
+		}
+
+		const token = localStorage.getItem('token');
+
+		if (!token) {
+			redirect('/auth/login');
+		}
+
+		setIsSuccess(true);
+	}, [pathname]);
+
+	if (!isSuccess) {
+		return;
+	}
+
+	if (pathname.startsWith('/auth')) {
+		return children;
+	}
+
+	return (
+		<>
+			{children}
+			<Navbar />
+		</>
+	);
+};
+
+export default Provider;

next.config.mjs

@@ -4,6 +4,9 @@ const nextConfig = {
 	env: {
 		MAPBOX_TOKEN: process.env.MAPBOX_TOKEN,
 	},
+	images: {
+		unoptimized: true,
+	},
 };
 
 export default nextConfig;