Mode switching (#10) (#26)

This commit is contained in:
2026-02-16 11:30:46 +00:00
parent 4e5b873087
commit b7731bd83f
8 changed files with 771 additions and 83 deletions

View File

@@ -10,6 +10,9 @@
<header class="header">
<h1>🔀 Chat Switchboard</h1>
<div class="header-actions">
<div class="connection-status offline" id="connectionStatus" title="Unmanaged mode">
<span class="status-dot"></span> Offline
</div>
<button class="btn btn-secondary" id="toggleSidebarBtn" title="Toggle Sidebar (Ctrl+B)">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
@@ -195,9 +198,56 @@
</div>
</div>
<!-- Auth Modal -->
<div class="modal-overlay" id="authModal">
<div class="modal auth-modal">
<div class="modal-header">
<h2>🔀 Chat Switchboard</h2>
<button class="modal-close" id="authCloseBtn"></button>
</div>
<div class="modal-body">
<div class="auth-tabs">
<button class="auth-tab active" id="authTabLogin">Sign In</button>
<button class="auth-tab" id="authTabRegister">Register</button>
</div>
<div id="authLoginForm">
<div class="form-group">
<label for="authLogin">Username or Email</label>
<input type="text" id="authLogin" placeholder="jeff or jeff@example.com" autocomplete="username">
</div>
<div class="form-group">
<label for="authPassword">Password</label>
<input type="password" id="authPassword" placeholder="••••••••" autocomplete="current-password">
</div>
</div>
<div id="authRegisterForm" style="display:none;">
<div class="form-group">
<label for="authUsername">Username</label>
<input type="text" id="authUsername" placeholder="Choose a username" autocomplete="username">
</div>
<div class="form-group">
<label for="authEmail">Email</label>
<input type="email" id="authEmail" placeholder="you@example.com" autocomplete="email">
</div>
<div class="form-group">
<label for="authRegPassword">Password</label>
<input type="password" id="authRegPassword" placeholder="At least 8 characters" autocomplete="new-password">
</div>
</div>
<div class="auth-error" id="authError"></div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" id="authSkipBtn">Use Offline</button>
<button class="btn btn-primary" id="authLoginBtn">Sign In</button>
<button class="btn btn-primary" id="authRegisterBtn" style="display:none;">Create Account</button>
</div>
</div>
</div>
<div class="toast-container" id="toastContainer"></div>
<script src="js/storage.js"></script>
<script src="js/backend.js"></script>
<script src="js/state.js"></script>
<script src="js/api.js"></script>
<script src="js/ui.js"></script>