e69156407e
- 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.
353 lines
11 KiB
TypeScript
353 lines
11 KiB
TypeScript
"use client";
|
|
|
|
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,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import {
|
|
Form,
|
|
FormControl,
|
|
FormDescription,
|
|
FormField,
|
|
FormItem,
|
|
FormLabel,
|
|
FormMessage,
|
|
} from "@/components/ui/form";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
|
import { Spinner } from "@/components/ui/spinner";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { useAuth } from "@/providers/auth-provider";
|
|
import { UserService } from "@/services/user.service";
|
|
|
|
const settingsSchema = z.object({
|
|
displayName: z.string().max(32, "Le nom d'affichage est trop long").optional(),
|
|
bio: z.string().max(255, "La bio est trop longue").optional(),
|
|
});
|
|
|
|
type SettingsFormValues = z.infer<typeof settingsSchema>;
|
|
|
|
export default function SettingsPage() {
|
|
const { theme, setTheme } = useTheme();
|
|
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(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
const form = useForm<SettingsFormValues>({
|
|
resolver: zodResolver(settingsSchema),
|
|
defaultValues: {
|
|
displayName: "",
|
|
bio: "",
|
|
},
|
|
});
|
|
|
|
React.useEffect(() => {
|
|
if (user) {
|
|
form.reset({
|
|
displayName: user.displayName || "",
|
|
bio: user.bio || "",
|
|
});
|
|
}
|
|
}, [user, form]);
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex h-[400px] items-center justify-center">
|
|
<Spinner className="h-8 w-8 text-primary" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!user) {
|
|
return (
|
|
<div className="max-w-2xl mx-auto py-8 px-4 text-center">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Accès refusé</CardTitle>
|
|
<CardDescription>
|
|
Vous devez être connecté pour accéder aux paramètres.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const onSubmit = async (values: SettingsFormValues) => {
|
|
setIsSaving(true);
|
|
try {
|
|
await UserService.updateMe(values);
|
|
toast.success("Paramètres mis à jour !");
|
|
await refreshUser();
|
|
} catch (error) {
|
|
console.error(error);
|
|
toast.error("Erreur lors de la mise à jour des paramètres.");
|
|
} finally {
|
|
setIsSaving(false);
|
|
}
|
|
};
|
|
|
|
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">
|
|
<Settings className="h-6 w-6 text-primary" />
|
|
</div>
|
|
<h1 className="text-3xl font-bold tracking-tight">Paramètres</h1>
|
|
</div>
|
|
|
|
<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'utilisateur</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
value={user.username}
|
|
disabled
|
|
className="bg-muted cursor-not-allowed"
|
|
/>
|
|
</FormControl>
|
|
<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>
|
|
|
|
<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>
|
|
<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>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|