Initial commit

2026-01-22 22:49:57 +13:00
commit fe43a81175
67 changed files with 9408 additions and 0 deletions
--- a/frontend/app/login/page.tsx
+++ b/frontend/app/login/page.tsx
@@ -0,0 +1,91 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+import { useState } from 'react'
+import { getApiBase, setToken, clearToken } from '../lib/auth'
+import BrandingLogo from '../ui/BrandingLogo'
+
+export default function LoginPage() {
+  const router = useRouter()
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(false)
+
+  const submit = async (event: React.FormEvent, mode: 'local' | 'jellyfin') => {
+    event.preventDefault()
+    setError(null)
+    setLoading(true)
+    try {
+      clearToken()
+      const baseUrl = getApiBase()
+      const endpoint = mode === 'jellyfin' ? '/auth/jellyfin/login' : '/auth/login'
+      const body = new URLSearchParams({ username, password })
+      const response = await fetch(`${baseUrl}${endpoint}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+        body,
+      })
+      if (!response.ok) {
+        throw new Error('Login failed')
+      }
+      const data = await response.json()
+      if (data?.access_token) {
+        setToken(data.access_token)
+        if (typeof window !== 'undefined') {
+          window.location.href = '/'
+          return
+        }
+        router.push('/')
+        return
+      }
+      throw new Error('Login failed')
+    } catch (err) {
+      console.error(err)
+      setError('Invalid username or password.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <main className="card auth-card">
+      <BrandingLogo className="brand-logo brand-logo--login" />
+      <h1>Sign in</h1>
+      <p className="lede">Use your Jellyfin account, or sign in with Magent instead.</p>
+      <form onSubmit={(event) => submit(event, 'jellyfin')} className="auth-form">
+        <label>
+          Username
+          <input
+            value={username}
+            onChange={(event) => setUsername(event.target.value)}
+            autoComplete="username"
+          />
+        </label>
+        <label>
+          Password
+          <input
+            type="password"
+            value={password}
+            onChange={(event) => setPassword(event.target.value)}
+            autoComplete="current-password"
+          />
+        </label>
+        {error && <div className="error-banner">{error}</div>}
+        <div className="auth-actions">
+          <button type="submit" disabled={loading}>
+            {loading ? 'Signing in...' : 'Login with Jellyfin account'}
+          </button>
+        </div>
+        <button
+          type="button"
+          className="ghost-button"
+          disabled={loading}
+          onClick={(event) => submit(event, 'local')}
+        >
+          Sign in with Magent account
+        </button>
+      </form>
+    </main>
+  )
+}