feat: add client administrator authentication gate

src/App.svelte

@@ -3,6 +3,15 @@
   let connectionState = 'OFFLINE';
   let serverVersion = '—';
   let activeView = 'Live dashboard';
+  let sessionToken = '';
+  let authenticated = false;
+  let mustReplaceCredentials = false;
+  let username = '';
+  let password = '';
+  let newUsername = '';
+  let newPassword = '';
+  let authError = '';
+  let authBusy = false;
 
   async function checkServer() {
     connectionState = 'CONNECTING';
@@ -16,6 +25,64 @@
       connectionState = 'SERVER UNAVAILABLE';
     }
   }
+
+  async function login() {
+    authBusy = true;
+    authError = '';
+    try {
+      const response = await fetch(`${serverAddress}/api/v1/auth/login`, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ username, password }),
+      });
+      if (!response.ok) throw new Error('Your username or password may be incorrect.');
+      const result: { session_token: string; must_replace_credentials: boolean } = await response.json();
+      sessionToken = result.session_token;
+      authenticated = true;
+      mustReplaceCredentials = result.must_replace_credentials;
+      connectionState = 'CONNECTED';
+      if (!mustReplaceCredentials) password = '';
+      if (mustReplaceCredentials) newUsername = username;
+    } catch (error) {
+      authError = error instanceof Error ? error.message : 'The server could not process the login.';
+      authenticated = false;
+    } finally {
+      authBusy = false;
+    }
+  }
+
+  async function replaceCredentials() {
+    authBusy = true;
+    authError = '';
+    try {
+      const response = await fetch(`${serverAddress}/api/v1/auth/credentials`, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json', authorization: `Bearer ${sessionToken}` },
+        body: JSON.stringify({ current_password: password, username: newUsername, password: newPassword }),
+      });
+      if (!response.ok) throw new Error(response.status === 400 ? 'Use a username and a password of at least 10 characters.' : 'Credential replacement failed.');
+      sessionToken = '';
+      authenticated = false;
+      mustReplaceCredentials = false;
+      username = newUsername;
+      password = '';
+      newPassword = '';
+      authError = 'Credentials updated. Sign in again.';
+    } catch (error) {
+      authError = error instanceof Error ? error.message : 'Credential replacement failed.';
+    } finally {
+      authBusy = false;
+    }
+  }
+
+  async function logout() {
+    if (sessionToken) {
+      await fetch(`${serverAddress}/api/v1/auth/logout`, { method: 'POST', headers: { authorization: `Bearer ${sessionToken}` } }).catch(() => undefined);
+    }
+    sessionToken = '';
+    authenticated = false;
+    mustReplaceCredentials = false;
+  }
 </script>
 
 <svelte:head><title>Trixie</title></svelte:head>
@@ -41,17 +108,49 @@
         <input id="server-address" class="control" bind:value={serverAddress} spellcheck="false" />
         <button class="primary control-button" onclick={checkServer}>TEST CONNECTION</button>
       </div>
+      <div class="server-card auth-card">
+        <div class="micro">ADMINISTRATOR ACCESS</div>
+        {#if authenticated}
+          <div class="server-status"><span class="status-dot good"></span>AUTHENTICATED</div>
+          <button class="primary control-button" onclick={logout}>LOG OUT</button>
+        {:else}
+          <label for="username" class="micro">USERNAME</label>
+          <input id="username" class="control" bind:value={username} autocomplete="username" />
+          <label for="password" class="micro">PASSWORD</label>
+          <input id="password" class="control" type="password" bind:value={password} autocomplete="current-password" />
+          <button class="primary control-button" onclick={login} disabled={authBusy}>LOG IN</button>
+          {#if authError}<div class="auth-error">{authError}</div>{/if}
+        {/if}
+      </div>
       <div class="side-section"><div class="micro">CHANNEL</div><div class="empty-row">No Twitch account connected</div></div>
       <div class="side-section side-footer"><div class="micro">SERVER VERSION</div><div class="mono">{serverVersion}</div></div>
     </aside>
 
     <section class="content-area">
+      {#if !authenticated}
+        <section class="auth-gate panel">
+          <div class="panel-header"><span>AUTHENTICATION REQUIRED</span></div>
+          <div class="auth-gate-body"><div class="empty-glyph">⌁</div><strong>Sign in to Trixie</strong><span>The server connection is ready, but the dashboard requires administrator authentication.</span></div>
+        </section>
+      {:else if mustReplaceCredentials}
+        <section class="auth-gate panel">
+          <div class="panel-header"><span>FIRST-RUN SETUP</span></div>
+          <div class="auth-gate-body credential-form">
+            <strong>Replace the generated administrator credentials</strong>
+            <label for="new-username" class="micro">NEW USERNAME</label><input id="new-username" class="control" bind:value={newUsername} autocomplete="username" />
+            <label for="new-password" class="micro">NEW PASSWORD</label><input id="new-password" class="control" type="password" bind:value={newPassword} autocomplete="new-password" />
+            <button class="primary" onclick={replaceCredentials} disabled={authBusy}>SAVE AND CONTINUE</button>
+            {#if authError}<div class="auth-error">{authError}</div>{/if}
+          </div>
+        </section>
+      {:else}
       <div class="dashboard-grid">
         <section class="panel preview-panel"><div class="panel-header"><span>STREAM PREVIEW</span><span class="panel-menu">⋮</span></div><div class="preview-stage"><div class="offline-mark">STREAM OFFLINE</div><div class="offline-subtitle">CONNECT TWITCH TO BEGIN</div></div><div class="panel-footer"><span class="micro">VIDEO PLAYER</span><span class="badge">OFFLINE</span></div></section>
         <section class="panel activity-panel"><div class="panel-header"><span>ACTIVITY FEED</span><span class="panel-menu">⋮</span></div><div class="panel-tabs"><button class="tab active">ALL ACTIVITY</button><button class="tab">MODERATION</button></div><div class="empty-state"><div class="empty-glyph">◌</div><strong>Nothing here yet</strong><span>Follows, subscriptions, raids, and server events will appear here.</span></div></section>
         <section class="panel chat-panel"><div class="panel-header"><span>MY CHAT</span><span class="panel-menu">⋮</span></div><div class="chat-empty"><div class="empty-glyph">⌁</div><strong>Chat is waiting</strong><span>Connect a streamer or bot account to begin.</span></div><div class="chat-composer"><input class="control" placeholder="Send a message" disabled /><button class="primary" disabled>SEND</button></div></section>
         <section class="panel quick-panel"><div class="panel-header"><span>QUICK ACTIONS</span><span class="panel-menu">⋮</span></div><div class="quick-grid"><button class="quick-action accent">EDIT STREAM INFO</button><button class="quick-action">MODERATION</button><button class="quick-action">BOT COMMANDS</button><button class="quick-action">OVERLAYS</button></div></section>
       </div>
+      {/if}
     </section>
   </main>
 </div>

src/styles.css

@@ -232,6 +232,42 @@ label {
   width: 100%;
   margin-top: 8px;
 }
+.auth-card {
+  display: block;
+}
+.auth-card label {
+  margin-top: 9px;
+}
+.auth-error {
+  margin-top: 8px;
+  color: var(--ed-warn);
+  font: 10px/1.4 var(--font-data);
+}
+.auth-gate {
+  min-height: 300px;
+}
+.auth-gate-body {
+  display: grid;
+  justify-items: center;
+  align-content: start;
+  gap: 8px;
+  max-width: 360px;
+  margin: 0 auto;
+  padding: 48px 16px;
+  color: var(--ed-dim);
+  text-align: center;
+}
+.auth-gate-body strong {
+  color: var(--ed-fg);
+  font: 600 16px var(--font-display);
+}
+.credential-form {
+  justify-items: stretch;
+  text-align: left;
+}
+.credential-form strong {
+  text-align: center;
+}
 .primary {
   padding: 7px 10px;
   border-color: var(--ui-line-focus);