✨ Display & Delete in love list

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>