Merge pull request #2 from Lawndlwd/feedback

Feedback

Author: Lawndlwd

.env.example

@@ -1,9 +1,9 @@
 # ── Admin credentials ─────────────────────────────────────────────────────────
 ADMIN_USERNAME=admin
-ADMIN_PASSWORD=changeme
+ADMIN_PASSWORD=change-this-immediately-123456
 
 # ── Security ──────────────────────────────────────────────────────────────────
-JWT_SECRET=change-this-secret-in-production
+JWT_SECRET=generate-a-random-32-character-string-here
 
 # ── Caddy domain (optional) ───────────────────────────────────────────────────
 # Leave empty to run on plain HTTP :80

client/src/pages/admin/Settings.tsx

@@ -57,7 +57,11 @@ export default function Settings() {
   const [cfg, setCfg] = useState<Partial<AppConfig> | null>(null);
   const [saved, setSaved] = useState(false);
   const [saving, setSaving] = useState(false);
+  const [adminUsername, setAdminUsername] = useState('');
+  const [currentPassword, setCurrentPassword] = useState('');
   const [newPassword, setNewPassword] = useState('');
+  const [newUsername, setNewUsername] = useState('');
+  const [changingPassword, setChangingPassword] = useState(false);
   const [uploadingAvatars, setUploadingAvatars] = useState(false);
   const [avatarUploadMessage, setAvatarUploadMessage] = useState<string | null>(null);
   const [availableAvatars, setAvailableAvatars] = useState<string[] | null>(null);
@@ -70,6 +74,12 @@ export default function Settings() {
       .then((r) => r.json())
       .then(setCfg);
 
+    fetch('/api/admin/me', { headers: { Authorization: `Bearer ${token}` } })
+      .then((r) => r.json())
+      .then((data) => {
+        if (data.username) setAdminUsername(data.username);
+      });
+
     fetch('/api/avatars')
       .then((r) => {
         if (!r.ok) throw new Error('Failed to load avatars');
@@ -85,19 +95,61 @@ export default function Settings() {
       });
   }, [token]);
 
+  async function changePassword() {
+    if (!currentPassword) {
+      alert('Please enter your current password');
+      return;
+    }
+    if (!newPassword && !newUsername) {
+      alert('Please enter a new password or username to change');
+      return;
+    }
+
+    setChangingPassword(true);
+    try {
+      const body: Record<string, string> = { currentPassword };
+      if (newPassword) body.newPassword = newPassword;
+      if (newUsername && newUsername !== adminUsername) body.newUsername = newUsername;
+
+      const response = await fetch('/api/admin/change-password', {
+        method: 'POST',
+        headers,
+        body: JSON.stringify(body),
+      });
+
+      if (!response.ok) {
+        const error = await response.json();
+        alert(error.error || 'Failed to change password');
+        return;
+      }
+
+      alert('Password changed successfully! Please log in again.');
+      // Log out user
+      localStorage.removeItem('token');
+      window.location.href = '/admin/login';
+    } catch (error) {
+      console.error('Password change failed:', error);
+      alert('Failed to change password');
+    } finally {
+      setChangingPassword(false);
+      setCurrentPassword('');
+      setNewPassword('');
+      setNewUsername('');
+    }
+  }
+
   async function save() {
     if (!cfg) return;
     setSaving(true);
     const payload: Record<string, unknown> = { ...cfg };
-    if (newPassword.trim()) payload.adminPassword = newPassword.trim();
+    // Password changes now go through separate endpoint (changePassword function)
     await fetch('/api/admin/config', {
       method: 'PUT',
       headers,
       body: JSON.stringify(payload),
     });
     setSaving(false);
     setSaved(true);
-    setNewPassword('');
     setTimeout(() => setSaved(false), 2500);
   }
 
@@ -343,24 +395,44 @@ export default function Settings() {
           {/* 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>
 
-            <Input
-              label="Admin Username"
-              value={cfg.adminUsername ?? 'admin'}
-              onChange={(e) => update('adminUsername', e.target.value)}
-            />
-
-            <Input
-              label={
-                <>
-                  New Password <span className="text-muted">(leave blank to keep current)</span>
-                </>
-              }
-              type="password"
-              value={newPassword}
-              placeholder="Enter new password"
-              onChange={(e) => setNewPassword(e.target.value)}
-            />
+            <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.

client/src/types.ts

@@ -113,7 +113,6 @@ export interface AppConfig {
   port: number;
   appName: string;
   appSubtitle: string;
-  adminUsername: string;
   questionTimeSec: number;
   defaultBaseScore: number;
   speedBonusMax: number;

config.json data/config.jsonconfig.json renamed to data/config.json

@@ -2,11 +2,8 @@
   "port": 3000,
   "appName": "Scaleway",
   "appSubtitle": "hellllllooooooo",
-  "adminUsername": "admin",
-  "adminPassword": "admin123",
   "jwtSecret": "change-this-secret-in-production",
   "questionTimeSec": 20,
-  "lobbyTimeoutMin": 30,
   "defaultBaseScore": 300,
   "speedBonusMax": 200,
   "speedBonusMin": 10,
@@ -15,17 +12,5 @@
   "streakBonusEnabled": true,
   "streakMinimum": 2,
   "streakBonusBase": 50,
-  "resultsAutoAdvanceSec": 0,
-  "speedBonuses": [
-    100,
-    85,
-    70,
-    65,
-    50,
-    35,
-    25,
-    15,
-    5
-  ],
-  "defaultSpeedBonus": 25
+  "resultsAutoAdvanceSec": 0
 }

docker-compose.yml

@@ -10,7 +10,7 @@ services:
       - ADMIN_PASSWORD=${ADMIN_PASSWORD:-admin}
       - JWT_SECRET=${JWT_SECRET:-change-this-secret-in-production}
     volumes:
-      - quizz-data:/data
+      - ./data:/data
       # Avatars live on the host — drop image files here and they appear in the picker
       - ./avatars:/data/avatars
 
@@ -31,6 +31,5 @@ services:
       - caddy_config:/config
 
 volumes:
-  quizz-data:
   caddy_data:
   caddy_config: