feat(auth): ✨ add super admin role and admin management

Author: Lawndlwd

client/src/context/AuthContext.tsx

@@ -2,6 +2,7 @@ import { createContext, type ReactNode, useContext, useEffect, useState } from '
 
 interface AuthCtx {
   isAdmin: boolean;
+  isSuperAdmin: boolean;
   checking: boolean;
   login: (username: string, password: string) => Promise<string | null>;
   logout: () => Promise<void>;
@@ -12,6 +13,7 @@ const Ctx = createContext<AuthCtx>({} as AuthCtx);
 
 export function AuthProvider({ children }: { children: ReactNode }) {
   const [isAdmin, setIsAdmin] = useState(false);
+  const [isSuperAdmin, setIsSuperAdmin] = useState(false);
   const [checking, setChecking] = useState(true);
   const [token, setToken] = useState<string | null>(() => localStorage.getItem('adminToken'));
 
@@ -26,7 +28,9 @@ export function AuthProvider({ children }: { children: ReactNode }) {
         headers: { Authorization: `Bearer ${t}` },
       });
       if (res.ok) {
+        const data = await res.json();
         setIsAdmin(true);
+        setIsSuperAdmin(data.isSuperAdmin ?? false);
         setToken(t);
       } else {
         localStorage.removeItem('adminToken');
@@ -44,15 +48,18 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     });
     const data = await res.json();
     if (res.ok) {
-      // Extract token from cookie echo — server sets httpOnly cookie AND we
-      // also store it in localStorage for socket auth
-      // Re-fetch /me to get a bearer token flow
-      // Actually: let's ask the server for a token response
-      // We update the server to also return the token in the body
       const t = data.token as string;
       localStorage.setItem('adminToken', t);
       setToken(t);
       setIsAdmin(true);
+      // Fetch /me to get isSuperAdmin status
+      const meRes = await fetch('/api/admin/me', {
+        headers: { Authorization: `Bearer ${t}` },
+      });
+      if (meRes.ok) {
+        const meData = await meRes.json();
+        setIsSuperAdmin(meData.isSuperAdmin ?? false);
+      }
       return null;
     }
     return data.error ?? 'Login failed';
@@ -63,10 +70,13 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     localStorage.removeItem('adminToken');
     setToken(null);
     setIsAdmin(false);
+    setIsSuperAdmin(false);
   }
 
   return (
-    <Ctx.Provider value={{ isAdmin, checking, login, logout, token }}>{children}</Ctx.Provider>
+    <Ctx.Provider value={{ isAdmin, isSuperAdmin, checking, login, logout, token }}>
+      {children}
+    </Ctx.Provider>
   );
 }
 

client/src/pages/admin/Settings.tsx

@@ -53,7 +53,7 @@ function SpeedBonusPreview({ max, min }: { max: number; min: number }) {
 }
 
 export default function Settings() {
-  const { token } = useAuth();
+  const { token, isSuperAdmin } = useAuth();
   const [cfg, setCfg] = useState<Partial<AppConfig> | null>(null);
   const [saved, setSaved] = useState(false);
   const [saving, setSaving] = useState(false);
@@ -67,6 +67,13 @@ export default function Settings() {
   const [availableAvatars, setAvailableAvatars] = useState<string[] | null>(null);
   const [avatarsError, setAvatarsError] = useState<string | null>(null);
 
+  // Super admin: admin management
+  const [dbAdmins, setDbAdmins] = useState<
+    { id: number; username: string; created_at: string; last_password_change: string | null }[]
+  >([]);
+  const [resetPasswords, setResetPasswords] = useState<Record<number, string>>({});
+  const [resettingId, setResettingId] = useState<number | null>(null);
+
   const headers = { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' };
 
   useEffect(() => {
@@ -93,7 +100,16 @@ export default function Settings() {
         setAvailableAvatars([]);
         setAvatarsError('Could not load current avatars.');
       });
-  }, [token]);
+
+    if (isSuperAdmin) {
+      fetch('/api/admin/admins', { headers: { Authorization: `Bearer ${token}` } })
+        .then((r) => r.json())
+        .then((data) => {
+          if (data.admins) setDbAdmins(data.admins);
+        })
+        .catch(() => {});
+    }
+  }, [token, isSuperAdmin]);
 
   async function changePassword() {
     if (!currentPassword) {
@@ -393,51 +409,124 @@ export default function Settings() {
           </div>
 
           {/* Admin credentials */}
-          <div className="card">
-            <h2 className="mb-4">🔐 Admin Credentials</h2>
-            <p className="text-sm text-muted mb-4">
-              Current username: <strong style={{ color: 'var(--text)' }}>{adminUsername || '...'}</strong>
-            </p>
+          {isSuperAdmin ? (
+            <div className="card">
+              <h2 className="mb-4">🔐 Admin Management (Super Admin)</h2>
+              <div className="alert alert-warn mb-4" style={{ fontSize: '0.85rem' }}>
+                You are logged in as the super admin. Your password is managed via the
+                ADMIN_PASSWORD environment variable.
+              </div>
 
-            <div className="form-group">
-              <Input
-                label="Current Password (required to make changes)"
-                type="password"
-                autoComplete="off"
-                value={currentPassword}
-                onChange={(e) => setCurrentPassword(e.target.value)}
-                placeholder="Enter current password"
-              />
-              <Input
-                label="New Username (leave blank to keep current)"
-                autoComplete="off"
-                value={newUsername}
-                onChange={(e) => setNewUsername(e.target.value)}
-                placeholder={adminUsername || 'admin'}
-              />
-              <Input
-                label="New Password (leave blank to keep current)"
-                type="password"
-                autoComplete="new-password"
-                value={newPassword}
-                onChange={(e) => setNewPassword(e.target.value)}
-                placeholder="Enter new password"
-                noMargin
-              />
-              <button
-                type="button"
-                onClick={changePassword}
-                disabled={changingPassword}
-                className="btn btn-primary mt-3"
-              >
-                {changingPassword ? 'Updating...' : 'Update Credentials'}
-              </button>
+              {dbAdmins.length === 0 ? (
+                <p className="text-sm text-muted">No database admins found.</p>
+              ) : (
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+                  {dbAdmins.map((admin) => (
+                    <div
+                      key={admin.id}
+                      style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 12,
+                        padding: '10px 14px',
+                        background: 'var(--surface2)',
+                        border: '1px solid var(--border)',
+                        borderRadius: 'var(--radius-sm)',
+                        flexWrap: 'wrap',
+                      }}
+                    >
+                      <strong style={{ flex: 1, minWidth: 100 }}>{admin.username}</strong>
+                      <Input
+                        label=""
+                        type="password"
+                        autoComplete="new-password"
+                        placeholder="New password"
+                        value={resetPasswords[admin.id] || ''}
+                        onChange={(e) =>
+                          setResetPasswords((prev) => ({ ...prev, [admin.id]: e.target.value }))
+                        }
+                        noMargin
+                      />
+                      <button
+                        type="button"
+                        className="btn btn-primary"
+                        disabled={resettingId === admin.id || !resetPasswords[admin.id]}
+                        onClick={async () => {
+                          setResettingId(admin.id);
+                          try {
+                            const res = await fetch(`/api/admin/admins/${admin.id}/reset-password`, {
+                              method: 'POST',
+                              headers,
+                              body: JSON.stringify({ newPassword: resetPasswords[admin.id] }),
+                            });
+                            if (res.ok) {
+                              alert(`Password reset for ${admin.username}`);
+                              setResetPasswords((prev) => ({ ...prev, [admin.id]: '' }));
+                            } else {
+                              const err = await res.json();
+                              alert(err.error || 'Reset failed');
+                            }
+                          } catch {
+                            alert('Reset failed');
+                          } finally {
+                            setResettingId(null);
+                          }
+                        }}
+                      >
+                        {resettingId === admin.id ? 'Resetting...' : 'Reset Password'}
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              )}
             </div>
+          ) : (
+            <div className="card">
+              <h2 className="mb-4">🔐 Admin Credentials</h2>
+              <p className="text-sm text-muted mb-4">
+                Current username: <strong style={{ color: 'var(--text)' }}>{adminUsername || '...'}</strong>
+              </p>
 
-            <div className="alert alert-warn mt-4" style={{ fontSize: '0.85rem' }}>
-              ⚠️ After changing credentials, you&apos;ll be logged out and need to log back in.
+              <div className="form-group">
+                <Input
+                  label="Current Password (required to make changes)"
+                  type="password"
+                  autoComplete="off"
+                  value={currentPassword}
+                  onChange={(e) => setCurrentPassword(e.target.value)}
+                  placeholder="Enter current password"
+                />
+                <Input
+                  label="New Username (leave blank to keep current)"
+                  autoComplete="off"
+                  value={newUsername}
+                  onChange={(e) => setNewUsername(e.target.value)}
+                  placeholder={adminUsername || 'admin'}
+                />
+                <Input
+                  label="New Password (leave blank to keep current)"
+                  type="password"
+                  autoComplete="new-password"
+                  value={newPassword}
+                  onChange={(e) => setNewPassword(e.target.value)}
+                  placeholder="Enter new password"
+                  noMargin
+                />
+                <button
+                  type="button"
+                  onClick={changePassword}
+                  disabled={changingPassword}
+                  className="btn btn-primary mt-3"
+                >
+                  {changingPassword ? 'Updating...' : 'Update Credentials'}
+                </button>
+              </div>
+
+              <div className="alert alert-warn mt-4" style={{ fontSize: '0.85rem' }}>
+                ⚠️ After changing credentials, you&apos;ll be logged out and need to log back in.
+              </div>
             </div>
-          </div>
+          )}
 
           {/* Avatar / emoji library */}
           <div className="card">

server/package.json

@@ -3,9 +3,9 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "dev": "tsx watch src/index.ts",
+    "dev": "tsx watch --env-file=../.env src/index.ts",
     "build": "tsc",
-    "start": "node dist/index.js",
+    "start": "node --env-file=../.env dist/index.js",
     "typecheck": "tsc --noEmit",
     "lint": "biome lint src"
   },

server/src/middleware.ts

@@ -9,8 +9,16 @@ export function requireAdmin(req: Request, res: Response, next: NextFunction): v
     return;
   }
   try {
-    const decoded = jwt.verify(token, config.jwtSecret) as { username: string; adminId: number };
-    (req as any).user = { username: decoded.username, adminId: decoded.adminId };
+    const decoded = jwt.verify(token, config.jwtSecret) as {
+      username: string;
+      adminId: number;
+      isSuperAdmin?: boolean;
+    };
+    (req as any).user = {
+      username: decoded.username,
+      adminId: decoded.adminId,
+      isSuperAdmin: decoded.isSuperAdmin ?? false,
+    };
     next();
   } catch {
     res.status(401).json({ error: 'Invalid or expired token' });

server/src/routes/admin.ts

@@ -14,7 +14,19 @@ adminRouter.post('/login', async (req: Request, res: Response) => {
   const { username, password } = req.body as { username: string; password: string };
 
   try {
-    // Check database for admin
+    // 1. Check env super-admin first (never stored in DB)
+    const envUser = process.env.ADMIN_USERNAME || 'admin';
+    const envPass = process.env.ADMIN_PASSWORD;
+    if (envPass && username === envUser && password === envPass) {
+      const token = jwt.sign(
+        { username: envUser, adminId: 0, isSuperAdmin: true },
+        config.jwtSecret,
+        { expiresIn: '7d' },
+      );
+      return res.json({ token });
+    }
+
+    // 2. Check database for admin
     const admin = await db.get('SELECT * FROM admins WHERE username = ?', [username]);
 
     if (!admin) {
@@ -47,6 +59,12 @@ adminRouter.post('/logout', (_req, res) => {
 });
 
 adminRouter.post('/change-password', requireAdmin, async (req: Request, res: Response) => {
+  if ((req as any).user.isSuperAdmin) {
+    return res
+      .status(400)
+      .json({ error: 'Super admin password is managed via environment variables' });
+  }
+
   const { currentPassword, newPassword, newUsername } = req.body as {
     currentPassword: string;
     newPassword?: string;
@@ -96,9 +114,41 @@ adminRouter.post('/change-password', requireAdmin, async (req: Request, res: Res
 });
 
 adminRouter.get('/me', requireAdmin, async (req, res) => {
-  const adminId = (req as any).user.adminId;
-  const admin = await db.get('SELECT username FROM admins WHERE id = ?', [adminId]);
-  res.json({ ok: true, username: admin?.username });
+  const user = (req as any).user;
+  if (user.isSuperAdmin) {
+    return res.json({ ok: true, username: user.username, isSuperAdmin: true });
+  }
+  const admin = await db.get('SELECT username FROM admins WHERE id = ?', [user.adminId]);
+  res.json({ ok: true, username: admin?.username, isSuperAdmin: false });
+});
+
+// ─── Admin Management (super admin only) ────────────────────────────────────
+
+adminRouter.get('/admins', requireAdmin, async (req, res) => {
+  if (!(req as any).user.isSuperAdmin) {
+    return res.status(403).json({ error: 'Only super admin can list admins' });
+  }
+  const admins = await db.all(
+    'SELECT id, username, created_at, last_password_change FROM admins',
+  );
+  res.json({ admins });
+});
+
+adminRouter.post('/admins/:id/reset-password', requireAdmin, async (req, res) => {
+  if (!(req as any).user.isSuperAdmin) {
+    return res.status(403).json({ error: 'Only super admin can reset passwords' });
+  }
+  const { newPassword } = req.body as { newPassword?: string };
+  if (!newPassword) {
+    return res.status(400).json({ error: 'newPassword required' });
+  }
+  const bcrypt = await import('bcrypt');
+  const hash = await bcrypt.hash(newPassword, 12);
+  await db.run(
+    'UPDATE admins SET password_hash = ?, last_password_change = datetime("now") WHERE id = ?',
+    [hash, req.params.id],
+  );
+  res.json({ success: true });
 });
 
 // ─── Config ───────────────────────────────────────────────────────────────────