diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 385dc7b..2e2a157 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -2,8 +2,11 @@ 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'; +import PlaylistPage from './pages/PlaylistPage'; type Theme = 'dark' | 'light'; @@ -24,7 +27,10 @@ function App() { }> } /> + } /> } /> + } /> + } /> } /> diff --git a/frontend/src/components/layout/Header.tsx b/frontend/src/components/layout/Header.tsx index 71ad8ea..952461f 100644 --- a/frontend/src/components/layout/Header.tsx +++ b/frontend/src/components/layout/Header.tsx @@ -1,19 +1,19 @@ import { Link } from 'react-router-dom'; +import { apiFetch } from '../../lib/api'; import type { User } from '../../hooks/useAuth'; interface HeaderProps { theme: 'dark' | 'light'; onToggleTheme: () => void; user: User | null; + onLogout: () => void; } -export default function Header({ theme, onToggleTheme, user }: HeaderProps) { - const callbackUrl = encodeURIComponent( - `${window.location.origin}/callback` - ); - // Redirige vers SuperOAuth — l'utilisateur choisit son provider (Discord, GitHub, Google, Twitch) - // SuperOAuth redirige ensuite vers /callback?token=JWT&refresh=... - const loginUrl = `${import.meta.env.VITE_SUPEROAUTH_URL}/api/v1/auth/oauth/discord?redirectUrl=${callbackUrl}`; +export default function Header({ theme, onToggleTheme, user, onLogout }: HeaderProps) { + async function handleLogout() { + await apiFetch('/auth/logout', { method: 'POST' }).catch(() => {}); + onLogout(); + } return (
@@ -31,18 +31,14 @@ export default function Header({ theme, onToggleTheme, user }: HeaderProps) { {/* Navigation */} {/* Right — thème + auth */} @@ -56,16 +52,22 @@ export default function Header({ theme, onToggleTheme, user }: HeaderProps) { {user ? ( - - {user.nickname} - +
+ {user.nickname} + +
) : ( - Connexion - + )} diff --git a/frontend/src/components/layout/Layout.tsx b/frontend/src/components/layout/Layout.tsx index ddf628a..bc75d83 100644 --- a/frontend/src/components/layout/Layout.tsx +++ b/frontend/src/components/layout/Layout.tsx @@ -8,7 +8,7 @@ interface LayoutProps { } export default function Layout({ theme, onToggleTheme }: LayoutProps) { - const { user, loading } = useAuth(); + const { user, loading, setUser } = useAuth(); return (
@@ -16,6 +16,7 @@ export default function Layout({ theme, onToggleTheme }: LayoutProps) { theme={theme} onToggleTheme={onToggleTheme} user={loading ? null : user} + onLogout={() => setUser(null)} />
diff --git a/frontend/src/hooks/useAuth.ts b/frontend/src/hooks/useAuth.ts index 33ffc0a..1ca4372 100644 --- a/frontend/src/hooks/useAuth.ts +++ b/frontend/src/hooks/useAuth.ts @@ -2,8 +2,8 @@ import { useState, useEffect } from 'react'; import { apiFetch } from '../lib/api'; export interface User { - id: number; - email: string; + id: string; + email: string | null; nickname: string; subscriptionLevel?: number; } @@ -11,6 +11,7 @@ export interface User { interface AuthState { user: User | null; loading: boolean; + setUser: (u: User | null) => void; } interface MeResponse { @@ -33,5 +34,5 @@ export function useAuth(): AuthState { return () => { cancelled = true; }; }, []); - return { user, loading }; + return { user, loading, setUser }; } diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx index af5cca8..48644c2 100644 --- a/frontend/src/pages/HomePage.tsx +++ b/frontend/src/pages/HomePage.tsx @@ -3,7 +3,7 @@ import { Link } from 'react-router-dom'; import { apiFetch } from '../lib/api'; interface Video { - id: number; + id: string; title: string; description: string; requiredLevel: number; diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx new file mode 100644 index 0000000..f91166d --- /dev/null +++ b/frontend/src/pages/LoginPage.tsx @@ -0,0 +1,40 @@ +import { Link } from 'react-router-dom'; + +const PROVIDERS = [ + { id: 'discord', label: 'Discord', icon: '◈' }, + { id: 'github', label: 'GitHub', icon: '◉' }, + { id: 'google', label: 'Google', icon: '◎' }, + { id: 'twitch', label: 'Twitch', icon: '◆' }, +] as const; + +export default function LoginPage() { + const callbackUrl = encodeURIComponent(`${window.location.origin}/callback`); + const base = import.meta.env.VITE_SUPEROAUTH_URL; + + return ( +
+
+ OD +

Connexion

+

Choisis ton provider pour continuer

+
+ +
+ {PROVIDERS.map(({ id, label, icon }) => ( + + {icon} + {label} + + ))} +
+ + + ← Retour + +
+ ); +} diff --git a/frontend/src/pages/PlaylistPage.tsx b/frontend/src/pages/PlaylistPage.tsx new file mode 100644 index 0000000..3a0e4d9 --- /dev/null +++ b/frontend/src/pages/PlaylistPage.tsx @@ -0,0 +1,125 @@ +import { useState, useEffect } from 'react'; +import { useParams, Link } from 'react-router-dom'; +import { apiFetch } from '../lib/api'; + +interface Video { + id: string; + title: string; + thumbnailUrl: string | null; + duration: number | null; +} + +interface Playlist { + id: string; + title: string; + description: string | null; + visibility: 'private' | 'shared' | 'public'; +} + +interface PlaylistResponse { + success: boolean; + data: { + playlist: Playlist; + videos: Video[]; + permission: 'owner' | 'view' | 'edit'; + }; +} + +export default function PlaylistPage() { + const { id } = useParams<{ id: string }>(); + const [data, setData] = useState(null); + const [error, setError] = useState<'forbidden' | 'not_found' | null>(null); + const [loading, setLoading] = useState(true); + + useEffect(() => { + if (!id) return; + apiFetch(`/playlists/${id}`) + .then((res) => setData(res.data)) + .catch((err: Error) => { + if (err.message.includes('403')) setError('forbidden'); + else setError('not_found'); + }) + .finally(() => setLoading(false)); + }, [id]); + + if (loading) { + return ( +
+
+ {[...Array(4)].map((_, i) => ( +
+ ))} +
+ ); + } + + if (error === 'forbidden') { + return ( +
+ ⊘ +

Accès refusé à cette playlist.

+ + ← Playlists + +
+ ); + } + + if (!data) { + return ( +
+

Playlist introuvable.

+ + ← Playlists + +
+ ); + } + + const { playlist, videos, permission } = data; + + return ( +
+ +
+
+

{playlist.title}

+ {permission} +
+ {playlist.description && ( +

{playlist.description}

+ )} +
+ + {videos.length === 0 ? ( +

Aucune vidéo dans cette playlist.

+ ) : ( +
+ {videos.map((v, i) => ( + + {i + 1} + {v.thumbnailUrl && ( + + )} + {v.title} + {v.duration && ( + + {Math.floor(v.duration / 60)}:{String(v.duration % 60).padStart(2, '0')} + + )} + + ))} +
+ )} + + + ← Playlists + + +
+ ); +} diff --git a/frontend/src/pages/PlaylistsPage.tsx b/frontend/src/pages/PlaylistsPage.tsx new file mode 100644 index 0000000..acd7dea --- /dev/null +++ b/frontend/src/pages/PlaylistsPage.tsx @@ -0,0 +1,128 @@ +import { useState, useEffect } from 'react'; +import { Link } from 'react-router-dom'; +import { apiFetch } from '../lib/api'; + +interface Playlist { + id: string; + title: string; + description: string | null; + visibility: 'private' | 'shared' | 'public'; +} + +interface PlaylistsResponse { + success: boolean; + data: { + owned: Playlist[]; + shared: (Playlist & { permission: 'view' | 'edit' })[]; + }; +} + +export default function PlaylistsPage() { + const [owned, setOwned] = useState([]); + const [shared, setShared] = useState<(Playlist & { permission: 'view' | 'edit' })[]>([]); + const [loading, setLoading] = useState(true); + const [createTitle, setCreateTitle] = useState(''); + const [creating, setCreating] = useState(false); + + useEffect(() => { + apiFetch('/playlists') + .then((res) => { + setOwned(res.data.owned); + setShared(res.data.shared); + }) + .catch(() => {}) + .finally(() => setLoading(false)); + }, []); + + async function handleCreate(e: React.FormEvent) { + e.preventDefault(); + if (!createTitle.trim() || creating) return; + setCreating(true); + try { + const res = await apiFetch<{ success: boolean; data: { playlist: Playlist } }>( + '/playlists', + { method: 'POST', body: JSON.stringify({ title: createTitle.trim() }) } + ); + setOwned((prev) => [res.data.playlist, ...prev]); + setCreateTitle(''); + } catch {} + setCreating(false); + } + + if (loading) { + return ( +
+ {[...Array(3)].map((_, i) => ( +
+ ))} +
+ ); + } + + return ( +
+ +
+

Mes playlists

+
+ + {/* Créer */} +
+ setCreateTitle(e.target.value)} + placeholder="Nouvelle playlist…" + className="flex-1 rounded border border-od-border bg-od-surface px-3 py-2 text-sm text-od-text placeholder-od-muted outline-none focus:border-od-accent" + /> + +
+ + {/* Mes playlists */} + {owned.length > 0 && ( +
+

Créées

+ {owned.map((p) => )} +
+ )} + + {/* Partagées */} + {shared.length > 0 && ( +
+

Partagées avec moi

+ {shared.map((p) => )} +
+ )} + + {owned.length === 0 && shared.length === 0 && ( +

Aucune playlist pour l'instant.

+ )} + +
+ ); +} + +function PlaylistRow({ playlist, badge }: { playlist: Playlist; badge?: string }) { + return ( + + {playlist.title} +
+ {badge && ( + {badge} + )} + + {playlist.visibility === 'private' ? '⊠' : playlist.visibility === 'shared' ? '⊡' : '⊞'} + +
+ + ); +}