Build 2602261409: unify invite management controls
This commit is contained in:
@@ -1,335 +1,6 @@
|
||||
'use client'
|
||||
import { redirect } from 'next/navigation'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import AdminShell from '../../ui/AdminShell'
|
||||
import { authFetch, clearToken, getApiBase, getToken } from '../../lib/auth'
|
||||
|
||||
type Profile = {
|
||||
id: number
|
||||
name: string
|
||||
description?: string | null
|
||||
role: 'user' | 'admin'
|
||||
auto_search_enabled: boolean
|
||||
account_expires_days?: number | null
|
||||
is_active: boolean
|
||||
assigned_users?: number
|
||||
assigned_invites?: number
|
||||
}
|
||||
|
||||
type ProfileForm = {
|
||||
name: string
|
||||
description: string
|
||||
role: 'user' | 'admin'
|
||||
auto_search_enabled: boolean
|
||||
account_expires_days: string
|
||||
is_active: boolean
|
||||
}
|
||||
|
||||
const defaultForm = (): ProfileForm => ({
|
||||
name: '',
|
||||
description: '',
|
||||
role: 'user',
|
||||
auto_search_enabled: true,
|
||||
account_expires_days: '',
|
||||
is_active: true,
|
||||
})
|
||||
|
||||
export default function AdminProfilesPage() {
|
||||
const router = useRouter()
|
||||
const [profiles, setProfiles] = useState<Profile[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [status, setStatus] = useState<string | null>(null)
|
||||
const [editingId, setEditingId] = useState<number | null>(null)
|
||||
const [form, setForm] = useState<ProfileForm>(defaultForm())
|
||||
|
||||
const handleAuthResponse = (response: Response) => {
|
||||
if (response.status === 401) {
|
||||
clearToken()
|
||||
router.push('/login')
|
||||
return true
|
||||
}
|
||||
if (response.status === 403) {
|
||||
router.push('/')
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
const loadProfiles = async () => {
|
||||
if (!getToken()) {
|
||||
router.push('/login')
|
||||
return
|
||||
}
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
try {
|
||||
const baseUrl = getApiBase()
|
||||
const response = await authFetch(`${baseUrl}/admin/profiles`)
|
||||
if (!response.ok) {
|
||||
if (handleAuthResponse(response)) return
|
||||
throw new Error(`Failed to load profiles (${response.status})`)
|
||||
}
|
||||
const data = await response.json()
|
||||
setProfiles(Array.isArray(data?.profiles) ? data.profiles : [])
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
setError('Could not load profiles.')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
void loadProfiles()
|
||||
}, [])
|
||||
|
||||
const resetEditor = () => {
|
||||
setEditingId(null)
|
||||
setForm(defaultForm())
|
||||
}
|
||||
|
||||
const editProfile = (profile: Profile) => {
|
||||
setEditingId(profile.id)
|
||||
setForm({
|
||||
name: profile.name ?? '',
|
||||
description: profile.description ?? '',
|
||||
role: profile.role ?? 'user',
|
||||
auto_search_enabled: Boolean(profile.auto_search_enabled),
|
||||
account_expires_days:
|
||||
typeof profile.account_expires_days === 'number' ? String(profile.account_expires_days) : '',
|
||||
is_active: profile.is_active !== false,
|
||||
})
|
||||
setStatus(null)
|
||||
setError(null)
|
||||
}
|
||||
|
||||
const saveProfile = async (event: React.FormEvent) => {
|
||||
event.preventDefault()
|
||||
setSaving(true)
|
||||
setError(null)
|
||||
setStatus(null)
|
||||
try {
|
||||
const baseUrl = getApiBase()
|
||||
const payload = {
|
||||
name: form.name,
|
||||
description: form.description || null,
|
||||
role: form.role,
|
||||
auto_search_enabled: form.auto_search_enabled,
|
||||
account_expires_days: form.account_expires_days || null,
|
||||
is_active: form.is_active,
|
||||
}
|
||||
const url =
|
||||
editingId == null
|
||||
? `${baseUrl}/admin/profiles`
|
||||
: `${baseUrl}/admin/profiles/${editingId}`
|
||||
const response = await authFetch(url, {
|
||||
method: editingId == null ? 'POST' : 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload),
|
||||
})
|
||||
if (!response.ok) {
|
||||
if (handleAuthResponse(response)) return
|
||||
const text = await response.text()
|
||||
throw new Error(text || 'Save failed')
|
||||
}
|
||||
setStatus(editingId == null ? 'Profile created.' : 'Profile updated.')
|
||||
resetEditor()
|
||||
await loadProfiles()
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
setError(err instanceof Error ? err.message : 'Could not save profile.')
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
const deleteProfile = async (profile: Profile) => {
|
||||
if (!window.confirm(`Delete profile "${profile.name}"?`)) return
|
||||
setError(null)
|
||||
setStatus(null)
|
||||
try {
|
||||
const baseUrl = getApiBase()
|
||||
const response = await authFetch(`${baseUrl}/admin/profiles/${profile.id}`, {
|
||||
method: 'DELETE',
|
||||
})
|
||||
if (!response.ok) {
|
||||
if (handleAuthResponse(response)) return
|
||||
const text = await response.text()
|
||||
throw new Error(text || 'Delete failed')
|
||||
}
|
||||
if (editingId === profile.id) resetEditor()
|
||||
setStatus(`Deleted profile "${profile.name}".`)
|
||||
await loadProfiles()
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
setError(err instanceof Error ? err.message : 'Could not delete profile.')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<AdminShell
|
||||
title="Profiles"
|
||||
subtitle="Reusable account templates for invite-based sign-up."
|
||||
actions={
|
||||
<div className="admin-inline-actions">
|
||||
<button type="button" onClick={loadProfiles} disabled={loading}>
|
||||
{loading ? 'Loading…' : 'Reload'}
|
||||
</button>
|
||||
<button type="button" className="ghost-button" onClick={resetEditor}>
|
||||
New profile
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<section className="admin-section">
|
||||
{error && <div className="error-banner">{error}</div>}
|
||||
{status && <div className="status-banner">{status}</div>}
|
||||
<div className="admin-split-grid">
|
||||
<div className="admin-panel">
|
||||
<h2>{editingId == null ? 'Create profile' : 'Edit profile'}</h2>
|
||||
<p className="lede">
|
||||
Profiles define defaults applied when a user signs up using an invite.
|
||||
</p>
|
||||
<form onSubmit={saveProfile} className="admin-form compact-form">
|
||||
<label>
|
||||
Profile name
|
||||
<input
|
||||
value={form.name}
|
||||
onChange={(e) => setForm((current) => ({ ...current, name: e.target.value }))}
|
||||
placeholder="Standard users"
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Description
|
||||
<textarea
|
||||
rows={3}
|
||||
value={form.description}
|
||||
onChange={(e) =>
|
||||
setForm((current) => ({ ...current, description: e.target.value }))
|
||||
}
|
||||
placeholder="Default invite settings for normal users"
|
||||
/>
|
||||
</label>
|
||||
<div className="admin-fields-grid">
|
||||
<label>
|
||||
Role
|
||||
<select
|
||||
value={form.role}
|
||||
onChange={(e) =>
|
||||
setForm((current) => ({
|
||||
...current,
|
||||
role: e.target.value as 'user' | 'admin',
|
||||
}))
|
||||
}
|
||||
>
|
||||
<option value="user">User</option>
|
||||
<option value="admin">Admin</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
Account expiry (days)
|
||||
<input
|
||||
value={form.account_expires_days}
|
||||
onChange={(e) =>
|
||||
setForm((current) => ({
|
||||
...current,
|
||||
account_expires_days: e.target.value,
|
||||
}))
|
||||
}
|
||||
inputMode="numeric"
|
||||
placeholder="Blank = no expiry"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<label className="inline-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={form.auto_search_enabled}
|
||||
onChange={(e) =>
|
||||
setForm((current) => ({
|
||||
...current,
|
||||
auto_search_enabled: e.target.checked,
|
||||
}))
|
||||
}
|
||||
/>
|
||||
Allow auto search/download by default
|
||||
</label>
|
||||
<label className="inline-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={form.is_active}
|
||||
onChange={(e) =>
|
||||
setForm((current) => ({ ...current, is_active: e.target.checked }))
|
||||
}
|
||||
/>
|
||||
Profile is active
|
||||
</label>
|
||||
<div className="admin-inline-actions">
|
||||
<button type="submit" disabled={saving}>
|
||||
{saving ? 'Saving…' : editingId == null ? 'Create profile' : 'Save profile'}
|
||||
</button>
|
||||
{editingId != null && (
|
||||
<button type="button" className="ghost-button" onClick={resetEditor}>
|
||||
Cancel edit
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div className="admin-panel">
|
||||
<h2>Existing profiles</h2>
|
||||
<p className="lede">Assign these to invites so sign-up accounts get consistent defaults.</p>
|
||||
{loading ? (
|
||||
<div className="status-banner">Loading profiles…</div>
|
||||
) : profiles.length === 0 ? (
|
||||
<div className="status-banner">No profiles created yet.</div>
|
||||
) : (
|
||||
<div className="admin-list">
|
||||
{profiles.map((profile) => (
|
||||
<div key={profile.id} className="admin-list-item">
|
||||
<div className="admin-list-item-main">
|
||||
<div className="admin-list-item-title-row">
|
||||
<strong>{profile.name}</strong>
|
||||
<span className={`small-pill ${profile.is_active ? '' : 'is-muted'}`}>
|
||||
{profile.is_active ? 'Active' : 'Disabled'}
|
||||
</span>
|
||||
<span className="small-pill">{profile.role}</span>
|
||||
</div>
|
||||
{profile.description && (
|
||||
<p className="admin-list-item-text">{profile.description}</p>
|
||||
)}
|
||||
<div className="admin-meta-row">
|
||||
<span>Auto search: {profile.auto_search_enabled ? 'On' : 'Off'}</span>
|
||||
<span>
|
||||
Account expiry:{' '}
|
||||
{typeof profile.account_expires_days === 'number'
|
||||
? `${profile.account_expires_days} days`
|
||||
: 'Never'}
|
||||
</span>
|
||||
<span>Users: {profile.assigned_users ?? 0}</span>
|
||||
<span>Invites: {profile.assigned_invites ?? 0}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="admin-inline-actions">
|
||||
<button type="button" className="ghost-button" onClick={() => editProfile(profile)}>
|
||||
Edit
|
||||
</button>
|
||||
<button type="button" onClick={() => deleteProfile(profile)}>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</AdminShell>
|
||||
)
|
||||
export default function AdminProfilesRedirectPage() {
|
||||
redirect('/admin/invites')
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user