diff --git a/ui/dist/app.js b/ui/dist/app.js index dde559d..cd45ba4 100644 --- a/ui/dist/app.js +++ b/ui/dist/app.js @@ -1,5 +1,5 @@ import { h, render, Component } from 'preact'; -import { useState, useEffect, useCallback } from 'preact/hooks'; +import { useState, useEffect, useCallback, useRef } from 'preact/hooks'; import htm from 'htm'; const html = htm.bind(h); @@ -23,12 +23,53 @@ async function api(method, path, body) { headers: { 'Authorization': `Bearer ${getApiKey()}`, 'Content-Type': 'application/json' }, }; if (body) opts.body = JSON.stringify(body); - const res = await fetch(BASE_PATH + path, opts); - const data = await res.json(); - if (!res.ok) throw new Error(data.error || 'Request failed'); + let res; + try { + res = await fetch(BASE_PATH + path, opts); + } catch (e) { + throw new Error('Network error — is the server reachable?'); + } + // A mid-session 401 means the admin key expired/was revoked: clear it and let + // the app bounce to the login screen instead of spraying error toasts. + if (res.status === 401) { + clearApiKey(); + window.dispatchEvent(new CustomEvent('sa-auth-expired')); + throw new Error('Session expired — please sign in again'); + } + // Tolerate non-JSON responses (e.g. a 502 HTML page from a proxy) so the UI + // shows a friendly message rather than a raw "Unexpected token <" crash. + const ct = res.headers.get('content-type') || ''; + let data = null; + if (ct.includes('application/json')) { + data = await res.json().catch(() => null); + } else { + const text = await res.text().catch(() => ''); + if (!res.ok) throw new Error(`Server error (${res.status})${text ? ': ' + text.slice(0, 140) : ''}`); + return text; + } + if (!res.ok) throw new Error((data && data.error) || `Request failed (${res.status})`); return data; } +// === Data hooks === +// useResource gives every screen consistent {data, loading, error, reload} +// instead of each page re-hand-rolling fetch + loading + swallowed errors. +function useResource(method, path, deps = []) { + const [data, setData] = useState(null); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + const reload = useCallback(() => { + setLoading(true); + setError(null); + return api(method, path) + .then((d) => { setData(d); return d; }) + .catch((e) => { setError(e.message || 'Failed to load'); throw e; }) + .finally(() => setLoading(false)); + }, [method, path]); + useEffect(() => { reload().catch(() => {}); }, deps); // eslint-disable-line + return { data, loading, error, reload, setData }; +} + // === Icons (inline SVG) === const icons = { dashboard: html``, @@ -56,13 +97,33 @@ function Toast({ message, type }) { } // === Modal === -function Modal({ title, onClose, children }) { +// Accessible dialog: role/aria, Escape-to-close, focus the first field on open, +// trap Tab inside, and restore focus to the trigger on close. Every modal in the +// app uses this, so the whole console gets keyboard accessibility for free. +function Modal({ title, onClose, children, size }) { + const ref = useRef(null); + useEffect(() => { + const prev = document.activeElement; + const onKey = (e) => { + if (e.key === 'Escape') { e.preventDefault(); onClose(); return; } + if (e.key !== 'Tab' || !ref.current) return; + const f = ref.current.querySelectorAll('a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'); + if (!f.length) return; + const first = f[0], last = f[f.length - 1]; + if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); } + else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); } + }; + document.addEventListener('keydown', onKey); + const el = ref.current && ref.current.querySelector('input:not([type=hidden]), select, textarea, button'); + if (el) setTimeout(() => el.focus(), 0); + return () => { document.removeEventListener('keydown', onKey); if (prev && prev.focus) prev.focus(); }; + }, []); return html`
e.target === e.currentTarget && onClose()}> -
+ @@ -70,6 +131,24 @@ function Modal({ title, onClose, children }) { `; } +// === ConfirmModal === +// One consistent, context-bearing confirmation for destructive actions, replacing +// the mix of native confirm()/inline "Sure?"/nothing. Pages set a `confirm` state +// object {title, message, confirmLabel, danger, onConfirm} to trigger it. +function ConfirmModal({ title, message, confirmLabel, danger, busy, onConfirm, onClose }) { + return html` + <${Modal} title=${title} onClose=${busy ? () => {} : onClose}> +
+

${message}

+
+
+ + +
+ + `; +} + // === Dashboard === function Dashboard() { const [stats, setStats] = useState({ users: 0, events: [] }); @@ -394,18 +473,40 @@ function UsersPage() { const [search, setSearch] = useState(''); const [roleDefs, setRoleDefs] = useState({}); const [definedPermsList, setDefinedPermsList] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); - const load = () => { - api('GET', '/api/admin/users?include=identities').then(setUsers).catch(() => {}); - }; + const load = () => { setLoading(true); setError(null); return api('GET', '/api/admin/users?include=identities').then(setUsers).catch(e => setError(e.message)).finally(() => setLoading(false)); }; useEffect(load, []); + const isLocked = (u) => !!(u && u.locked_until && new Date(u.locked_until) > new Date()); + const showToast = (message, type = 'success') => { setToast({ message, type }); clearTimeout(toastTimeout); toastTimeout = setTimeout(() => setToast(null), 3000); }; + const unlock = async (guid) => { + try { + await api('PUT', `/api/admin/users/${guid}/unlock`); + load(); + if (detail && detail.guid === guid) setDetail({ ...detail, locked_until: null, failed_login_attempts: 0 }); + showToast('Account unlocked'); + } catch (e) { showToast(e.message, 'error'); } + }; + + const updateProfile = async () => { + try { + const body = { display_name: form.display_name, email: form.email, department: form.department, job_title: form.job_title, company: form.company }; + await api('PUT', `/api/admin/users/${detail.guid}`, body); + setModal(null); + setDetail({ ...detail, ...body }); + load(); + showToast('Profile updated'); + } catch (e) { showToast(e.message, 'error'); } + }; + const createUser = async () => { try { await api('POST', '/api/admin/users', form); @@ -542,8 +643,12 @@ function UsersPage() { - ${filtered.length === 0 - ? html`` + ${loading + ? html`` + : error + ? html`` + : filtered.length === 0 + ? html`` : filtered.map(u => html` openDetail(u)}> - @@ -622,11 +730,19 @@ function UsersPage() { Department${detail.department || '—'}Company${detail.company || '—'}Job Title${detail.job_title || '—'} - Status${detail.disabled ? 'Disabled' : detail.merged_into ? 'Merged into ' + detail.merged_into.substring(0,8) + '...' : 'Active'} + Status${detail.disabled + ? html`Disabled` + : detail.merged_into + ? html`Merged into ${detail.merged_into.substring(0,8)}…` + : isLocked(detail) + ? html`Locked until ${new Date(detail.locked_until).toLocaleString()}` + : html`Active`}${detail.failed_login_attempts ? html` · ${detail.failed_login_attempts} failed login${detail.failed_login_attempts > 1 ? 's' : ''}` : ''} -
+
+ + ${isLocked(detail) ? html`` : ''}
@@ -701,6 +817,24 @@ function UsersPage() { `} + ${modal === 'editProfile' && detail && html` + <${Modal} title="Edit Profile" onClose=${() => setModal(null)}> +
+
setForm({ ...form, display_name: e.target.value })} />
+
setForm({ ...form, email: e.target.value })} />
+
+
+
setForm({ ...form, department: e.target.value })} />
+
setForm({ ...form, job_title: e.target.value })} />
+
+
setForm({ ...form, company: e.target.value })} />
+
+ + +
+ + `} + ${toast && html`<${Toast} ...${toast} />`} `; } @@ -1951,9 +2085,12 @@ function AppsPage() { const [showCreate, setShowCreate] = useState(false); const [form, setForm] = useState({ app_id: '', name: '', audience: '', require_assignment: false, allow_local_users: false }); const [secretModal, setSecretModal] = useState(null); - const [confirmDelete, setConfirmDelete] = useState(null); + const [confirm, setConfirm] = useState(null); + const [busy, setBusy] = useState(''); const [authzApp, setAuthzApp] = useState(null); const [authz, setAuthz] = useState(null); + const [error, setError] = useState(null); + const [loading, setLoading] = useState(true); const showToast = (message, type = 'success') => { setToast({ message, type }); @@ -1961,10 +2098,11 @@ function AppsPage() { toastTimeout = setTimeout(() => setToast(null), 3000); }; - const load = () => api('GET', '/api/admin/apps').then(d => setApps(d.apps || [])).catch(() => {}); + const load = () => { setLoading(true); setError(null); return api('GET', '/api/admin/apps').then(d => setApps(d.apps || [])).catch(e => setError(e.message)).finally(() => setLoading(false)); }; useEffect(() => { load(); }, []); const createApp = async () => { + setBusy('create'); try { const res = await api('POST', '/api/admin/apps', form); setShowCreate(false); @@ -1972,21 +2110,54 @@ function AppsPage() { setSecretModal({ app_id: res.app_id, app_secret: res.app_secret }); load(); } catch (e) { showToast(e.message, 'error'); } + finally { setBusy(''); } }; - const rotate = async (id) => { - try { const res = await api('POST', `/api/admin/apps/${id}/rotate-secret`); setSecretModal({ app_id: res.app_id, app_secret: res.app_secret }); } + // Destructive actions go through ConfirmModal with a context-bearing warning. + const doRotate = async (id) => { + setBusy('confirm'); + try { const res = await api('POST', `/api/admin/apps/${id}/rotate-secret`); setConfirm(null); setSecretModal({ app_id: res.app_id, app_secret: res.app_secret }); } catch (e) { showToast(e.message, 'error'); } + finally { setBusy(''); } }; + const rotate = (id) => setConfirm({ + title: 'Rotate app secret?', + message: html`A new secret is generated immediately and the current one stops working — any running integration using ${id}'s current secret will fail until you deploy the new one.`, + confirmLabel: 'Rotate secret', danger: true, onConfirm: () => doRotate(id), + }); - const del = async (id) => { - try { await api('DELETE', `/api/admin/apps/${id}`); setConfirmDelete(null); load(); showToast('App deleted'); } + const doDelete = async (id) => { + setBusy('confirm'); + try { await api('DELETE', `/api/admin/apps/${id}`); setConfirm(null); load(); showToast('App deleted'); } catch (e) { showToast(e.message, 'error'); } + finally { setBusy(''); } }; + const del = (id) => setConfirm({ + title: 'Delete app?', + message: html`Delete ${id} and all of its per-app roles, permissions, assignments, and admins? This cannot be undone.`, + confirmLabel: 'Delete app', danger: true, onConfirm: () => doDelete(id), + }); - const toggleFlag = async (app, key) => { - try { await api('PUT', `/api/admin/apps/${app.app_id}`, { [key]: !app[key] }); load(); } - catch (e) { showToast(e.message, 'error'); } + const applyFlag = async (app, key) => { + setBusy('confirm'); + try { + await api('PUT', `/api/admin/apps/${app.app_id}`, { [key]: !app[key] }); + setConfirm(null); load(); + showToast(`${key === 'require_assignment' ? 'Require assignment' : 'App-local users'} ${!app[key] ? 'enabled' : 'disabled'} for ${app.app_id}`); + } catch (e) { showToast(e.message, 'error'); } + finally { setBusy(''); } + }; + const toggleFlag = (app, key) => { + // Enabling require_assignment can lock out every unassigned directory user — confirm first. + if (key === 'require_assignment' && !app.require_assignment) { + setConfirm({ + title: 'Require explicit assignment?', + message: html`Once enabled, only users/groups explicitly assigned to ${app.app_id} can get a token — every other directory user is denied at login and on refresh. Add assignments first.`, + confirmLabel: 'Enable require-assignment', danger: true, onConfirm: () => applyFlag(app, key), + }); + return; + } + applyFlag(app, key); }; const openAuthz = async (id) => { @@ -2014,19 +2185,23 @@ function AppsPage() {
IdentitiesDisplay NameEmailStatusCreatedActions

No users found

Loading users…

Failed to load users — ${error}

${search ? 'No users match your search.' : 'No users yet — create one or import from LDAP.'}

${(u.identities || []).length > 0 @@ -557,12 +662,15 @@ function UsersPage() { ? html`Merged` : u.disabled ? html`Disabled` - : html`Active` + : isLocked(u) + ? html`Locked` + : html`Active` } ${new Date(u.created_at).toLocaleDateString()} e.stopPropagation()}> - + e.stopPropagation()} style="white-space:nowrap"> + ${isLocked(u) ? html`` : ''} +
- ${apps.length === 0 + ${loading + ? html`` + : error + ? html`` + : apps.length === 0 ? html`` : apps.map(app => html` - - + + `)} @@ -2042,8 +2217,8 @@ function AppsPage() {
- - + +
`} @@ -2062,15 +2237,7 @@ function AppsPage() { `} - ${confirmDelete && html` - <${Modal} title="Delete app?" onClose=${() => setConfirmDelete(null)}> -

Delete ${confirmDelete} and all of its per-app roles and assignments? This cannot be undone.

-
- - -
- - `} + ${confirm && html`<${ConfirmModal} ...${confirm} busy=${busy === 'confirm'} onClose=${() => setConfirm(null)} />`} ${authzApp && authz && html`<${AppAuthzEditor} appId=${authzApp} initial=${authz} onSave=${saveAuthz} onClose=${() => setAuthzApp(null)} />`} @@ -2080,110 +2247,168 @@ function AppsPage() { function AppAuthzEditor({ appId, initial, onSave, onClose }) { const [roles, setRoles] = useState(initial.roles || []); + const [rolePerms, setRolePerms] = useState(() => { + const rp = { ...(initial.role_permissions || {}) }; + (initial.roles || []).forEach(r => { if (!rp[r]) rp[r] = []; }); + return rp; + }); const [userA, setUserA] = useState(initial.user_assignments || {}); const [groupA, setGroupA] = useState(initial.group_assignments || {}); - const [rpText, setRpText] = useState(JSON.stringify(initial.role_permissions || {}, null, 2)); - const [rpError, setRpError] = useState(''); const [newRole, setNewRole] = useState(''); - const [asgn, setAsgn] = useState({ type: 'user', id: '', roles: '' }); + const [permInput, setPermInput] = useState({}); + const [asgn, setAsgn] = useState({ type: 'user', id: '', roles: [] }); + const [dirty, setDirty] = useState(false); + const touch = () => setDirty(true); - const addRole = () => { const r = newRole.trim(); if (!r || roles.includes(r)) return; setRoles([...roles, r]); setNewRole(''); }; - const removeRole = (r) => setRoles(roles.filter(x => x !== r)); + const addRole = () => { + const r = newRole.trim(); if (!r || roles.includes(r)) return; + setRoles([...roles, r]); setRolePerms({ ...rolePerms, [r]: rolePerms[r] || [] }); setNewRole(''); touch(); + }; + const removeRole = (r) => { + setRoles(roles.filter(x => x !== r)); + const rp = { ...rolePerms }; delete rp[r]; setRolePerms(rp); + // Strip the removed role from every assignment so nothing dangles. + const strip = (m) => Object.fromEntries(Object.entries(m).map(([k, v]) => [k, (v || []).filter(x => x !== r)])); + setUserA(strip(userA)); setGroupA(strip(groupA)); touch(); + }; + const addPerm = (role) => { + const p = (permInput[role] || '').trim(); if (!p) return; + const cur = rolePerms[role] || []; + if (!cur.includes(p)) setRolePerms({ ...rolePerms, [role]: [...cur, p] }); + setPermInput({ ...permInput, [role]: '' }); touch(); + }; + const removePerm = (role, p) => { setRolePerms({ ...rolePerms, [role]: (rolePerms[role] || []).filter(x => x !== p) }); touch(); }; const assignments = [ ...Object.entries(userA).map(([id, rs]) => ({ type: 'user', id, roles: rs || [] })), ...Object.entries(groupA).map(([id, rs]) => ({ type: 'group', id, roles: rs || [] })), ]; + const toggleAsgnRole = (r) => setAsgn(a => ({ ...a, roles: a.roles.includes(r) ? a.roles.filter(x => x !== r) : [...a.roles, r] })); const addAssignment = () => { - const id = asgn.id.trim(); if (!id) return; - const rs = asgn.roles.split(',').map(s => s.trim()).filter(Boolean); - if (asgn.type === 'user') setUserA({ ...userA, [id]: rs }); else setGroupA({ ...groupA, [id]: rs }); - setAsgn({ type: 'user', id: '', roles: '' }); + const id = asgn.id.trim(); if (!id || asgn.roles.length === 0) return; + if (asgn.type === 'user') setUserA({ ...userA, [id]: asgn.roles }); else setGroupA({ ...groupA, [id]: asgn.roles }); + setAsgn({ type: 'user', id: '', roles: [] }); touch(); }; const removeAssignment = (type, id) => { if (type === 'user') { const c = { ...userA }; delete c[id]; setUserA(c); } else { const c = { ...groupA }; delete c[id]; setGroupA(c); } + touch(); }; - const save = () => { - let rp = {}; - try { rp = JSON.parse(rpText || '{}'); } catch (e) { setRpError('Role → permissions is not valid JSON'); return; } - onSave({ app_id: appId, roles, role_permissions: rp, user_assignments: userA, group_assignments: groupA }); - }; + const allPerms = [...new Set(Object.values(rolePerms).flat())]; + const save = () => onSave({ app_id: appId, roles, permissions: allPerms, role_permissions: rolePerms, user_assignments: userA, group_assignments: groupA }); + const close = () => { if (dirty && !window.confirm('Discard unsaved authorization changes?')) return; onClose(); }; return html` - <${Modal} title=${'Authorization — ' + appId} onClose=${onClose}> -
- -
- ${roles.length === 0 ? html`No roles defined` : roles.map(r => html`${r} { e.preventDefault(); removeRole(r); }}>×`)} -
-
- setNewRole(e.target.value)} placeholder="role name" onKeyDown=${e => e.key === 'Enter' && (e.preventDefault(), addRole())} /> - + <${Modal} title=${'Authorization — ' + appId} onClose=${close} size="lg"> +
+
+ + ${roles.length === 0 + ? html`

No roles yet. Add a role, then give it permissions.

` + : roles.map(r => html` +
+
+ ${r} + +
+
+ ${(rolePerms[r] || []).length === 0 ? html`no permissions` : (rolePerms[r] || []).map(p => html`${p} { e.preventDefault(); removePerm(r, p); }}>×`)} +
+
+ setPermInput({ ...permInput, [r]: e.target.value })} placeholder="permission (e.g. invoice:write)" onKeyDown=${e => e.key === 'Enter' && (e.preventDefault(), addPerm(r))} /> + +
+
+ `)} +
+ setNewRole(e.target.value)} placeholder="new role name (e.g. admin)" onKeyDown=${e => e.key === 'Enter' && (e.preventDefault(), addRole())} /> + +
+ ${allPerms.map(p => html``)}
-
-
- -
-
App IDNameAudienceRequire assignmentLocal usersActions

Loading apps…

Failed to load apps — ${error}

No apps yet — register one to start scoping authorization per application.

${app.app_id}${app.disabled ? html` disabled` : ''} ${app.name || '—'} ${app.audience} toggleFlag(app, 'require_assignment')} /> toggleFlag(app, 'allow_local_users')} /> toggleFlag(app, 'require_assignment')} /> toggleFlag(app, 'allow_local_users')} /> - +
- - ${assignments.length === 0 ? html`` : assignments.map(a => html` - - - - - - - `)} - -
No assignments
${a.type}${a.id}${a.roles.join(', ') || '—'}
-
-
- - setAsgn({ ...asgn, id: e.target.value })} placeholder=${asgn.type === 'user' ? 'username / sAMAccountName' : 'group sAMAccountName'} /> - setAsgn({ ...asgn, roles: e.target.value })} placeholder="roles, comma-separated" /> - +
+ +
+ + + ${assignments.length === 0 ? html`` : assignments.map(a => html` + + + + + + + `)} + +
No assignments yet
${a.type}${a.id}${(a.roles || []).length === 0 ? '—' : (a.roles || []).map(r => html`${r}`)}
+
+ ${roles.length === 0 + ? html`

Define a role above before assigning it.

` + : html` +
+ + setAsgn({ ...asgn, id: e.target.value })} placeholder=${asgn.type === 'user' ? 'username / sAMAccountName / GUID' : 'group sAMAccountName'} /> +
+
+ roles: + ${roles.map(r => html``)} + +
+ `}
- -
- - - ${rpError && html`

${rpError}

`} -
- -
- - +
+ +
`; } +const PAGES = { + dashboard: Dashboard, users: UsersPage, apps: AppsPage, roles: RolesPage, + ldap: LDAPPage, mappings: MappingsPage, impersonate: ImpersonatePage, + audit: AuditPage, settings: SettingsPage, database: DatabasePage, +}; +const pageFromHash = () => { + const id = (location.hash.replace(/^#\/?/, '').split('/')[0] || 'dashboard'); + return PAGES[id] ? id : 'dashboard'; +}; + function App() { - const [page, setPage] = useState('dashboard'); + const [page, setPageState] = useState(pageFromHash); const [authed, setAuthed] = useState(!!getApiKey()); const [theme, setTheme] = useState(localStorage.getItem('simpleauth_theme') || 'auto'); + // Hash routing: refresh-safe, deep-linkable, Back/Forward work, and an idle + // logout returns you to where you were after re-auth (the hash survives). + const setPage = (id) => { location.hash = '#/' + id; setPageState(id); }; useEffect(() => { - if (theme === 'auto') { - document.documentElement.removeAttribute('data-theme'); - } else { - document.documentElement.setAttribute('data-theme', theme); - } + const onHash = () => setPageState(pageFromHash()); + window.addEventListener('hashchange', onHash); + if (!location.hash) location.hash = '#/' + page; + return () => window.removeEventListener('hashchange', onHash); + }, []); + + useEffect(() => { + if (theme === 'auto') document.documentElement.removeAttribute('data-theme'); + else document.documentElement.setAttribute('data-theme', theme); localStorage.setItem('simpleauth_theme', theme); }, [theme]); // Verify key on mount useEffect(() => { - if (authed) { - api('GET', '/api/admin/users').catch(() => { - clearApiKey(); - setAuthed(false); - }); - } + if (authed) api('GET', '/api/admin/users').catch(() => { clearApiKey(); setAuthed(false); }); + }, []); + + // Centralized auth-expiry: api() fires 'sa-auth-expired' on any 401 so a + // mid-session expiry bounces cleanly to login instead of spraying red toasts. + useEffect(() => { + const onExpire = () => setAuthed(false); + window.addEventListener('sa-auth-expired', onExpire); + return () => window.removeEventListener('sa-auth-expired', onExpire); }, []); // Idle timeout — clear admin key after 30 min of inactivity @@ -2192,54 +2417,40 @@ function App() { let timer; const reset = () => { clearTimeout(timer); - timer = setTimeout(() => { - clearApiKey(); - setAuthed(false); - }, 30 * 60 * 1000); + timer = setTimeout(() => { clearApiKey(); setAuthed(false); }, 30 * 60 * 1000); }; const events = ['mousedown', 'keydown', 'scroll', 'touchstart']; events.forEach(e => document.addEventListener(e, reset)); reset(); - return () => { - clearTimeout(timer); - events.forEach(e => document.removeEventListener(e, reset)); - }; + return () => { clearTimeout(timer); events.forEach(e => document.removeEventListener(e, reset)); }; }, [authed]); - const toggleTheme = () => { - const next = theme === 'light' ? 'dark' : theme === 'dark' ? 'auto' : 'light'; - setTheme(next); - }; + const toggleTheme = () => setTheme(theme === 'light' ? 'dark' : theme === 'dark' ? 'auto' : 'light'); + const themeLabel = theme.charAt(0).toUpperCase() + theme.slice(1); if (!authed) return html`<${LoginSetup} onLogin=${() => setAuthed(true)} />`; - const navItems = [ - { id: 'dashboard', label: 'Dashboard', icon: icons.dashboard }, - { id: 'users', label: 'Users', icon: icons.users }, - { id: 'apps', label: 'Apps', icon: icons.apps }, - { id: 'roles', label: 'Roles', icon: icons.roles }, - { id: 'ldap', label: 'LDAP Settings', icon: icons.ldap }, - { id: 'mappings', label: 'Mappings', icon: icons.mappings }, - { id: 'impersonate', label: 'Impersonate', icon: icons.impersonate }, - { id: 'audit', label: 'Audit Log', icon: icons.audit }, - { id: 'settings', label: 'Settings', icon: icons.settings }, - { id: 'database', label: 'Database', icon: icons.database }, + // Grouped IA: related destinations under labeled sections instead of a flat + // 10-item list; destructive System tools sit apart from day-to-day Access. + const navSections = [ + { section: null, items: [{ id: 'dashboard', label: 'Dashboard', icon: icons.dashboard }] }, + { section: 'Access', items: [ + { id: 'users', label: 'Users', icon: icons.users }, + { id: 'apps', label: 'Apps', icon: icons.apps }, + { id: 'roles', label: 'Roles', icon: icons.roles }, + { id: 'mappings', label: 'Mappings', icon: icons.mappings }, + { id: 'impersonate', label: 'Impersonate', icon: icons.impersonate }, + ] }, + { section: 'Directory', items: [{ id: 'ldap', label: 'LDAP Settings', icon: icons.ldap }] }, + { section: 'System', items: [ + { id: 'audit', label: 'Audit Log', icon: icons.audit }, + { id: 'settings', label: 'Settings', icon: icons.settings }, + { id: 'database', label: 'Database', icon: icons.database }, + ] }, ]; - const pages = { - dashboard: Dashboard, - users: UsersPage, - apps: AppsPage, - roles: RolesPage, - ldap: LDAPPage, - mappings: MappingsPage, - impersonate: ImpersonatePage, - audit: AuditPage, - settings: SettingsPage, - database: DatabasePage, - }; - - const PageComponent = pages[page] || Dashboard; + const PageComponent = PAGES[page] || Dashboard; + const labelStyle = 'padding:var(--sp-4) var(--sp-3) var(--sp-1);font-size:0.65rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted)'; return html`
@@ -2249,17 +2460,20 @@ function App() { Admin Console
- ${navItems.map(item => html` - + ${navSections.map(grp => html` + ${grp.section ? html`
${grp.section}
` : null} + ${grp.items.map(item => html` + + `)} `)}
-
diff --git a/ui/dist/index.html b/ui/dist/index.html index 07c9a59..252adfe 100644 --- a/ui/dist/index.html +++ b/ui/dist/index.html @@ -4,6 +4,11 @@ SimpleAuth +