Add name change functionality to user settings. Update SettingsPasswordForm to handle name updates, including validation and error handling. Fetch current user name for display in settings page.

src/components/SettingsPasswordForm.tsx

@@ -2,9 +2,35 @@
 
 import { useState } from "react";
 import Link from "next/link";
-import { changePassword } from "@/actions/password";
+import { changePassword, changeName } from "@/actions/password";
 
-export function SettingsPasswordForm() {
+export function SettingsPasswordForm({ currentName }: { currentName: string }) {
+  // --- Nom d'affichage ---
+  const [name, setName] = useState(currentName);
+  const [nameError, setNameError] = useState("");
+  const [nameSuccess, setNameSuccess] = useState(false);
+  const [nameLoading, setNameLoading] = useState(false);
+
+  async function handleNameSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setNameError("");
+    setNameSuccess(false);
+    setNameLoading(true);
+    try {
+      const result = await changeName(name);
+      if (result.success) {
+        setNameSuccess(true);
+      } else {
+        setNameError(result.error);
+      }
+    } catch {
+      setNameError("Erreur de connexion");
+    } finally {
+      setNameLoading(false);
+    }
+  }
+
+  // --- Mot de passe ---
   const [currentPassword, setCurrentPassword] = useState("");
   const [newPassword, setNewPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
@@ -49,6 +75,43 @@ export function SettingsPasswordForm() {
       </h1>
 
       <section className="rounded-lg border border-zinc-200 dark:border-zinc-600 bg-white dark:bg-zinc-800/50 p-4">
+        <h2 className="mb-4 font-mono text-sm font-medium text-zinc-700 dark:text-zinc-300">
+          Nom d&apos;affichage
+        </h2>
+        <form onSubmit={handleNameSubmit} className="space-y-4">
+          <div>
+            <label className="mb-1 block font-mono text-xs text-zinc-600 dark:text-zinc-400">
+              Nom
+            </label>
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => { setName(e.target.value); setNameSuccess(false); }}
+              required
+              maxLength={64}
+              autoComplete="name"
+              className="w-full rounded border border-zinc-300 dark:border-zinc-600 bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:border-cyan-500 focus:ring-1 focus:ring-cyan-500/30"
+            />
+          </div>
+          {nameError && (
+            <p className="font-mono text-xs text-red-500">{nameError}</p>
+          )}
+          {nameSuccess && (
+            <p className="font-mono text-xs text-emerald-600 dark:text-emerald-400">
+              Nom modifié.
+            </p>
+          )}
+          <button
+            type="submit"
+            disabled={nameLoading}
+            className="rounded border border-cyan-500/50 bg-cyan-500/10 px-3 py-2 font-mono text-sm text-cyan-600 dark:text-cyan-400 hover:bg-cyan-500/20 disabled:opacity-50"
+          >
+            {nameLoading ? "..." : "Modifier le nom"}
+          </button>
+        </form>
+      </section>
+
+      <section className="mt-4 rounded-lg border border-zinc-200 dark:border-zinc-600 bg-white dark:bg-zinc-800/50 p-4">
         <h2 className="mb-4 font-mono text-sm font-medium text-zinc-700 dark:text-zinc-300">
           Changer mon mot de passe
         </h2>