Initialize CMS application scaffold

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

ui/app/.env.example

@@ -0,0 +1,5 @@
+# Leave empty for a same-origin backend.
+VITE_API_BASE_URL=
+VITE_GOOGLE_AUTH_ENDPOINT=/api/auth/google
+VITE_SESSION_ENDPOINT=/api/auth/session
+VITE_LOGOUT_ENDPOINT=/api/auth/logout

ui/app/.gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+.env.local
+.env.*.local

ui/app/README.md

@@ -0,0 +1,12 @@
+# CMS frontend
+
+This Vite/React app lives in `ui/app` and is intentionally independent of the Go backend. Run
+`npm install`, then `npm run dev` or `npm run build`.
+
+The API defaults to same-origin `/api/auth/session`, `/api/auth/google`, and
+`/api/auth/logout`. Set `VITE_API_BASE_URL` for a separate backend, or override the endpoint
+paths with `VITE_SESSION_ENDPOINT`, `VITE_GOOGLE_AUTH_ENDPOINT`, and `VITE_LOGOUT_ENDPOINT`.
+The Google endpoint may return JSON containing `user` and an optional `token`/`accessToken`, or a
+redirect response. Sessions use cookies (`credentials: include`) and tokens are retained only for
+the current browser tab. Provider-specific login is isolated in `src/api.ts` so Facebook can be
+added without changing the routes or UI.

ui/app/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#f8fafc" />
+    <title>CMS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

ui/app/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "cms-ui",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-router-dom": "^7.9.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
+    "@vitejs/plugin-react": "^5.0.4",
+    "typescript": "^5.9.2",
+    "vite": "^7.1.7"
+  }
+}

ui/app/src/App.tsx

@@ -0,0 +1,43 @@
+import { Navigate, Route, Routes, Link, useLocation, useNavigate } from 'react-router-dom'
+import { useAuth } from './auth'
+
+function Shell({ children, admin = false }: { children: React.ReactNode; admin?: boolean }) {
+  const { user, signOut } = useAuth()
+  return <main className="shell">
+    <header className="header"><Link className="brand" to="/">CMS</Link>{user && !admin && <button className="text-button" onClick={() => void signOut()}>Sign out</button>}</header>
+    {children}
+  </main>
+}
+
+function Login({ admin = false }: { admin?: boolean }) {
+  const { user, loading, error, signIn } = useAuth()
+  const navigate = useNavigate()
+  if (!admin && user) return <Navigate to="/test" replace />
+  if (loading) return <Shell admin={admin}><div className="card"><p>Checking your session…</p></div></Shell>
+  return <Shell admin={admin}><section className="card auth-card">
+    <span className="eyebrow">{admin ? 'Administration' : 'Welcome'}</span>
+    <h1>{admin ? 'Admin sign in' : 'Sign in to CMS'}</h1>
+    <p className="muted">{admin ? 'Use your administrator account to continue.' : 'Sign in securely with your external identity provider.'}</p>
+    {error && <p className="error" role="alert">{error}</p>}
+    {!admin && <button className="google-button" onClick={() => void signIn()}><span aria-hidden="true">G</span> Continue with Google</button>}
+    {admin && <p className="muted small">Administrator authentication is handled by the backend.</p>}
+    {admin && <button className="secondary-button" onClick={() => navigate('/')}>Return to home</button>}
+  </section></Shell>
+}
+
+function ProtectedTest() {
+  const { user, loading } = useAuth()
+  const location = useLocation()
+  if (loading) return <Shell><div className="card"><p>Loading…</p></div></Shell>
+  if (!user) return <Navigate to="/" state={{ from: location }} replace />
+  return <Shell><section className="card"><span className="eyebrow">Authenticated</span><h1>Test page</h1><p>You are signed in and can access protected content.</p><div className="profile">{user.email ?? user.name ? `Signed in as ${user.email ?? user.name}` : 'Your session is active.'}</div></section></Shell>
+}
+
+export function App() {
+  return <Routes>
+    <Route path="/" element={<Login />} />
+    <Route path="/admin/login" element={<Login admin />} />
+    <Route path="/test" element={<ProtectedTest />} />
+    <Route path="*" element={<Navigate to="/" replace />} />
+  </Routes>
+}

ui/app/src/api.ts

@@ -0,0 +1,49 @@
+export type User = {
+  id?: string
+  name?: string
+  email?: string
+  picture?: string
+}
+
+export type SessionResponse = {
+  authenticated?: boolean
+  user?: User
+  token?: string
+  accessToken?: string
+  sessionToken?: string
+}
+
+const baseUrl = (import.meta.env.VITE_API_BASE_URL ?? '').replace(/\/$/, '')
+export const apiConfig = {
+  google: import.meta.env.VITE_GOOGLE_AUTH_ENDPOINT ?? '/api/auth/google',
+  session: import.meta.env.VITE_SESSION_ENDPOINT ?? '/api/auth/session',
+  logout: import.meta.env.VITE_LOGOUT_ENDPOINT ?? '/api/auth/logout',
+}
+
+export function apiUrl(path: string) {
+  if (/^https?:\/\//i.test(path)) return path
+  return `${baseUrl}${path.startsWith('/') ? path : `/${path}`}`
+}
+
+export async function requestSession(): Promise<SessionResponse | null> {
+  const response = await fetch(apiUrl(apiConfig.session), {
+    credentials: 'include',
+    headers: { Accept: 'application/json' },
+  })
+  if (response.status === 401 || response.status === 404) return null
+  if (!response.ok) throw new Error('Unable to check your session.')
+  return (await response.json()) as SessionResponse
+}
+
+export async function signInWithGoogle(): Promise<SessionResponse> {
+  window.location.assign(apiUrl(apiConfig.google))
+  return {}
+}
+
+export async function signOut() {
+  await fetch(apiUrl(apiConfig.logout), {
+    method: 'POST',
+    credentials: 'include',
+    headers: { Accept: 'application/json' },
+  })
+}

ui/app/src/auth.tsx

@@ -0,0 +1,64 @@
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, type ReactNode } from 'react'
+import { requestSession, signInWithGoogle, signOut, type User } from './api'
+
+type AuthState = {
+  user: User | null
+  loading: boolean
+  error: string | null
+  signIn: () => Promise<void>
+  signOut: () => Promise<void>
+}
+
+const AuthContext = createContext<AuthState | undefined>(undefined)
+
+function getUser(result: { authenticated?: boolean; user?: User; token?: string; accessToken?: string; sessionToken?: string }) {
+  const token = result.token ?? result.accessToken ?? result.sessionToken
+  if (token) sessionStorage.setItem('cms.auth.token', token)
+  return result.authenticated === false ? null : result.user ?? (token ? {} : null)
+}
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [user, setUser] = useState<User | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  const refresh = useCallback(async () => {
+    try {
+      setError(null)
+      const session = await requestSession()
+      setUser(session ? getUser(session) : null)
+    } catch (err) {
+      setUser(null)
+      setError(err instanceof Error ? err.message : 'Unable to check your session.')
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => { void refresh() }, [refresh])
+
+  const signIn = useCallback(async () => {
+    setError(null)
+    try {
+      const result = await signInWithGoogle()
+      setUser(getUser(result))
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Sign-in failed.')
+    }
+  }, [])
+
+  const logOut = useCallback(async () => {
+    await signOut().catch(() => undefined)
+    sessionStorage.removeItem('cms.auth.token')
+    setUser(null)
+  }, [])
+
+  const value = useMemo(() => ({ user, loading, error, signIn, signOut: logOut }), [user, loading, error, signIn, logOut])
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext)
+  if (!context) throw new Error('useAuth must be used inside AuthProvider')
+  return context
+}

ui/app/src/main.tsx

@@ -0,0 +1,14 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { BrowserRouter } from 'react-router-dom'
+import { AuthProvider } from './auth'
+import { App } from './App'
+import './styles.css'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <BrowserRouter>
+      <AuthProvider><App /></AuthProvider>
+    </BrowserRouter>
+  </StrictMode>,
+)

ui/app/src/styles.css

@@ -0,0 +1,23 @@
+:root { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #172033; background: #f5f7fb; font-synthesis: none; }
+* { box-sizing: border-box; }
+body { margin: 0; min-width: 320px; }
+button, a { font: inherit; }
+.shell { min-height: 100vh; max-width: 760px; margin: auto; padding: 0 24px; }
+.header { height: 76px; display: flex; align-items: center; justify-content: space-between; }
+.brand { color: #172033; font-size: 1.15rem; font-weight: 750; text-decoration: none; letter-spacing: -.02em; }
+.text-button { border: 0; background: transparent; color: #536176; cursor: pointer; padding: 8px; }
+.card { margin: 10vh auto 0; max-width: 440px; padding: 40px; background: white; border: 1px solid #e3e8f0; border-radius: 16px; box-shadow: 0 14px 40px #1720330b; }
+.auth-card { text-align: center; }
+h1 { margin: 10px 0 12px; font-size: clamp(1.7rem, 4vw, 2.25rem); letter-spacing: -.04em; }
+p { line-height: 1.6; }
+.muted { color: #657286; }
+.small { font-size: .875rem; }
+.eyebrow { color: #536fc4; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
+.google-button, .secondary-button { width: 100%; min-height: 48px; border-radius: 9px; cursor: pointer; font-weight: 650; }
+.google-button { margin-top: 22px; border: 1px solid #ccd4e0; color: #172033; background: #fff; }
+.google-button:hover { background: #f8fafc; border-color: #9ba8bb; }
+.google-button span { margin-right: 10px; color: #4285f4; font-weight: 800; }
+.secondary-button { margin-top: 20px; border: 0; background: #edf1f8; color: #344563; }
+.error { padding: 10px 12px; border-radius: 8px; color: #a32d2d; background: #fff0f0; font-size: .9rem; }
+.profile { margin-top: 24px; padding: 14px; border-radius: 8px; background: #f5f7fb; color: #536176; }
+@media (max-width: 480px) { .shell { padding: 0 16px; } .card { padding: 28px 22px; } }

ui/app/src/vite-env.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_BASE_URL?: string
+  readonly VITE_GOOGLE_AUTH_ENDPOINT?: string
+  readonly VITE_SESSION_ENDPOINT?: string
+  readonly VITE_LOGOUT_ENDPOINT?: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}

ui/app/tsconfig.app.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}

ui/app/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

ui/app/tsconfig.node.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true
+  },
+  "include": ["vite.config.ts"]
+}

ui/app/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+})