From 3bb2dfc009f1c93c5c49c3dbea1a9b32c5af3cec Mon Sep 17 00:00:00 2001
From: R0m1k3 <michaelschal@gmail.com>
Date: Thu, 16 Apr 2026 15:15:28 +0200
Subject: [PATCH] feat: implement authentication routing, episode details
 slide-over, and success notification modal

---
 frontend/src/App.tsx                       |  2 +-
 frontend/src/components/EpisodeDetails.tsx |  2 +-
 frontend/src/components/SuccessModal.tsx   | 28 +++++++++----------
 frontend/src/pages/Login.tsx               | 32 ++++++++++++----------
 4 files changed, 34 insertions(+), 30 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index f569483..94fbb95 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -27,7 +27,7 @@ function ProtectedRoute({ children }: { children: React.ReactNode }) {
   }
 
   return (
-    <div className="flex bg-obsidian min-h-screen">
+    <div className="flex min-h-screen">
       <Navigation />
       <main className="flex-1 lg:ml-80 lg:mr-8 pb-32 pt-8 px-4 lg:px-0">
         <div className="reveal">
diff --git a/frontend/src/components/EpisodeDetails.tsx b/frontend/src/components/EpisodeDetails.tsx
index a5b2e0a..060ad5a 100644
--- a/frontend/src/components/EpisodeDetails.tsx
+++ b/frontend/src/components/EpisodeDetails.tsx
@@ -109,7 +109,7 @@ export default function EpisodeDetails({ episode, isOpen, onClose, onPlay }: Epi
            <div className="space-y-6">
               <h3 className="text-xl font-display font-black">À propos de cet épisode</h3>
               <div 
-                className="prose prose-invert max-w-none text-[var(--text-secondary)] leading-relaxed text-lg"
+                className="prose dark:prose-invert max-w-none text-[var(--text-secondary)] leading-relaxed text-lg"
                 dangerouslySetInnerHTML={{ __html: episode.description }}
               />
            </div>
diff --git a/frontend/src/components/SuccessModal.tsx b/frontend/src/components/SuccessModal.tsx
index 3b2b550..7230685 100644
--- a/frontend/src/components/SuccessModal.tsx
+++ b/frontend/src/components/SuccessModal.tsx
@@ -24,43 +24,43 @@ export default function SuccessModal({
     <div className="fixed inset-0 z-[110] flex items-center justify-center p-4">
       {/* Backdrop */}
       <div 
-        className="absolute inset-0 bg-obsidian/60 backdrop-blur-md animate-fade-in"
+        className="absolute inset-0 bg-black/60 backdrop-blur-md animate-fade-in"
         onClick={onClose}
       />
 
       {/* Modal Content */}
-      <div className="relative premium-glass rounded-[3.5rem] w-full max-w-sm overflow-hidden animate-slide-up shadow-[0_0_50px_rgba(0,0,0,0.5)] border-white/10">
+      <div className="relative premium-glass rounded-[3.5rem] w-full max-w-sm overflow-hidden animate-slide-up shadow-2xl border-[var(--border-color)]">
         {/* Decorative Aura */}
-        <div className="absolute -top-24 -right-24 w-48 h-48 bg-accent-indigo/20 blur-[60px] rounded-full" />
+        <div className="absolute -top-24 -right-24 w-48 h-48 bg-[var(--accent-glow)] blur-[60px] rounded-full" />
         
         <div className="p-10 flex flex-col items-center text-center relative z-10">
           {/* Header Actions */}
-          <button onClick={onClose} className="absolute top-0 right-0 p-6 text-slate-500 hover:text-white transition-colors">
+          <button onClick={onClose} className="absolute top-0 right-0 p-6 text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors">
              <X className="w-5 h-5" />
           </button>
 
           {/* Icon */}
-          <div className="w-20 h-20 bg-accent-cyan/10 rounded-3xl flex items-center justify-center mb-8 shadow-glow-cyan border border-accent-cyan/20">
-            <Sparkles className="w-8 h-8 text-accent-cyan animate-pulse" />
+          <div className="w-20 h-20 bg-[var(--accent-glow)] rounded-3xl flex items-center justify-center mb-8 shadow-glow-indigo border border-[var(--border-color)]">
+            <Sparkles className="w-8 h-8 text-[var(--accent-primary)] animate-pulse" />
           </div>
 
-          <h3 className="text-2xl font-display font-black text-white mb-2 leading-tight">
+          <h3 className="text-2xl font-display font-black mb-2 leading-tight">
             {message}
           </h3>
-          <p className="text-[10px] font-bold text-slate-500 uppercase tracking-widest mb-8">Nouveau membre de votre univers</p>
+          <p className="text-[10px] font-bold text-[var(--text-secondary)] uppercase tracking-widest mb-8">Nouveau membre de votre univers</p>
           
-          <div className="w-full bg-white/[0.03] rounded-[2rem] p-5 mb-10 flex items-center gap-5 border border-white/5">
-            <div className="w-20 h-20 rounded-2xl overflow-hidden shadow-2xl border border-white/10 shrink-0">
+          <div className="w-full bg-[var(--bg-secondary)] rounded-[2rem] p-5 mb-10 flex items-center gap-5 border border-[var(--border-color)]">
+            <div className="w-20 h-20 rounded-2xl overflow-hidden shadow-2xl border border-[var(--border-color)] shrink-0">
                {podcastImage ? (
                  <img src={podcastImage} alt={podcastTitle} className="w-full h-full object-cover" />
                ) : (
-                 <div className="w-full h-full bg-gradient-to-br from-accent-indigo to-accent-rose flex items-center justify-center text-2xl">🎙️</div>
+                 <div className="w-full h-full bg-gradient-to-br from-[var(--accent-primary)] to-[var(--accent-secondary)] flex items-center justify-center text-2xl">🎙️</div>
                )}
             </div>
             <div className="text-left flex-1 min-w-0">
-              <p className="text-lg font-bold text-white truncate mb-1">{podcastTitle}</p>
+              <p className="text-lg font-bold truncate mb-1">{podcastTitle}</p>
               {podcastAuthor && (
-                <p className="text-xs font-bold text-accent-indigo truncate uppercase tracking-widest">{podcastAuthor}</p>
+                <p className="text-xs font-bold text-[var(--accent-primary)] truncate uppercase tracking-widest">{podcastAuthor}</p>
               )}
             </div>
           </div>
@@ -78,7 +78,7 @@ export default function SuccessModal({
             
             <button
               onClick={onClose}
-              className="w-full py-4 rounded-2xl bg-white/5 text-slate-400 text-xs font-black uppercase tracking-widest hover:bg-white/10 hover:text-white transition-all"
+              className="w-full py-4 rounded-2xl bg-[var(--bg-secondary)] text-[var(--text-secondary)] text-xs font-black uppercase tracking-widest hover:bg-[var(--accent-primary)]/10 hover:text-[var(--text-primary)] transition-all border border-[var(--border-color)]"
             >
               Continuer
             </button>
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index b5c20ff..e2ac04e 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -47,31 +47,33 @@ export default function Login() {
   };
 
   return (
-    <div className="min-h-screen bg-obsidian flex items-center justify-center px-4 relative overflow-hidden font-sans">
+    <div className="min-h-screen flex items-center justify-center px-4 relative overflow-hidden font-sans">
       {/* Background Auras */}
-      <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_20%_20%,rgba(99,102,241,0.15),transparent_40%),radial-gradient(circle_at_80%_80%,rgba(6,182,212,0.15),transparent_40%)]" />
-      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-accent-indigo/5 blur-[120px] rounded-full animate-aura" />
+      <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_20%_20%,var(--accent-glow),transparent_40%),radial-gradient(circle_at_80%_80%,rgba(6,182,212,0.1),transparent_40%)]" />
+      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-[var(--accent-glow)] blur-[120px] rounded-full animate-aura" />
 
       <div className="w-full max-w-lg relative z-10 reveal">
         {/* Logo & Header */}
         <div className="text-center mb-10">
-          <div className="w-20 h-20 rounded-3xl bg-gradient-to-br from-accent-indigo to-accent-rose flex items-center justify-center text-4xl mx-auto mb-6 shadow-glow-indigo transform hover:scale-110 transition-transform duration-500">
+          <div className="w-20 h-20 rounded-3xl bg-gradient-to-br from-[var(--accent-primary)] to-[var(--accent-secondary)] flex items-center justify-center text-4xl mx-auto mb-6 shadow-glow-indigo transform hover:scale-110 transition-transform duration-500">
             🎙️
           </div>
-          <h1 className="text-5xl font-display font-black text-white mb-3 tracking-tighter">PODCASTIC</h1>
-          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-[10px] font-black text-accent-indigo uppercase tracking-[0.2em]">
+          <h1 className="text-5xl font-display font-black mb-3 tracking-tighter">PODCASTIC</h1>
+          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[var(--bg-secondary)] border border-[var(--border-color)] text-[10px] font-black text-[var(--accent-primary)] uppercase tracking-[0.2em]">
              <Sparkles className="w-3 h-3" />
              Expérience Audio Premium
           </div>
         </div>
 
         {/* Form Card */}
-        <div className="premium-glass p-8 lg:p-12 rounded-[3rem] shadow-2xl border-white/10">
-          <div className="flex p-1.5 rounded-2xl bg-white/[0.03] border border-white/5 mb-10">
+        <div className="premium-glass p-8 lg:p-12 rounded-[3rem] shadow-2xl">
+          <div className="flex p-1.5 rounded-2xl bg-[var(--bg-secondary)] border border-[var(--border-color)] mb-10">
             <button
               onClick={() => { setIsLogin(true); setError(null); }}
               className={`flex-1 py-3 rounded-xl text-xs font-black uppercase tracking-widest transition-all ${
-                isLogin ? 'bg-white text-obsidian shadow-lg' : 'text-slate-500 hover:text-slate-300'
+                isLogin 
+                  ? 'bg-[var(--accent-primary)] text-white shadow-lg' 
+                  : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
               }`}
             >
               Connexion
@@ -79,7 +81,9 @@ export default function Login() {
             <button
               onClick={() => { setIsLogin(false); setError(null); }}
               className={`flex-1 py-3 rounded-xl text-xs font-black uppercase tracking-widest transition-all ${
-                !isLogin ? 'bg-white text-obsidian shadow-lg' : 'text-slate-500 hover:text-slate-300'
+                !isLogin 
+                  ? 'bg-[var(--accent-primary)] text-white shadow-lg' 
+                  : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
               }`}
             >
               Inscription
@@ -89,7 +93,7 @@ export default function Login() {
           <form onSubmit={handleSubmit} className="space-y-6">
             {!isLogin && (
               <div className="relative group">
-                <UserIcon className="absolute left-5 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-500 group-focus-within:text-accent-indigo transition-colors" />
+                <UserIcon className="absolute left-5 top-1/2 -translate-y-1/2 w-5 h-5 text-[var(--text-secondary)] group-focus-within:text-[var(--accent-primary)] transition-colors" />
                 <input
                   type="text"
                   name="username"
@@ -103,7 +107,7 @@ export default function Login() {
             )}
 
             <div className="relative group">
-              <Mail className="absolute left-5 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-500 group-focus-within:text-accent-indigo transition-colors" />
+              <Mail className="absolute left-5 top-1/2 -translate-y-1/2 w-5 h-5 text-[var(--text-secondary)] group-focus-within:text-[var(--accent-primary)] transition-colors" />
               <input
                 type="email"
                 name="email"
@@ -116,7 +120,7 @@ export default function Login() {
             </div>
 
             <div className="relative group">
-              <Lock className="absolute left-5 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-500 group-focus-within:text-accent-indigo transition-colors" />
+              <Lock className="absolute left-5 top-1/2 -translate-y-1/2 w-5 h-5 text-[var(--text-secondary)] group-focus-within:text-[var(--accent-primary)] transition-colors" />
               <input
                 type="password"
                 name="password"
@@ -152,7 +156,7 @@ export default function Login() {
         </div>
 
         {/* Footer */}
-        <p className="mt-8 text-center text-[10px] font-bold text-slate-600 uppercase tracking-[0.3em]">
+        <p className="mt-8 text-center text-[10px] font-bold text-[var(--text-secondary)] uppercase tracking-[0.3em]">
            Podcastic High-Fidelity Audio © 2026
         </p>
       </div>