From 8e78ce50b59cc33e02cb0dac7e75a83a33c75f23 Mon Sep 17 00:00:00 2001
From: Tetardtek <kvnn64@gmail.com>
Date: Sun, 15 Mar 2026 02:45:50 +0100
Subject: [PATCH] feat: profile avatar, callback setUser fix, admin
 description/thumbnail, pagination limit=100

---
 frontend/src/components/UserBadge.tsx |  11 ++
 frontend/src/context/AuthContext.tsx  |   1 +
 frontend/src/pages/AdminPage.tsx      |  28 +++--
 frontend/src/pages/CallbackPage.tsx   |  19 +++-
 frontend/src/pages/ProfilePage.tsx    | 149 +++++++++++++++++---------
 5 files changed, 144 insertions(+), 64 deletions(-)

diff --git a/frontend/src/components/UserBadge.tsx b/frontend/src/components/UserBadge.tsx
index 2aba2b5..045c4b2 100644
--- a/frontend/src/components/UserBadge.tsx
+++ b/frontend/src/components/UserBadge.tsx
@@ -9,6 +9,17 @@ export default function UserBadge({ user }: UserBadgeProps) {
 
   return (
     <span className="flex items-center gap-2">
+      {user.avatar ? (
+        <img
+          src={user.avatar}
+          alt={user.nickname}
+          className="h-6 w-6 rounded-full object-cover border border-od-border"
+        />
+      ) : (
+        <span className="flex h-6 w-6 items-center justify-center rounded-full bg-od-surface border border-od-border font-mono text-[10px] text-od-accent">
+          {user.nickname[0].toUpperCase()}
+        </span>
+      )}
       <span className="font-mono text-xs text-od-accent">{user.nickname}</span>
       <span className="font-mono text-[10px] px-1.5 py-0.5 rounded border border-od-border text-od-muted">
         {planLabel}
diff --git a/frontend/src/context/AuthContext.tsx b/frontend/src/context/AuthContext.tsx
index 475e37b..65ef699 100644
--- a/frontend/src/context/AuthContext.tsx
+++ b/frontend/src/context/AuthContext.tsx
@@ -5,6 +5,7 @@ export interface User {
   id: string;
   email: string | null;
   nickname: string;
+  avatar?: string | null;
   plan?: { slug: string; name: string; level: number } | null;
   subscriptionLevel?: number;
   roles: string[];
diff --git a/frontend/src/pages/AdminPage.tsx b/frontend/src/pages/AdminPage.tsx
index d671aec..063cdeb 100644
--- a/frontend/src/pages/AdminPage.tsx
+++ b/frontend/src/pages/AdminPage.tsx
@@ -97,7 +97,8 @@ function VideosTab() {
   const [fetchError, setFetchError] = useState<string | null>(null);
   const [actionError, setActionError] = useState<string | null>(null);
   const [form, setForm] = useState({
-    title: '', storageType: 'youtube', storageKey: '',
+    title: '', description: '', thumbnailUrl: '',
+    storageType: 'youtube', storageKey: '',
     requiredLevel: 0, isPublished: false,
   });
   const [saving, setSaving] = useState(false);
@@ -106,7 +107,7 @@ function VideosTab() {
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
-    apiFetch<{ success: boolean; data: { videos: Video[] } }>('/admin/videos')
+    apiFetch<{ success: boolean; data: { videos: Video[] } }>('/admin/videos?limit=100')
       .then((r) => setVideos(r.data.videos))
       .catch(() => setFetchError('Impossible de charger les vidéos.'))
       .finally(() => setLoading(false));
@@ -144,7 +145,7 @@ function VideosTab() {
         { method: 'POST', body: JSON.stringify(form) }
       );
       setVideos((v) => [r.data.video, ...v]);
-      setForm({ title: '', storageType: 'youtube', storageKey: '', requiredLevel: 0, isPublished: false });
+      setForm({ title: '', description: '', thumbnailUrl: '', storageType: 'youtube', storageKey: '', requiredLevel: 0, isPublished: false });
     } catch {
       setError('Erreur lors de la création.');
     }
@@ -189,6 +190,21 @@ function VideosTab() {
           className="rounded border border-od-border bg-od-bg px-3 py-2 text-sm text-od-text placeholder-od-muted outline-none focus:border-od-accent"
         />
 
+        <textarea
+          value={form.description}
+          onChange={(e) => setForm((f) => ({ ...f, description: e.target.value }))}
+          placeholder="Description (optionnel)"
+          rows={2}
+          className="rounded border border-od-border bg-od-bg px-3 py-2 text-sm text-od-text placeholder-od-muted outline-none focus:border-od-accent resize-none"
+        />
+
+        <input
+          value={form.thumbnailUrl}
+          onChange={(e) => setForm((f) => ({ ...f, thumbnailUrl: e.target.value }))}
+          placeholder="URL thumbnail (optionnel)"
+          className="rounded border border-od-border bg-od-bg px-3 py-2 text-sm text-od-text placeholder-od-muted outline-none focus:border-od-accent"
+        />
+
         <div className="flex gap-2">
           <select
             value={form.storageType}
@@ -312,7 +328,7 @@ function UsersTab({ isSuperAdmin }: { isSuperAdmin: boolean }) {
 
   useEffect(() => {
     Promise.all([
-      apiFetch<{ success: boolean; data: { users: AdminUser[] } }>('/admin/users'),
+      apiFetch<{ success: boolean; data: { users: AdminUser[] } }>('/admin/users?limit=100'),
       apiFetch<{ success: boolean; data: { plans: Plan[] } }>('/admin/plans'),
     ])
       .then(([ur, pr]) => {
@@ -333,7 +349,7 @@ function UsersTab({ isSuperAdmin }: { isSuperAdmin: boolean }) {
         method: 'POST',
         body: JSON.stringify({ planId }),
       });
-      const r = await apiFetch<{ success: boolean; data: { users: AdminUser[] } }>('/admin/users');
+      const r = await apiFetch<{ success: boolean; data: { users: AdminUser[] } }>('/admin/users?limit=100');
       setUsers(r.data.users);
       setSelectedPlan((s) => { const n = { ...s }; delete n[userId]; return n; });
     } catch {
@@ -352,7 +368,7 @@ function UsersTab({ isSuperAdmin }: { isSuperAdmin: boolean }) {
         method: 'PATCH',
         body: JSON.stringify({ roles: [role] }),
       });
-      const r = await apiFetch<{ success: boolean; data: { users: AdminUser[] } }>('/admin/users');
+      const r = await apiFetch<{ success: boolean; data: { users: AdminUser[] } }>('/admin/users?limit=100');
       setUsers(r.data.users);
       setSelectedRole((s) => { const n = { ...s }; delete n[userId]; return n; });
     } catch {
diff --git a/frontend/src/pages/CallbackPage.tsx b/frontend/src/pages/CallbackPage.tsx
index 08f7254..581a601 100644
--- a/frontend/src/pages/CallbackPage.tsx
+++ b/frontend/src/pages/CallbackPage.tsx
@@ -1,29 +1,38 @@
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { apiFetch } from '../lib/api';
+import { useAuthContext } from '../context/AuthContext';
+import type { User } from '../context/AuthContext';
+
+interface SessionResponse {
+  success: boolean;
+  data: { user: User };
+}
 
 export default function CallbackPage() {
   const navigate = useNavigate();
+  const { setUser } = useAuthContext();
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     const params = new URLSearchParams(window.location.search);
     const token = params.get('token');
 
-    // Pas de token dans l'URL → retour silencieux
     if (!token) {
       navigate('/', { replace: true });
       return;
     }
 
-    // Envoie le token au backend → backend valide + pose le cookie httpOnly
-    apiFetch<void>('/auth/session', {
+    apiFetch<SessionResponse>('/auth/session', {
       method: 'POST',
       body: JSON.stringify({ token }),
     })
-      .then(() => navigate('/', { replace: true }))
+      .then((res) => {
+        setUser(res.data.user);
+        navigate('/', { replace: true });
+      })
       .catch(() => setError("Échec de l'authentification. Réessaie."));
-  }, [navigate]);
+  }, [navigate, setUser]);
 
   if (error) {
     return (
diff --git a/frontend/src/pages/ProfilePage.tsx b/frontend/src/pages/ProfilePage.tsx
index 977aab0..6f3e386 100644
--- a/frontend/src/pages/ProfilePage.tsx
+++ b/frontend/src/pages/ProfilePage.tsx
@@ -11,41 +11,42 @@ interface MeResponse {
 export default function ProfilePage() {
   const { user, setUser } = useAuthContext();
 
-  const [editing, setEditing] = useState(false);
-  const [draft, setDraft] = useState(user?.nickname ?? '');
+  const [editingNickname, setEditingNickname] = useState(false);
+  const [draftNickname, setDraftNickname] = useState(user?.nickname ?? '');
+  const [editingAvatar, setEditingAvatar] = useState(false);
+  const [draftAvatar, setDraftAvatar] = useState(user?.avatar ?? '');
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   if (!user) return null;
 
-  function handleEdit() {
-    setDraft(user!.nickname);
+  function startEditNickname() {
+    setDraftNickname(user!.nickname);
     setError(null);
-    setEditing(true);
+    setEditingNickname(true);
   }
 
-  function handleCancel() {
-    setEditing(false);
+  function startEditAvatar() {
+    setDraftAvatar(user!.avatar ?? '');
+    setError(null);
+    setEditingAvatar(true);
+  }
+
+  function cancel() {
+    setEditingNickname(false);
+    setEditingAvatar(false);
     setError(null);
   }
 
-  async function handleSave() {
-    const trimmed = draft.trim();
-    if (!trimmed || trimmed === user!.nickname) {
-      setEditing(false);
-      return;
-    }
-
+  async function save(patch: { nickname?: string; avatar?: string | null }) {
     setSaving(true);
     setError(null);
     try {
-      await apiFetch('/users/me', {
-        method: 'PATCH',
-        body: JSON.stringify({ nickname: trimmed }),
-      });
+      await apiFetch('/users/me', { method: 'PATCH', body: JSON.stringify(patch) });
       const res = await apiFetch<MeResponse>('/auth/me');
       setUser(res.data.user);
-      setEditing(false);
+      setEditingNickname(false);
+      setEditingAvatar(false);
     } catch (e) {
       setError(e instanceof ApiError ? `Erreur ${e.status}` : 'Erreur réseau');
     } finally {
@@ -53,70 +54,115 @@ export default function ProfilePage() {
     }
   }
 
+  async function handleSaveNickname() {
+    const trimmed = draftNickname.trim();
+    if (!trimmed || trimmed === user!.nickname) { cancel(); return; }
+    await save({ nickname: trimmed });
+  }
+
+  async function handleSaveAvatar() {
+    const trimmed = draftAvatar.trim();
+    const val = trimmed === '' ? null : trimmed;
+    if (val === (user!.avatar ?? null)) { cancel(); return; }
+    await save({ avatar: val });
+  }
+
   const planLabel = user.plan?.name ?? 'Free';
-  const planSlug = user.plan?.slug ?? 'free';
+  const planSlug  = user.plan?.slug ?? 'free';
 
   return (
     <div className="max-w-lg space-y-8">
       <h1 className="font-mono text-sm text-od-accent">Profil</h1>
 
-      {/* Infos compte */}
+      {/* Compte */}
       <section className="space-y-4">
-        <h2 className="text-xs font-semibold text-od-muted uppercase tracking-widest">
-          Compte
-        </h2>
+        <h2 className="text-xs font-semibold text-od-muted uppercase tracking-widest">Compte</h2>
 
         <div className="rounded border border-od-border bg-od-surface divide-y divide-od-border">
 
+          {/* Avatar */}
+          <div className="flex items-center justify-between px-4 py-3 gap-4">
+            <span className="text-xs text-od-muted shrink-0">Avatar</span>
+            {editingAvatar ? (
+              <div className="flex flex-col items-end gap-2 flex-1 min-w-0">
+                <div className="flex items-center gap-2 w-full">
+                  <input
+                    value={draftAvatar}
+                    onChange={(e) => setDraftAvatar(e.target.value)}
+                    onKeyDown={(e) => { if (e.key === 'Enter') handleSaveAvatar(); if (e.key === 'Escape') cancel(); }}
+                    placeholder="URL https://…  (vide = supprimer)"
+                    disabled={saving}
+                    className="flex-1 min-w-0 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 placeholder-od-muted"
+                    autoFocus
+                  />
+                  <button onClick={handleSaveAvatar} disabled={saving}
+                    className="font-mono text-xs text-od-accent hover:opacity-80 transition-opacity disabled:opacity-40">
+                    {saving ? '…' : '✓'}
+                  </button>
+                  <button onClick={cancel} disabled={saving}
+                    className="font-mono text-xs text-od-muted hover:text-od-crit transition-colors disabled:opacity-40">
+                    ✕
+                  </button>
+                </div>
+                {draftAvatar && (
+                  <img src={draftAvatar} alt="preview" className="h-10 w-10 rounded-full object-cover border border-od-border" />
+                )}
+                {error && <span className="font-mono text-[10px] text-od-crit">{error}</span>}
+              </div>
+            ) : (
+              <div className="flex items-center gap-3">
+                {user.avatar ? (
+                  <img src={user.avatar} alt={user.nickname} className="h-8 w-8 rounded-full object-cover border border-od-border" />
+                ) : (
+                  <span className="flex h-8 w-8 items-center justify-center rounded-full bg-od-surface-hi border border-od-border font-mono text-sm text-od-accent">
+                    {user.nickname[0].toUpperCase()}
+                  </span>
+                )}
+                <button onClick={startEditAvatar}
+                  className="font-mono text-xs text-od-muted hover:text-od-accent transition-colors">
+                  modifier
+                </button>
+              </div>
+            )}
+          </div>
+
           {/* Email */}
           <div className="flex items-center justify-between px-4 py-3">
             <span className="text-xs text-od-muted">Email</span>
-            <span className="font-mono text-xs text-od-text">
-              {user.email ?? '—'}
-            </span>
+            <span className="font-mono text-xs text-od-text">{user.email ?? '—'}</span>
           </div>
 
           {/* Nickname */}
           <div className="flex items-center justify-between px-4 py-3">
             <span className="text-xs text-od-muted">Pseudo</span>
-            {editing ? (
+            {editingNickname ? (
               <div className="flex flex-col items-end gap-1">
                 <div className="flex items-center gap-2">
                   <input
-                    value={draft}
-                    onChange={(e) => setDraft(e.target.value)}
-                    onKeyDown={(e) => { if (e.key === 'Enter') handleSave(); if (e.key === 'Escape') handleCancel(); }}
-                    maxLength={32}
+                    value={draftNickname}
+                    onChange={(e) => setDraftNickname(e.target.value)}
+                    onKeyDown={(e) => { if (e.key === 'Enter') handleSaveNickname(); if (e.key === 'Escape') cancel(); }}
+                    maxLength={100}
                     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
                   />
-                  <button
-                    onClick={handleSave}
-                    disabled={saving}
-                    className="font-mono text-xs text-od-accent hover:opacity-80 transition-opacity disabled:opacity-40"
-                  >
+                  <button onClick={handleSaveNickname} disabled={saving}
+                    className="font-mono text-xs text-od-accent hover:opacity-80 transition-opacity disabled:opacity-40">
                     {saving ? '…' : '✓'}
                   </button>
-                  <button
-                    onClick={handleCancel}
-                    disabled={saving}
-                    className="font-mono text-xs text-od-muted hover:text-od-crit transition-colors disabled:opacity-40"
-                  >
+                  <button onClick={cancel} disabled={saving}
+                    className="font-mono text-xs text-od-muted hover:text-od-crit transition-colors disabled:opacity-40">
                     ✕
                   </button>
                 </div>
-                {error && (
-                  <span className="font-mono text-[10px] text-od-crit">{error}</span>
-                )}
+                {error && <span className="font-mono text-[10px] text-od-crit">{error}</span>}
               </div>
             ) : (
               <div className="flex items-center gap-3">
                 <span className="font-mono text-xs text-od-text">{user.nickname}</span>
-                <button
-                  onClick={handleEdit}
-                  className="font-mono text-xs text-od-muted hover:text-od-accent transition-colors"
-                >
+                <button onClick={startEditNickname}
+                  className="font-mono text-xs text-od-muted hover:text-od-accent transition-colors">
                   modifier
                 </button>
               </div>
@@ -128,10 +174,7 @@ export default function ProfilePage() {
 
       {/* Plan */}
       <section className="space-y-4">
-        <h2 className="text-xs font-semibold text-od-muted uppercase tracking-widest">
-          Abonnement
-        </h2>
-
+        <h2 className="text-xs font-semibold text-od-muted uppercase tracking-widest">Abonnement</h2>
         <div className="rounded border border-od-border bg-od-surface px-4 py-3 flex items-center justify-between">
           <p className="text-xs text-od-text">{planLabel}</p>
           <span className="font-mono text-[10px] px-1.5 py-0.5 rounded border border-od-border text-od-muted">