1 files changed, 44 insertions, 4 deletions
diff --git a/internal/adminui/assets/index.html b/internal/adminui/assets/index.html
index c299037..ca9f282 100644
--- a/internal/adminui/assets/index.html
+++ b/internal/adminui/assets/index.html
@@ -8,9 +8,43 @@
   <link rel="stylesheet" href="./style.css">
 </head>
 <body>
+  <section class="auth-screen" id="auth-screen">
+    <div class="auth-brand"><span class="brand-mark">A</span><div><strong>AIGW</strong><small>CONTROL PLANE</small></div></div>
+    <div class="auth-panel">
+      <div class="auth-tabs" role="tablist" aria-label="Account access">
+        <button class="auth-tab active" type="button" data-auth-pane="login-pane">Sign in</button>
+        <button class="auth-tab" type="button" data-auth-pane="register-pane" id="register-tab">Create account</button>
+        <button class="auth-tab" type="button" data-auth-pane="bootstrap-pane">Operator</button>
+      </div>
+      <form class="auth-pane active" id="login-pane">
+        <div><span class="eyebrow">ACCOUNT ACCESS</span><h1>Sign in</h1></div>
+        <label>Email<input name="email" type="email" required autocomplete="username" placeholder="you@company.com"></label>
+        <label>Password<input name="password" type="password" required autocomplete="current-password"></label>
+        <button class="button primary" type="submit">Sign in</button>
+      </form>
+      <form class="auth-pane" id="register-pane">
+        <div><span class="eyebrow">NEW WORKSPACE</span><h1>Create account</h1></div>
+        <label>Organization<input name="organization" required autocomplete="organization" placeholder="Acme Inc."></label>
+        <label>Workspace slug<input name="tenant_slug" required pattern="[a-z0-9][a-z0-9-]{1,62}[a-z0-9]" placeholder="acme"></label>
+        <label>Your name<input name="display_name" required autocomplete="name"></label>
+        <label>Email<input name="email" type="email" required autocomplete="email"></label>
+        <label>Password<input name="password" type="password" required minlength="12" maxlength="128" autocomplete="new-password"></label>
+        <button class="button primary" type="submit">Create account</button>
+      </form>
+      <form class="auth-pane" id="bootstrap-pane">
+        <div><span class="eyebrow">BREAK GLASS</span><h1>Operator access</h1></div>
+        <input class="visually-hidden" name="username" autocomplete="username" value="aigw-operator" aria-hidden="true" tabindex="-1">
+        <label>Bootstrap token<input name="token" type="password" required autocomplete="off"></label>
+        <button class="button primary" type="submit">Continue</button>
+      </form>
+      <p class="auth-error" id="auth-error" role="alert"></p>
+    </div>
+  </section>
+
+  <div id="console-app" class="hidden">
   <header class="topbar">
     <div class="brand"><span class="brand-mark">A</span><div><strong>AIGW</strong><small>CONTROL PLANE</small></div></div>
-    <form class="session" id="session-form"><span id="actor-label" class="actor-label"></span><input class="visually-hidden" name="username" autocomplete="username" value="aigw-console" aria-hidden="true" tabindex="-1"><input id="admin-token" name="admin-token" type="password" placeholder="Console token" autocomplete="current-password" aria-label="Console token"><button type="submit">Connect</button><span id="connection-state" class="state">Offline</span></form>
+    <div class="session"><div><strong id="actor-label" class="actor-label"></strong><span id="connection-state" class="state"></span></div><button type="button" id="sign-out">Sign out</button></div>
   </header>
   <main class="shell">
     <nav class="tabs" aria-label="Admin sections">
@@ -21,6 +55,7 @@
       <button class="tab" data-section="keys" data-permission="keys.read">API keys</button>
       <button class="tab" data-section="limits" data-permission="limits.read">Limits</button>
       <button class="tab" data-section="team" data-permission="users.read">Team</button>
+      <button class="tab" data-section="account" id="account-tab">Account</button>
       <button class="tab" data-section="audit" data-permission="audit.read">Audit</button>
       <button class="tab" data-section="tenants" data-permission="tenants.read">Tenants</button>
       <button class="tab" data-section="providers" data-permission="platform.read">Providers</button>
@@ -90,9 +125,13 @@
 
     <section id="team" class="section">
       <div class="section-heading"><div><span class="eyebrow">RBAC</span><h1>Console access</h1></div></div>
-      <form class="panel form-grid" id="user-form" data-permission="users.write"><label>Tenant<select name="tenant_id" id="user-tenant"></select></label><label>Email<input name="email" type="email" required autocomplete="email" placeholder="operator@example.com"></label><label>Display name<input name="display_name" required placeholder="Operations"></label><label>Role<select name="role" id="user-role" required></select></label><button class="button primary" type="submit">Issue console token</button></form>
-      <div class="panel warning"><strong>Token visibility</strong><span>The console token is shown only once after creation.</span></div>
-      <div class="panel table-wrap"><table><thead><tr><th>User</th><th>Role</th><th>Tenant</th><th>Token</th><th>Last used</th><th>Status</th><th></th></tr></thead><tbody id="users-body"></tbody></table></div>
+      <form class="panel form-grid" id="user-form" data-permission="users.write"><label>Tenant<select name="tenant_id" id="user-tenant"></select></label><label>Email<input name="email" type="email" required autocomplete="email" placeholder="operator@example.com"></label><label>Display name<input name="display_name" required placeholder="Operations"></label><label>Role<select name="role" id="user-role" required></select></label><label>Temporary password<input name="password" type="password" required minlength="12" maxlength="128" autocomplete="new-password"></label><button class="button primary" type="submit">Create member</button></form>
+      <div class="panel table-wrap"><table><thead><tr><th>User</th><th>Role</th><th>Tenant</th><th>Login</th><th>Last used</th><th>Status</th><th></th></tr></thead><tbody id="users-body"></tbody></table></div>
+    </section>
+
+    <section id="account" class="section">
+      <div class="section-heading"><div><span class="eyebrow">SECURITY</span><h1>Account</h1></div></div>
+      <form class="panel form-grid compact-form" id="password-form"><input class="visually-hidden" name="username" autocomplete="username" aria-hidden="true" tabindex="-1"><label>Current password<input name="current_password" type="password" required autocomplete="current-password"></label><label>New password<input name="new_password" type="password" required minlength="12" maxlength="128" autocomplete="new-password"></label><button class="button primary" type="submit">Change password</button></form>
     </section>
 
     <section id="audit" class="section">
@@ -100,6 +139,7 @@
       <div class="panel table-wrap"><table><thead><tr><th>Time</th><th>Actor</th><th>Action</th><th>Method</th><th>Status</th><th>Request</th><th>IP</th></tr></thead><tbody id="audit-body"></tbody></table></div>
     </section>
   </main>
+  </div>
   <div id="toast" class="toast" role="status"></div>
   <dialog id="secret-dialog"><div class="dialog-content"><div class="section-heading"><div><span class="eyebrow">ONE-TIME SECRET</span><h2 id="secret-title">Credential created</h2></div><button class="icon-button" id="close-dialog" aria-label="Close">×</button></div><p>Copy this credential now. It will not be shown again.</p><code id="created-secret"></code><button class="button primary" id="copy-secret">Copy credential</button></div></dialog>
   <script src="./app.js" defer></script>