From e69156407e9be45e352a8572b93535b1b0150db4 Mon Sep 17 00:00:00 2001
From: Mathis HERRIOT <197931332+0x485254@users.noreply.github.com>
Date: Wed, 21 Jan 2026 15:43:43 +0100
Subject: [PATCH] feat(settings): add account deletion feature and improve UI

- Introduced "Delete Account" functionality with confirmation dialog and success/error notifications.
- Enhanced general settings page UI, including updated card layouts and improved form elements.
- Added support for theme selection with a more user-friendly design.
- Refined typography and button styling for better visual consistency.
---
 .../src/app/(dashboard)/settings/page.tsx     | 346 +++++++++++-------
 1 file changed, 221 insertions(+), 125 deletions(-)

diff --git a/frontend/src/app/(dashboard)/settings/page.tsx b/frontend/src/app/(dashboard)/settings/page.tsx
index 9caeb12..3c772f0 100644
--- a/frontend/src/app/(dashboard)/settings/page.tsx
+++ b/frontend/src/app/(dashboard)/settings/page.tsx
@@ -2,19 +2,34 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import {
+	AlertTriangle,
 	Laptop,
 	Loader2,
 	Moon,
 	Palette,
 	Save,
+	Settings,
 	Sun,
+	Trash2,
 	User as UserIcon,
 } from "lucide-react";
+import { useRouter } from "next/navigation";
 import { useTheme } from "next-themes";
 import * as React from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import * as z from "zod";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+	AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -49,8 +64,10 @@ type SettingsFormValues = z.infer<typeof settingsSchema>;
 
 export default function SettingsPage() {
 	const { theme, setTheme } = useTheme();
-	const { user, isLoading, refreshUser } = useAuth();
+	const { user, isLoading, refreshUser, logout } = useAuth();
+	const router = useRouter();
 	const [isSaving, setIsSaving] = React.useState(false);
+	const [isDeleting, setIsDeleting] = React.useState(false);
 	const [mounted, setMounted] = React.useState(false);
 
 	React.useEffect(() => {
@@ -111,146 +128,225 @@ export default function SettingsPage() {
 		}
 	};
 
+	const handleDeleteAccount = async () => {
+		setIsDeleting(true);
+		try {
+			await UserService.removeMe();
+			toast.success("Votre compte a été supprimé.");
+			logout();
+			router.push("/");
+		} catch (error) {
+			console.error(error);
+			toast.error("Erreur lors de la suppression du compte.");
+		} finally {
+			setIsDeleting(false);
+		}
+	};
+
 	return (
 		<div className="max-w-2xl mx-auto py-12 px-4">
 			<div className="flex items-center gap-3 mb-8">
 				<div className="bg-primary/10 p-3 rounded-xl">
-					<UserIcon className="h-6 w-6 text-primary" />
+					<Settings className="h-6 w-6 text-primary" />
 				</div>
-				<h1 className="text-3xl font-bold">Paramètres du profil</h1>
+				<h1 className="text-3xl font-bold tracking-tight">Paramètres</h1>
 			</div>
 
-			<Card>
-				<CardHeader>
-					<CardTitle>Informations personnelles</CardTitle>
-					<CardDescription>
-						Mettez à jour vos informations publiques. Ces données seront visibles par
-						les autres utilisateurs.
-					</CardDescription>
-				</CardHeader>
-				<CardContent>
-					<Form {...form}>
-						<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-							<div className="grid gap-4">
-								<FormItem>
-									<FormLabel>Nom d'utilisateur</FormLabel>
-									<FormControl>
-										<Input
-											value={user.username}
-											disabled
-											className="bg-zinc-50 dark:bg-zinc-900"
-										/>
-									</FormControl>
-									<FormDescription>
-										Le nom d'utilisateur ne peut pas être modifié.
-									</FormDescription>
-								</FormItem>
-
-								<FormField
-									control={form.control}
-									name="displayName"
-									render={({ field }) => (
+			<div className="space-y-8">
+				<Card className="border-none shadow-sm">
+					<CardHeader className="pb-4">
+						<div className="flex items-center gap-2 mb-1">
+							<UserIcon className="h-5 w-5 text-primary" />
+							<CardTitle>Informations personnelles</CardTitle>
+						</div>
+						<CardDescription>
+							Mettez à jour vos informations publiques. Ces données seront visibles par
+							les autres utilisateurs.
+						</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<Form {...form}>
+							<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+								<div className="grid gap-6">
+									<div className="grid sm:grid-cols-2 gap-4">
 										<FormItem>
-											<FormLabel>Nom d'affichage</FormLabel>
+											<FormLabel>Nom d'utilisateur</FormLabel>
 											<FormControl>
-												<Input placeholder="Votre nom" {...field} />
-											</FormControl>
-											<FormDescription>
-												Le nom qui sera affiché sur votre profil et vos mèmes.
-											</FormDescription>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-
-								<FormField
-									control={form.control}
-									name="bio"
-									render={({ field }) => (
-										<FormItem>
-											<FormLabel>Bio</FormLabel>
-											<FormControl>
-												<Textarea
-													placeholder="Racontez-nous quelque chose sur vous..."
-													className="resize-none"
-													{...field}
+												<Input
+													value={user.username}
+													disabled
+													className="bg-muted cursor-not-allowed"
 												/>
 											</FormControl>
-											<FormDescription>
-												Une courte description de vous (max 255 caractères).
-											</FormDescription>
-											<FormMessage />
+											<FormDescription>Identifiant unique non modifiable.</FormDescription>
 										</FormItem>
-									)}
-								/>
+
+										<FormField
+											control={form.control}
+											name="displayName"
+											render={({ field }) => (
+												<FormItem>
+													<FormLabel>Nom d'affichage</FormLabel>
+													<FormControl>
+														<Input placeholder="Votre nom" {...field} />
+													</FormControl>
+													<FormDescription>Nom visible sur votre profil.</FormDescription>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+									</div>
+
+									<FormField
+										control={form.control}
+										name="bio"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Bio</FormLabel>
+												<FormControl>
+													<Textarea
+														placeholder="Racontez-nous quelque chose sur vous..."
+														className="resize-none min-h-[100px]"
+														{...field}
+													/>
+												</FormControl>
+												<FormDescription>
+													Une courte description de vous (max 255 caractères).
+												</FormDescription>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								</div>
+
+								<div className="flex justify-end border-t pt-6">
+									<Button type="submit" disabled={isSaving} className="min-w-[150px]">
+										{isSaving ? (
+											<>
+												<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+												Enregistrement...
+											</>
+										) : (
+											<>
+												<Save className="mr-2 h-4 w-4" />
+												Enregistrer
+											</>
+										)}
+									</Button>
+								</div>
+							</form>
+						</Form>
+					</CardContent>
+				</Card>
+
+				<Card className="border-none shadow-sm">
+					<CardHeader className="pb-4">
+						<div className="flex items-center gap-2 mb-1">
+							<Palette className="h-5 w-5 text-primary" />
+							<CardTitle>Apparence</CardTitle>
+						</div>
+						<CardDescription>
+							Personnalisez l'apparence de l'application selon vos préférences.
+						</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<RadioGroup
+							value={mounted ? theme : "system"}
+							onValueChange={(value) => setTheme(value)}
+							className="grid grid-cols-1 sm:grid-cols-3 gap-4"
+						>
+							<div className="relative">
+								<RadioGroupItem value="light" id="light" className="peer sr-only" />
+								<Label
+									htmlFor="light"
+									className="flex flex-col items-center justify-between rounded-xl border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer transition-all"
+								>
+									<Sun className="mb-3 h-6 w-6" />
+									<span className="text-sm font-semibold">Clair</span>
+								</Label>
 							</div>
 
-							<Button type="submit" disabled={isSaving} className="w-full sm:w-auto">
-								{isSaving ? (
-									<>
-										<Loader2 className="mr-2 h-4 w-4 animate-spin" />
-										Enregistrement...
-									</>
-								) : (
-									<>
-										<Save className="mr-2 h-4 w-4" />
-										Enregistrer les modifications
-									</>
-								)}
-							</Button>
-						</form>
-					</Form>
-				</CardContent>
-			</Card>
-			<Card className="mt-8">
-				<CardHeader>
-					<div className="flex items-center gap-2">
-						<Palette className="h-5 w-5 text-primary" />
-						<CardTitle>Apparence</CardTitle>
-					</div>
-					<CardDescription>
-						Personnalisez l'apparence de l'application selon vos préférences.
-					</CardDescription>
-				</CardHeader>
-				<CardContent>
-					<RadioGroup
-						value={mounted ? theme : "system"}
-						onValueChange={(value) => setTheme(value)}
-						className="grid grid-cols-1 sm:grid-cols-3 gap-4"
-					>
-						<div>
-							<RadioGroupItem value="light" id="light" className="peer sr-only" />
-							<Label
-								htmlFor="light"
-								className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer"
-							>
-								<Sun className="mb-3 h-6 w-6" />
-								<span>Clair</span>
-							</Label>
+							<div className="relative">
+								<RadioGroupItem value="dark" id="dark" className="peer sr-only" />
+								<Label
+									htmlFor="dark"
+									className="flex flex-col items-center justify-between rounded-xl border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer transition-all"
+								>
+									<Moon className="mb-3 h-6 w-6" />
+									<span className="text-sm font-semibold">Sombre</span>
+								</Label>
+							</div>
+
+							<div className="relative">
+								<RadioGroupItem value="system" id="system" className="peer sr-only" />
+								<Label
+									htmlFor="system"
+									className="flex flex-col items-center justify-between rounded-xl border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer transition-all"
+								>
+									<Laptop className="mb-3 h-6 w-6" />
+									<span className="text-sm font-semibold">Système</span>
+								</Label>
+							</div>
+						</RadioGroup>
+					</CardContent>
+				</Card>
+
+				<Card className="border-destructive/20 shadow-sm bg-destructive/5">
+					<CardHeader className="pb-4">
+						<div className="flex items-center gap-2 mb-1">
+							<AlertTriangle className="h-5 w-5 text-destructive" />
+							<CardTitle className="text-destructive">Zone de danger</CardTitle>
 						</div>
-						<div>
-							<RadioGroupItem value="dark" id="dark" className="peer sr-only" />
-							<Label
-								htmlFor="dark"
-								className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer"
-							>
-								<Moon className="mb-3 h-6 w-6" />
-								<span>Sombre</span>
-							</Label>
+						<CardDescription className="text-destructive/80 font-medium">
+							Actions irréversibles concernant votre compte.
+						</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 p-4 rounded-lg bg-white dark:bg-zinc-900 border border-destructive/20">
+							<div className="space-y-1">
+								<p className="font-bold">Supprimer mon compte</p>
+								<p className="text-sm text-muted-foreground">
+									Toutes vos données seront supprimées définitivement.
+								</p>
+							</div>
+							<AlertDialog>
+								<AlertDialogTrigger asChild>
+									<Button variant="destructive" size="sm" className="font-semibold">
+										<Trash2 className="h-4 w-4 mr-2" />
+										Supprimer le compte
+									</Button>
+								</AlertDialogTrigger>
+								<AlertDialogContent>
+									<AlertDialogHeader>
+										<AlertDialogTitle>Êtes-vous absolument sûr ?</AlertDialogTitle>
+										<AlertDialogDescription>
+											Cette action est irréversible. Votre compte sera supprimé
+											définitivement ainsi que tous vos mèmes et vos favoris.
+										</AlertDialogDescription>
+									</AlertDialogHeader>
+									<AlertDialogFooter>
+										<AlertDialogCancel disabled={isDeleting}>Annuler</AlertDialogCancel>
+										<AlertDialogAction
+											onClick={handleDeleteAccount}
+											disabled={isDeleting}
+											className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+										>
+											{isDeleting ? (
+												<>
+													<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+													Suppression...
+												</>
+											) : (
+												"Confirmer la suppression"
+											)}
+										</AlertDialogAction>
+									</AlertDialogFooter>
+								</AlertDialogContent>
+							</AlertDialog>
 						</div>
-						<div>
-							<RadioGroupItem value="system" id="system" className="peer sr-only" />
-							<Label
-								htmlFor="system"
-								className="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary cursor-pointer"
-							>
-								<Laptop className="mb-3 h-6 w-6" />
-								<span>Système</span>
-							</Label>
-						</div>
-					</RadioGroup>
-				</CardContent>
-			</Card>
+					</CardContent>
+				</Card>
+			</div>
 		</div>
 	);
 }