S-41-A Change Password

學生端登入與設定設計規格

畫面用途

提供已登入用戶安全的密碼更新路徑。

changepassword 🔗 ↗

閱讀完整規格 ↓

內容依原始規格呈現 · 查看 Markdown 來源 ↗需具備倉庫查看權限

修改密碼

🎨 Figma: change_password 🔗

🎯 功能定位

提供已登入用戶安全的密碼更新路徑。

• 安全驗證：強制要求輸入舊密碼以確認本人操作。
• 備援路徑：若忘記舊密碼，引導至郵件重置流程。
• 錯誤防護：即時比對兩次新密碼輸入是否一致。

🧱 畫面結構

• Header: < Back (Profile) Change Password
• Form:
  • Current Password → [ ******** (eye) ]
  • (Forgot Password?) ← 跳轉 S-04
  • New Password → [ ******** (eye) ]
  • Passwords must be 8+ characters.
  • Confirm New Password → [ ******** (eye) ]
• CTA: Update Password

📦 區塊說明

#	區塊	元件	行為/交互	狀態	備註
1	Top Nav	Back Button	返回 S-41	Normal	不保存任何輸入內容
2	Old Pwd	Input Field	輸入當前密碼	Focus / Error	下方提供 Forgot Password 連結
3	New Pwd	Input Field	支援明文/密文切換	Focus / Strong	需符合系統安全強度 (8字以上)
4	Confirm	Input Field	即時比對 New Pwd	Match / Error	若不一致，按鈕保持禁用
5	Link	Forgot Link	點擊跳轉 S-04	Normal	使用郵件發送重設連結
6	Action	Update Btn	成功後跳轉 S-41	Loading / Disabled	提交成功後顯示 Toast 提示

🔁 交互流程圖

流程圖

正在載入流程圖…

⚙️ 狀態管理

狀態	觸發條件	畫面表現
Disabled	欄位未完整填寫或兩次新密碼不一致	Update Password 按鈕灰階不可點擊
Format Error	新密碼長度不足	輸入框下方紅字提示
Mismatch	確認密碼與新密碼不符	邊框變紅
Forgot Redirect	點擊 Forgot Password	跳轉 S-04，Email 自動帶入目前帳號
Success	密碼修改成功	返回 S-41 + 綠色 Snackbar：「Password updated successfully.」

🔎 邏輯自我檢查

1. 安全性：修改完密碼後 Session Token 需在後端完成更新。
2. 流程完整性：處理「舊密碼輸入錯誤」的情況（API 回傳錯誤，畫面上對應提示）。
3. 便利性：密碼眼睛圖示（Toggle Visibility）是必備的。

---