From 7e3ee29b13ed7875c40e200fd51f0154e8c01703 Mon Sep 17 00:00:00 2001
From: Tetardtek <kvnn64@gmail.com>
Date: Sat, 14 Mar 2026 10:11:30 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20login=20page=20avec=20s=C3=A9lection=20p?=
 =?UTF-8?q?rovider=20=E2=86=92=20/api/v1/auth/oauth/:provider=3FredirectUr?=
 =?UTF-8?q?l?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

SuperOAuth root page ignore ?redirectUrl, les boutons de sa UI pointent vers
ses propres URIs hardcodées. Fix : notre page /login construit les URLs API
directement avec redirectUrl=origins.tetardtek.com/callback.

Aussi : CORS_ORIGINS SuperOAuth mis à jour (origins.tetardtek.com ajouté).
---
 frontend/src/App.tsx                      |  2 ++
 frontend/src/components/layout/Header.tsx |  8 ++---
 frontend/src/pages/LoginPage.tsx          | 39 +++++++++++++++++++++++
 3 files changed, 44 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/pages/LoginPage.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 280f133..2e2a157 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import Layout from './components/layout/Layout';
 import HomePage from './pages/HomePage';
+import LoginPage from './pages/LoginPage';
 import CallbackPage from './pages/CallbackPage';
 import VideoPage from './pages/VideoPage';
 import PlaylistsPage from './pages/PlaylistsPage';
@@ -26,6 +27,7 @@ function App() {
       <Routes>
         <Route element={<Layout theme={theme} onToggleTheme={toggleTheme} />}>
           <Route path="/" element={<HomePage />} />
+          <Route path="/login" element={<LoginPage />} />
           <Route path="/video/:id" element={<VideoPage />} />
           <Route path="/playlists" element={<PlaylistsPage />} />
           <Route path="/playlists/:id" element={<PlaylistPage />} />
diff --git a/frontend/src/components/layout/Header.tsx b/frontend/src/components/layout/Header.tsx
index 873bc3e..952461f 100644
--- a/frontend/src/components/layout/Header.tsx
+++ b/frontend/src/components/layout/Header.tsx
@@ -10,8 +10,6 @@ interface HeaderProps {
 }
 
 export default function Header({ theme, onToggleTheme, user, onLogout }: HeaderProps) {
-  const loginUrl = `${import.meta.env.VITE_SUPEROAUTH_URL}?redirectUrl=${encodeURIComponent(window.location.origin + '/callback')}`;
-
   async function handleLogout() {
     await apiFetch('/auth/logout', { method: 'POST' }).catch(() => {});
     onLogout();
@@ -64,12 +62,12 @@ export default function Header({ theme, onToggleTheme, user, onLogout }: HeaderP
               </button>
             </div>
           ) : (
-            <a
-              href={loginUrl}
+            <Link
+              to="/login"
               className="rounded border border-od-border px-3 py-1 font-mono text-xs text-od-muted hover:border-od-accent hover:text-od-accent transition-colors"
             >
               Connexion
-            </a>
+            </Link>
           )}
         </div>
 
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
new file mode 100644
index 0000000..43e3ba5
--- /dev/null
+++ b/frontend/src/pages/LoginPage.tsx
@@ -0,0 +1,39 @@
+import { Link } from 'react-router-dom';
+
+const PROVIDERS = [
+  { id: 'discord', label: 'Discord' },
+  { id: 'github',  label: 'GitHub'  },
+  { id: 'google',  label: 'Google'  },
+  { id: 'twitch',  label: 'Twitch'  },
+] as const;
+
+export default function LoginPage() {
+  const base = import.meta.env.VITE_SUPEROAUTH_URL;
+  const redirectUrl = encodeURIComponent(window.location.origin + '/callback');
+
+  return (
+    <div className="flex flex-col items-center gap-8 pt-20">
+      <div className="flex flex-col items-center gap-2">
+        <span className="font-mono text-xs font-bold tracking-widest text-od-accent">OD</span>
+        <h1 className="text-xl font-semibold text-od-text">Connexion</h1>
+        <p className="text-sm text-od-muted">Choisis ton provider pour continuer</p>
+      </div>
+
+      <div className="flex w-full max-w-xs flex-col gap-3">
+        {PROVIDERS.map(({ id, label }) => (
+          <a
+            key={id}
+            href={`${base}/api/v1/auth/oauth/${id}?redirectUrl=${redirectUrl}`}
+            className="flex items-center justify-center rounded border border-od-border bg-od-surface px-4 py-3 text-sm text-od-text transition-colors hover:border-od-accent hover:text-od-accent"
+          >
+            {label}
+          </a>
+        ))}
+      </div>
+
+      <Link to="/" className="font-mono text-xs text-od-muted hover:text-od-text transition-colors">
+        ← Retour
+      </Link>
+    </div>
+  );
+}