feat(provisioning): provisioning UI — signup, invites, accept page, unlink
Phase 6: the UI for the Phase 5 provisioning backend. - CreateGameAccountForm: reusable game-account form (own username + password), mapping the sidecar errors (409/429/403/503) to friendly messages. Wired into GameAccounts (self-serve) — shown alongside the [link flow when the game_account_signup flag is on (exposed via public settings), so a registered player can create + link a game account from their portal. - Admin Invites view (/admin/invites, admin-only): send an invite at a chosen access level, list invites with status, revoke pending ones. When email isn't configured the create response's accept link is surfaced to copy manually. - Public accept page (/invite/:token): validates the invite, sets username + password (email + role pre-assigned), creates the account at that role and logs in; for a player invite it then offers the built-in "create game account" step before the portal. Honeypot-guarded like registration. - Admin unlink wired into UserDetail via GameAccounts (per-account Unlink button, confirm + reconcile). - Backend: expose gameAccountSignup availability in public settings. Client build clean; server 193/193. Refs .plans/protocol2-integration.md (Phase 6). Completes the Protocol 2.0/2.1 integration. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
152
client/src/routes/admin/views/InvitesAdmin.jsx
Normal file
152
client/src/routes/admin/views/InvitesAdmin.jsx
Normal file
@@ -0,0 +1,152 @@
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { Loading, ErrorState } from '../../../components/PageState.jsx'
|
||||
import { dateTime } from '../../../lib/format.js'
|
||||
import { api } from '../../../api/client.js'
|
||||
|
||||
// Admin email invites: send an invite at a chosen access level, see recent
|
||||
// invites and their status, revoke pending ones. When email delivery isn't
|
||||
// configured the create response hands back the accept link to copy manually.
|
||||
|
||||
const ROLES = ['player', 'moderator', 'editor', 'admin']
|
||||
const ROLE_BADGE = { admin: 'badge-admin', editor: 'badge-editor', moderator: 'badge-moderator', player: 'badge-player' }
|
||||
const STATUS_COLOR = { pending: 'var(--accent)', accepted: '#7fd0a4', revoked: 'var(--muted)' }
|
||||
|
||||
function CreateInvite({ onCreated }) {
|
||||
const [email, setEmail] = useState('')
|
||||
const [role, setRole] = useState('player')
|
||||
const [busy, setBusy] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
const [result, setResult] = useState(null) // { emailed, acceptUrl }
|
||||
|
||||
async function submit(e) {
|
||||
e.preventDefault()
|
||||
setError(''); setResult(null)
|
||||
if (!email.trim()) return setError('Enter an email address.')
|
||||
setBusy(true)
|
||||
try {
|
||||
const res = await api.admin.createInvite(email.trim(), role)
|
||||
setResult(res)
|
||||
setEmail('')
|
||||
await onCreated()
|
||||
} catch (err) {
|
||||
setError(err.message || 'Could not create the invite.')
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="panel" style={{ padding: 22, marginBottom: 22 }}>
|
||||
<div className="field-label" style={{ marginBottom: 10 }}>Invite someone</div>
|
||||
<form onSubmit={submit} style={{ display: 'flex', gap: 12, alignItems: 'flex-end', flexWrap: 'wrap' }}>
|
||||
<label style={{ flex: '1 1 240px' }}>
|
||||
<span className="field-label">Email</span>
|
||||
<input type="email" value={email} onChange={(e) => setEmail(e.target.value)} className="input" placeholder="person@example.com" />
|
||||
</label>
|
||||
<label>
|
||||
<span className="field-label">Access level</span>
|
||||
<select value={role} onChange={(e) => setRole(e.target.value)} className="select">
|
||||
{ROLES.map((r) => <option key={r} value={r}>{r}</option>)}
|
||||
</select>
|
||||
</label>
|
||||
<button type="submit" disabled={busy} className="btn btn-primary btn-sq">
|
||||
{busy ? 'Sending…' : 'Send invite'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{error && <p className="sans" style={{ margin: '12px 0 0', color: '#d98b84', fontSize: '0.85rem' }}>{error}</p>}
|
||||
{result && (
|
||||
<div style={{ marginTop: 14 }}>
|
||||
{result.emailed ? (
|
||||
<p className="sans" style={{ margin: 0, color: '#7fd0a4', fontSize: '0.86rem' }}>Invitation emailed.</p>
|
||||
) : (
|
||||
<div className="sans" style={{ fontSize: '0.84rem', color: 'var(--muted)' }}>
|
||||
<p style={{ margin: '0 0 6px', color: '#e0b070' }}>
|
||||
Email isn’t configured{result.emailError ? ` (${result.emailError})` : ''} — share this single-use link:
|
||||
</p>
|
||||
<code style={{ display: 'block', wordBreak: 'break-all', color: 'var(--head)', background: 'var(--panel-flat)', padding: '8px 10px', borderRadius: 6, border: '1px solid var(--line)' }}>
|
||||
{result.acceptUrl}
|
||||
</code>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function InvitesAdmin() {
|
||||
const [invites, setInvites] = useState(null)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setError('')
|
||||
try {
|
||||
setInvites(await api.admin.listInvites())
|
||||
} catch {
|
||||
setError('Could not load invites.')
|
||||
}
|
||||
}, [])
|
||||
useEffect(() => { load() }, [load])
|
||||
|
||||
async function revoke(id) {
|
||||
if (!window.confirm('Revoke this pending invitation?')) return
|
||||
try {
|
||||
await api.admin.revokeInvite(id)
|
||||
await load()
|
||||
} catch {
|
||||
/* surfaced by the row staying; keep it simple */
|
||||
}
|
||||
}
|
||||
|
||||
if (error) return <ErrorState message={error} />
|
||||
|
||||
return (
|
||||
<section>
|
||||
<CreateInvite onCreated={load} />
|
||||
|
||||
{!invites ? (
|
||||
<Loading />
|
||||
) : (
|
||||
<div className="panel-flat">
|
||||
<table className="adm-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="adm-th">Email</th>
|
||||
<th className="adm-th">Role</th>
|
||||
<th className="adm-th">Status</th>
|
||||
<th className="adm-th">Expires</th>
|
||||
<th className="adm-th">Created</th>
|
||||
<th className="adm-th" />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{invites.length === 0 && (
|
||||
<tr><td className="adm-td" colSpan={6} style={{ color: 'var(--muted)' }}>No invites yet.</td></tr>
|
||||
)}
|
||||
{invites.map((iv) => {
|
||||
const status = iv.status === 'pending' && iv.expired ? 'expired' : iv.status
|
||||
return (
|
||||
<tr key={iv.id}>
|
||||
<td className="adm-td" style={{ color: 'var(--text)' }}>{iv.email}</td>
|
||||
<td className="adm-td"><span className={`badge ${ROLE_BADGE[iv.role] || 'badge-editor'}`}>{iv.role}</span></td>
|
||||
<td className="adm-td" style={{ color: STATUS_COLOR[iv.status] || 'var(--muted)', textTransform: 'capitalize' }}>{status}</td>
|
||||
<td className="adm-td dim">{dateTime(iv.expiresAt)}</td>
|
||||
<td className="adm-td dim">{dateTime(iv.createdAt)}</td>
|
||||
<td className="adm-td" style={{ textAlign: 'right' }}>
|
||||
{iv.status === 'pending' && (
|
||||
<button type="button" className="pill" style={{ fontSize: '0.72rem', color: '#d98b84', borderColor: '#5b2020' }} onClick={() => revoke(iv.id)}>
|
||||
Revoke
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user