Initial commit: portal
This commit is contained in:
commit
b54081113b
18 changed files with 736 additions and 0 deletions
162
src/pages/AdminUsers.tsx
Normal file
162
src/pages/AdminUsers.tsx
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
import { Sidebar } from '../components/Sidebar'
|
||||
import type { User } from '../types'
|
||||
|
||||
interface ManagedUser {
|
||||
id: number
|
||||
email: string
|
||||
name: string
|
||||
active: boolean
|
||||
is_admin: boolean
|
||||
offsite_allowed: boolean
|
||||
app_slugs: string[]
|
||||
}
|
||||
|
||||
export function AdminUsers({ user }: { user: User }) {
|
||||
const [users, setUsers] = useState<ManagedUser[]>([])
|
||||
const [allApps, setAllApps] = useState<{ slug: string; name: string }[]>([])
|
||||
const [showCreate, setShowCreate] = useState(false)
|
||||
|
||||
async function load() {
|
||||
const [u, a] = await Promise.all([
|
||||
fetch('/api/auth/admin/users', { credentials: 'include' }).then(r => r.json()),
|
||||
fetch('/api/auth/admin/apps', { credentials: 'include' }).then(r => r.json()),
|
||||
])
|
||||
setUsers(u)
|
||||
setAllApps(a)
|
||||
}
|
||||
|
||||
useEffect(() => { load() }, [])
|
||||
|
||||
async function toggle(userId: number, field: string, current: boolean) {
|
||||
await fetch(`/api/auth/admin/users/${userId}`, {
|
||||
method: 'PATCH', credentials: 'include',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ [field]: !current }),
|
||||
})
|
||||
load()
|
||||
}
|
||||
|
||||
async function grantRevoke(userId: number, slug: string, has: boolean) {
|
||||
await fetch(`/api/auth/admin/users/${userId}/apps/${slug}`, {
|
||||
method: has ? 'DELETE' : 'POST', credentials: 'include',
|
||||
})
|
||||
load()
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', height: '100dvh' }}>
|
||||
<Sidebar user={user} />
|
||||
<main style={{ flex: 1, overflowY: 'auto', padding: '1.5rem 2rem' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '1.5rem' }}>
|
||||
<h1 style={{ fontSize: '1.2rem' }}>Users</h1>
|
||||
<button onClick={() => setShowCreate(v => !v)} style={goldBtn}>
|
||||
{showCreate ? 'Cancel' : '+ New user'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{showCreate && <CreateUserForm onCreated={() => { setShowCreate(false); load() }} />}
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
|
||||
{users.map(u => (
|
||||
<div key={u.id} style={{
|
||||
background: 'var(--surface)', borderRadius: '10px',
|
||||
padding: '1rem 1.25rem', border: '1px solid var(--surface-2)',
|
||||
opacity: u.active ? 1 : 0.5,
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem', flexWrap: 'wrap' }}>
|
||||
<div style={{ flex: 1, minWidth: '140px' }}>
|
||||
<div style={{ fontWeight: 600, fontSize: '0.9rem' }}>{u.name}</div>
|
||||
<div style={{ fontSize: '0.78rem', color: 'var(--text-muted)' }}>{u.email}</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '0.4rem', flexWrap: 'wrap' }}>
|
||||
<Toggle label="Active" on={u.active} onClick={() => toggle(u.id, 'active', u.active)} />
|
||||
<Toggle label="Admin" on={u.is_admin} onClick={() => toggle(u.id, 'is_admin', u.is_admin)} />
|
||||
<Toggle label="Offsite" on={u.offsite_allowed} onClick={() => toggle(u.id, 'offsite_allowed', u.offsite_allowed)} />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginTop: '0.75rem', display: 'flex', gap: '0.4rem', flexWrap: 'wrap' }}>
|
||||
{allApps.map(app => {
|
||||
const has = u.app_slugs.includes(app.slug)
|
||||
return (
|
||||
<button key={app.slug} onClick={() => grantRevoke(u.id, app.slug, has)} style={{
|
||||
background: has ? 'var(--navy)' : 'var(--surface-2)',
|
||||
border: `1px solid ${has ? 'var(--gold)' : 'var(--surface-2)'}`,
|
||||
color: has ? 'var(--gold)' : 'var(--text-muted)',
|
||||
borderRadius: '4px', padding: '0.2rem 0.6rem', fontSize: '0.75rem',
|
||||
}}>
|
||||
{app.name}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function Toggle({ label, on, onClick }: { label: string; on: boolean; onClick: () => void }) {
|
||||
return (
|
||||
<button onClick={onClick} style={{
|
||||
background: on ? 'var(--navy)' : 'var(--surface-2)',
|
||||
border: `1px solid ${on ? 'var(--gold)' : 'var(--surface-2)'}`,
|
||||
color: on ? 'var(--gold)' : 'var(--text-muted)',
|
||||
borderRadius: '4px', padding: '0.2rem 0.6rem', fontSize: '0.75rem',
|
||||
}}>
|
||||
{label}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
function CreateUserForm({ onCreated }: { onCreated: () => void }) {
|
||||
const [form, setForm] = useState({ email: '', name: '', password: '', is_admin: false, offsite_allowed: false })
|
||||
const [error, setError] = useState('')
|
||||
|
||||
async function submit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
const res = await fetch('/api/auth/admin/users', {
|
||||
method: 'POST', credentials: 'include',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(form),
|
||||
})
|
||||
if (res.ok) onCreated()
|
||||
else setError('Failed to create user')
|
||||
}
|
||||
|
||||
const f = (k: string) => (e: React.ChangeEvent<HTMLInputElement>) =>
|
||||
setForm(v => ({ ...v, [k]: e.target.type === 'checkbox' ? e.target.checked : e.target.value }))
|
||||
|
||||
return (
|
||||
<form onSubmit={submit} style={{
|
||||
background: 'var(--surface)', borderRadius: '10px', padding: '1.25rem',
|
||||
border: '1px solid var(--gold)', marginBottom: '1rem',
|
||||
display: 'flex', flexDirection: 'column', gap: '0.75rem',
|
||||
}}>
|
||||
<h2 style={{ fontSize: '0.9rem', color: 'var(--gold)' }}>New User</h2>
|
||||
<div style={{ display: 'flex', gap: '0.75rem', flexWrap: 'wrap' }}>
|
||||
<input placeholder="Full name" value={form.name} onChange={f('name')} required style={{ ...inp, flex: 1 }} />
|
||||
<input type="email" placeholder="Email" value={form.email} onChange={f('email')} required style={{ ...inp, flex: 1 }} />
|
||||
<input type="password" placeholder="Password" value={form.password} onChange={f('password')} required style={{ ...inp, flex: 1 }} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '1rem' }}>
|
||||
<label style={chk}><input type="checkbox" checked={form.is_admin} onChange={f('is_admin')} /> Admin</label>
|
||||
<label style={chk}><input type="checkbox" checked={form.offsite_allowed} onChange={f('offsite_allowed')} /> Offsite access</label>
|
||||
</div>
|
||||
{error && <p style={{ color: 'var(--danger)', fontSize: '0.85rem' }}>{error}</p>}
|
||||
<button type="submit" style={goldBtn}>Create user</button>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
const inp: React.CSSProperties = {
|
||||
background: 'var(--navy-dark)', border: '1px solid var(--surface-2)',
|
||||
borderRadius: '6px', color: 'var(--text)', padding: '0.6rem 0.75rem', fontSize: '0.875rem',
|
||||
}
|
||||
const chk: React.CSSProperties = { display: 'flex', alignItems: 'center', gap: '0.4rem', fontSize: '0.875rem', cursor: 'pointer' }
|
||||
const goldBtn: React.CSSProperties = {
|
||||
background: 'var(--gold)', color: 'var(--navy-dark)', border: 'none',
|
||||
borderRadius: '6px', padding: '0.5rem 1rem', fontSize: '0.875rem', fontWeight: 600,
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue