manus-admin/veille-reglementaire
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Checkpoint: Ajout du champ username dans la table local_users, adaptation de l'auth backend (connexion par username OU email), mise à jour de la page Gestion des utilisateurs avec le champ username visible et éditable, compte adminItinova migré avec username propre.

Browse Source
This commit is contained in:
Manus
2026-04-21 05:31:44 -04:00
parent 535dd19188
commit b3137e8f27
10 changed files with 866 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
client/src/pages/UsersAdmin.tsx
View File

@@ -4,7 +4,7 @@ import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Card, CardContent } from "@/components/ui/card";
import {
Dialog,
DialogContent,
@@ -26,6 +26,7 @@ import {
Eye,
CheckCircle,
XCircle,
AtSign,
} from "lucide-react";
import { toast } from "sonner";
import { format } from "date-fns";
@@ -37,7 +38,8 @@ type Role = "admin" | "user" | "readonly";
interface LocalUser {
id: number;
name: string;
email: string;
username: string | null;
email: string | null;
role: Role;
isActive: boolean;
createdAt: Date;
@@ -64,13 +66,21 @@ const ROLE_ICONS: Record<Role, React.ReactNode> = {
interface UserFormData {
name: string;
username: string;
email: string;
password: string;
role: Role;
isActive: boolean;
}
const DEFAULT_FORM: UserFormData = { name: "", email: "", password: "", role: "user", isActive: true };
const DEFAULT_FORM: UserFormData = {
name: "",
username: "",
email: "",
password: "",
role: "user",
isActive: true,
};
export default function UsersAdmin() {
const [showDialog, setShowDialog] = useState(false);
@@ -118,7 +128,14 @@ export default function UsersAdmin() {
const openEdit = (user: LocalUser) => {
setEditingUser(user);
setForm({ name: user.name, email: user.email, password: "", role: user.role, isActive: user.isActive });
setForm({
name: user.name,
username: user.username ?? "",
email: user.email ?? "",
password: "",
role: user.role,
isActive: user.isActive,
});
setShowDialog(true);
};
@@ -127,14 +144,21 @@ export default function UsersAdmin() {
const data: Parameters<typeof updateMutation.mutate>[0] = {
id: editingUser.id,
name: form.name,
email: form.email,
username: form.username || undefined,
email: form.email || undefined,
role: form.role,
isActive: form.isActive,
};
if (form.password) data.password = form.password;
updateMutation.mutate(data);
} else {
createMutation.mutate({ name: form.name, email: form.email, password: form.password, role: form.role });
createMutation.mutate({
name: form.name,
username: form.username || undefined,
email: form.email || undefined,
password: form.password,
role: form.role,
});
}
};
@@ -149,7 +173,9 @@ export default function UsersAdmin() {
<Users size={22} className="text-primary" />
<h1 className="text-2xl font-bold text-foreground">Gestion des utilisateurs</h1>
</div>
<p className="text-muted-foreground text-sm">{users.length} utilisateur{users.length !== 1 ? "s" : ""} enregistré{users.length !== 1 ? "s" : ""}</p>
<p className="text-muted-foreground text-sm">
{users.length} utilisateur{users.length !== 1 ? "s" : ""} enregistré{users.length !== 1 ? "s" : ""}
</p>
</div>
<Button onClick={openCreate} className="gap-2">
<Plus size={15} />
@@ -175,7 +201,7 @@ export default function UsersAdmin() {
<thead>
<tr className="border-b border-border bg-muted/30">
<th className="text-left px-4 py-3 font-semibold text-muted-foreground">Nom</th>
<th className="text-left px-4 py-3 font-semibold text-muted-foreground">Email</th>
<th className="text-left px-4 py-3 font-semibold text-muted-foreground">Identifiant / Email</th>
<th className="text-left px-4 py-3 font-semibold text-muted-foreground w-36">Rôle</th>
<th className="text-left px-4 py-3 font-semibold text-muted-foreground w-24">Statut</th>
<th className="text-left px-4 py-3 font-semibold text-muted-foreground w-32">Dernière connexion</th>
@@ -193,7 +219,25 @@ export default function UsersAdmin() {
<span className="font-medium text-foreground">{user.name}</span>
</div>
</td>
<td className="px-4 py-3 text-muted-foreground">{user.email}</td>
<td className="px-4 py-3">
<div className="flex flex-col gap-0.5">
{user.username && (
<span className="inline-flex items-center gap-1 text-xs font-mono bg-violet-50 text-violet-700 border border-violet-200 rounded px-1.5 py-0.5 w-fit">
<User size={10} />
{user.username}
</span>
)}
{user.email && (
<span className="inline-flex items-center gap-1 text-xs text-muted-foreground">
<AtSign size={10} />
{user.email}
</span>
)}
{!user.username && !user.email && (
<span className="text-xs text-muted-foreground italic">—</span>
)}
</div>
</td>
<td className="px-4 py-3">
<Badge variant="outline" className={cn("text-xs gap-1", ROLE_COLORS[user.role])}>
{ROLE_ICONS[user.role]}
@@ -218,10 +262,20 @@ export default function UsersAdmin() {
</td>
<td className="px-4 py-3">
<div className="flex items-center gap-1">
<Button variant="ghost" size="icon" className="w-7 h-7 text-muted-foreground hover:text-foreground" onClick={() => openEdit(user)}>
<Button
variant="ghost"
size="icon"
className="w-7 h-7 text-muted-foreground hover:text-foreground"
onClick={() => openEdit(user)}
>
<Pencil size={13} />
</Button>
<Button variant="ghost" size="icon" className="w-7 h-7 text-muted-foreground hover:text-destructive" onClick={() => setDeleteId(user.id)}>
<Button
variant="ghost"
size="icon"
className="w-7 h-7 text-muted-foreground hover:text-destructive"
onClick={() => setDeleteId(user.id)}
>
<Trash2 size={13} />
</Button>
</div>
@@ -241,23 +295,65 @@ export default function UsersAdmin() {
<DialogHeader>
<DialogTitle>{editingUser ? "Modifier l'utilisateur" : "Nouvel utilisateur"}</DialogTitle>
<DialogDescription>
{editingUser ? "Modifiez les informations de l'utilisateur" : "Créez un nouveau compte utilisateur"}
{editingUser
? "Modifiez les informations de l'utilisateur"
: "Créez un nouveau compte. L'identifiant ou l'e-mail servira à la connexion."}
</DialogDescription>
</DialogHeader>
<div className="space-y-4 py-2">
<div className="grid grid-cols-2 gap-4">
{/* Nom complet */}
<div className="space-y-2 col-span-2">
<Label>Nom complet</Label>
<Input placeholder="Jean Dupont" value={form.name} onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))} />
<Label>Nom complet <span className="text-destructive">*</span></Label>
<Input
placeholder="Jean Dupont"
value={form.name}
onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
/>
</div>
{/* Identifiant */}
<div className="space-y-2 col-span-2">
<Label>Adresse e-mail</Label>
<Input type="email" placeholder="jean@itinova.fr" value={form.email} onChange={(e) => setForm((f) => ({ ...f, email: e.target.value }))} />
<Label>
Identifiant (username)
<span className="ml-1 text-xs text-muted-foreground">(optionnel)</span>
</Label>
<Input
placeholder="jean.dupont"
value={form.username}
onChange={(e) => setForm((f) => ({ ...f, username: e.target.value }))}
/>
<p className="text-xs text-muted-foreground">
Permet la connexion sans e-mail. Ex : <code>adminItinova</code>
</p>
</div>
{/* Email */}
<div className="space-y-2 col-span-2">
<Label>{editingUser ? "Nouveau mot de passe (laisser vide pour ne pas changer)" : "Mot de passe"}</Label>
<Input type="password" placeholder="••••••••" value={form.password} onChange={(e) => setForm((f) => ({ ...f, password: e.target.value }))} />
<Label>
Adresse e-mail
<span className="ml-1 text-xs text-muted-foreground">(optionnel)</span>
</Label>
<Input
type="email"
placeholder="jean@itinova.fr"
value={form.email}
onChange={(e) => setForm((f) => ({ ...f, email: e.target.value }))}
/>
</div>
{/* Mot de passe */}
<div className="space-y-2 col-span-2">
<Label>
{editingUser
? "Nouveau mot de passe (laisser vide pour ne pas changer)"
: <>Mot de passe <span className="text-destructive">*</span></>}
</Label>
<Input
type="password"
placeholder="••••••••"
value={form.password}
onChange={(e) => setForm((f) => ({ ...f, password: e.target.value }))}
/>
</div>
{/* Rôle */}
<div className="space-y-2">
<Label>Rôle</Label>
<Select value={form.role} onValueChange={(v) => setForm((f) => ({ ...f, role: v as Role }))}>
@@ -271,11 +367,15 @@ export default function UsersAdmin() {
</SelectContent>
</Select>
</div>
{/* Statut (modification uniquement) */}
{editingUser && (
<div className="space-y-2">
<Label>Statut</Label>
<div className="flex items-center gap-2 pt-2">
<Switch checked={form.isActive} onCheckedChange={(v) => setForm((f) => ({ ...f, isActive: v }))} />
<Switch
checked={form.isActive}
onCheckedChange={(v) => setForm((f) => ({ ...f, isActive: v }))}
/>
<span className="text-sm">{form.isActive ? "Actif" : "Inactif"}</span>
</div>
</div>
@@ -283,9 +383,16 @@ export default function UsersAdmin() {
</div>
</div>
<DialogFooter>
<Button variant="outline" onClick={() => setShowDialog(false)}>Annuler</Button>
<Button onClick={handleSubmit} disabled={createMutation.isPending || updateMutation.isPending}>
{(createMutation.isPending || updateMutation.isPending) && <Loader2 size={14} className="animate-spin mr-2" />}
<Button variant="outline" onClick={() => setShowDialog(false)}>
Annuler
</Button>
<Button
onClick={handleSubmit}
disabled={createMutation.isPending || updateMutation.isPending}
>
{(createMutation.isPending || updateMutation.isPending) && (
<Loader2 size={14} className="animate-spin mr-2" />
)}
{editingUser ? "Enregistrer" : "Créer"}
</Button>
</DialogFooter>
@@ -297,11 +404,19 @@ export default function UsersAdmin() {
<DialogContent className="sm:max-w-sm">
<DialogHeader>
<DialogTitle>Supprimer l'utilisateur</DialogTitle>
<DialogDescription>Cette action est irréversible. L'utilisateur ne pourra plus se connecter.</DialogDescription>
<DialogDescription>
Cette action est irréversible. L'utilisateur ne pourra plus se connecter.
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button variant="outline" onClick={() => setDeleteId(null)}>Annuler</Button>
<Button variant="destructive" onClick={() => deleteId && deleteMutation.mutate({ id: deleteId })} disabled={deleteMutation.isPending}>
<Button variant="outline" onClick={() => setDeleteId(null)}>
Annuler
</Button>
<Button
variant="destructive"
onClick={() => deleteId && deleteMutation.mutate({ id: deleteId })}
disabled={deleteMutation.isPending}
>
{deleteMutation.isPending && <Loader2 size={14} className="animate-spin mr-2" />}
Supprimer
</Button>