T-00 / A-00 Unified Login Portal

教師端登入與設定設計規格

文字規格原型待補，先閱讀畫面說明

畫面用途

- 身份識別： 統一入口，系統根據 Email/ID 自動判斷是 Teacher、Admin 還是 Super Admin。

此畫面尚未提供原型配圖，完整規格見下方正文。

閱讀完整規格 ↓

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

通用登入入口

⚠️ Figma 狀態：未設計。 此登入頁為教師/管理員共用入口，當前 Figma 教師端 prototype（page-id=58:2）從 T-01 Dashboard 開始，未包含此畫面。設計規範以本文 Markdown 為準。

🎯 功能定位

• 身份識別： 統一入口，系統根據 Email/ID 自動判斷是 Teacher、Admin 還是 Super Admin。
• 安全攔截： 實時檢查所屬 Zone 是否為 Active。若 Zone 被禁用，在此處直接阻斷。
• 自動分流： 登入成功後，老師導向 T-01，區域管理員導向 A-01，超級管理員導向 A-01。

🧱 畫面結構

Web 佈局：窄版容器 (container--narrow)，max-width 640px，水平置中

• 頂部品牌區:
  • Nihao Academy Logo + Learning Management System 2026 副標
• 標題區:
  • Welcome Back
  • Please sign in to your account
• 表單區:
  • Email / Username 輸入框
  • Password 輸入框（含 👁️ 切換可視性）
  • [ ] Remember Me 勾選框
  • Forgot Password? 連結
  • [Sign In] 按鈕（藍色主色調）
• 錯誤訊息區:
  • 紅色警告框（預設隱藏），顯示 Zone Disabled 訊息（紅色系）

📦 區塊說明

#	區塊	元件	行為/交互	備註
1	身份輸入	Input (Email/ID)	用戶輸入 Email 或帳號	—
2	密碼輸入	Input (Password) + 👁️ Toggle	點擊 👁️ 切換密碼可視狀態	減少輸入錯誤
3	記住我	Checkbox	勾選後保留登入狀態	—
4	密碼重置	Link	跳轉至密碼重置流程	—
5	登入按鈕	Button (Primary)	觸發身份驗證 API	—
6	錯誤訊息	Alert (Error)	Zone Disabled 時顯示紅色警告	—

🔁 交互流程圖

流程圖

正在載入流程圖…

⚙️ 狀態管理

狀態	觸發條件	畫面表現
正常	頁面初始加載	顯示空表單，焦點在 Email 欄位
加載中	點擊 Sign In 後	按鈕顯示 loading spinner，禁用輸入
錯誤 - 憑證錯誤	帳號或密碼不匹配	表單上方顯示通用錯誤提示
錯誤 - Zone Disabled	後端回傳 ZONE_DISABLED	紅色警告框："Your Zone (North Zone) has been disabled. Access revoked."
密碼可見	點擊 👁️	密碼欄位切換為明文顯示

🔎 邏輯自我檢查

• Q: Zone Disabled 時，帳號密碼正確能否登入？
  • A: 不能。即使帳密正確，所屬區域被關閉即絕對無法進入系統。
• Q: 如何區分 Teacher 和 Admin？
  • A: 系統根據資料庫 Role 欄位自動判斷分流。

---