feat(auth): migration multi-utilisateurs, rôles admin/user et token API par compte

feat(users): gestion des comptes et système d'invitations avec page d'administration

feat(requests): demandes de séries avec fusion des saisons, vue admin et widget dashboard

feat(jellyfin): synchronisation des comptes, SSO token exchange et API publique v1

src/components/serie/SerieSeasonCard.vue

@@ -31,18 +31,81 @@
 
       <!-- Boutons saison -->
       <div class="flex items-center gap-2">
-        <!-- Corbeille saison -->
+        <!-- Corbeille saison (admin uniquement) -->
         <button
-            v-if="season.organized_count > 0"
+            v-if="!requestMode && season.organized_count > 0"
             @click.stop="openUnimportSeasonModal"
             class="w-8 h-8 rounded-lg border flex items-center justify-center transition-colors border-red-500/30 text-red-400 bg-red-500/10 hover:bg-red-500/20"
             title="Désimporter la saison"
         >
           <Trash2 :size="14" />
         </button>
-        <!-- Pas de pack saison : bouton "Saison" (dropdown si plusieurs packs via intégrales) -->
-        <template v-if="season.torrents.length === 0 && hasDownloadable">
-          <div v-if="uniquePackOptions.length > 1" class="relative" @click.stop>
+
+        <!-- ── Mode demande ────────────────────────────────────── -->
+        <template v-if="requestMode">
+          <button
+              @click.stop="emit('requestSeason', season.season_number)"
+              class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg border transition"
+              :class="isSeasonRequested
+                ? 'bg-blue-500/10 text-blue-400 border-blue-500/20 cursor-default'
+                : 'bg-accent-muted text-accent border-accent/20 hover:bg-accent/20'"
+          >
+            <component :is="isSeasonRequested ? checkIcon : requestIcon" />
+            {{ isSeasonRequested ? 'Demandé' : 'Demander' }}
+          </button>
+        </template>
+
+        <!-- ── Mode téléchargement (admin) ─────────────────────── -->
+        <template v-else>
+          <!-- Pas de pack saison : bouton "Saison" (dropdown si plusieurs packs via intégrales) -->
+          <template v-if="season.torrents.length === 0 && hasDownloadable">
+            <div v-if="uniquePackOptions.length > 1" class="relative" @click.stop>
+              <button
+                  class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg border transition bg-accent-muted text-accent border-accent/20 hover:bg-accent/20"
+                  @click="seasonMenuOpen = !seasonMenuOpen"
+              >
+                <component :is="downloadIcon" />
+                Saison ▾
+              </button>
+              <div v-if="seasonMenuOpen" class="absolute right-0 bottom-full mb-1 bg-card border border-border rounded-xl p-1 z-20 w-56 shadow-xl flex flex-col gap-0.5">
+                <button
+                    v-for="opt in uniquePackOptions"
+                    :key="opt.infohash"
+                    class="flex items-center gap-2 px-3 py-2 rounded-lg text-xs text-primary hover:bg-hover transition-colors text-left"
+                    @click="emit('downloadSeason', season, opt.infohash); seasonMenuOpen = false"
+                >
+                  <component :is="downloadIcon" />
+                  {{ opt.label }}
+                </button>
+              </div>
+            </div>
+            <button
+                v-else
+                @click="emit('downloadSeason', season)"
+                :disabled="downloadingSeason"
+                class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg border bg-accent-muted text-accent border-accent/20 hover:bg-accent/20 transition"
+            >
+              <component :is="downloadingSeason ? loaderIcon : downloadIcon" />
+              {{ downloadingSeason ? 'Envoi…' : 'Saison' }}
+            </button>
+          </template>
+
+          <!-- Pack saison unique -->
+          <button
+              v-if="season.torrents.length === 1"
+              class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg border transition"
+              :class="canDownloadSeason
+              ? 'bg-accent-muted text-accent border-accent/20 hover:bg-accent/20'
+              : 'text-muted border-border cursor-not-allowed opacity-50'"
+              :disabled="!canDownloadSeason"
+              @click="canDownloadSeason && emit('download', `season-${season.id}`, season.torrent.torrent_url, season.torrent.magnet)"
+          >
+            <component :is="seasonBtnIcon" />
+            {{ seasonBtnLabel }}
+          </button>
+
+          <!-- Dropdown packs saison multiples -->
+          <div v-if="season.torrents.length > 1" class="relative" @click.stop>
             <button
                 class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg border transition bg-accent-muted text-accent border-accent/20 hover:bg-accent/20"
                 @click="seasonMenuOpen = !seasonMenuOpen"
@@ -50,66 +113,21 @@
               <component :is="downloadIcon" />
               Saison ▾
             </button>
-            <div v-if="seasonMenuOpen" class="absolute right-0 bottom-full mb-1 bg-card border border-border rounded-xl p-1 z-20 w-56 shadow-xl flex flex-col gap-0.5">
+            <div v-if="seasonMenuOpen" class="absolute right-0 top-full mt-1 bg-card border border-border rounded-xl p-1 z-20 w-52 shadow-xl flex flex-col gap-0.5">
               <button
-                  v-for="opt in uniquePackOptions"
-                  :key="opt.infohash"
-                  class="flex items-center gap-2 px-3 py-2 rounded-lg text-xs text-primary hover:bg-hover transition-colors text-left"
-                  @click="emit('downloadSeason', season, opt.infohash); seasonMenuOpen = false"
+                  v-for="(t, i) in season.torrents"
+                  :key="i"
+                  class="flex items-center gap-2 px-3 py-2 rounded-lg text-xs text-primary hover:bg-hover transition-colors"
+                  :class="(isDownloaded(`season-${season.id}-${i}`) || isAlreadyQueued(t)) ? 'opacity-50 cursor-not-allowed' : ''"
+                  :disabled="isDownloaded(`season-${season.id}-${i}`) || isAlreadyQueued(t)"
+                  @click="!isDownloaded(`season-${season.id}-${i}`) && !isAlreadyQueued(t) && (emit('download', `season-${season.id}-${i}`, t.torrent_url, t.magnet), seasonMenuOpen = false)"
               >
-                <component :is="downloadIcon" />
-                {{ opt.label }}
+                <component :is="(isDownloaded(`season-${season.id}-${i}`) || isAlreadyQueued(t)) ? checkIcon : downloadIcon" />
+                {{ groupLabels(season.torrents)[i] }}
               </button>
             </div>
           </div>
-          <button
-              v-else
-              @click="emit('downloadSeason', season)"
-              :disabled="downloadingSeason"
-              class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg border bg-accent-muted text-accent border-accent/20 hover:bg-accent/20 transition"
-          >
-            <component :is="downloadingSeason ? loaderIcon : downloadIcon" />
-            {{ downloadingSeason ? 'Envoi…' : 'Saison' }}
-          </button>
         </template>
-
-        <!-- Pack saison unique -->
-        <button
-            v-if="season.torrents.length === 1"
-            class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg border transition"
-            :class="canDownloadSeason
-            ? 'bg-accent-muted text-accent border-accent/20 hover:bg-accent/20'
-            : 'text-muted border-border cursor-not-allowed opacity-50'"
-            :disabled="!canDownloadSeason"
-            @click="canDownloadSeason && emit('download', `season-${season.id}`, season.torrent.torrent_url, season.torrent.magnet)"
-        >
-          <component :is="seasonBtnIcon" />
-          {{ seasonBtnLabel }}
-        </button>
-
-        <!-- Dropdown packs saison multiples -->
-        <div v-if="season.torrents.length > 1" class="relative" @click.stop>
-          <button
-              class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg border transition bg-accent-muted text-accent border-accent/20 hover:bg-accent/20"
-              @click="seasonMenuOpen = !seasonMenuOpen"
-          >
-            <component :is="downloadIcon" />
-            Saison ▾
-          </button>
-          <div v-if="seasonMenuOpen" class="absolute right-0 top-full mt-1 bg-card border border-border rounded-xl p-1 z-20 w-52 shadow-xl flex flex-col gap-0.5">
-            <button
-                v-for="(t, i) in season.torrents"
-                :key="i"
-                class="flex items-center gap-2 px-3 py-2 rounded-lg text-xs text-primary hover:bg-hover transition-colors"
-                :class="(isDownloaded(`season-${season.id}-${i}`) || isAlreadyQueued(t)) ? 'opacity-50 cursor-not-allowed' : ''"
-                :disabled="isDownloaded(`season-${season.id}-${i}`) || isAlreadyQueued(t)"
-                @click="!isDownloaded(`season-${season.id}-${i}`) && !isAlreadyQueued(t) && (emit('download', `season-${season.id}-${i}`, t.torrent_url, t.magnet), seasonMenuOpen = false)"
-            >
-              <component :is="(isDownloaded(`season-${season.id}-${i}`) || isAlreadyQueued(t)) ? checkIcon : downloadIcon" />
-              {{ groupLabels(season.torrents)[i] }}
-            </button>
-          </div>
-        </div>
       </div>
     </div>
 
@@ -182,9 +200,22 @@
             </div>
           </div>
 
-          <!-- Bouton téléchargement épisode (uniquement si non organisé) -->
+          <!-- Bouton épisode -->
           <div v-if="!ep.organized" class="relative shrink-0" @click.stop>
+            <!-- Mode demande -->
             <button
+                v-if="requestMode"
+                class="w-8 h-8 rounded-lg border flex items-center justify-center transition-colors"
+                :class="(requestedSeasons?.includes(season.season_number))
+                  ? 'border-blue-500/30 text-blue-400 bg-blue-500/10 cursor-default'
+                  : 'border-border text-muted hover:border-accent hover:text-accent cursor-pointer'"
+                @click="!requestedSeasons?.includes(season.season_number) && emit('requestEpisode', season.season_number, ep.id)"
+            >
+              <component :is="requestedSeasons?.includes(season.season_number) ? checkIcon : requestIcon" />
+            </button>
+            <!-- Mode téléchargement (admin) -->
+            <button
+                v-else
                 class="w-8 h-8 rounded-lg border flex items-center justify-center transition-colors"
                 :class="epBtnClass(ep)"
                 :disabled="epState(ep) !== 'idle'"
@@ -209,8 +240,8 @@
             </div>
           </div>
 
-          <!-- Actions épisode importé -->
-          <template v-if="ep.organized && organizedByEpisode[String(ep.id)]">
+          <!-- Actions épisode importé (admin uniquement) -->
+          <template v-if="!requestMode && ep.organized && organizedByEpisode[String(ep.id)]">
             <!-- Badge rename cliquable -->
             <button
                 v-if="epNeedsRename(ep)"
@@ -314,6 +345,8 @@ const props = defineProps<{
   epActionLoading   : Record<number, boolean>
   downloadingSeason ?: boolean
   nfoSupport        ?: boolean
+  requestMode       ?: boolean   // true = boutons demande au lieu de téléchargement
+  requestedSeasons  ?: number[]  // saisons déjà demandées par cet user pour cette série
 }>()
 
 const emit = defineEmits<{
@@ -323,8 +356,19 @@ const emit = defineEmits<{
   renameEpisode  : [ep: any, season: any]
   unimportEpisode: [ep: any, season: any, deleteFile: boolean]
   unimportSeason : [season: any, deleteFiles: boolean]
+  // Mode demande
+  requestSeason  : [seasonNumber: number]
+  requestEpisode : [seasonNumber: number, episodeId: number]
 }>()
 
+const requestIcon = h('svg', { viewBox: '0 0 24 24', stroke: 'currentColor', 'stroke-width': 2, fill: 'none', width: 12, height: 12 },
+  [h('circle', { cx: 12, cy: 12, r: 10 }), h('path', { d: 'M12 8v4l2 2' })]
+)
+
+const isSeasonRequested = computed(() =>
+  props.requestedSeasons?.includes(props.season.season_number) ?? false
+)
+
 const epOptionsOpen      = ref<number | null>(null)
 const plotOpen           = ref<number | null>(null)
 const seasonMenuOpen     = ref(false)

src/layouts/AppLayout.vue

@@ -39,46 +39,71 @@ import { ref, computed } from 'vue'
 import { Menu } from 'lucide-vue-next'
 import SidebarNav from '@/components/nav/SidebarNav.vue'
 import { useDownloadsStore } from '@/stores/downloads'
+import { useAuthStore }      from '@/stores/auth'
 import type { NavItem } from '@/types/nav'
 
 const mobileOpen = ref(false)
 const dlStore    = useDownloadsStore()
+const auth       = useAuthStore()
 
-const navItems = computed<NavItem[]>(() => [
-  {
-    label: 'Dashboard',
-    icon : 'LayoutDashboard',
-    to   : '/dashboard',
-  },
-  {
-    label   : 'Médiathèque',
-    icon    : 'Tv',
-    to      : '/series',
-    children: [
-      { label: 'Séries', to: '/series' },
-    ],
-  },
-  {
-    label: 'Activité',
-    icon : 'Activity',
-    to   : '/activity',
-    badge: dlStore.activeCount > 0 ? dlStore.activeCount : undefined,
-  },
-  { separator: true },
-  {
-    label   : 'Paramètres',
-    icon    : 'Settings',
-    to      : '/settings',
-    children: [
+const navItems = computed<NavItem[]>(() => {
+  const items: NavItem[] = [
+    {
+      label: 'Dashboard',
+      icon : 'LayoutDashboard',
+      to   : '/dashboard',
+    },
+    {
+      label   : 'Médiathèque',
+      icon    : 'Tv',
+      to      : '/series',
+      children: [
+        { label: 'Séries', to: '/series' },
+      ],
+    },
+    {
+      label: 'Demandes',
+      icon : 'ClipboardList',
+      to   : '/requests',
+    },
+  ]
+
+  if (auth.isAdmin) {
+    items.push({
+      label: 'Activité',
+      icon : 'Activity',
+      to   : '/activity',
+      badge: dlStore.activeCount > 0 ? dlStore.activeCount : undefined,
+    })
+  }
+
+  items.push({ separator: true })
+
+  const settingsChildren: NavItem[] = [
+    { label: 'Mon profil', to: '/settings/profile' },
+  ]
+  if (auth.isAdmin) {
+    settingsChildren.push(
       { label: 'Clients de téléchargement', to: '/settings/download-client' },
       { label: 'Gestion des médias',        to: '/settings/media-management' },
-      { label: 'Management des séries',       to: '/settings/import-management' },
+      { label: 'Management des séries',     to: '/settings/import-management' },
       { label: 'Catalogue Fankai',          to: '/settings/catalogue' },
       { label: 'Journaux',                  to: '/settings/logs' },
       { label: 'Avancé',                    to: '/settings/advanced' },
-    ],
-  },
-])
+      { label: 'Utilisateurs',              to: '/settings/users' },
+      { label: 'Jellyfin & API',            to: '/settings/jellyfin' },
+    )
+  }
+
+  items.push({
+    label   : 'Paramètres',
+    icon    : 'Settings',
+    to      : '/settings',
+    children: settingsChildren,
+  })
+
+  return items
+})
 </script>
 
 <style scoped>

src/router/index.ts

@@ -1,16 +1,28 @@
 import { createRouter, createWebHistory } from 'vue-router'
+
+declare module 'vue-router' {
+    interface RouteMeta {
+        public?    : boolean
+        adminOnly? : boolean
+    }
+}
 import { useAuthStore } from '@/stores/auth'
 import AppLayout from '@/layouts/AppLayout.vue'
 
 const router = createRouter({
     history: createWebHistory(),
     routes: [
-        // ─── Page publique hors layout ───────────────────────────
+        // ─── Pages publiques hors layout ─────────────────────────
         {
             path: '/auth',
             component: () => import('@/views/AuthView.vue'),
             meta: { public: true },
         },
+        {
+            path: '/invite/:code',
+            component: () => import('@/views/InviteView.vue'),
+            meta: { public: true },
+        },
 
         // ─── App principale avec layout sidebar ──────────────────
         {
@@ -52,7 +64,12 @@ const router = createRouter({
                     path: 'settings',
                     component: () => import('@/views/settings/SettingsLayout.vue'),
                     children: [
-                        { path: '',                redirect: '/settings/download-client' },
+                        { path: '',                redirect: '/settings/profile' },
+                        {
+                            path: 'profile',
+                            name: 'settings-profile',
+                            component: () => import('@/views/settings/ProfileView.vue'),
+                        },
                         {
                             path: 'download-client',
                             name: 'settings-download',
@@ -83,8 +100,27 @@ const router = createRouter({
                             name: 'settings-advanced',
                             component: () => import('@/views/settings/AdvancedView.vue'),
                         },
+                        {
+                            path: 'users',
+                            name: 'settings-users',
+                            component: () => import('@/views/settings/UsersView.vue'),
+                            meta: { adminOnly: true },
+                        },
+                        {
+                            path: 'jellyfin',
+                            name: 'settings-jellyfin',
+                            component: () => import('@/views/settings/JellyfinView.vue'),
+                            meta: { adminOnly: true },
+                        },
                     ],
                 },
+
+                // Demandes
+                {
+                    path: 'requests',
+                    name: 'requests',
+                    component: () => import('@/views/RequestsView.vue'),
+                },
             ],
         },
     ],
@@ -97,21 +133,20 @@ const router = createRouter({
     },
 })
 
-// ─── Guard auth (inchangé) ────────────────────────────────────
+// ─── Guard auth ───────────────────────────────────────────────
 router.beforeEach(async (to) => {
     const auth = useAuthStore()
 
-    if (auth.loading) {
-        await auth.checkStatus()
-    }
+    if (auth.loading) await auth.checkStatus()
 
-    if (!to.meta.public && !auth.loggedIn) {
-        return '/auth'
-    }
+    // Redirige vers /auth si non connecté
+    if (!to.meta.public && !auth.loggedIn) return '/auth'
 
-    if (to.path === '/auth' && auth.loggedIn) {
-        return '/series'
-    }
+    // Redirige vers /series si déjà connecté et tente d'accéder à /auth
+    if (to.path === '/auth' && auth.loggedIn) return '/series'
+
+    // Redirige les non-admins hors des pages admin
+    if (to.meta.adminOnly && !auth.isAdmin) return '/series'
 })
 
 export default router

src/stores/auth.ts

@@ -1,17 +1,25 @@
 import { defineStore } from 'pinia'
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 
 export const useAuthStore = defineStore('auth', () => {
-    const loggedIn = ref(false)
-    const setup = ref(false)
-    const loading = ref(true)
+    const loggedIn  = ref(false)
+    const setup     = ref(false)
+    const loading   = ref(true)
+    const role      = ref<'admin' | 'user' | null>(null)
+    const username  = ref<string | null>(null)
+    const userId    = ref<string | null>(null)
+
+    const isAdmin = computed(() => role.value === 'admin')
 
     async function checkStatus() {
         try {
-            const res = await fetch('/api/auth/status')
+            const res  = await fetch('/api/auth/status')
             const data = await res.json()
-            setup.value = data.setup
+            setup.value    = data.setup
             loggedIn.value = data.loggedIn
+            role.value     = data.role     ?? null
+            username.value = data.username ?? null
+            userId.value   = data.userId   ?? null
         } catch {
             loggedIn.value = false
         } finally {
@@ -19,30 +27,36 @@ export const useAuthStore = defineStore('auth', () => {
         }
     }
 
-    async function login(username: string, password: string): Promise<string | null> {
-        const res = await fetch('/api/auth/login', {
-            method: 'POST',
+    async function login(u: string, password: string): Promise<string | null> {
+        const res  = await fetch('/api/auth/login', {
+            method : 'POST',
             headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ username, password })
+            body   : JSON.stringify({ username: u, password }),
         })
         const data = await res.json()
         if (res.ok) {
             loggedIn.value = true
+            role.value     = data.user?.role     ?? null
+            username.value = data.user?.username ?? null
+            userId.value   = data.user?.id       ?? null
             return null
         }
         return data.error
     }
 
-    async function setupAccount(username: string, password: string): Promise<string | null> {
-        const res = await fetch('/api/auth/setup', {
-            method: 'POST',
+    async function setupAccount(u: string, password: string): Promise<string | null> {
+        const res  = await fetch('/api/auth/setup', {
+            method : 'POST',
             headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ username, password })
+            body   : JSON.stringify({ username: u, password }),
         })
         const data = await res.json()
         if (res.ok) {
             loggedIn.value = true
-            setup.value = true
+            setup.value    = true
+            role.value     = data.user?.role     ?? 'admin'
+            username.value = data.user?.username ?? u
+            userId.value   = data.user?.id       ?? null
             return null
         }
         return data.error
@@ -51,7 +65,10 @@ export const useAuthStore = defineStore('auth', () => {
     async function logout() {
         await fetch('/api/auth/logout', { method: 'POST' })
         loggedIn.value = false
+        role.value     = null
+        username.value = null
+        userId.value   = null
     }
 
-    return { loggedIn, setup, loading, checkStatus, login, setupAccount, logout }
-})
+    return { loggedIn, setup, loading, role, username, userId, isAdmin, checkStatus, login, setupAccount, logout }
+})

src/views/DashboardView.vue

@@ -80,6 +80,48 @@
 
     </div>
 
+    <!-- Widget demandes -->
+    <div class="settings-card flex flex-col gap-3 mb-6">
+      <div class="flex items-center justify-between">
+        <h2 class="text-sm font-medium text-secondary">
+          {{ auth.isAdmin ? 'Demandes en attente' : 'Mes demandes' }}
+        </h2>
+        <div class="flex items-center gap-2">
+          <span v-if="auth.isAdmin && pendingRequests.length > 0" class="text-xs px-2 py-0.5 rounded-full bg-yellow-500/10 text-yellow-400 border border-yellow-500/20">
+            {{ pendingRequests.length }} en attente
+          </span>
+          <RouterLink to="/requests" class="text-xs text-muted hover:text-accent transition">Voir tout →</RouterLink>
+        </div>
+      </div>
+      <div v-if="loadingRequests" class="flex items-center gap-2 text-muted text-xs py-2">
+        <div class="w-3 h-3 border border-border border-t-accent rounded-full animate-spin" />
+        Chargement…
+      </div>
+      <div v-else-if="pendingRequests.length === 0" class="text-xs text-muted py-2">
+        {{ auth.isAdmin ? 'Aucune demande en attente' : 'Aucune demande' }}
+      </div>
+      <div v-else class="flex flex-col divide-y divide-border/50">
+        <div v-for="req in pendingRequests" :key="req.id" class="flex items-center justify-between gap-3 py-2.5 first:pt-0 last:pb-0">
+          <div class="flex-1 min-w-0">
+            <RouterLink :to="`/series/${req.serieId}`" class="text-xs text-primary truncate hover:text-accent transition block">{{ req.serieName }}</RouterLink>
+            <p v-if="auth.isAdmin" class="text-[11px] text-muted mt-0.5">
+              {{ req.requesters.length }} demandeur{{ req.requesters.length > 1 ? 's' : '' }}
+              · {{ req.requesters.map((r: any) => r.username).join(', ') }}
+            </p>
+          </div>
+          <span class="text-[10px] px-1.5 py-0.5 rounded border shrink-0"
+                :class="{
+                  'bg-yellow-500/10 text-yellow-400 border-yellow-500/20': req.status === 'pending',
+                  'bg-blue-500/10 text-blue-400 border-blue-500/20'      : req.status === 'approved',
+                  'bg-green-500/10 text-green-400 border-green-500/20'   : req.status === 'completed',
+                  'bg-red-500/10 text-red-400 border-red-500/20'         : req.status === 'rejected',
+                }">
+            {{ { pending: 'Attente', approved: 'Approuvée', completed: 'Dispo', rejected: 'Refusée' }[req.status as string] }}
+          </span>
+        </div>
+      </div>
+    </div>
+
     <!-- Panneau debug -->
     <div v-if="devMode" class="flex flex-col gap-3">
       <div class="flex items-center gap-2">
@@ -129,7 +171,10 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue'
+import { useAuthStore }   from '@/stores/auth'
+import { RouterLink }     from 'vue-router'
 
+const auth            = useAuthStore()
 const loadingTorrents = ref(true)
 const loadingNotifs   = ref(true)
 const devMode         = ref(false)
@@ -137,6 +182,8 @@ const debug           = ref<any>(null)
 const stats           = ref({ catalogue: 0, imported: 0, downloading: 0, errors: 0 })
 const activeTorrents  = ref<any[]>([])
 const recentNotifs    = ref<any[]>([])
+const pendingRequests = ref<any[]>([])
+const loadingRequests = ref(true)
 
 let interval: ReturnType<typeof setInterval> | null = null
 
@@ -198,6 +245,21 @@ async function fetchNotifs() {
   }
 }
 
+async function fetchRequests() {
+  loadingRequests.value = true
+  try {
+    const res = await fetch('/api/requests', { credentials: 'include' })
+    if (res.ok) {
+      const all = await res.json()
+      pendingRequests.value = auth.isAdmin
+        ? all.filter((r: any) => r.status === 'pending').slice(0, 5)
+        : all.slice(0, 5)
+    }
+  } catch {} finally {
+    loadingRequests.value = false
+  }
+}
+
 function formatSize(bytes: number): string {
   if (!bytes) return '0 B'
   const units = ['B', 'KB', 'MB', 'GB', 'TB']
@@ -223,7 +285,7 @@ function formatRelative(iso: string): string {
 }
 
 onMounted(() => {
-  Promise.all([fetchStats(), fetchTorrents(), fetchNotifs(), fetchSettings()])
+  Promise.all([fetchStats(), fetchTorrents(), fetchNotifs(), fetchSettings(), fetchRequests()])
   interval = setInterval(() => {
     fetchTorrents()
     if (devMode.value) fetchDebug()

src/views/InviteView.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="min-h-screen bg-shell flex items-center justify-center px-4">
+    <div class="w-full max-w-sm">
+
+      <!-- Logo -->
+      <div class="flex items-center justify-center gap-2.5 mb-8">
+        <svg class="w-8 h-8" viewBox="0 0 130 135" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path fill="var(--gold)" d="m113.85,12.8c-1.94,3.57-3.8,7.09-5.76,10.55-3.6,6.35-7.31,12.65-10.9,19.01-1.69,3-3.22,6.08-4.44,9.49,3.25-2.46,6.44-5.03,9.78-7.36,2.92-2.04,5.95-3.96,9.07-5.67,8.59-4.72,19.29-1.78,24.4,6.54.42.68,1.3,1.16,1.52,1.87.26.83.05,2.62,0,2.62-3.94.13-3.45,5.79-7.59,5.89-3.46.08-6.9,1.25-10.37,1.37-6.78.25-13.48.64-19.32,4.57-1.91,1.29-3.5,3.05-4.97,4.36.21.86.19,1.13.3,1.2,4.42,2.7,8.79,5.49,13.31,8,2.11,1.17,3.66,3.77,2.82,6.63-1.18,3.97-2.64,7.86-4.04,11.76-.48,1.33-1.11,2.61-1.88,4.41,5.87,2.14,11.63,4.26,17.41,6.35,3.43,1.24,6.86,2.47,10.31,3.65,7.38,2.52,9.16,9.54,11.52,15.53,1.04,2.65-.75,6.75-2.11,9.81-.46,1.04-3.53,1.22-5.42,1.26-1.78.03-3.57-.64-4.46-.83-5.97-8.4-11.54-15.98-23.28-14.7.1-.32.21-.65.31-.97,2.32-.52,4.64-1.05,6.97-1.57.03-.22.06-.45.09-.67-2.97-1.18-5.94-2.37-8.92-3.52-1.33-.52-2.7-.93-4.03-1.45-4.83-1.9-4.79-1.89-8.26,2.27-4.31,5.17-10.22,8.13-16.3,11.01.69-.84,1.31-1.75,2.1-2.48.76-.71,1.69-1.22,2.26-2.29-4.9,1.87-9.81,3.74-14.71,5.61-.13-.22-.26-.45-.39-.67.86-.62,1.72-1.24,2.58-1.85-.04-.17-.08-.34-.12-.51-2.94.65-5.93,1.11-8.8,2-4.18,1.29-8.27,2.87-12.38,4.38-2.59.95-5.12,1.51-7.19-.14,11.84-9.4,25.16-17.2,36.59-28.93-4.21-3.65-8.1-7.01-11.98-10.38.15-.43.3-.87.45-1.3,1.61-.09,3.3-.55,4.81-.21,4.14.92,8.21,2.18,12.66,3.4,3.58-6.6,7.1-13.29,7.3-20.58-6.68-2.65-9.79,4.13-15.7,5.76,2.55-2.92,4.54-5.19,6.52-7.46-.2-.17-.39-.33-.59-.5-5.58,4.28-16.89,16.06-24.16,29.07-.19-.29-.37-.59-.55-.87-.81,1.46-1.57,2.83-2.33,4.21l-1.04-.35c1.58-5.71,2.86-11.53,4.81-17.11,2.67-7.67,6.32-15.02,8.71-22.76,4.87-15.8,13.75-29.67,20.7-44.45.65-1.38,1.28-2.77,1.88-4.17,1.58-3.68,3.97-7.37-.47-11.13.3-.16.59-.33.89-.49,7.13,4.08,14.25,8.15,22.38,12.8Z"/>
+          <path fill="var(--gold)" d="m7.03,71.72c.25-.48.39-1.21.77-1.38,1.1-.49,2.62-1.38,3.41-.98,2.58,1.28,4.8.38,7.06-.48,2.76-1.04,5.57-2.05,8.14-3.47,1.22-.67,2.63-2.19,2.77-3.46,1.03-9.65,3.6-18.83,7.54-27.67.24-.53.3-1.14-.17-2.03-1.01,1.63-1.78,3.49-3.08,4.85-2.08,2.21-4.42,4.2-6.82,6.07-1.39,1.09-3.02,2.05-4.7,2.54-1.31.39-3.26.51-4.24-.2-4.32-3.13-8.38-6.6-12.71-10.09,2.03-2.48,3.73-4.2,7.18-3.5,1.74.36,4.04-.43,5.67-1.4,5.43-3.21,10.65-6.79,16.01-10.13,5.58-3.48,11.45-3.46,17.13-.53,4.5,2.32,8.73,5.19,13.03,7.9,1.47.93,2.35,2.23,1.34,4.11-2.08,3.88-4.01,7.85-6.22,11.66-1.95,3.37-4.2,6.56-6.47,10.06,2.04.96,3.78,1.67,5.4,2.58,2.25,1.27,3.25,3.24,2.97,5.87-.33,3.15-1.59,5.64-4.68,6.84-.84.33-1.83.72-2.65.56-5.8-1.1-9.79,2.93-14.43,5.04-1.2.54-2.19,1.83-2.95,2.99-3.3,5.08-8.83,6.7-13.83,9.17-.53.26-1.22.74-1.34,1.24-1.76,7.82-3.45,15.65-4.58,24.09,4.1-2.32,8.19-4.65,12.29-6.97.12.15.23.31.35.46-1.05,1.17-2.1,2.34-3.15,3.52l.5.66c5.73-2.61,10.97-5.98,15.24-10.87.28.22.57.43.85.65-1.83,3.39-3.78,6.72-5.44,10.2-.95,1.99-1.38,4.21-2.13,6.3-.48,1.33-.84,2.82-1.71,3.86-2.61,3.13-5.46,6.06-8.19,9.09-.45.5-.76,1.12-1.14,1.68-.66.99-1.21,2.09-2.02,2.94-.39.41-1.58.71-1.85.46-2.26-2.14-5.5,2.25-7.78-1.52-1.9-3.13-5.35-5.33-7.23-8.47-2.37-3.95-5.75-7.84-5.14-12.85.51-4.17,2.16-8.18,2.89-12.34,1.43-8.11,2.6-16.27,3.82-24.42.14-.95-.11-1.95-.19-2.93.14.09.29.17.43.26Z"/>
+        </svg>
+        <span class="text-2xl font-bold text-primary tracking-wide">FanKarr</span>
+      </div>
+
+      <!-- Chargement -->
+      <div v-if="status === 'loading'" class="settings-card p-8 text-center text-sm text-muted">
+        Vérification du lien…
+      </div>
+
+      <!-- Lien invalide -->
+      <div v-else-if="status === 'invalid'" class="settings-card p-8 flex flex-col gap-3 text-center">
+        <p class="text-sm font-semibold text-red-400">Lien invalide</p>
+        <p class="text-sm text-muted">{{ invalidReason }}</p>
+      </div>
+
+      <!-- Succès -->
+      <div v-else-if="status === 'done'" class="settings-card p-8 flex flex-col gap-4 text-center">
+        <p class="text-sm font-semibold text-green-400">Compte créé !</p>
+        <p class="text-sm text-muted">Tu peux maintenant te connecter.</p>
+        <RouterLink to="/auth" class="btn-primary w-full py-2.5 text-center">Se connecter</RouterLink>
+      </div>
+
+      <!-- Formulaire d'inscription -->
+      <div v-else class="settings-card p-8 flex flex-col gap-5">
+        <div>
+          <p class="text-xs text-accent font-medium mb-1">Invitation FanKarr</p>
+          <h1 class="text-lg font-semibold text-primary">Créer un compte</h1>
+          <p v-if="note" class="text-xs text-muted mt-1">{{ note }}</p>
+        </div>
+
+        <div class="flex flex-col gap-4">
+          <div>
+            <label class="settings-label mb-1.5">Identifiant</label>
+            <input v-model="username" type="text" placeholder="username" class="settings-input" @keyup.enter="submit" />
+          </div>
+          <div>
+            <label class="settings-label mb-1.5">Mot de passe</label>
+            <input v-model="password" type="password" placeholder="••••••••" class="settings-input" @keyup.enter="submit" />
+          </div>
+          <div>
+            <label class="settings-label mb-1.5">Confirmer</label>
+            <input v-model="confirm" type="password" placeholder="••••••••" class="settings-input" @keyup.enter="submit" />
+          </div>
+
+          <p v-if="error" class="text-xs text-red-400">{{ error }}</p>
+
+          <button @click="submit" :disabled="submitting" class="btn-primary w-full py-2.5 mt-1">
+            {{ submitting ? '…' : 'Créer le compte' }}
+          </button>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRoute }       from 'vue-router'
+
+const route = useRoute()
+const code  = route.params.code as string
+
+type Status = 'loading' | 'ready' | 'invalid' | 'done'
+
+const status        = ref<Status>('loading')
+const invalidReason = ref('')
+const note          = ref<string | null>(null)
+
+const username   = ref('')
+const password   = ref('')
+const confirm    = ref('')
+const error      = ref<string | null>(null)
+const submitting = ref(false)
+
+onMounted(async () => {
+  const res  = await fetch(`/api/invites/${code}/info`)
+  const data = await res.json()
+  if (!res.ok || !data.valid) {
+    invalidReason.value = data.reason ?? 'Lien invalide'
+    status.value = 'invalid'
+    return
+  }
+  note.value   = data.note
+  status.value = 'ready'
+})
+
+async function submit() {
+  error.value = null
+  if (!username.value || !password.value || !confirm.value) {
+    error.value = 'Tous les champs sont requis'; return
+  }
+  if (password.value !== confirm.value) {
+    error.value = 'Les mots de passe ne correspondent pas'; return
+  }
+
+  submitting.value = true
+  const res  = await fetch(`/api/invites/${code}/register`, {
+    method : 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body   : JSON.stringify({ username: username.value, password: password.value }),
+  })
+  const data = await res.json()
+  submitting.value = false
+
+  if (!res.ok) { error.value = data.error; return }
+  status.value = 'done'
+}
+</script>

src/views/RequestsView.vue

@@ -0,0 +1,259 @@
+<template>
+  <div class="px-4 md:px-8 py-8 max-w-4xl">
+
+    <div class="flex items-center justify-between mb-6">
+      <div>
+        <h1 class="text-lg font-semibold text-primary">Demandes</h1>
+        <p class="text-sm text-muted mt-0.5">
+          {{ auth.isAdmin ? 'Toutes les demandes des utilisateurs.' : 'Vos demandes de séries.' }}
+        </p>
+      </div>
+      <!-- Filtres statuts -->
+      <div class="flex items-center gap-1">
+        <button
+            v-for="f in filters" :key="f.value"
+            @click="activeFilter = f.value"
+            class="px-3 py-1.5 rounded-lg text-xs transition"
+            :class="activeFilter === f.value
+              ? 'bg-accent text-white'
+              : 'text-muted hover:text-primary hover:bg-hover'"
+        >
+          {{ f.label }}
+          <span v-if="counts[f.value]" class="ml-1 opacity-70">({{ counts[f.value] }})</span>
+        </button>
+      </div>
+    </div>
+
+    <!-- Statistiques (admin) -->
+    <div v-if="auth.isAdmin" class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
+      <div class="settings-card flex flex-col gap-1">
+        <span class="text-xs text-muted">En attente</span>
+        <span class="text-2xl font-semibold text-yellow-400">{{ counts.pending }}</span>
+      </div>
+      <div class="settings-card flex flex-col gap-1">
+        <span class="text-xs text-muted">Approuvées</span>
+        <span class="text-2xl font-semibold text-blue-400">{{ counts.approved }}</span>
+      </div>
+      <div class="settings-card flex flex-col gap-1">
+        <span class="text-xs text-muted">Disponibles</span>
+        <span class="text-2xl font-semibold text-green-400">{{ counts.completed }}</span>
+      </div>
+      <div class="settings-card flex flex-col gap-1">
+        <span class="text-xs text-muted">Refusées</span>
+        <span class="text-2xl font-semibold" :class="counts.rejected > 0 ? 'text-red-400' : 'text-muted'">{{ counts.rejected }}</span>
+      </div>
+    </div>
+
+    <!-- Liste -->
+    <div v-if="loading" class="flex items-center gap-2 text-muted text-sm py-8">
+      <div class="w-4 h-4 border border-border border-t-accent rounded-full animate-spin" />
+      Chargement…
+    </div>
+
+    <div v-else-if="filtered.length === 0" class="settings-card text-sm text-muted py-8 text-center">
+      Aucune demande {{ activeFilter !== 'all' ? `avec ce statut` : '' }}.
+    </div>
+
+    <div v-else class="flex flex-col gap-3">
+      <div
+          v-for="req in filtered" :key="req.id"
+          class="settings-card flex flex-col gap-3"
+      >
+        <div class="flex items-start justify-between gap-4 flex-wrap">
+          <!-- Infos série -->
+          <div class="flex-1 min-w-0">
+            <div class="flex items-center gap-2 flex-wrap">
+              <RouterLink :to="`/series/${req.serieId}`" class="text-sm font-semibold text-primary hover:text-accent transition truncate">
+                {{ req.serieName }}
+              </RouterLink>
+              <span class="text-xs px-2 py-0.5 rounded border shrink-0" :class="statusClass(req.status)">
+                {{ statusLabel(req.status) }}
+              </span>
+            </div>
+            <!-- Saisons fusionnées -->
+            <p class="text-xs text-muted mt-1">
+              <template v-if="mergedSeasons(req).length === 0">Toutes les saisons</template>
+              <template v-else>
+                Saisons : {{ mergedSeasons(req).map(s => s === 0 ? 'SP' : `S${s}`).join(', ') }}
+              </template>
+            </p>
+            <!-- Message de refus -->
+            <p v-if="req.rejectionMessage" class="text-xs text-red-400 mt-1">
+              Refus : {{ req.rejectionMessage }}
+            </p>
+          </div>
+
+          <!-- Actions admin -->
+          <div v-if="auth.isAdmin" class="flex items-center gap-1 shrink-0">
+            <button
+                v-if="req.status === 'pending' || req.status === 'rejected'"
+                @click="approve(req)"
+                class="btn-ghost text-xs text-blue-400 hover:text-blue-300"
+            >Approuver</button>
+            <button
+                v-if="req.status === 'approved'"
+                @click="complete(req)"
+                class="btn-ghost text-xs text-green-400 hover:text-green-300"
+            >Marquer disponible</button>
+            <button
+                v-if="req.status !== 'rejected'"
+                @click="openRejectModal(req)"
+                class="btn-ghost text-xs text-red-400 hover:text-red-300"
+            >Refuser</button>
+            <button @click="remove(req)" class="btn-ghost text-xs text-muted hover:text-red-400">Supprimer</button>
+          </div>
+        </div>
+
+        <!-- Requesters (admin) -->
+        <div v-if="auth.isAdmin && req.requesters.length > 0" class="flex flex-wrap gap-2">
+          <div v-for="r in req.requesters" :key="r.userId"
+               class="flex items-center gap-1.5 px-2 py-1 rounded-lg bg-shell border border-border text-xs">
+            <span class="w-4 h-4 rounded-full bg-border flex items-center justify-center text-[9px] font-semibold text-muted shrink-0">
+              {{ r.username[0].toUpperCase() }}
+            </span>
+            <span class="text-muted">{{ r.username }}</span>
+            <span v-if="r.seasons.length > 0" class="text-muted/60">
+              ({{ r.seasons.map((s: number) => s === 0 ? 'SP' : `S${s}`).join(', ') }})
+            </span>
+          </div>
+        </div>
+
+        <p class="text-[11px] text-muted">Demandé {{ formatRelative(req.createdAt) }}</p>
+      </div>
+    </div>
+
+    <!-- Modal refus -->
+    <Teleport to="body">
+      <div v-if="rejectModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center px-4" @click.self="rejectModal = null">
+        <div class="settings-card w-full max-w-sm flex flex-col gap-4 p-6">
+          <p class="text-sm font-semibold text-primary">Refuser la demande</p>
+          <p class="text-xs text-muted truncate">{{ rejectModal.serieName }}</p>
+          <div>
+            <label class="settings-label mb-1.5">Message de refus (optionnel)</label>
+            <input v-model="rejectMessage" type="text" class="settings-input" placeholder="Raison du refus…" @keyup.enter="confirmReject" />
+          </div>
+          <div class="flex gap-2 justify-end">
+            <button @click="rejectModal = null" class="btn-ghost">Annuler</button>
+            <button @click="confirmReject" class="px-4 py-2 rounded-lg border border-red-500/30 text-red-400 bg-red-500/10 hover:bg-red-500/20 transition text-xs">
+              Refuser
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useAuthStore } from '@/stores/auth'
+
+interface Requester { userId: string; username: string; seasons: number[]; requestedAt: string }
+interface SerieRequest {
+  id: string; serieId: number; serieName: string
+  requesters: Requester[]; status: string
+  rejectionMessage?: string; createdAt: string; updatedAt: string
+}
+
+const auth    = useAuthStore()
+const loading = ref(true)
+const requests = ref<SerieRequest[]>([])
+
+const activeFilter = ref<string>('all')
+const filters = [
+  { value: 'all',       label: 'Toutes'    },
+  { value: 'pending',   label: 'En attente' },
+  { value: 'approved',  label: 'Approuvées' },
+  { value: 'completed', label: 'Disponibles' },
+  { value: 'rejected',  label: 'Refusées'   },
+]
+
+const counts = computed(() => ({
+  all      : requests.value.length,
+  pending  : requests.value.filter(r => r.status === 'pending').length,
+  approved : requests.value.filter(r => r.status === 'approved').length,
+  completed: requests.value.filter(r => r.status === 'completed').length,
+  rejected : requests.value.filter(r => r.status === 'rejected').length,
+}))
+
+const filtered = computed(() =>
+  activeFilter.value === 'all'
+    ? requests.value
+    : requests.value.filter(r => r.status === activeFilter.value)
+)
+
+async function load() {
+  loading.value = true
+  const res = await fetch('/api/requests', { credentials: 'include' })
+  if (res.ok) requests.value = await res.json()
+  loading.value = false
+}
+
+onMounted(load)
+
+// ── Actions admin ─────────────────────────────────────────────
+async function approve(req: SerieRequest) {
+  const res = await fetch(`/api/requests/${req.id}`, {
+    method: 'PATCH', headers: { 'Content-Type': 'application/json' }, credentials: 'include',
+    body: JSON.stringify({ action: 'approve' }),
+  })
+  if (res.ok) load()
+}
+
+async function complete(req: SerieRequest) {
+  const res = await fetch(`/api/requests/${req.id}`, {
+    method: 'PATCH', headers: { 'Content-Type': 'application/json' }, credentials: 'include',
+    body: JSON.stringify({ action: 'complete' }),
+  })
+  if (res.ok) load()
+}
+
+async function remove(req: SerieRequest) {
+  if (!confirm(`Supprimer la demande pour "${req.serieName}" ?`)) return
+  await fetch(`/api/requests/${req.id}`, { method: 'DELETE', credentials: 'include' })
+  load()
+}
+
+const rejectModal   = ref<SerieRequest | null>(null)
+const rejectMessage = ref('')
+function openRejectModal(req: SerieRequest) { rejectModal.value = req; rejectMessage.value = '' }
+async function confirmReject() {
+  if (!rejectModal.value) return
+  await fetch(`/api/requests/${rejectModal.value.id}`, {
+    method: 'PATCH', headers: { 'Content-Type': 'application/json' }, credentials: 'include',
+    body: JSON.stringify({ action: 'reject', rejectionMessage: rejectMessage.value || undefined }),
+  })
+  rejectModal.value = null
+  load()
+}
+
+// ── Helpers ───────────────────────────────────────────────────
+function mergedSeasons(req: SerieRequest): number[] {
+  if (req.requesters.some(r => r.seasons.length === 0)) return []
+  const all = new Set<number>()
+  req.requesters.forEach(r => r.seasons.forEach(s => all.add(s)))
+  return [...all].sort((a, b) => a - b)
+}
+
+function statusLabel(s: string) {
+  return { pending: 'En attente', approved: 'Approuvée', rejected: 'Refusée', completed: 'Disponible' }[s] ?? s
+}
+function statusClass(s: string) {
+  return {
+    pending  : 'bg-yellow-500/10 text-yellow-400 border-yellow-500/20',
+    approved : 'bg-blue-500/10 text-blue-400 border-blue-500/20',
+    rejected : 'bg-red-500/10 text-red-400 border-red-500/20',
+    completed: 'bg-green-500/10 text-green-400 border-green-500/20',
+  }[s] ?? ''
+}
+
+function formatRelative(iso: string): string {
+  const diff = Date.now() - new Date(iso).getTime()
+  const m = Math.floor(diff / 60000), h = Math.floor(diff / 3600000), d = Math.floor(diff / 86400000)
+  if (m < 1) return "à l'instant"
+  if (m < 60) return `il y a ${m}min`
+  if (h < 24) return `il y a ${h}h`
+  return `il y a ${d}j`
+}
+</script>

src/views/SerieView.vue

@@ -17,8 +17,8 @@
       <!-- Hero — poster, titre, métadonnées, synopsis -->
       <SerieHero :serie="data.serie" />
 
-      <!-- Barre d'actions -->
-      <div class="px-4 md:px-8 py-3 flex items-center justify-between gap-3 border-b border-border flex-wrap">
+      <!-- Barre d'actions admin -->
+      <div v-if="auth.isAdmin" class="px-4 md:px-8 py-3 flex items-center justify-between gap-3 border-b border-border flex-wrap">
 
         <!-- Gauche : gestion bibliothèque -->
         <div class="flex items-center gap-2">
@@ -103,6 +103,26 @@
         </div>
       </div>
 
+      <!-- Barre utilisateur (mode demande) -->
+      <div v-if="!auth.isAdmin" class="px-4 md:px-8 py-3 flex items-center justify-between gap-3 border-b border-border flex-wrap">
+        <div v-if="myRequest" class="flex items-center gap-3">
+          <span class="text-xs px-2 py-1 rounded border" :class="requestStatusClass(myRequest.status)">
+            {{ requestStatusLabel(myRequest.status) }}
+          </span>
+          <span v-if="myRequest.status === 'rejected' && myRequest.rejectionMessage" class="text-xs text-muted">
+            {{ myRequest.rejectionMessage }}
+          </span>
+        </div>
+        <div v-else class="text-xs text-muted">Cliquez sur une saison ou un épisode pour faire une demande</div>
+        <button
+            v-if="!myRequest || myRequest.status === 'rejected' || myRequest.status === 'completed'"
+            @click="openRequestModal()"
+            class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg bg-accent text-white hover:bg-accent-hover transition"
+        >
+          Demander la série
+        </button>
+      </div>
+
       <!-- Saisons -->
       <div class="px-4 md:px-8 pb-16 flex flex-col gap-4 pt-4">
         <SerieSeasonCard
@@ -117,14 +137,55 @@
             :ep-action-loading="epActionLoading"
             :downloading-season="!!downloadingSeason[season.id]"
             :nfo-support="nfoSupport"
+            :request-mode="!auth.isAdmin"
+            :requested-seasons="requestedSeasonNumbers"
             @toggle="toggleSeason"
             @download="(key, url, magnet, fi, fp, ih) => download(key, url, magnet, fi, fp, ih)"
             @download-season="(s, h) => downloadSeason(s, h)"
             @rename-episode="(ep, s) => renameEpisode(ep, s)"
             @unimport-episode="(ep, s, del) => unimportEpisode(ep, s, del)"
             @unimport-season="(s, del) => unimportSeason(s, del)"
+            @request-season="handleRequestSeason"
+            @request-episode="handleRequestEpisode"
         />
       </div>
+
+      <!-- Modal demande (utilisateurs) -->
+      <Teleport to="body">
+        <div v-if="requestModal" class="fixed inset-0 bg-black/60 flex items-center justify-center z-50 px-4" @click.self="requestModal = false">
+          <div class="bg-card border border-border rounded-xl w-full max-w-sm p-6 flex flex-col gap-5">
+            <div>
+              <p class="text-sm font-semibold text-primary">Demander une série</p>
+              <p class="text-xs text-muted mt-1 truncate">{{ data?.serie?.title }}</p>
+            </div>
+            <div class="flex flex-col gap-2">
+              <p class="text-xs text-muted font-medium">Saisons demandées</p>
+              <label
+                  v-for="season in data?.seasons"
+                  :key="season.id"
+                  class="flex items-center gap-3 cursor-pointer select-none"
+              >
+                <input
+                    type="checkbox"
+                    :value="season.season_number"
+                    v-model="requestSeasons"
+                    class="w-4 h-4 rounded border-border accent-accent"
+                />
+                <span class="text-sm text-primary">
+                  {{ season.season_number === 0 ? 'Spéciaux' : `Saison ${season.season_number}` }}
+                  <span v-if="season.title && season.title !== `Saison ${season.season_number}`" class="text-muted font-normal">— {{ season.title }}</span>
+                </span>
+              </label>
+            </div>
+            <div class="flex items-center justify-end gap-2">
+              <button @click="requestModal = false" class="btn-secondary text-xs">Annuler</button>
+              <button @click="submitRequest" :disabled="requestSeasons.length === 0" class="btn-primary text-xs disabled:opacity-50">
+                Envoyer la demande
+              </button>
+            </div>
+          </div>
+        </div>
+      </Teleport>
     </template>
 
     <!-- Modal désimport série -->
@@ -168,6 +229,7 @@
 import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { useSeriesStore } from '@/stores/series'
+import { useAuthStore }   from '@/stores/auth'
 import { useToast } from '@/composables/useToast'
 import ManualImportModal from '@/components/ManualImportModal.vue'
 import SerieHero from '@/components/serie/SerieHero.vue'
@@ -176,8 +238,90 @@ import type { Season } from '@/stores/series'
 
 const route  = useRoute()
 const store  = useSeriesStore()
+const auth   = useAuthStore()
 const { add: toast } = useToast()
 
+// ── Mode demande (utilisateurs non-admin) ─────────────────────
+const myRequest      = ref<any>(null)   // demande existante de l'utilisateur pour cette série
+const requestModal   = ref(false)
+const requestSeasons = ref<number[]>([]) // saisons cochées dans le modal
+
+const requestedSeasonNumbers = computed<number[]>(() => {
+  if (!myRequest.value) return []
+  // Trouver l'entrée de l'utilisateur connecté dans la demande fusionnée
+  const r = myRequest.value.requesters?.find((r: any) => r.userId === auth.userId)
+  // [] = toutes les saisons demandées → on retourne toutes les saisons de la série
+  if (r && r.seasons.length === 0) return data.value?.seasons?.map((s: any) => s.season_number) ?? []
+  return r?.seasons ?? []
+})
+
+async function fetchMyRequest() {
+  try {
+    const res = await fetch('/api/requests', { credentials: 'include' })
+    if (res.ok) {
+      const list = await res.json()
+      myRequest.value = list.find((r: any) =>
+        r.serieId === Number(route.params.id) &&
+        r.status !== 'rejected' && r.status !== 'completed'
+      ) ?? null
+    }
+  } catch {}
+}
+
+function openRequestModal(preselectedSeason?: number) {
+  // Pré-cocher soit la saison cliquée, soit toutes les saisons disponibles
+  if (preselectedSeason !== undefined) {
+    requestSeasons.value = [preselectedSeason]
+  } else {
+    requestSeasons.value = data.value?.seasons?.map((s: any) => s.season_number) ?? []
+  }
+  requestModal.value = true
+}
+
+function handleRequestSeason(seasonNumber: number) {
+  openRequestModal(seasonNumber)
+}
+
+function handleRequestEpisode(seasonNumber: number, _episodeId: number) {
+  openRequestModal(seasonNumber)
+}
+
+async function submitRequest() {
+  if (!data.value) return
+  try {
+    const res = await fetch('/api/requests', {
+      method : 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'include',
+      body: JSON.stringify({
+        serieId  : Number(route.params.id),
+        serieName: data.value.serie.title,
+        seasons  : requestSeasons.value,
+      }),
+    })
+    if (res.ok) {
+      myRequest.value  = await res.json()
+      requestModal.value = false
+      toast('Demande envoyée ✓', 'success')
+    } else {
+      const d = await res.json()
+      toast(d.error ?? 'Erreur', 'error')
+    }
+  } catch { toast('Impossible de contacter le serveur', 'error') }
+}
+
+function requestStatusLabel(status: string) {
+  return { pending: 'En attente', approved: 'Approuvée', rejected: 'Refusée', completed: 'Disponible' }[status] ?? status
+}
+function requestStatusClass(status: string) {
+  return {
+    pending  : 'bg-yellow-500/10 text-yellow-400 border-yellow-500/20',
+    approved : 'bg-blue-500/10 text-blue-400 border-blue-500/20',
+    rejected : 'bg-red-500/10 text-red-400 border-red-500/20',
+    completed: 'bg-green-500/10 text-green-400 border-green-500/20',
+  }[status] ?? ''
+}
+
 const collapsedSeasons   = ref<Set<number>>(new Set())
 const downloading        = ref<string[]>([])
 const downloaded         = ref<string[]>([])
@@ -558,6 +702,7 @@ const closeMenus = () => { downloadMenuOpen.value = false }
 
 onMounted(() => {
   load(); fetchSettings(); fetchOrganized(); fetchActiveDownloads(); fetchRssSync()
+  if (!auth.isAdmin) fetchMyRequest()
   pollTimer = setInterval(fetchActiveDownloads, 5000)
   document.addEventListener('click', closeMenus)
 })

src/views/settings/JellyfinView.vue

@@ -0,0 +1,240 @@
+<template>
+  <div class="flex flex-col gap-6">
+
+    <!-- ── Connexion Jellyfin ─────────────────────────────────── -->
+    <section class="flex flex-col gap-4">
+      <div>
+        <h2 class="text-base font-semibold text-primary">Serveur Jellyfin</h2>
+        <p class="text-sm text-muted mt-1">
+          Configurez la connexion à votre serveur Jellyfin pour synchroniser les utilisateurs
+          et permettre l'authentification depuis le plugin.
+        </p>
+      </div>
+
+      <div class="settings-card flex flex-col gap-4">
+        <div>
+          <label class="settings-label mb-1.5">URL du serveur</label>
+          <input v-model="jellyfinUrl" type="url" class="settings-input" placeholder="http://jellyfin:8096" />
+          <p class="text-xs text-muted mt-1">URL accessible depuis FanKarr (réseau local ou Docker)</p>
+        </div>
+        <div>
+          <label class="settings-label mb-1.5">Token admin Jellyfin</label>
+          <input v-model="jellyfinAdminToken" type="password" class="settings-input"
+            :placeholder="hasToken ? '••••••••••••••••••••• (configuré)' : 'Tableau de bord → Clés API'" />
+          <p class="text-xs text-muted mt-1">
+            Dans Jellyfin : Tableau de bord → Clés API → Créer une clé
+          </p>
+        </div>
+
+        <div class="flex items-center gap-3 flex-wrap">
+          <button @click="save" :disabled="saving" class="btn-primary">
+            {{ saving ? 'Enregistrement…' : 'Enregistrer' }}
+          </button>
+          <button @click="testConnection" :disabled="testing" class="btn-secondary">
+            {{ testing ? 'Test…' : 'Tester la connexion' }}
+          </button>
+          <span v-if="testResult" class="text-xs" :class="testResult.ok ? 'text-green-400' : 'text-red-400'">
+            {{ testResult.ok ? `Connecté — Jellyfin ${testResult.version}` : testResult.error }}
+          </span>
+          <span v-if="saved" class="text-xs text-green-400">Enregistré.</span>
+        </div>
+      </div>
+    </section>
+
+    <!-- ── Synchronisation des utilisateurs ──────────────────── -->
+    <section class="flex flex-col gap-4">
+      <div>
+        <h2 class="text-base font-semibold text-primary">Synchronisation des utilisateurs</h2>
+        <p class="text-sm text-muted mt-1">
+          Importe les utilisateurs Jellyfin en tant que comptes FanKarr.
+          Les comptes existants sont ignorés. Les utilisateurs pourront ensuite se connecter
+          via le plugin Jellyfin sans configuration supplémentaire.
+        </p>
+      </div>
+
+      <div class="settings-card flex flex-col gap-4">
+        <div v-if="syncResult" class="flex flex-col gap-1">
+          <p class="text-sm text-primary font-medium">
+            {{ syncResult.created }} compte{{ syncResult.created > 1 ? 's' : '' }} créé{{ syncResult.created > 1 ? 's' : '' }}
+            · {{ syncResult.skipped }} ignoré{{ syncResult.skipped > 1 ? 's' : '' }}
+          </p>
+          <p v-if="syncResult.users.length > 0" class="text-xs text-muted">
+            Nouveaux : {{ syncResult.users.join(', ') }}
+          </p>
+        </div>
+
+        <button @click="syncUsers" :disabled="syncing || !hasToken" class="btn-secondary w-fit disabled:opacity-50">
+          {{ syncing ? 'Synchronisation…' : 'Synchroniser maintenant' }}
+        </button>
+        <p v-if="syncError" class="text-xs text-red-400">{{ syncError }}</p>
+        <p v-if="!hasToken" class="text-xs text-muted">Configurez d'abord le token admin.</p>
+      </div>
+    </section>
+
+    <!-- ── Token API utilisateur ──────────────────────────────── -->
+    <section class="flex flex-col gap-4">
+      <div>
+        <h2 class="text-base font-semibold text-primary">Token API personnel</h2>
+        <p class="text-sm text-muted mt-1">
+          Utilisez ce token pour vous authentifier sur l'API publique FanKarr
+          (ex : configuration manuelle du plugin Jellyfin).
+        </p>
+      </div>
+
+      <div class="settings-card flex flex-col gap-3">
+        <div class="flex items-center gap-2">
+          <code class="flex-1 text-xs bg-shell px-3 py-2 rounded-lg border border-border text-muted font-mono truncate">
+            {{ showToken ? myToken : '••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••' }}
+          </code>
+          <button @click="showToken = !showToken" class="btn-ghost text-xs shrink-0">
+            {{ showToken ? 'Masquer' : 'Afficher' }}
+          </button>
+          <button @click="copyToken" class="btn-ghost text-xs shrink-0">
+            {{ tokenCopied ? 'Copié !' : 'Copier' }}
+          </button>
+        </div>
+        <button @click="regenerateToken" class="btn-ghost text-xs text-red-400 hover:text-red-300 w-fit">
+          Regénérer le token
+        </button>
+        <p class="text-xs text-muted">
+          Endpoint auth plugin :
+          <code class="bg-shell px-1.5 py-0.5 rounded text-xs">POST {{ origin }}/api/v1/auth/jellyfin</code>
+        </p>
+      </div>
+    </section>
+
+    <!-- ── Référence API ──────────────────────────────────────── -->
+    <section class="flex flex-col gap-3">
+      <h2 class="text-base font-semibold text-primary">Référence API v1</h2>
+      <div class="settings-card overflow-x-auto">
+        <table class="w-full text-xs">
+          <thead>
+            <tr class="border-b border-border">
+              <th class="text-left px-3 py-2 text-muted font-medium">Méthode</th>
+              <th class="text-left px-3 py-2 text-muted font-medium">Endpoint</th>
+              <th class="text-left px-3 py-2 text-muted font-medium">Description</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-border/50">
+            <tr v-for="ep in apiEndpoints" :key="ep.path">
+              <td class="px-3 py-2">
+                <span class="font-mono font-semibold" :class="methodClass(ep.method)">{{ ep.method }}</span>
+              </td>
+              <td class="px-3 py-2">
+                <code class="text-muted">{{ ep.path }}</code>
+              </td>
+              <td class="px-3 py-2 text-muted">{{ ep.desc }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+
+const jellyfinUrl        = ref('')
+const jellyfinAdminToken = ref('')
+const hasToken           = ref(false)
+const saving             = ref(false)
+const saved              = ref(false)
+const testing            = ref(false)
+const testResult         = ref<{ ok: boolean; version?: string; error?: string } | null>(null)
+const syncing            = ref(false)
+const syncResult         = ref<{ created: number; skipped: number; users: string[] } | null>(null)
+const syncError          = ref<string | null>(null)
+
+const myToken     = ref('')
+const showToken   = ref(false)
+const tokenCopied = ref(false)
+const origin      = window.location.origin
+
+const apiEndpoints = [
+  { method: 'POST', path: '/api/v1/auth/jellyfin', desc: 'Échanger un token Jellyfin contre un token FanKarr' },
+  { method: 'GET',  path: '/api/v1/auth/me',        desc: 'Infos de l\'utilisateur authentifié' },
+  { method: 'GET',  path: '/api/v1/series/search?q=', desc: 'Rechercher dans le catalogue FanKai' },
+  { method: 'POST', path: '/api/v1/requests',        desc: 'Créer ou mettre à jour une demande' },
+  { method: 'GET',  path: '/api/v1/requests',        desc: 'Récupérer ses propres demandes' },
+]
+
+function methodClass(m: string) {
+  return { GET: 'text-green-400', POST: 'text-blue-400', DELETE: 'text-red-400' }[m] ?? 'text-muted'
+}
+
+async function loadSettings() {
+  const res = await fetch('/api/jellyfin/settings', { credentials: 'include' })
+  if (res.ok) {
+    const d          = await res.json()
+    jellyfinUrl.value = d.jellyfinUrl ?? ''
+    hasToken.value    = d.hasToken ?? false
+  }
+}
+
+async function loadMyToken() {
+  const res = await fetch('/api/auth/me', { credentials: 'include' })
+  if (res.ok) {
+    const d      = await res.json()
+    myToken.value = d.apiToken ?? ''
+  }
+}
+
+onMounted(() => { loadSettings(); loadMyToken() })
+
+async function save() {
+  saving.value = true
+  saved.value  = false
+  const body: Record<string, string> = { jellyfinUrl: jellyfinUrl.value }
+  if (jellyfinAdminToken.value) body.jellyfinAdminToken = jellyfinAdminToken.value
+  const res = await fetch('/api/jellyfin/settings', {
+    method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include',
+    body: JSON.stringify(body),
+  })
+  if (res.ok) {
+    const d = await res.json()
+    hasToken.value = d.hasToken
+    jellyfinAdminToken.value = ''  // vider le champ après sauvegarde
+    saved.value = true
+    setTimeout(() => { saved.value = false }, 2000)
+  }
+  saving.value = false
+}
+
+async function testConnection() {
+  testing.value    = true
+  testResult.value = null
+  const res = await fetch('/api/jellyfin/test', { method: 'POST', credentials: 'include' })
+  testResult.value = await res.json()
+  testing.value    = false
+}
+
+async function syncUsers() {
+  syncing.value    = true
+  syncError.value  = null
+  syncResult.value = null
+  const res = await fetch('/api/jellyfin/sync', { method: 'POST', credentials: 'include' })
+  const data = await res.json()
+  if (res.ok) syncResult.value = data
+  else syncError.value = data.error ?? 'Erreur lors de la synchronisation'
+  syncing.value = false
+}
+
+async function copyToken() {
+  await navigator.clipboard.writeText(myToken.value)
+  tokenCopied.value = true
+  setTimeout(() => { tokenCopied.value = false }, 2000)
+}
+
+async function regenerateToken() {
+  if (!confirm('Regénérer le token ? L\'ancien token sera immédiatement invalidé.')) return
+  const res = await fetch('/api/auth/regenerate-token', {
+    method: 'POST', credentials: 'include',
+  })
+  if (res.ok) {
+    const d = await res.json()
+    myToken.value = d.apiToken
+  }
+}
+</script>

src/views/settings/ProfileView.vue

@@ -0,0 +1,174 @@
+<template>
+  <div class="flex flex-col gap-6">
+
+    <!-- ── Informations du compte ────────────────────────────── -->
+    <section class="flex flex-col gap-4">
+      <div>
+        <h2 class="text-base font-semibold text-primary">Mon compte</h2>
+        <p class="text-sm text-muted mt-1">Informations associées à votre compte FanKarr.</p>
+      </div>
+
+      <div class="settings-card flex flex-col gap-3">
+        <div>
+          <label class="settings-label mb-1">Nom d'utilisateur</label>
+          <p class="text-sm text-primary font-mono bg-shell px-3 py-2 rounded-lg border border-border w-fit">
+            {{ auth.username }}
+          </p>
+        </div>
+        <div>
+          <label class="settings-label mb-1">Rôle</label>
+          <span class="text-xs px-2 py-0.5 rounded-full font-medium"
+            :class="auth.isAdmin ? 'bg-violet-500/20 text-violet-300' : 'bg-blue-500/20 text-blue-300'">
+            {{ auth.isAdmin ? 'Administrateur' : 'Utilisateur' }}
+          </span>
+        </div>
+      </div>
+    </section>
+
+    <!-- ── Changer de mot de passe ───────────────────────────── -->
+    <section class="flex flex-col gap-4">
+      <div>
+        <h2 class="text-base font-semibold text-primary">Changer le mot de passe</h2>
+        <p class="text-sm text-muted mt-1">Votre nouveau mot de passe doit faire au moins 6 caractères.</p>
+      </div>
+
+      <div class="settings-card flex flex-col gap-4">
+        <div>
+          <label class="settings-label mb-1.5">Mot de passe actuel</label>
+          <input v-model="currentPassword" type="password" class="settings-input" placeholder="••••••••" />
+        </div>
+        <div>
+          <label class="settings-label mb-1.5">Nouveau mot de passe</label>
+          <input v-model="newPassword" type="password" class="settings-input" placeholder="••••••••" />
+        </div>
+        <div>
+          <label class="settings-label mb-1.5">Confirmer le nouveau mot de passe</label>
+          <input v-model="confirmPassword" type="password" class="settings-input" placeholder="••••••••" />
+        </div>
+
+        <div class="flex items-center gap-3 flex-wrap">
+          <button @click="changePassword" :disabled="changingPwd" class="btn-primary">
+            {{ changingPwd ? 'Modification…' : 'Modifier le mot de passe' }}
+          </button>
+          <span v-if="pwdSuccess" class="text-xs text-green-400">Mot de passe modifié.</span>
+          <span v-if="pwdError"   class="text-xs text-red-400">{{ pwdError }}</span>
+        </div>
+      </div>
+    </section>
+
+    <!-- ── Token API personnel ──────────────────────────────── -->
+    <section class="flex flex-col gap-4">
+      <div>
+        <h2 class="text-base font-semibold text-primary">Token API personnel</h2>
+        <p class="text-sm text-muted mt-1">
+          Utilisez ce token pour accéder à l'API FanKarr depuis des applications tierces
+          (ex : plugin Jellyfin).
+        </p>
+      </div>
+
+      <div class="settings-card flex flex-col gap-3">
+        <div class="flex items-center gap-2">
+          <code class="flex-1 text-xs bg-shell px-3 py-2 rounded-lg border border-border text-muted font-mono truncate">
+            {{ showToken ? myToken : '••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••' }}
+          </code>
+          <button @click="showToken = !showToken" class="btn-ghost text-xs shrink-0">
+            {{ showToken ? 'Masquer' : 'Afficher' }}
+          </button>
+          <button @click="copyToken" class="btn-ghost text-xs shrink-0">
+            {{ tokenCopied ? 'Copié !' : 'Copier' }}
+          </button>
+        </div>
+        <button @click="regenerateToken" class="btn-ghost text-xs text-red-400 hover:text-red-300 w-fit">
+          Regénérer le token
+        </button>
+        <p class="text-xs text-muted">
+          Authentification via header :
+          <code class="bg-shell px-1.5 py-0.5 rounded text-xs">Authorization: Bearer &lt;token&gt;</code>
+        </p>
+      </div>
+    </section>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useAuthStore }   from '@/stores/auth'
+
+const auth = useAuthStore()
+
+
+// ── Mot de passe ──────────────────────────────────────────────
+const currentPassword = ref('')
+const newPassword     = ref('')
+const confirmPassword = ref('')
+const changingPwd     = ref(false)
+const pwdSuccess      = ref(false)
+const pwdError        = ref<string | null>(null)
+
+async function changePassword() {
+  pwdError.value   = null
+  pwdSuccess.value = false
+
+  if (!currentPassword.value || !newPassword.value) {
+    pwdError.value = 'Tous les champs sont requis.'; return
+  }
+  if (newPassword.value !== confirmPassword.value) {
+    pwdError.value = 'Les mots de passe ne correspondent pas.'; return
+  }
+  if (newPassword.value.length < 6) {
+    pwdError.value = 'Le mot de passe doit faire au moins 6 caractères.'; return
+  }
+
+  changingPwd.value = true
+  const res = await fetch('/api/auth/change-password', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    credentials: 'include',
+    body: JSON.stringify({ currentPassword: currentPassword.value, newPassword: newPassword.value }),
+  })
+  const data = await res.json()
+  if (res.ok) {
+    pwdSuccess.value  = true
+    currentPassword.value = ''
+    newPassword.value     = ''
+    confirmPassword.value = ''
+    setTimeout(() => { pwdSuccess.value = false }, 3000)
+  } else {
+    pwdError.value = data.error ?? 'Erreur lors du changement de mot de passe'
+  }
+  changingPwd.value = false
+}
+
+// ── Token API ─────────────────────────────────────────────────
+const myToken     = ref('')
+const showToken   = ref(false)
+const tokenCopied = ref(false)
+
+async function loadMyToken() {
+  const res = await fetch('/api/auth/me', { credentials: 'include' })
+  if (res.ok) {
+    const d = await res.json()
+    myToken.value = d.apiToken ?? ''
+  }
+}
+
+onMounted(loadMyToken)
+
+async function copyToken() {
+  await navigator.clipboard.writeText(myToken.value)
+  tokenCopied.value = true
+  setTimeout(() => { tokenCopied.value = false }, 2000)
+}
+
+async function regenerateToken() {
+  if (!confirm('Regénérer le token ? L\'ancien token sera immédiatement invalidé.')) return
+  const res = await fetch('/api/auth/regenerate-token', {
+    method: 'POST', credentials: 'include',
+  })
+  if (res.ok) {
+    const d = await res.json()
+    myToken.value = d.apiToken
+  }
+}
+</script>

src/views/settings/SettingsLayout.vue

@@ -14,10 +14,13 @@ import { useRoute } from 'vue-router'
 const route = useRoute()
 
 const titles: Record<string, string> = {
+  'settings-profile'   : 'Mon profil',
   'settings-download'  : 'Clients de téléchargement',
   'settings-media'     : 'Gestion des médias',
   'settings-catalogue' : 'Catalogue Fankai',
   'settings-logs'      : 'Journaux',
+  'settings-users'     : 'Utilisateurs & Invitations',
+  'settings-jellyfin'  : 'Jellyfin & API',
 }
 
 const pageTitle = computed(() => titles[route.name as string] ?? 'Paramètres')

src/views/settings/UsersView.vue

@@ -0,0 +1,325 @@
+<template>
+  <div class="flex flex-col gap-8">
+
+    <!-- ── Utilisateurs ─────────────────────────────────────── -->
+    <section class="flex flex-col gap-4">
+      <div class="flex items-center justify-between">
+        <div>
+          <h2 class="text-base font-semibold text-primary">Utilisateurs</h2>
+          <p class="text-sm text-muted mt-1">Gérez les comptes ayant accès à FanKarr.</p>
+        </div>
+        <button @click="openCreateUser" class="btn-secondary">+ Créer</button>
+      </div>
+
+      <div v-if="users.length === 0" class="settings-card text-sm text-muted">
+        Aucun utilisateur.
+      </div>
+
+      <div v-else class="flex flex-col gap-2">
+        <div
+            v-for="u in users" :key="u.id"
+            class="settings-card flex items-center justify-between"
+        >
+          <div class="flex items-center gap-3">
+            <span
+                class="w-7 h-7 rounded-full flex items-center justify-center text-xs font-semibold shrink-0"
+                :class="u.role === 'admin' ? 'bg-accent/20 text-accent' : 'bg-border text-muted'"
+            >
+              {{ u.username[0].toUpperCase() }}
+            </span>
+            <div>
+              <p class="text-sm text-primary font-medium">{{ u.username }}</p>
+              <p class="text-xs text-muted mt-0.5">
+                {{ u.role === 'admin' ? 'Administrateur' : 'Utilisateur' }}
+                · créé le {{ formatDate(u.createdAt) }}
+              </p>
+            </div>
+          </div>
+          <div class="flex items-center gap-1">
+            <button @click="openEditUser(u)" class="btn-ghost text-xs text-blue-400 hover:text-blue-300">Modifier</button>
+            <button
+                @click="confirmDelete(u)"
+                :disabled="u.id === currentUserId"
+                class="btn-ghost text-xs text-red-400 hover:text-red-300 disabled:opacity-30 disabled:cursor-not-allowed"
+            >Supprimer</button>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- ── Invitations ──────────────────────────────────────── -->
+    <section class="flex flex-col gap-4">
+      <div class="flex items-center justify-between">
+        <div>
+          <h2 class="text-base font-semibold text-primary">Invitations</h2>
+          <p class="text-sm text-muted mt-1">Générez des liens pour permettre à de nouveaux utilisateurs de s'inscrire.</p>
+        </div>
+        <button @click="openCreateInvite" class="btn-secondary">+ Générer</button>
+      </div>
+
+      <div v-if="invites.length === 0" class="settings-card text-sm text-muted">
+        Aucun lien d'invitation actif.
+      </div>
+
+      <div v-else class="flex flex-col gap-2">
+        <div
+            v-for="inv in invites" :key="inv.code"
+            class="settings-card flex items-center justify-between gap-4"
+            :class="{ 'opacity-50': isExpired(inv) || isExhausted(inv) }"
+        >
+          <div class="flex-1 min-w-0">
+            <div class="flex items-center gap-2 mb-1">
+              <span v-if="isExpired(inv) || isExhausted(inv)" class="text-xs text-muted">[Invalide]</span>
+              <span v-if="inv.note" class="text-sm text-primary font-medium truncate">{{ inv.note }}</span>
+              <span v-else class="text-sm text-muted italic">Sans note</span>
+            </div>
+            <p class="text-xs text-muted">
+              {{ inv.uses }}/{{ inv.maxUses ?? '∞' }} utilisations
+              <template v-if="inv.expiresAt"> · expire {{ formatDate(inv.expiresAt) }}</template>
+              <template v-else> · sans expiration</template>
+            </p>
+            <div class="flex items-center gap-2 mt-1.5">
+              <code class="text-xs text-muted bg-shell px-2 py-0.5 rounded truncate max-w-xs">
+                {{ inviteUrl(inv.code) }}
+              </code>
+              <button @click="copyInvite(inv.code)" class="btn-ghost text-xs shrink-0">
+                {{ copied === inv.code ? 'Copié !' : 'Copier' }}
+              </button>
+            </div>
+          </div>
+          <button @click="deleteInvite(inv.code)" class="btn-ghost text-xs text-red-400 hover:text-red-300 shrink-0">
+            Révoquer
+          </button>
+        </div>
+      </div>
+    </section>
+
+    <!-- ── Modal créer/modifier utilisateur ─────────────────── -->
+    <Teleport to="body">
+      <div v-if="userModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center px-4" @click.self="userModal = null">
+        <div class="settings-card w-full max-w-sm flex flex-col gap-5 p-6">
+          <h3 class="text-base font-semibold text-primary">
+            {{ userModal.mode === 'create' ? 'Créer un utilisateur' : 'Modifier l\'utilisateur' }}
+          </h3>
+
+          <div class="flex flex-col gap-4">
+            <div>
+              <label class="settings-label mb-1.5">Identifiant</label>
+              <input v-model="userModal.username" type="text" class="settings-input" placeholder="username" />
+            </div>
+            <div>
+              <label class="settings-label mb-1.5">
+                {{ userModal.mode === 'create' ? 'Mot de passe' : 'Nouveau mot de passe' }}
+              </label>
+              <input v-model="userModal.password" type="password" class="settings-input"
+                :placeholder="userModal.mode === 'edit' ? 'Laisser vide pour ne pas changer' : '••••••••'" />
+            </div>
+            <div>
+              <label class="settings-label mb-1.5">Rôle</label>
+              <select v-model="userModal.role" class="settings-input">
+                <option value="user">Utilisateur</option>
+                <option value="admin">Administrateur</option>
+              </select>
+            </div>
+          </div>
+
+          <p v-if="userModal.error" class="text-xs text-red-400">{{ userModal.error }}</p>
+
+          <div class="flex gap-2 justify-end">
+            <button @click="userModal = null" class="btn-ghost">Annuler</button>
+            <button @click="submitUserModal" :disabled="userModal.loading" class="btn-primary">
+              {{ userModal.loading ? '...' : userModal.mode === 'create' ? 'Créer' : 'Enregistrer' }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+
+    <!-- ── Modal créer invitation ────────────────────────────── -->
+    <Teleport to="body">
+      <div v-if="inviteModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center px-4" @click.self="inviteModal = null">
+        <div class="settings-card w-full max-w-sm flex flex-col gap-5 p-6">
+          <h3 class="text-base font-semibold text-primary">Générer une invitation</h3>
+
+          <div class="flex flex-col gap-4">
+            <div>
+              <label class="settings-label mb-1.5">Note (optionnelle)</label>
+              <input v-model="inviteModal.note" type="text" class="settings-input" placeholder="Pour qui est ce lien ?" />
+            </div>
+            <div>
+              <label class="settings-label mb-1.5">Utilisations max</label>
+              <input v-model.number="inviteModal.maxUses" type="number" min="1" class="settings-input" placeholder="1" />
+              <p class="text-xs text-muted mt-1">Laisser vide pour illimité</p>
+            </div>
+            <div>
+              <label class="settings-label mb-1.5">Expire dans (heures)</label>
+              <input v-model.number="inviteModal.expiresInHours" type="number" min="1" class="settings-input" placeholder="24" />
+              <p class="text-xs text-muted mt-1">Laisser vide pour pas d'expiration</p>
+            </div>
+          </div>
+
+          <p v-if="inviteModal.error" class="text-xs text-red-400">{{ inviteModal.error }}</p>
+
+          <div class="flex gap-2 justify-end">
+            <button @click="inviteModal = null" class="btn-ghost">Annuler</button>
+            <button @click="submitInviteModal" :disabled="inviteModal.loading" class="btn-primary">
+              {{ inviteModal.loading ? '...' : 'Générer' }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useAuthStore }   from '@/stores/auth'
+
+interface User {
+  id       : string
+  username : string
+  role     : 'admin' | 'user'
+  apiToken : string
+  createdAt: string
+}
+
+interface Invite {
+  code         : string
+  createdBy    : string
+  createdAt    : string
+  expiresAt    : string | null
+  maxUses      : number | null
+  uses         : number
+  note?        : string
+}
+
+const auth          = useAuthStore()
+const currentUserId = auth.username  // utilisé pour désactiver la suppression de soi-même
+
+const users   = ref<User[]>([])
+const invites = ref<Invite[]>([])
+const copied  = ref<string | null>(null)
+
+// ── Modals ────────────────────────────────────────────────────
+const userModal = ref<{
+  mode    : 'create' | 'edit'
+  id?     : string
+  username: string
+  password: string
+  role    : 'admin' | 'user'
+  error   : string | null
+  loading : boolean
+} | null>(null)
+
+const inviteModal = ref<{
+  note?         : string
+  maxUses?      : number
+  expiresInHours?: number
+  error         : string | null
+  loading       : boolean
+} | null>(null)
+
+// ── Chargement ────────────────────────────────────────────────
+async function loadUsers() {
+  const res = await fetch('/api/users', { credentials: 'include' })
+  if (res.ok) users.value = await res.json()
+}
+
+async function loadInvites() {
+  const res = await fetch('/api/invites', { credentials: 'include' })
+  if (res.ok) invites.value = await res.json()
+}
+
+onMounted(() => { loadUsers(); loadInvites() })
+
+// ── Users ─────────────────────────────────────────────────────
+function openCreateUser() {
+  userModal.value = { mode: 'create', username: '', password: '', role: 'user', error: null, loading: false }
+}
+
+function openEditUser(u: User) {
+  userModal.value = { mode: 'edit', id: u.id, username: u.username, password: '', role: u.role, error: null, loading: false }
+}
+
+async function submitUserModal() {
+  if (!userModal.value) return
+  const m = userModal.value
+  m.error   = null
+  m.loading = true
+
+  if (!m.username) { m.error = 'Identifiant requis'; m.loading = false; return }
+  if (m.mode === 'create' && !m.password) { m.error = 'Mot de passe requis'; m.loading = false; return }
+
+  const url    = m.mode === 'create' ? '/api/users' : `/api/users/${m.id}`
+  const method = m.mode === 'create' ? 'POST' : 'PATCH'
+  const body: Record<string, any> = { username: m.username, role: m.role }
+  if (m.password) body.password = m.password
+
+  const res  = await fetch(url, { method, headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify(body) })
+  const data = await res.json()
+
+  if (!res.ok) { m.error = data.error; m.loading = false; return }
+  userModal.value = null
+  loadUsers()
+}
+
+async function confirmDelete(u: User) {
+  if (!confirm(`Supprimer l'utilisateur "${u.username}" ?`)) return
+  await fetch(`/api/users/${u.id}`, { method: 'DELETE', credentials: 'include' })
+  loadUsers()
+}
+
+// ── Invites ───────────────────────────────────────────────────
+function openCreateInvite() {
+  inviteModal.value = { note: '', maxUses: 1, expiresInHours: 24, error: null, loading: false }
+}
+
+async function submitInviteModal() {
+  if (!inviteModal.value) return
+  const m = inviteModal.value
+  m.error = null; m.loading = true
+
+  const body: Record<string, any> = {}
+  if (m.note)           body.note           = m.note
+  if (m.maxUses)        body.maxUses        = m.maxUses
+  if (m.expiresInHours) body.expiresInHours = m.expiresInHours
+
+  const res  = await fetch('/api/invites', { method: 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify(body) })
+  const data = await res.json()
+
+  if (!res.ok) { m.error = data.error; m.loading = false; return }
+  inviteModal.value = null
+  loadInvites()
+}
+
+async function deleteInvite(code: string) {
+  if (!confirm('Révoquer ce lien d\'invitation ?')) return
+  await fetch(`/api/invites/${code}`, { method: 'DELETE', credentials: 'include' })
+  loadInvites()
+}
+
+function inviteUrl(code: string) {
+  return `${window.location.origin}/invite/${code}`
+}
+
+async function copyInvite(code: string) {
+  await navigator.clipboard.writeText(inviteUrl(code))
+  copied.value = code
+  setTimeout(() => { copied.value = null }, 2000)
+}
+
+// ── Helpers ───────────────────────────────────────────────────
+function formatDate(iso: string) {
+  return new Date(iso).toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric' })
+}
+
+function isExpired(inv: Invite) {
+  return inv.expiresAt !== null && new Date(inv.expiresAt) < new Date()
+}
+
+function isExhausted(inv: Invite) {
+  return inv.maxUses !== null && inv.uses >= inv.maxUses
+}
+</script>