@actuate-media/cms-admin 0.27.0 → 0.29.0

package/src/views/settings/SessionPolicyCard.tsx

@@ -0,0 +1,123 @@
+'use client'
+
+import { useId, useState } from 'react'
+import { Loader2 } from 'lucide-react'
+import { MAX_CONCURRENT_SESSION_OPTIONS } from '@actuate-media/cms-core/security-center'
+import { ConfirmDangerousSettingDialog } from './components.js'
+import { SecurityCard, StatusRow } from './securityPrimitives.js'
+import type { SecurityForm } from './useSecuritySettings.js'
+
+function sessionsLabel(n: number): string {
+  return n === 0 ? 'Unlimited' : String(n)
+}
+
+export function SessionPolicyCard({
+  form,
+  setField,
+  canEdit,
+  sessionMaxAgeHours,
+  activeSessions,
+  revokeState,
+  onRevokeAll,
+}: {
+  form: SecurityForm
+  setField: <K extends keyof SecurityForm>(key: K, value: SecurityForm[K]) => void
+  canEdit: boolean
+  sessionMaxAgeHours: number
+  activeSessions: number
+  revokeState: 'idle' | 'working' | 'done' | 'error'
+  onRevokeAll: () => void
+}) {
+  const headingId = useId()
+  const maxId = useId()
+  const [confirmRevoke, setConfirmRevoke] = useState(false)
+
+  const maxAgeDays = Math.round(sessionMaxAgeHours / 24)
+
+  return (
+    <SecurityCard
+      headingId={headingId}
+      title="Session Policy"
+      description="Control how many sessions an account can hold and revoke active sessions."
+    >
+      <div className="space-y-4">
+        <div className="flex items-center justify-between gap-4">
+          <label htmlFor={maxId} className="flex-1">
+            <span className="text-foreground text-base font-medium">
+              Maximum concurrent sessions
+            </span>
+            <p className="text-muted-foreground mt-0.5 text-sm">
+              Oldest sessions are signed out when a user exceeds this. Choose Unlimited to disable
+              the cap.
+            </p>
+          </label>
+          <select
+            id={maxId}
+            value={form.maxConcurrentSessions}
+            disabled={!canEdit}
+            onChange={(e) => setField('maxConcurrentSessions', Number(e.target.value))}
+            className="border-border bg-input-background text-foreground focus-visible:ring-ring rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {MAX_CONCURRENT_SESSION_OPTIONS.map((n) => (
+              <option key={n} value={n}>
+                {sessionsLabel(n)}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      <div className="border-border mt-4 space-y-2 border-t pt-4">
+        <StatusRow status="pass" label="Active admin sessions" value={String(activeSessions)} />
+        <StatusRow
+          status="pass"
+          label="Maximum session age"
+          value={`${maxAgeDays} day${maxAgeDays === 1 ? '' : 's'}`}
+        />
+        <StatusRow status="pass" label="Revoke sessions on password change" value="Enabled" />
+      </div>
+
+      <div className="border-border mt-4 flex items-center justify-between gap-3 border-t pt-4">
+        <div>
+          <p className="text-foreground text-sm font-medium">Revoke other sessions</p>
+          <p className="text-muted-foreground text-sm">
+            Sign out every session except this one. Useful after a suspected compromise.
+          </p>
+          {revokeState === 'done' && (
+            <p className="text-success mt-1 text-sm" aria-live="polite">
+              Other sessions revoked.
+            </p>
+          )}
+          {revokeState === 'error' && (
+            <p className="text-destructive mt-1 text-sm" aria-live="polite">
+              Could not revoke sessions. Try again.
+            </p>
+          )}
+        </div>
+        <button
+          type="button"
+          disabled={!canEdit || revokeState === 'working'}
+          onClick={() => setConfirmRevoke(true)}
+          className="border-border text-foreground hover:bg-accent inline-flex shrink-0 items-center gap-2 rounded-md border px-3 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          {revokeState === 'working' && (
+            <Loader2 size={15} className="animate-spin" aria-hidden="true" />
+          )}
+          Revoke other sessions
+        </button>
+      </div>
+
+      <ConfirmDangerousSettingDialog
+        open={confirmRevoke}
+        title="Revoke all other sessions?"
+        description="Every active session except your current one will be signed out immediately. Those users (and your other devices) will need to sign in again."
+        confirmLabel="Revoke sessions"
+        onConfirm={() => {
+          setConfirmRevoke(false)
+          onRevokeAll()
+        }}
+        onCancel={() => setConfirmRevoke(false)}
+      />
+    </SecurityCard>
+  )
+}

package/src/views/settings/securityPrimitives.tsx

@@ -0,0 +1,75 @@
+'use client'
+
+import { AlertTriangle, Check, CircleHelp, X } from 'lucide-react'
+import type { ReactNode } from 'react'
+import type { CheckStatus } from '@actuate-media/cms-core/security-center'
+
+/** Small status icon used in check/summary rows. Text label always accompanies it. */
+export function CheckIcon({ status }: { status: CheckStatus }) {
+  switch (status) {
+    case 'pass':
+      return <Check size={15} className="text-success shrink-0" aria-hidden="true" />
+    case 'warning':
+      return <AlertTriangle size={15} className="text-warning shrink-0" aria-hidden="true" />
+    case 'fail':
+      return <X size={15} className="text-destructive shrink-0" aria-hidden="true" />
+    default:
+      return <CircleHelp size={15} className="text-muted-foreground shrink-0" aria-hidden="true" />
+  }
+}
+
+const STATUS_WORD: Record<CheckStatus, string> = {
+  pass: 'Pass',
+  warning: 'Warning',
+  fail: 'Fail',
+  unknown: 'Unknown',
+}
+
+/** A status row: icon + label on the left, value on the right. */
+export function StatusRow({
+  status,
+  label,
+  value,
+  badge,
+}: {
+  status: CheckStatus
+  label: string
+  value?: ReactNode
+  badge?: ReactNode
+}) {
+  return (
+    <div className="flex items-center justify-between gap-3 py-1.5 text-sm">
+      <span className="flex items-center gap-2">
+        <CheckIcon status={status} />
+        {/* Screen-reader text so status is never conveyed by color/icon alone. */}
+        <span className="sr-only">{STATUS_WORD[status]}: </span>
+        <span className="text-foreground">{label}</span>
+        {badge}
+      </span>
+      {value !== undefined && <span className="text-muted-foreground text-right">{value}</span>}
+    </div>
+  )
+}
+
+/** Section wrapper matching the other settings cards. */
+export function SecurityCard({
+  headingId,
+  title,
+  description,
+  children,
+}: {
+  headingId: string
+  title: string
+  description: string
+  children: ReactNode
+}) {
+  return (
+    <section aria-labelledby={headingId} className="border-border bg-card rounded-lg border p-4">
+      <h3 id={headingId} className="text-foreground mb-1 text-base font-medium">
+        {title}
+      </h3>
+      <p className="text-muted-foreground mb-4 text-sm">{description}</p>
+      {children}
+    </section>
+  )
+}

package/src/views/settings/useSecuritySettings.ts

@@ -0,0 +1,197 @@
+'use client'
+
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import {
+  validateSecuritySettings,
+  type SecurityCenterData,
+  type SecuritySettings,
+} from '@actuate-media/cms-core/security-center'
+import { cmsApi } from '../../lib/api.js'
+import type { ValidationIssue } from './useGeneralSettings.js'
+
+/** The subset of security policy the tab can actually edit + enforce. */
+export interface SecurityForm {
+  mfaRequired: boolean
+  mfaGracePeriodDays: number
+  maxConcurrentSessions: number
+}
+
+type SaveState = 'idle' | 'saving' | 'success' | 'error'
+
+const EMPTY_FORM: SecurityForm = {
+  mfaRequired: false,
+  mfaGracePeriodDays: 7,
+  maxConcurrentSessions: 5,
+}
+
+function formFromSettings(s: SecuritySettings): SecurityForm {
+  return {
+    mfaRequired: s.mfa.required,
+    mfaGracePeriodDays: s.mfa.gracePeriodDays,
+    maxConcurrentSessions: s.session.maxConcurrentSessions,
+  }
+}
+
+function formToSettings(f: SecurityForm): SecuritySettings {
+  return {
+    mfa: { required: f.mfaRequired, gracePeriodDays: f.mfaGracePeriodDays },
+    session: { maxConcurrentSessions: f.maxConcurrentSessions },
+  }
+}
+
+export interface UseSecuritySettings {
+  loading: boolean
+  loadError: string | null
+  data: SecurityCenterData | null
+  form: SecurityForm
+  setField: <K extends keyof SecurityForm>(key: K, value: SecurityForm[K]) => void
+  dirty: boolean
+  issues: ValidationIssue[]
+  hasErrors: boolean
+  canEdit: boolean
+  saveState: SaveState
+  saveError: string | null
+  save: () => Promise<void>
+  reset: () => void
+  refetch: () => void
+  revokeState: 'idle' | 'working' | 'done' | 'error'
+  revokeAllOtherSessions: () => Promise<number | null>
+}
+
+/**
+ * Loads the Security Center (`GET /security`) — computed posture, cross-module
+ * summaries, secret/encryption verdicts — and tracks the small editable policy
+ * (MFA requirement + grace, concurrent-session cap). Save is lockout-safe: the
+ * client mirrors the server's MFA guard so the operator gets immediate feedback,
+ * and the server re-checks authoritatively.
+ */
+export function useSecuritySettings(canEdit: boolean): UseSecuritySettings {
+  const [loading, setLoading] = useState(true)
+  const [loadError, setLoadError] = useState<string | null>(null)
+  const [data, setData] = useState<SecurityCenterData | null>(null)
+  const [baseline, setBaseline] = useState<SecurityForm>(EMPTY_FORM)
+  const [form, setForm] = useState<SecurityForm>(EMPTY_FORM)
+  const [saveState, setSaveState] = useState<SaveState>('idle')
+  const [saveError, setSaveError] = useState<string | null>(null)
+  const [revokeState, setRevokeState] = useState<'idle' | 'working' | 'done' | 'error'>('idle')
+  const [reloadKey, setReloadKey] = useState(0)
+
+  useEffect(() => {
+    let cancelled = false
+    setLoading(true)
+    setLoadError(null)
+    cmsApi<SecurityCenterData>('/security')
+      .then((res) => {
+        if (cancelled) return
+        if (res.error || !res.data) {
+          setLoadError(res.error ?? 'Failed to load security settings.')
+          return
+        }
+        setData(res.data)
+        const f = formFromSettings(res.data.settings)
+        setBaseline(f)
+        setForm(f)
+      })
+      .catch(() => {
+        if (!cancelled) setLoadError('Failed to load security settings.')
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [reloadKey])
+
+  const setField = useCallback(<K extends keyof SecurityForm>(key: K, value: SecurityForm[K]) => {
+    setForm((prev) => ({ ...prev, [key]: value }))
+    setSaveState('idle')
+  }, [])
+
+  const dirty = useMemo(
+    () => (Object.keys(form) as Array<keyof SecurityForm>).some((k) => form[k] !== baseline[k]),
+    [form, baseline],
+  )
+
+  const issues = useMemo<ValidationIssue[]>(() => {
+    const list = validateSecuritySettings(formToSettings(form))
+    // Client mirror of the server's lockout-safe MFA guard: block enabling
+    // org-wide MFA when the current admin has not set up MFA themselves.
+    if (form.mfaRequired && !baseline.mfaRequired && data && !data.viewerHasMfa) {
+      list.push({
+        field: 'mfaRequired',
+        message:
+          'Set up MFA for your own account before requiring it for everyone — otherwise you would lock yourself out.',
+        severity: 'error',
+      })
+    }
+    return list
+  }, [form, baseline.mfaRequired, data])
+
+  const hasErrors = issues.some((i) => i.severity === 'error')
+
+  const save = useCallback(async () => {
+    if (!canEdit || hasErrors || !dirty) return
+    setSaveState('saving')
+    setSaveError(null)
+    try {
+      const res = await cmsApi<SecurityCenterData>('/security', {
+        method: 'PUT',
+        body: JSON.stringify(formToSettings(form)),
+      })
+      if (res.error || !res.data) throw new Error(res.error ?? 'Failed to save security settings.')
+      setData(res.data)
+      const f = formFromSettings(res.data.settings)
+      setBaseline(f)
+      setForm(f)
+      setSaveState('success')
+    } catch (err) {
+      setSaveState('error')
+      setSaveError(err instanceof Error ? err.message : 'Failed to save security settings.')
+    }
+  }, [canEdit, hasErrors, dirty, form])
+
+  const reset = useCallback(() => {
+    setForm(baseline)
+    setSaveState('idle')
+    setSaveError(null)
+  }, [baseline])
+
+  const refetch = useCallback(() => setReloadKey((k) => k + 1), [])
+
+  const revokeAllOtherSessions = useCallback(async (): Promise<number | null> => {
+    setRevokeState('working')
+    try {
+      const res = await cmsApi<{ revoked: number }>('/security/sessions/revoke-all', {
+        method: 'POST',
+      })
+      if (res.error) throw new Error(res.error)
+      setRevokeState('done')
+      // Refresh the active-session count.
+      setReloadKey((k) => k + 1)
+      return res.data?.revoked ?? 0
+    } catch {
+      setRevokeState('error')
+      return null
+    }
+  }, [])
+
+  return {
+    loading,
+    loadError,
+    data,
+    form,
+    setField,
+    dirty,
+    issues,
+    hasErrors,
+    canEdit,
+    saveState,
+    saveError,
+    save,
+    reset,
+    refetch,
+    revokeState,
+    revokeAllOtherSessions,
+  }
+}