Feature: Remplacement de tous les prompts par des modaux + Fix RSS refresh

Modaux :
- Création ConfirmModal pour confirmations avec variants (default/destructive)
- Création InputModal pour saisie de texte/URL/mot de passe
- Création AddUserModal pour création d'utilisateur avec admin checkbox
- Remplacement de tous les prompt() et confirm() par des modaux modernes
- Modaux pour : suppression note, ajout todo, ajout RSS, ajout utilisateur, suppression utilisateur, changement mot de passe, ajout todo dans note

Fix RSS :
- Ajout route POST /api/rss/refresh (alias de /api/rss/fetch)
- Fix uploadImage retour avec result.image || result

UX améliorée :
- Plus de popups navigateur natifs
- Interface cohérente et moderne
- Validation dans les modaux
- Support touche Entrée dans les InputModals
- Auto-focus sur le champ de saisie
This commit is contained in:
Claude committed 2025-11-12 09:24:16 +00:00
1 parent 702d0c2088
commit f8ec63b5ef
6 files changed
+409 -81

No files matched your search

+95
View File
@@ -0,0 +1,95 @@
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import { useState, useEffect } from "react";
import { UserPlus } from "lucide-react";
interface AddUserModalProps {
open: boolean;
onOpenChange: (open: boolean) => void;
onConfirm: (username: string, password: string, isAdmin: boolean) => void;
}
export function AddUserModal({ open, onOpenChange, onConfirm }: AddUserModalProps) {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [isAdmin, setIsAdmin] = useState(false);
useEffect(() => {
if (open) {
setUsername("");
setPassword("");
setIsAdmin(false);
}
}, [open]);
const handleConfirm = () => {
if (username.trim() && password.trim()) {
onConfirm(username.trim(), password.trim(), isAdmin);
onOpenChange(false);
}
};
const isValid = username.trim().length > 0 && password.trim().length > 0;
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
<UserPlus className="h-5 w-5" />
Ajouter un utilisateur
</DialogTitle>
<DialogDescription>
Créez un nouveau compte utilisateur pour l'application
</DialogDescription>
</DialogHeader>
<div className="grid gap-4 py-4">
<div className="grid gap-2">
<Label htmlFor="username">Nom d'utilisateur</Label>
<Input
id="username"
placeholder="Nom d'utilisateur"
value={username}
onChange={(e) => setUsername(e.target.value)}
autoFocus
/>
</div>
<div className="grid gap-2">
<Label htmlFor="password">Mot de passe</Label>
<Input
id="password"
type="password"
placeholder="Mot de passe"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</div>
<div className="flex items-center space-x-2">
<Checkbox
id="is-admin"
checked={isAdmin}
onCheckedChange={(checked) => setIsAdmin(checked as boolean)}
/>
<Label
htmlFor="is-admin"
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
>
Administrateur
</Label>
</div>
</div>
<DialogFooter className="gap-2 sm:gap-0">
<Button variant="outline" onClick={() => onOpenChange(false)}>
Annuler
</Button>
<Button onClick={handleConfirm} disabled={!isValid}>
Créer l'utilisateur
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}
+57
View File
@@ -0,0 +1,57 @@
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { AlertTriangle } from "lucide-react";
interface ConfirmModalProps {
open: boolean;
onOpenChange: (open: boolean) => void;
title: string;
description: string;
onConfirm: () => void;
confirmText?: string;
cancelText?: string;
variant?: "default" | "destructive";
}
export function ConfirmModal({
open,
onOpenChange,
title,
description,
onConfirm,
confirmText = "Confirmer",
cancelText = "Annuler",
variant = "default"
}: ConfirmModalProps) {
const handleConfirm = () => {
onConfirm();
onOpenChange(false);
};
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
{variant === "destructive" && <AlertTriangle className="h-5 w-5 text-destructive" />}
{title}
</DialogTitle>
<DialogDescription>
{description}
</DialogDescription>
</DialogHeader>
<DialogFooter className="gap-2 sm:gap-0">
<Button variant="outline" onClick={() => onOpenChange(false)}>
{cancelText}
</Button>
<Button
variant={variant}
onClick={handleConfirm}
>
{confirmText}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}
+89
View File
@@ -0,0 +1,89 @@
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { useState, useEffect } from "react";
interface InputModalProps {
open: boolean;
onOpenChange: (open: boolean) => void;
title: string;
description?: string;
label: string;
placeholder?: string;
defaultValue?: string;
onConfirm: (value: string) => void;
confirmText?: string;
cancelText?: string;
type?: "text" | "password" | "url" | "email";
}
export function InputModal({
open,
onOpenChange,
title,
description,
label,
placeholder,
defaultValue = "",
onConfirm,
confirmText = "Confirmer",
cancelText = "Annuler",
type = "text"
}: InputModalProps) {
const [value, setValue] = useState(defaultValue);
useEffect(() => {
if (open) {
setValue(defaultValue);
}
}, [open, defaultValue]);
const handleConfirm = () => {
if (value.trim()) {
onConfirm(value.trim());
onOpenChange(false);
setValue("");
}
};
const handleKeyDown = (e: React.KeyboardEvent) => {
if (e.key === "Enter" && value.trim()) {
e.preventDefault();
handleConfirm();
}
};
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle>{title}</DialogTitle>
{description && <DialogDescription>{description}</DialogDescription>}
</DialogHeader>
<div className="grid gap-4 py-4">
<div className="grid gap-2">
<Label htmlFor="input-field">{label}</Label>
<Input
id="input-field"
type={type}
placeholder={placeholder}
value={value}
onChange={(e) => setValue(e.target.value)}
onKeyDown={handleKeyDown}
autoFocus
/>
</div>
</div>
<DialogFooter className="gap-2 sm:gap-0">
<Button variant="outline" onClick={() => onOpenChange(false)}>
{cancelText}
</Button>
<Button onClick={handleConfirm} disabled={!value.trim()}>
{confirmText}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}