Add authenticated content editing

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
2026-09-19 14:56:49 +02:00 · 2026-09-19 14:56:49 +02:00 · fd2877da9e
commit fd2877da9e
parent fac7588d23
15 changed files with 581 additions and 37 deletions
--- a/ui/app/src/App.tsx
+++ b/ui/app/src/App.tsx
@ -1,43 +1,140 @@
-import { Navigate, Route, Routes, Link, useLocation, useNavigate } from 'react-router-dom'
+import { useEffect, useRef, useState } from 'react'
+import { Link, Navigate, Route, Routes, useLocation, useNavigate, useParams } from 'react-router-dom'
+import { getContent, listContent, updateContent, type Content, type ContentUpdate } from './api'
 import { useAuth } from './auth'

-function Shell({ children, admin = false }: { children: React.ReactNode; admin?: boolean }) {
+function Shell({ children }: { children: React.ReactNode }) {
  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>
+    <header className="header"><Link className="brand" to="/">CMS</Link>{user && <button className="text-button" onClick={() => void signOut()}>Sign out</button>}</header>
    {children}
  </main>
 }

-function Login({ admin = false }: { admin?: boolean }) {
+function Login() {
  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>
+  if (user) return <Navigate to="/protected" replace />
+  if (loading) return <Shell><div className="card"><p>Checking your session…</p></div></Shell>
+  return <Shell><section className="card auth-card">
+    <span className="eyebrow">Welcome</span><h1>Sign in to CMS</h1>
+    <p className="muted">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>}
+    <button className="google-button" onClick={() => void signIn()}><span aria-hidden="true">G</span> Continue with Google</button>
  </section></Shell>
 }

-function ProtectedTest() {
+function RequireAuth({ children }: { children: React.ReactNode }) {
  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>
+  return <>{children}</>
+}
+
+function ContentCard({ item }: { item: Content }) {
+  return <article className="content-card">
+    <span className="status">{item.status}</span>
+    <h2><Link to={`/content/${item.id}`}>{item.title}</Link></h2>
+    <p>{item.summary}</p>
+    <Link className="read-link" to={`/content/${item.id}`}>Read more <span aria-hidden="true">→</span></Link>
+  </article>
+}
+
+function ContentList() {
+  const [items, setItems] = useState<Content[]>([])
+  const [cursor, setCursor] = useState<string | null | undefined>(undefined)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const loadingMore = useRef(false)
+  const sentinel = useRef<HTMLDivElement>(null)
+
+  const load = async (next = false) => {
+    if (loadingMore.current || (next && !cursor)) return
+    loadingMore.current = true
+    setLoading(true)
+    try {
+      const response = await listContent(next ? cursor : undefined)
+      const page = Array.isArray(response) ? response : response.items ?? response.content ?? response.data ?? []
+      setItems(current => next ? [...current, ...page] : page)
+      setCursor(Array.isArray(response) ? null : response.nextCursor ?? response.cursor ?? (response.hasMore ? undefined : null))
+      setError(null)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unable to load content.')
+    } finally {
+      loadingMore.current = false
+      setLoading(false)
+    }
+  }
+  useEffect(() => { void load() }, [])
+  useEffect(() => {
+    const node = sentinel.current
+    if (!node) return
+    const observer = new IntersectionObserver(entries => { if (entries[0]?.isIntersecting) void load(true) }, { rootMargin: '240px' })
+    observer.observe(node)
+    return () => observer.disconnect()
+  }, [cursor])
+
+  return <Shell><section className="content-page">
+    <div className="page-heading"><div><span className="eyebrow">Journal</span><h1>Latest content</h1></div></div>
+    {error && <p className="error" role="alert">{error}</p>}
+    {!loading && !error && items.length === 0 && <div className="card empty-state"><h2>No content yet</h2><p className="muted">There is nothing published here yet.</p></div>}
+    <div className="content-grid">{items.map(item => <ContentCard item={item} key={item.id} />)}</div>
+    <div ref={sentinel} className="list-status" aria-live="polite">{loading ? <p className="muted">Loading content…</p> : cursor ? <p className="muted">Loading more…</p> : items.length > 0 ? <p className="muted">You’ve reached the end.</p> : null}</div>
+  </section></Shell>
+}
+
+function ContentDetail() {
+  const { id = '' } = useParams()
+  const { user } = useAuth()
+  const canEdit = Boolean(user?.capabilities?.canEdit)
+  const [item, setItem] = useState<Content | null>(null)
+  const [editing, setEditing] = useState(false)
+  const [draft, setDraft] = useState<ContentUpdate | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const navigate = useNavigate()
+  useEffect(() => {
+    let active = true
+    setLoading(true)
+    void getContent(id).then(value => { if (active) { setItem(value); setDraft({ title: value.title, summary: value.summary, body: value.body, status: value.status }) } })
+      .catch(err => active && setError(err instanceof Error ? err.message : 'Unable to load content.'))
+      .finally(() => active && setLoading(false))
+    return () => { active = false }
+  }, [id])
+  if (loading) return <Shell><div className="card"><p>Loading content…</p></div></Shell>
+  if (error || !item || !draft) return <Shell><div className="card"><p className="error" role="alert">{error ?? 'Content not found.'}</p><Link to="/content">Back to content</Link></div></Shell>
+  const save = async () => {
+    setSaving(true); setError(null)
+    try { const saved = await updateContent(id, draft); setItem(saved); setDraft({ title: saved.title, summary: saved.summary, body: saved.body, status: saved.status }); setEditing(false) }
+    catch (err) { setError(err instanceof Error ? err.message : 'Unable to save changes.') }
+    finally { setSaving(false) }
+  }
+  return <Shell><article className="detail-page">
+    <Link className="back-link" to="/content">← All content</Link>
+    {error && <p className="error" role="alert">{error}</p>}
+    {editing ? <div className="editor">
+      <label>Title<input value={draft.title} onChange={e => setDraft({ ...draft, title: e.target.value })} /></label>
+      <label>Summary<textarea rows={3} value={draft.summary} onChange={e => setDraft({ ...draft, summary: e.target.value })} /></label>
+      <label>Body<textarea rows={12} value={draft.body} onChange={e => setDraft({ ...draft, body: e.target.value })} /></label>
+      <label>Status<select value={draft.status} onChange={e => setDraft({ ...draft, status: e.target.value })}><option value="draft">Draft</option><option value="published">Published</option><option value="archived">Archived</option></select></label>
+      <div className="actions"><button className="primary-button" disabled={saving} onClick={() => void save()}>{saving ? 'Saving…' : 'Save changes'}</button><button className="secondary-button" onClick={() => setEditing(false)}>Cancel</button></div>
+    </div> : <><div className="detail-heading"><span className="status">{item.status}</span><h1>{item.title}</h1><p className="muted">{item.summary}</p>{canEdit && <button className="primary-button edit-button" onClick={() => setEditing(true)}>Edit</button>}</div><div className="body-copy">{item.body}</div></>}
+  </article></Shell>
+}
+
+function ProtectedTest() {
+  const { user } = useAuth()
+  return <Shell><section className="card protected-card"><span className="eyebrow">Authenticated</span><h1>Protected content</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><Link className="primary-button inline-button" to="/content">Browse content</Link></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="/protected" element={<RequireAuth><ProtectedTest /></RequireAuth>} />
+    <Route path="/test" element={<RequireAuth><ProtectedTest /></RequireAuth>} />
+    <Route path="/content" element={<RequireAuth><ContentList /></RequireAuth>} />
+    <Route path="/content/:id" element={<RequireAuth><ContentDetail /></RequireAuth>} />
    <Route path="*" element={<Navigate to="/" replace />} />
  </Routes>
 }
--- a/ui/app/src/api.ts
+++ b/ui/app/src/api.ts
@ -3,11 +3,14 @@ export type User = {
  name?: string
  email?: string
  picture?: string
+  capabilities?: Record<string, boolean>
 }

 export type SessionResponse = {
  authenticated?: boolean
  user?: User
+  capabilities?: Record<string, boolean>
+  canEdit?: boolean
  token?: string
  accessToken?: string
  sessionToken?: string
@ -18,6 +21,7 @@ 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',
+  content: import.meta.env.VITE_CONTENT_ENDPOINT ?? '/api/content',
 }

 export function apiUrl(path: string) {
@ -32,7 +36,15 @@ export async function requestSession(): Promise<SessionResponse | null> {
  })
  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
+  const value = (await response.json()) as SessionResponse & { CanEdit?: boolean; User?: User }
+  if (value.User && !value.user) value.user = value.User
+  if (value.canEdit === undefined && value.CanEdit !== undefined) value.canEdit = value.CanEdit
+  if (value.user) value.user = normalizeUser(value.user)
+  return value
+}
+
+function normalizeUser(value: User & { ID?: string; Email?: string; Name?: string; Editor?: boolean }): User {
+  return { id: value.id ?? value.ID, email: value.email ?? value.Email, name: value.name ?? value.Name, picture: value.picture, capabilities: { ...(value.capabilities ?? {}), ...(value.Editor === true ? { canEdit: true } : {}) } }
 }

 export async function signInWithGoogle(): Promise<SessionResponse> {
@ -47,3 +59,64 @@ export async function signOut() {
    headers: { Accept: 'application/json' },
  })
 }
+
+export type Content = {
+  id: string
+  title: string
+  summary: string
+  body: string
+  status: string
+  createdAt?: string
+  updatedAt?: string
+}
+
+export type ContentListResponse = {
+  items?: Content[]
+  content?: Content[]
+  data?: Content[]
+  nextCursor?: string | null
+  cursor?: string | null
+  hasMore?: boolean
+  offset?: number
+  limit?: number
+}
+
+function normalizeContent(value: Content & { ID?: string; Slug?: string; Title?: string; Summary?: string; Body?: string; Status?: string }): Content {
+  return { id: value.id ?? value.Slug ?? String(value.ID ?? ''), title: value.title ?? value.Title ?? '', summary: value.summary ?? value.Summary ?? '', body: value.body ?? value.Body ?? '', status: value.status ?? value.Status ?? '', createdAt: value.createdAt, updatedAt: value.updatedAt }
+}
+
+async function contentRequest<T>(path = '', init?: RequestInit): Promise<T> {
+  const response = await fetch(apiUrl(`${apiConfig.content}${path}`), {
+    credentials: 'include',
+    ...init,
+    headers: { Accept: 'application/json', ...(init?.body ? { 'Content-Type': 'application/json' } : {}), ...init?.headers },
+  })
+  if (!response.ok) {
+    if (response.status === 401) throw new Error('Please sign in to view content.')
+    throw new Error((await response.text()) || 'Unable to load content.')
+  }
+  return (await response.json()) as T
+}
+
+export async function listContent(cursor?: string | null): Promise<ContentListResponse> {
+  const query = cursor ? `?offset=${encodeURIComponent(cursor)}` : ''
+  const response = await contentRequest<ContentListResponse | (Content & { ID?: string; Slug?: string; Title?: string; Summary?: string; Body?: string; Status?: string })[]>(query)
+  if (Array.isArray(response)) return { items: response.map(normalizeContent), nextCursor: null }
+  const items = (response.items ?? response.content ?? response.data ?? []).map(normalizeContent)
+  const offset = response.offset ?? (cursor ? Number(cursor) : 0)
+  const limit = response.limit ?? 20
+  return { ...response, items, nextCursor: items.length >= limit ? String(offset + items.length) : null }
+}
+
+export function getContent(id: string): Promise<Content> {
+  return contentRequest<Content>(`/${encodeURIComponent(id)}`).then(value => normalizeContent(value as Content & { ID?: string; Slug?: string; Title?: string; Summary?: string; Body?: string; Status?: string }))
+}
+
+export type ContentUpdate = Pick<Content, 'title' | 'summary' | 'body' | 'status'>
+
+export function updateContent(id: string, content: ContentUpdate): Promise<Content> {
+  return contentRequest<Content>(`/${encodeURIComponent(id)}`, {
+    method: 'PUT',
+    body: JSON.stringify(content),
+  }).then(value => normalizeContent(value as Content & { ID?: string; Slug?: string; Title?: string; Summary?: string; Body?: string; Status?: string }))
+}
--- a/ui/app/src/auth.tsx
+++ b/ui/app/src/auth.tsx
@ -11,10 +11,12 @@ type AuthState = {

 const AuthContext = createContext<AuthState | undefined>(undefined)

-function getUser(result: { authenticated?: boolean; user?: User; token?: string; accessToken?: string; sessionToken?: string }) {
+function getUser(result: { authenticated?: boolean; user?: User; capabilities?: Record<string, boolean>; canEdit?: boolean; 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)
+  if (result.authenticated === false) return null
+  if (!result.user && !token && result.authenticated !== true) return null
+  return { ...(result.user ?? {}), capabilities: { ...result.capabilities, ...(result.canEdit !== undefined ? { canEdit: result.canEdit } : {}), ...result.user?.capabilities } }
 }

 export function AuthProvider({ children }: { children: ReactNode }) {
--- a/ui/app/src/styles.css
+++ b/ui/app/src/styles.css
@ -2,7 +2,7 @@
 * { 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; }
+.shell { min-height: 100vh; max-width: 960px; margin: auto; padding: 0 24px 64px; }
 .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; }
@ -20,4 +20,36 @@ p { line-height: 1.6; }
 .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; }
+.content-page, .detail-page { padding-top: 6vh; }
+.page-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 28px; }
+.content-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
+.content-card { padding: 26px; background: #fff; border: 1px solid #e3e8f0; border-radius: 14px; box-shadow: 0 10px 30px #17203308; }
+.content-card h2 { margin: 12px 0 8px; font-size: 1.3rem; letter-spacing: -.025em; }
+.content-card h2 a { color: #172033; text-decoration: none; }
+.content-card h2 a:hover, .read-link:hover { color: #536fc4; }
+.content-card p { color: #657286; margin: 0 0 18px; }
+.status { display: inline-block; color: #536fc4; background: #eef2ff; border-radius: 999px; padding: 4px 9px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
+.read-link, .back-link { color: #344f9b; font-weight: 650; text-decoration: none; }
+.list-status { text-align: center; min-height: 54px; padding: 14px; }
+.empty-state { max-width: none; text-align: center; margin-top: 0; }
+.detail-page { max-width: 720px; margin: auto; }
+.back-link { display: inline-block; margin-bottom: 32px; }
+.detail-heading { position: relative; padding-bottom: 26px; border-bottom: 1px solid #e3e8f0; }
+.detail-heading h1 { margin-top: 14px; }
+.detail-heading .muted { font-size: 1.1rem; }
+.edit-button { position: absolute; top: 0; right: 0; }
+.body-copy { white-space: pre-wrap; line-height: 1.8; padding-top: 28px; }
+.editor { display: grid; gap: 18px; }
+.editor label { display: grid; gap: 7px; color: #344563; font-size: .9rem; font-weight: 650; }
+.editor input, .editor textarea, .editor select { width: 100%; border: 1px solid #ccd4e0; border-radius: 8px; padding: 11px 12px; background: #fff; color: #172033; font: inherit; font-weight: 400; }
+.editor textarea { resize: vertical; }
+.actions { display: flex; gap: 10px; margin-top: 4px; }
+.primary-button, .secondary-button { border: 0; border-radius: 8px; min-height: 42px; padding: 0 17px; cursor: pointer; font-weight: 650; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
+.primary-button { background: #536fc4; color: #fff; }
+.primary-button:hover { background: #405bac; }
+.primary-button:disabled { opacity: .6; cursor: wait; }
+.actions .secondary-button { margin: 0; background: #edf1f8; color: #344563; }
+.inline-button { margin-top: 22px; }
+.protected-card { text-align: center; }
@media (max-width: 480px) { .shell { padding: 0 16px; } .card { padding: 28px 22px; } }
+@media (max-width: 640px) { .content-grid { grid-template-columns: 1fr; } .content-page, .detail-page { padding-top: 3vh; } .edit-button { position: static; margin-top: 10px; } }
--- a/ui/changelog.md
+++ b/ui/changelog.md
@ -30,3 +30,31 @@ React. Keep this changelog in `ui/changelog.md`.
 - Added environment examples, ignore rules, README documentation, and backend
  unit tests.
 - Verified Go tests and prepared frontend typecheck/build scripts.
+
+## 2026-09-19 — Content and authorization
+
+### Prompt
+
+Fix the missing protected page and add a blog-like content experience with
+infinite scrolling summaries, detail links, capability-controlled editing and
+saving. Persist logged-in users so authorities can be assigned. Add a content
+data model with creation/edit audit information and a history table recording
+changes. Implement the domain model, mappers, web handlers, services,
+repositories, migrations, and pages.
+
+### Tasks completed
+
+- Added persisted user role/editor authorization fields and generic `canEdit`
+  capability evaluation; administrators can edit through the same capability.
+- Added content and content-history domain models, GORM models, explicit
+  mappers, repositories, services, and a Goose PostgreSQL migration.
+- Added authenticated content listing/detail/update endpoints with pagination,
+  validation, 401/403 handling, audit fields, and transactional history
+  snapshots.
+- Added `/protected` and `/api/protected`; retained `/test` and
+  `/api/test/protected` compatibility routes.
+- Added the authenticated infinite-scroll content page, detail page, and
+  capability-gated edit/save mode.
+- Exposed the authenticated user and generic capabilities in the session
+  response; no admin link was added to user-facing navigation.
+- Revalidated with `go test ./...`, `npm run typecheck`, and `npm run build`.