Add password-protected access flow

This commit is contained in:
zeer
2026-04-25 20:57:24 +08:00
parent 37907dd2f5
commit 7b8f4aae06
7 changed files with 275 additions and 4 deletions

View File

@@ -10,7 +10,29 @@
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<div class="app-container">
<div id="login-screen" class="login-screen hidden">
<div class="login-card">
<div class="login-brand">
<div class="logo">
<svg width="28" height="28" viewBox="0 0 24 24" fill="none">
<rect x="2" y="4" width="20" height="16" rx="2" stroke="currentColor" stroke-width="2"/>
<path d="M2 8L12 14L22 8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
<span>Mail SR</span>
</div>
<p>请输入访问密码后进入系统</p>
</div>
<form id="login-form" class="login-form">
<div class="form-row compact">
<label for="login-password">访问密码</label>
<input id="login-password" name="password" type="password" placeholder="请输入访问密码" required>
</div>
<button type="submit" class="compose-btn" id="login-btn">进入系统</button>
</form>
</div>
</div>
<div id="app-shell" class="app-container hidden">
<!-- 左侧边栏 -->
<aside class="sidebar">
<div class="sidebar-header">
@@ -38,6 +60,13 @@
</div>
<div class="sidebar-footer">
<button id="logout-btn" class="icon-btn" title="退出登录">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
<polyline points="16 17 21 12 16 7"></polyline>
<line x1="21" y1="12" x2="9" y2="12"></line>
</svg>
</button>
<button id="settings-btn" class="icon-btn" title="设置">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="3"></circle>