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

2024-09-29 18:04:41 +02:00
parent 42d3212624
commit f2d1eb4289
43 changed files with 1881 additions and 359 deletions
@@ -0,0 +1,187 @@
+'use client';
+
+// ---------------------------------------------------------------------------------------------------------------------
+//!                                                      Imports
+// ---------------------------------------------------------------------------------------------------------------------
+
+// --------------------------------------------------- Components ------------------------------------------------------
+import Link from 'next/link';
+import Input from '@/components/Input/Input';
+import InlineInput from '@/components/InlineInput/InlineInput';
+// ---------------------------------------------------------------------------------------------------------------------
+
+// -------------------------------------------------- Hooks & Utils ----------------------------------------------------
+import { useData } from './hooks/useData';
+import { useActions } from './hooks/useActions';
+// ---------------------------------------------------------------------------------------------------------------------
+
+// ------------------------------------------------- Assets & Styles ---------------------------------------------------
+import ArrowRightIcon from '@/assets/ArrowRightIcon';
+import TrashIcon from '@/assets/TrashIcon';
+import CloseIcon from '@/assets/CloseIcon';
+import CheckIcon from '@/assets/CheckIcon';
+import './styles.scss';
+// ---------------------------------------------------------------------------------------------------------------------
+
+const Settings = () => {
+	const {
+		userData,
+		isPopupDisplayed,
+		setIsPopupDisplayed,
+		usernameMessage,
+		setUsernameMessage,
+		passwordMessage,
+		setPasswordMessage,
+	} = useData();
+
+	const {
+		updateUsername,
+		updatePassword,
+		handleClosePopup,
+		handleDeleteUser,
+		deleteUser,
+	} = useActions({
+		userData,
+		setIsPopupDisplayed,
+		setUsernameMessage,
+		setPasswordMessage,
+	});
+
+	if (!userData) {
+		return;
+	}
+
+	return (
+		<div className='settings'>
+			<div className='header'>
+				<Link
+					href={'/statistics'}
+					className='backButton'
+				>
+					<ArrowRightIcon
+						style={{
+							rotate: '180deg',
+						}}
+					/>
+				</Link>
+				<p className='title'>Éditer le profil</p>
+			</div>
+
+			<div className='settingsContainer'>
+				{usernameMessage && (
+					<p className='message'>{usernameMessage}</p>
+				)}
+
+				<InlineInput
+					label="Nom d'utilisateur"
+					type='text'
+					name='username'
+					placeholder="Nom d'utilisateur"
+					defaultValue={userData.username}
+					autoComplete='username'
+					onSubmit={updateUsername}
+				/>
+
+				<div className='separator' />
+
+				<form
+					className='passwordForm'
+					onSubmit={updatePassword}
+				>
+					{passwordMessage && (
+						<p className='message'>{passwordMessage}</p>
+					)}
+					<Input
+						type='password'
+						name='currentPassword'
+						placeholder='Mot de passe actuel'
+						autoComplete='password'
+						required
+					/>
+					<Input
+						type='password'
+						name='newPassword'
+						placeholder='Nouveau mot de passe'
+						autoComplete='off'
+						required
+					/>
+					<Input
+						type='password'
+						name='confirmNewPassword'
+						placeholder='Confirmer le nouveau mot de passe'
+						autoComplete='off'
+						required
+					/>
+
+					<button
+						type='submit'
+						className='submitButton'
+					>
+						Appliquer
+					</button>
+				</form>
+
+				<div className='separator'></div>
+
+				<button
+					className='deleteButton'
+					onClick={handleDeleteUser}
+				>
+					<TrashIcon />
+					Supprimer mon compte
+				</button>
+
+				{isPopupDisplayed && (
+					<div
+						className='popupOverlay'
+						onClick={handleClosePopup}
+					>
+						<div
+							className='popup'
+							onClick={(ev) => ev.stopPropagation()}
+						>
+							<div className='popupHeader'>
+								<p className='popupTitle'>
+									Supprimer le compte ?
+								</p>
+								<button
+									className='popupCloseButton'
+									onClick={handleClosePopup}
+								>
+									<CloseIcon />
+								</button>
+							</div>
+							<div className='popupContent'>
+								<p>
+									Êtes-vous sûr de vouloir supprimer votre
+									compte ? Cette action est irréversible.
+								</p>
+							</div>
+							<div className='popupButtonsContainer'>
+								<button
+									type='button'
+									className='popupButton'
+									onClick={handleClosePopup}
+								>
+									<CloseIcon />
+									Non
+								</button>
+
+								<button
+									type='button'
+									className='popupButton'
+									onClick={deleteUser}
+								>
+									<CheckIcon />
+									Oui
+								</button>
+							</div>
+						</div>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+};
+
+export default Settings;