S-04 Forgot Password
內容依原始規格呈現 · 查看 Markdown 來源 ↗需具備倉庫查看權限
重設密碼
🎨 Figma: forgot_password 🔗 · overlay 🔗
⚠️ Figma 缺失: S-04-B Reset Password（郵件重設密碼）、S-04-C Reset Success（重設成功）在 Figma 中無獨立 Frame。
🎯 功能定位
當用戶無法登入時，提供一個安全的路徑來驗證身份並發送重設郵件。此畫面必須簡潔，避免干擾，並引導用戶離開 App 去檢查郵箱。
🧱 畫面結構
S-04 主畫面：
- Header:
< Back to Login - Body:
[ Key Icon / Image ]← 視覺暗示Forgot Password?← 標題Enter your email to reset password.← 輔助文字Email Address→[ example@nihao.com ]
- CTA:
[ Send Reset Link ]
S-04-A 成功發送狀態：
- Body:
[ Check Mail Icon ]Email Sent!We've sent a link to your email.
- CTA:
[ Open Email App ]← 深層連結跳轉 - Footer:
Resend in (59s)← 防騷擾冷卻
S-04-B Reset Password（修改新密碼）：
- Header:
< Back - Body:
Reset Password← 標題Create a new, strong password.New Password→[ ******** (eye) ]Confirm New Password→[ ******** (eye) ]
- CTA:
[ Reset Password ]
S-04-C Reset Success（重設成功）：
- Body:
[ Success Icon ]← 綠色打勾或吉祥物慶祝Password Changed!Your password has been reset successfully.
- CTA:
[ Back to Login ]← 引導回到 S-02
📦 區塊說明
| # | 區塊 | 元件 | 行為/交互 | 狀態 | 備註 |
|---|---|---|---|---|---|
| 1 | Top Nav | Back Button | 放棄重設，返回登入 | Default | 避免用戶被困在重設流程 |
| 2 | Form | Email Input | 收集重設目標帳號 | Focus / Error | 需檢查格式是否含 @ |
| 3 | Action | Send Button | 觸發後端發送邏輯 | Loading / Disabled | 點擊後進入 60s 冷卻 |
| 4 | Feedback | Success View | 提示用戶去收信 | Success | 建議加入「開啟郵件 App」按鈕 |
| 5 | Security | Resend Timer | 防止 API 被惡意刷動 | Cooldown | 預設 60 秒 |
| 6 | Form (B) | New Password | 設定新密碼 | Focus / Error | 需包含長度或強度檢查 |
| 7 | Form (B) | Confirm Pwd | 防止輸入錯誤 | Match / Mismatch | 若不一致則禁用 Reset 按鈕 |
| 8 | Action (B) | Reset Button | 提交新密碼至伺服器 | Loading / Disabled | 提交時需帶入郵件中的 Token |
| 9 | Feedback (C) | Success Msg | 告知最終結果 | Static | 視覺上應呈現正向、輕鬆感 |
| 10 | Action (C) | Login Button | 導回登入起點 | Default | 完成整個閉環 |
🔁 交互流程圖
正在載入流程圖…
⚙️ 狀態管理
| 狀態 | 觸發條件 | 畫面表現 |
|---|---|---|
| Loading | 點擊發送/重設按鈕 | 按鈕顯示旋轉圖示，防止二次點擊 |
| Format Error | 郵箱格式錯誤 | 輸入框變紅，提示「Please enter a valid email」 |
| Not Found | 無效用戶 | 後端統一返回「If this email exists, a link will be sent」 |
| Success | 發送成功 | 隱藏輸入表單，顯示成功圖標+Open Email App 按鈕 |
| Cooldown | 發送成功後 | 按鈕變為「Resend (60s)」，進入禁用狀態 |
| Validation | 密碼不一致或強度不足 | Confirm Password 下方顯示紅字，Reset 按鈕 Disabled |
| Token Expiry | 連結過期 | 彈出 Error：「This link has expired.」引導回 S-04 |
🧭 畫面導航
| 當前畫面 | 操作 | 目標畫面 | 條件 |
|---|---|---|---|
| S-04 | 點擊 Back | S-02 Login | 直接返回 |
| S-04 | 點擊 Send Reset Link（成功） | S-04-A Success View | API 回傳成功 |
| S-04 | 點擊 Send Reset Link（失敗） | S-04（停留，顯示錯誤） | API 回傳錯誤或格式驗證失敗 |
| S-04-A | 自動倒數 | S-04-A（停留，60s 倒數） | 防止重複發送 |
| S-04-A | 點擊 Open Email App | 系統郵件 App（外部跳轉） | deep link |
| S-04-A | 點擊 Resend | S-04（返回重新發送） | 冷卻完畢後可操作 |
| S-04-B | 點擊 Back | S-04 | 返回重設請求頁 |
| S-04-B | 點擊 Reset Password（成功） | S-04-C Success | Token 有效 + 校驗通過 |
| S-04-B | 點擊 Reset Password（失敗） | S-04-B（停留，顯示錯誤） | Token 過期或密碼格式不符 |
| S-04-C | 點擊 Back to Login | S-02 Login | 完成重設流程 |
🔎 邏輯自我檢查
- 安全性： 郵件連結是否具備單次有效性（One-time link）？（確認：後端邏輯）。
- 便利性： 修改完後是否必須手動登入？（確認：為了安全感，引導回 S-02 手動登入是 EdTech 常見做法）。
- 視覺回饋： 密碼強度是否有簡單的色條提示？（建議：增加紅/黃/綠條，提升用戶體驗）。