Add post-login welcome and friendly how-it-works guide

2026-09-07 16:08:37 +12:00
parent 0637860b95
commit 4034a8f72a
9 changed files with 174 additions and 179 deletions
@@ -0,0 +1,36 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { authFetch, clearToken, getApiBase } from '../lib/auth'
+import '../welcome.css'
+
+export default function WelcomePage() {
+  const [ready, setReady] = useState(false)
+  const [url, setUrl] = useState<string | null>(null)
+  const [error, setError] = useState('')
+  useEffect(() => {
+    const controller = new AbortController()
+    void (async () => {
+      try {
+        const response = await authFetch(`${getApiBase()}/site/info`, { signal: controller.signal })
+        if (response.status === 401) { clearToken(); window.location.replace('/login'); return }
+        if (!response.ok) throw new Error('Unavailable')
+        const data = await response.json()
+        const candidate = data.mediaServerUrl ? new URL(data.mediaServerUrl) : null
+        if (candidate && ['https:', 'http:'].includes(candidate.protocol) && !candidate.username && !candidate.password) setUrl(candidate.href)
+        setReady(true)
+      } catch {
+        if (!controller.signal.aborted) setError('We couldn’t load your welcome page. Please try again.')
+      }
+    })()
+    return () => controller.abort()
+  }, [])
+  return <main className="welcome-page">
+    <header><span className="welcome-kicker">GrizzlyFlix + Magent</span><h1>Make yourself at home.</h1><p>Something to watch, or something to sort out?</p></header>
+    {error ? <div role="alert"><p>{error}</p><button onClick={() => window.location.reload()}>Try again</button> <a href="/login">Back to sign in</a></div> : !ready ? <p role="status">Getting things ready…</p> : <div className="welcome-choices">
+      {url ? <a className="welcome-choice" href={url}><span className="welcome-icon" aria-hidden="true">▷</span><h2>Go to GrizzlyFlix</h2><p>Find your next favourite. Watch movies and TV shows.</p><strong>Let’s watch <span aria-hidden="true">→</span></strong></a> : <section className="welcome-choice"><span className="welcome-icon" aria-hidden="true">▷</span><h2>Go to GrizzlyFlix</h2><p>The watch link hasn’t been set up yet. Please ask an admin to add the public playback URL.</p></section>}
+      <a className="welcome-choice" href="/"><span className="welcome-icon" aria-hidden="true">☷</span><h2>Manage your account</h2><p>Track requests, report a problem, or update your profile.</p><strong>Open 01 My Requests <span aria-hidden="true">→</span></strong></a>
+    </div>}
+    <footer>First time here? <a href="/how-it-works">Here’s how it works</a>.</footer>
+  </main>
+}