Hermes/refboard-ayon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: runtime self-registration toggle in admin dashboard

Browse Source 
Self-registration is now controlled at runtime from the admin panel rather
than at build time via an env var. Default: off.

- New `settings` table (key/value/updated_at) plus getSetting/setSetting
  helpers. Idempotent first-boot migration seeds allow_self_registration
  from the ALLOW_SELF_REGISTRATION env var; after first boot the env var
  is ignored and admins control the toggle from the UI.
- New public GET /api/auth/config (no auth) — returns
  { allowSelfRegistration, hasUsers }. The Login page polls this on mount
  to decide whether to show a Register link, and to render
  "Create the first admin account" mode when the install is empty.
- New admin GET /api/admin/settings + PUT /api/admin/settings/:key for
  the dashboard. Constrained to a known-keys allowlist with type coercion
  so unrecognized keys can't be stored.
- POST /api/auth/register now reads the toggle from the database instead
  of process.env. The first user is still always allowed and is auto-
  promoted to admin.
- Admin.tsx grows a "Settings" card with a labelled toggle switch and
  toast feedback. The card sits above the user table.
- VITE_ALLOW_SELF_REGISTRATION dropped — runtime fetch replaces it.

Docs: README + .env.example clarify that ALLOW_SELF_REGISTRATION is now
an initial seed only, the going-public checklist points at the dashboard
toggle, and the features list calls out runtime control.
This commit is contained in:
Hiren Kangad
2026-04-28 20:56:52 +05:30
parent 782d6df9e0
commit 2fb71b4ae1
8 changed files with 234 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/Admin.tsx
+86 -3
View File
@@ -14,6 +14,12 @@ interface AdminUser {
updated_at: string;
}
interface SettingsResponse {
settings: {
allow_self_registration?: { value: boolean; updated_at: string | null; type: string };
};
}
const inputStyle: React.CSSProperties = {
padding: '10px 12px',
background: '#0d0d0d',
@@ -201,20 +207,26 @@ export default function Admin() {
const [showCreate, setShowCreate] = useState(false);
const [resetFor, setResetFor] = useState<AdminUser | null>(null);
const [toast, setToast] = useState<{ msg: string; kind: 'ok' | 'err' } | null>(null);
const [allowSelfReg, setAllowSelfReg] = useState<boolean | null>(null);
const [allowSelfRegSaving, setAllowSelfRegSaving] = useState(false);
const refresh = useCallback(async () => {
setLoadErr('');
try {
const res = await api.get('/api/admin/users');
const list: AdminUser[] = res.data?.users || [];
const [usersRes, settingsRes] = await Promise.all([
api.get('/api/admin/users'),
api.get<SettingsResponse>('/api/admin/settings'),
]);
const list: AdminUser[] = usersRes.data?.users || [];
list.sort((a, b) => {
if (a.is_active !== b.is_active) return b.is_active - a.is_active;
if (a.role !== b.role) return a.role === 'admin' ? -1 : 1;
return a.email.localeCompare(b.email);
});
setUsers(list);
setAllowSelfReg(!!settingsRes.data?.settings?.allow_self_registration?.value);
} catch (e: any) {
setLoadErr(e?.response?.data?.error || 'Failed to load users');
setLoadErr(e?.response?.data?.error || 'Failed to load admin data');
} finally {
setLoading(false);
}
@@ -224,6 +236,26 @@ export default function Admin() {
if (!authLoading) refresh();
}, [authLoading, refresh]);
async function toggleSelfRegistration() {
if (allowSelfReg === null || allowSelfRegSaving) return;
const next = !allowSelfReg;
setAllowSelfRegSaving(true);
try {
await api.put('/api/admin/settings/allow_self_registration', { value: next });
setAllowSelfReg(next);
setToast({
msg: next
? 'Self-registration enabled — anyone can sign up from the login page'
: 'Self-registration disabled — only admins can create accounts',
kind: 'ok',
});
} catch (e: any) {
setToast({ msg: e?.response?.data?.error || 'Failed to update setting', kind: 'err' });
} finally {
setAllowSelfRegSaving(false);
}
}
if (authLoading) {
return <div style={{ padding: 40, color: '#888', background: '#0a0a0a', minHeight: '100vh' }}>Loading…</div>;
}
@@ -317,6 +349,27 @@ export default function Admin() {
<Stat label="Total" value={users.length} accent="#cfd6df" />
</div>
{/* Settings card */}
<div style={{
background: '#101010', border: '1px solid #1c1c1c', borderRadius: 10,
padding: '16px 18px', marginBottom: 18,
display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
}}>
<div>
<div style={{ fontSize: 13, fontWeight: 600, color: '#dadada', marginBottom: 3 }}>
Allow self-registration
</div>
<div style={{ fontSize: 12, color: '#777', lineHeight: 1.5, maxWidth: 600 }}>
When on, anyone with the URL can create an account. When off, only admins can create accounts (the Register link disappears from the login page).
</div>
</div>
<Toggle
checked={!!allowSelfReg}
disabled={allowSelfReg === null || allowSelfRegSaving}
onChange={toggleSelfRegistration}
/>
</div>
<div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 16 }}>
<input
placeholder="Filter by email, username, display name…"
@@ -424,6 +477,36 @@ function Stat({ label, value, accent }: { label: string; value: number; accent:
);
}
function Toggle({ checked, disabled, onChange }: {
checked: boolean;
disabled?: boolean;
onChange: () => void;
}) {
return (
<button
onClick={onChange}
disabled={disabled}
style={{
position: 'relative', width: 44, height: 24, borderRadius: 12,
background: checked ? '#386fe5' : '#252525',
border: `1px solid ${checked ? '#4a9eff' : '#333'}`,
cursor: disabled ? 'wait' : 'pointer',
padding: 0, flexShrink: 0, transition: 'background 0.18s, border-color 0.18s',
opacity: disabled ? 0.6 : 1,
}}
aria-pressed={checked}
>
<span style={{
position: 'absolute', top: 2, left: checked ? 22 : 2,
width: 18, height: 18, borderRadius: '50%',
background: '#fff',
boxShadow: '0 1px 3px rgba(0,0,0,0.4)',
transition: 'left 0.18s',
}} />
</button>
);
}
function ActionButton({ children, onClick, disabled, danger }: {
children: React.ReactNode;
onClick: () => void;
frontend/src/pages/Login.tsx
+18 -8
View File
@@ -1,10 +1,8 @@
import React, { useState } from 'react';
import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../auth';
import api from '../api';
const ALLOW_REGISTER = (import.meta.env.VITE_ALLOW_SELF_REGISTRATION || '').toLowerCase() === 'true';
export default function Login() {
const [mode, setMode] = useState<'login' | 'register'>('login');
const [email, setEmail] = useState('');
@@ -13,13 +11,25 @@ export default function Login() {
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const [loading, setLoading] = useState(false);
const [allowRegister, setAllowRegister] = useState(false);
const [hasUsers, setHasUsers] = useState(true);
const navigate = useNavigate();
const { login, user } = useAuth();
React.useEffect(() => {
useEffect(() => {
if (user) navigate('/', { replace: true });
}, [user, navigate]);
useEffect(() => {
api.get('/api/auth/config')
.then((res) => {
setAllowRegister(!!res.data?.allowSelfRegistration);
setHasUsers(!!res.data?.hasUsers);
if (!res.data?.hasUsers) setMode('register');
})
.catch(() => { /* fall through; defaults are safe */ });
}, []);
async function handleSubmit(e: React.FormEvent) {
e.preventDefault();
setError('');
@@ -79,7 +89,7 @@ export default function Login() {
RefBoard
</h1>
<p style={{ margin: 0, fontSize: '13px', color: '#666' }}>
{mode === 'login' ? 'Sign in to continue' : 'Create your account'}
{!hasUsers ? 'Create the first admin account' : mode === 'login' ? 'Sign in to continue' : 'Create your account'}
</p>
</div>
@@ -149,13 +159,13 @@ export default function Login() {
</button>
</form>
{ALLOW_REGISTER && (
{(allowRegister || !hasUsers) && (
<div style={{ textAlign: 'center', marginTop: '20px', fontSize: '13px', color: '#666' }}>
{mode === 'login' ? (
<>Need an account? <a href="#" onClick={(e) => { e.preventDefault(); setMode('register'); setError(''); }} style={{ color: '#4a9eff' }}>Register</a></>
) : (
) : hasUsers ? (
<>Already have an account? <a href="#" onClick={(e) => { e.preventDefault(); setMode('login'); setError(''); }} style={{ color: '#4a9eff' }}>Sign in</a></>
)}
) : null}
</div>
)}
</div>