✨ Display & Delete in love list

app/settings/hooks/useActions.ts

@@ -20,10 +20,18 @@ export const useActions = ({
 		setPasswordMessage(null);
 	};
 
-	const updateUsername = async (value: string) => {
+	const updateUsername = async (ev: FormEvent<HTMLFormElement>) => {
 		resetMessage();
 
-		if (value == userData.username) {
+		if (!ev.currentTarget.reportValidity()) {
+			return;
+		}
+
+		const formData = new FormData(ev.currentTarget);
+
+		const value = formData.get('username').toString();
+
+		if (value == userData.username || value.length <= 1) {
 			return;
 		}
 

app/settings/page.tsx

@@ -7,7 +7,7 @@
 // --------------------------------------------------- Components ------------------------------------------------------
 import Link from 'next/link';
 import Input from '@/components/Input/Input';
-import InlineInput from '@/components/InlineInput/InlineInput';
+import ConfirmPopup from '@/components/ConfirmPopup/ConfirmPopup';
 // ---------------------------------------------------------------------------------------------------------------------
 
 // -------------------------------------------------- Hooks & Utils ----------------------------------------------------
@@ -18,8 +18,6 @@ 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';
 // ---------------------------------------------------------------------------------------------------------------------
 
@@ -72,44 +70,18 @@ const Settings = () => {
 					<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}
+					className='card'
+					onSubmit={updateUsername}
 				>
-					{passwordMessage && (
-						<p className='message'>{passwordMessage}</p>
-					)}
+					<p className='cardTitle'>Nom d&apos;utilisateur</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'
+						type='text'
+						name='username'
+						placeholder="Nom d'utilisateur"
+						defaultValue={userData.username}
+						autoComplete='username'
 						required
 					/>
 
@@ -121,7 +93,47 @@ const Settings = () => {
 					</button>
 				</form>
 
-				<div className='separator'></div>
+				<form
+					className='card'
+					onSubmit={updatePassword}
+				>
+					<p className='cardTitle'>Modifier le mot de passe</p>
+
+					{passwordMessage && (
+						<p className='message'>{passwordMessage}</p>
+					)}
+
+					<div className='inputsContainer'>
+						<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
+						/>
+					</div>
+
+					<button
+						type='submit'
+						className='submitButton'
+					>
+						Appliquer
+					</button>
+				</form>
 
 				<button
 					className='deleteButton'
@@ -132,52 +144,12 @@ const Settings = () => {
 				</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>
+					<ConfirmPopup
+						title='Supprimer le compte ?'
+						content='Es-tu sûr de vouloir supprimer ton compte ? Cette action est irréversible.'
+						onClose={handleClosePopup}
+						onAccept={deleteUser}
+					/>
 				)}
 			</div>
 		</div>

app/settings/styles.scss

@@ -9,11 +9,11 @@
 		display: grid;
 		grid-template-columns: 25px 1fr;
 		align-items: center;
-		gap: 15px;
+		gap: 10px;
 		padding: 15px;
+		width: 100%;
 		background-color: #d94253;
 		color: #ffffff;
-		box-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
 
 		& > .backButton {
 			display: flex;
@@ -27,8 +27,6 @@
 	}
 
 	& > .settingsContainer {
-		flex-grow: 1;
-		position: relative;
 		display: flex;
 		flex-direction: column;
 		gap: 20px;
@@ -43,34 +41,43 @@
 			color: #ffffff;
 		}
 
-		& > .separator {
-			display: block;
-			margin: 20px auto;
-			width: 90%;
-			height: 1px;
-			background-color: #d94253;
-			background: linear-gradient(
-				90deg,
-				rgba(#d94253, 0) 0%,
-				rgba(#d94253, 1) 10%,
-				rgba(#d94253, 1) 90%,
-				rgba(#d94253, 0) 100%
-			);
-		}
-
-		& > .passwordForm {
+		& > .card {
 			display: flex;
 			flex-direction: column;
-			gap: 10px;
+			gap: 5px;
+			padding: 10px;
+			border: 1px solid #d94253;
+			border-radius: 10px;
+			background-color: #f9e2e5;
+
+			& > .cardTitle {
+				font-size: 1rem;
+				color: #d94253;
+			}
+
+			& > .inputsContainer {
+				display: flex;
+				flex-direction: column;
+				gap: 5px;
+				padding: 15px 0;
+			}
 
 			& > .submitButton {
 				padding: 7px 21px;
-				border: none;
+				border: 1px solid #e1e1e1;
 				border-radius: 5px;
-				background-color: #d94253;
+				background-color: #ffffff;
 				font-size: 1rem;
-				color: #ffffff;
+				color: #d94253;
 				cursor: pointer;
+				transition: border-color 0.3s ease, background-color 0.3s ease,
+					color 0.3s ease;
+
+				&:hover {
+					border-color: #d94253;
+					background-color: #d94253;
+					color: #ffffff;
+				}
 			}
 		}
 
@@ -81,92 +88,12 @@
 			align-items: center;
 			gap: 10px;
 			padding: 7px 21px;
-			border: 1px solid #d94253;
+			border: none;
 			border-radius: 5px;
-			background-color: #d94253;
+			background-color: #f9e2e5;
 			font-size: 1rem;
-			color: #ffffff;
+			color: #d94253;
 			cursor: pointer;
 		}
-
-		& > .popupOverlay {
-			position: absolute;
-			top: 0;
-			left: 0;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			width: 100%;
-			height: 100%;
-			background-color: rgba(#ffffff, 0.5);
-			backdrop-filter: blur(5px);
-
-			& > .popup {
-				z-index: 1;
-				position: relative;
-				display: flex;
-				flex-direction: column;
-				margin: 10px;
-				background-color: #ffffff;
-				border: 1px solid #d94253;
-				border-radius: 5px;
-
-				& > .popupHeader {
-					display: grid;
-					grid-template-columns: 1fr 20px;
-					align-items: center;
-					gap: 20px;
-					padding: 10px;
-
-					& > .popupTitle {
-						font-size: 1.2rem;
-						color: #d94253;
-					}
-
-					& > .popupCloseButton {
-						display: flex;
-						justify-content: center;
-						align-items: center;
-						border: none;
-						border-radius: 5px;
-						background-color: transparent;
-						color: #d94253;
-						cursor: pointer;
-						transition: background-color 0.3s ease;
-
-						&:hover {
-							background-color: rgba(#d94253, 0.2);
-						}
-					}
-				}
-
-				& > .popupContent {
-					padding: 10px;
-					color: #d94253;
-				}
-
-				& > .popupButtonsContainer {
-					display: flex;
-					flex-wrap: nowrap;
-					justify-content: space-evenly;
-					align-items: center;
-					padding: 10px;
-
-					& > .popupButton {
-						display: grid;
-						grid-template-columns: 20px 1fr;
-						align-items: center;
-						gap: 5px;
-						padding: 5px 15px;
-						border: none;
-						border-radius: 5px;
-						background-color: #d94253;
-						font-size: 1rem;
-						color: #ffffff;
-						cursor: pointer;
-					}
-				}
-			}
-		}
 	}
 }