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.

2026-04-21 05:31:44 -04:00
parent 535dd19188
commit b3137e8f27
10 changed files with 866 additions and 43 deletions
--- a/client/public/manus/version.json
+++ b/client/public/manus/version.json
@@ -1,4 +1,4 @@
 {
-  "version": "4ba97843",
-  "timestamp": 1776437827804
+  "version": "59dcc8d3",
+  "timestamp": 1776763904784
 }
--- a/client/src/pages/UsersAdmin.tsx
+++ b/client/src/pages/UsersAdmin.tsx
@@ -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>