S-02 Login Page
內容依原始規格呈現 · 查看 Markdown 來源 ↗需具備倉庫查看權限
帳號登入
🎨 Figma: login 🔗
⚠️ Figma 缺失: S-02-A Update Password（首次強制改密）、S-02-B Email Verification（6 位驗證碼）在 Figma 中無獨立 Frame。
🎯 功能定位
為現有學生提供進入系統的唯一入口。初次登入後須強制修改密碼並驗證郵箱。設計重點在於快速輸入與異常處理（如密碼錯誤或忘記密碼）。
🧱 畫面結構
S-02 主畫面：
- Header:
< BackLogin - Body:
Welcome Back!Please enter your details.Email→[ student@nihao.com ]Password→[ ******** (eye) ]← 密碼遮罩切換
- Links:
Forgot Password?← 跳轉 S-04
- CTA:
- Log In ← Primary CTA
S-02-A Update Password（修改密碼）：
- Title:
Secure Your Account - Body:
To keep your account safe, please set a new password.[ New Password ] [👁️][ Confirm New Password ] [👁️]* Must be at least 8 characters* Include a symbol (@, #, !, etc.)
- CTA:
[ Update & Continue > ]
S-02-B Email Verification（身分驗證）：
- Title:
Verify Your Email - Body:
We've sent a 6-digit code to:emma****@gmail.com[ _ ] [ _ ] [ _ ] [ _ ] [ _ ] [ _ ]← 6-digit code inputDidn't receive it? [ Resend in 54s ]
- CTA:
[ Verify & Finish ]
📦 區塊說明
| # | 區塊 | 元件 | 行為/交互 | 狀態 | 備註 |
|---|---|---|---|---|---|
| 1 | Header | Back Button | 點擊返回 S-01 | Normal | 導航引導 |
| 2 | Input | Email Field | 輸入文本 | Focus / Error | 需進行 @ 格式檢查 |
| 3 | Input | Password | 隱藏輸入內容 | Masked / Plain | 點擊眼睛圖標切換明文 |
| 4 | Assist | Forgot Password Link | 點擊跳轉 S-04 | Normal | 降低登入焦慮 |
| 5 | Action | Login Button | 驗證成功跳轉 S-10 | Loading / Error | 登入失敗需在輸入框下方紅字提示 |
| 6 | Input | New Password (S-02-A) | 輸入新密碼 | Focus / Error | 需包含長度與字符檢查 |
| 7 | Input | Confirm Password (S-02-A) | 比對兩次輸入 | Match / Mismatch | 若不一致禁用按鈕 |
| 8 | Action | Update Button (S-02-A) | 提交新密碼至伺服器 | Loading / Disabled | 成功後跳轉 S-02-B |
| 9 | Input | Code Input (S-02-B) | 輸入6位驗證碼 | Focus / Error | 自動前進到下一格 |
| 10 | Action | Resend Link (S-02-B) | 重新發送驗證碼 | Cooldown | 54s 冷卻 |
| 11 | Action | Verify Button (S-02-B) | 驗證碼校驗 | Loading / Error | 成功後跳轉 S-05 進行條款同意 |
🔁 交互流程圖
正在載入流程圖…
⚙️ 狀態管理
| 狀態 | 觸發條件 | 畫面表現 |
|---|---|---|
| Normal | 正常顯示 | 按鈕可用，輸入框正常 |
| Loading | 點擊登入/驗證按鈕 | 按鈕顯示旋轉圖示，禁止重複點擊 |
| Error | 格式錯誤或驗證失敗 | 輸入框變紅，紅字提示錯誤訊息 |
| Success | 驗證通過 | 跳轉至下一頁面 |
| Cooldown | 重新發送驗證碼 | 按鈕顯示倒數秒數，禁用 |
🔎 邏輯自我檢查
- 初次登入必須強制修改密碼與驗證郵箱，隨後進入 S-05 條款同意 ✔
- Email 格式需檢查 @ 符號 ✔
- 密碼長度至少 8 字符，需包含特殊符號 ✔