feat: add profile link to header and implement user profile update functionality with email and password management

src/app/profile/ProfileForm.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+import { useRouter } from 'next/navigation';
+import { Input, Button } from '@/components/ui';
+import { updateProfileAction } from '@/actions/profile';
+
+interface ProfileFormProps {
+  initialData: {
+    name: string;
+    email: string;
+  };
+}
+
+export function ProfileForm({ initialData }: ProfileFormProps) {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+  const [name, setName] = useState(initialData.name);
+  const [email, setEmail] = useState(initialData.email);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+
+  const hasChanges = name !== initialData.name || email !== initialData.email;
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setMessage(null);
+
+    startTransition(async () => {
+      const result = await updateProfileAction({ name, email });
+
+      if (result.success) {
+        setMessage({ type: 'success', text: 'Profil mis à jour avec succès' });
+        router.refresh();
+      } else {
+        setMessage({ type: 'error', text: result.error || 'Erreur lors de la mise à jour' });
+      }
+    });
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div>
+        <label htmlFor="name" className="mb-1.5 block text-sm font-medium text-foreground">
+          Nom
+        </label>
+        <Input
+          id="name"
+          type="text"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          placeholder="Votre nom"
+        />
+      </div>
+
+      <div>
+        <label htmlFor="email" className="mb-1.5 block text-sm font-medium text-foreground">
+          Email
+        </label>
+        <Input
+          id="email"
+          type="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          required
+        />
+      </div>
+
+      {message && (
+        <p
+          className={`text-sm ${
+            message.type === 'success' ? 'text-success' : 'text-destructive'
+          }`}
+        >
+          {message.text}
+        </p>
+      )}
+
+      <Button type="submit" disabled={isPending || !hasChanges}>
+        {isPending ? 'Enregistrement...' : 'Enregistrer les modifications'}
+      </Button>
+    </form>
+  );
+}
+