⚡ Upgrade design & moved backend here & login and settings work with api

app/auth/login/hooks/useActions.js

@@ -17,19 +17,16 @@ export const useActions = ({ setError, setIsLoading }) => {
 
 		setIsLoading(true);
 		try {
-			const request = await fetch(
-				'https://lovemap-backend.vercel.app/auth/login',
-				{
-					method: 'POST',
-					headers: {
-						'Content-Type': 'application/json',
-					},
-					body: JSON.stringify({
-						username,
-						password,
-					}),
-				}
-			);
+			const request = await fetch('/api/auth/login', {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+				},
+				body: JSON.stringify({
+					username,
+					password,
+				}),
+			});
 
 			const response = await request.json();
 
@@ -44,7 +41,6 @@ export const useActions = ({ setError, setIsLoading }) => {
 				return;
 			}
 			if (request.status == 500) {
-				console.log('request.status: ', request.status);
 				setError('Erreur interne. Veuillez réessayer');
 				setIsLoading(false);
 				return;

app/auth/login/page.jsx

@@ -18,7 +18,7 @@ import { useActions } from './hooks/useActions';
 
 // ------------------------------------------------- Assets & Styles ---------------------------------------------------
 import Loader from '@/assets/Loader';
-import '../styles.scss';
+import './styles.scss';
 // ---------------------------------------------------------------------------------------------------------------------
 
 const Login = () => {

app/auth/login/styles.scss

@@ -0,0 +1,142 @@
+.authContainer {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 50px;
+	padding: 15svh;
+	width: 100svw;
+	height: 100svh;
+
+	& > .appLogo {
+		margin-top: -50px;
+		width: 30svw;
+		max-width: 150px;
+		height: auto;
+	}
+
+	& > .formContainer {
+		display: flex;
+		flex-direction: column;
+		align-items: stretch;
+		gap: 10px;
+		padding: 20px 30px;
+		width: 95svw;
+		max-width: 450px;
+		border: 2px 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: 20px;
+
+			& > .error {
+				text-align: center;
+				color: #fefefa;
+			}
+
+			& > .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: 1px solid #fefefa;
+					border-radius: 5px;
+					background-color: #d94253;
+					outline: none;
+					font-size: 1em;
+					color: #fefefa;
+
+					&:focus + .inputLabel,
+					&:not(:placeholder-shown) + .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: flex;
+			justify-content: center;
+			align-items: center;
+			gap: 30px;
+			margin-top: 15px;
+
+			& > .submitButton {
+				position: relative;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				gap: 10px;
+				padding: 7px 42px;
+				border: 1px solid #fefefa;
+				border-radius: 5px;
+				background-color: #fefefa;
+				font-size: 0.9rem;
+				color: #d94253;
+				cursor: pointer;
+
+				& > svg {
+					position: absolute;
+					top: 50%;
+					right: 10px;
+					transform: translateY(-50%);
+					width: 20px;
+				}
+			}
+		}
+	}
+}