-
{user.nickname}
+
+ {open && (
+
+ setOpen(false)}
+ className="block px-3 py-2 text-xs text-od-muted hover:text-od-text transition-colors"
+ >
+ Profil
+
+
+
+ )}
) : (
void;
-}
-
-interface MeResponse {
- success: boolean;
- data: { user: User };
-}
-
-export function useAuth(): AuthState {
- const [user, setUser] = useState
(null);
- const [loading, setLoading] = useState(true);
-
- useEffect(() => {
- let cancelled = false;
-
- apiFetch('/auth/me')
- .then((res) => { if (!cancelled) setUser(res.data.user); })
- .catch(() => { if (!cancelled) setUser(null); })
- .finally(() => { if (!cancelled) setLoading(false); });
-
- return () => { cancelled = true; };
- }, []);
-
- return { user, loading, setUser };
-}
+// Réexporte depuis AuthContext — source unique de vérité auth.
+// Ne pas dupliquer User ou la logique de fetch ici.
+export type { User } from '../context/AuthContext';
+export { useAuthContext as useAuth } from '../context/AuthContext';
diff --git a/frontend/src/pages/ProfilePage.tsx b/frontend/src/pages/ProfilePage.tsx
new file mode 100644
index 0000000..977aab0
--- /dev/null
+++ b/frontend/src/pages/ProfilePage.tsx
@@ -0,0 +1,144 @@
+import { useState } from 'react';
+import { apiFetch, ApiError } from '../lib/api';
+import { useAuthContext } from '../context/AuthContext';
+import type { User } from '../context/AuthContext';
+
+interface MeResponse {
+ success: boolean;
+ data: { user: User };
+}
+
+export default function ProfilePage() {
+ const { user, setUser } = useAuthContext();
+
+ const [editing, setEditing] = useState(false);
+ const [draft, setDraft] = useState(user?.nickname ?? '');
+ const [saving, setSaving] = useState(false);
+ const [error, setError] = useState(null);
+
+ if (!user) return null;
+
+ function handleEdit() {
+ setDraft(user!.nickname);
+ setError(null);
+ setEditing(true);
+ }
+
+ function handleCancel() {
+ setEditing(false);
+ setError(null);
+ }
+
+ async function handleSave() {
+ const trimmed = draft.trim();
+ if (!trimmed || trimmed === user!.nickname) {
+ setEditing(false);
+ return;
+ }
+
+ setSaving(true);
+ setError(null);
+ try {
+ await apiFetch('/users/me', {
+ method: 'PATCH',
+ body: JSON.stringify({ nickname: trimmed }),
+ });
+ const res = await apiFetch('/auth/me');
+ setUser(res.data.user);
+ setEditing(false);
+ } catch (e) {
+ setError(e instanceof ApiError ? `Erreur ${e.status}` : 'Erreur réseau');
+ } finally {
+ setSaving(false);
+ }
+ }
+
+ const planLabel = user.plan?.name ?? 'Free';
+ const planSlug = user.plan?.slug ?? 'free';
+
+ return (
+
+
Profil
+
+ {/* Infos compte */}
+
+
+ Compte
+
+
+
+
+ {/* Email */}
+
+ Email
+
+ {user.email ?? '—'}
+
+
+
+ {/* Nickname */}
+
+
Pseudo
+ {editing ? (
+
+
+ setDraft(e.target.value)}
+ onKeyDown={(e) => { if (e.key === 'Enter') handleSave(); if (e.key === 'Escape') handleCancel(); }}
+ maxLength={32}
+ disabled={saving}
+ className="w-36 rounded border border-od-border bg-od-bg px-2 py-0.5 font-mono text-xs text-od-text focus:border-od-accent focus:outline-none disabled:opacity-50"
+ autoFocus
+ />
+
+
+
+ {error && (
+
{error}
+ )}
+
+ ) : (
+
+ {user.nickname}
+
+
+ )}
+
+
+
+
+ {/* Plan */}
+
+
+ Abonnement
+
+
+
+
{planLabel}
+
+ {planSlug}
+
+
+