DOL Edu - Login Screen Flow (UX Supporting)

Positioning Note

• File này là bản đồ màn hình login ở mức UX.
• Quy tắc hành vi cốt lõi lấy từ:
  • REG_Login_UX_Blueprint.md.
• Canon của lane auth đọc từ ./REG_00_Overview.md.
• Nếu câu hỏi chạm returnTo, post-auth continuity, hoặc shell routing sau login, đọc thêm ../ENG_Navigation_00_Overview.md.
• File này chỉ là screen-flow support, không phải navigation master.

Purpose

• Giúp Product/Design nắm nhanh các màn auth chính và đường đi giữa chúng.
• Tránh tình trạng thiết kế lệch flow hoặc thiếu fallback.
• Bao phủ lane riêng cho DOL Kid (parent-managed + child code access).

Screen Groups

1) Full-page Auth

• Login
• Signup
• Forgot Password
• Dùng khi user chủ động đi vào auth hoặc đi từ email link.
• Dùng cho CTA auth toàn cục ở nav/header/footer/hero chính.

2) In-context Auth Popup

• Dùng khi user bấm action protected trong lúc đang ở một màn khác.
• Ví dụ: bắt đầu bài, lưu danh sách, bookmark, download.
• Không dùng làm mặc định cho CTA auth độc lập ở trang public.

3) Post-auth Return

• Không tạo màn rẽ nhánh dư thừa.
• Ưu tiên quay thẳng về mục tiêu ban đầu.

Main Flows

Flow A - Login

1. Nhập email.
2. Hệ thống xác định đường đi phù hợp.
3. Nhập mật khẩu hoặc chọn nhận mã.
4. Thành công -> quay về context trước đó.

Flow B - Signup

1. Nhập email mới.
2. Hoàn tất bước đăng ký ngắn.
3. Xác thực email.
4. Thành công -> vào Home hoặc quay về action ban đầu.

Flow C - Forgot Password

1. Vào từ màn Login.
2. Xác thực bằng mã email.
3. Đặt mật khẩu mới.
4. Quay lại Login với email đã điền sẵn.

Flow C1 - Recovery Email Delivery

1. Hệ thống gửi 1 email recovery.
2. Trong email có:
   • OTP để user tiếp tục ngay trên màn recovery hiện tại,
   • link shortcut để đi nhanh tới màn đặt mật khẩu mới.
3. OTP vẫn là đường chính trên UI.
4. Link chỉ là đường tắt; nếu link lỗi thì user vẫn quay về luồng OTP.

Flow D - Protected Action Gate

1. User bấm action cần auth.
2. Popup auth xuất hiện ngay trong context.
3. Auth thành công -> replay action.
4. Nếu user đóng popup -> giữ nguyên màn hiện tại.

Flow E - Parent-managed KID Account

Scope: chỉ áp dụng tại domain KID.

1. Phụ huynh đăng nhập vào KID.
2. Vào khu quản lý tài khoản để tạo hồ sơ học cho con.
3. Hệ thống cấp code học cho con.
4. Con nhập code và vào đúng profile học.

Flow F - KID to Independent Login Upgrade

1. User đã có lịch sử học từ KID.
2. Khi chuyển sang English/Academy, user đi qua full-page thiết lập login độc lập.
3. Kích hoạt email/password trên cùng account.
4. Vào domain mới với continuity lịch sử học.

UX State Rules

• Mỗi màn chỉ có 1 CTA chính.
• Chuyển giữa Login/Signup không làm mất email đã nhập.
• Mọi lỗi phải có bước đi tiếp theo rõ ràng.
• Không đẩy user về Home nếu vẫn còn context hợp lệ.
• CTA auth toàn cục -> full-page; protected action in-context -> popup.

Edge Flows

• Email tồn tại ở Signup -> chuyển sang Login.
• Email mới ở Login -> gợi ý Signup.
• OTP sai/hết hạn -> cho gửi lại mã.
• Reset link lỗi -> fallback về xác thực mã.
• User đang ở màn recovery và cũng có link trong email -> user được chọn một trong hai cách, nhưng kết quả phải đi về cùng một account.
• Context cũ không hợp lệ -> route gần nhất hợp lệ, rồi mới Home.
• Code KID sai/hết hiệu lực -> CTA nhập lại mã hoặc nhờ phụ huynh cấp mã mới.
• Nâng cấp từ KID sang login độc lập -> không tạo account mới.
• Nếu mở flow phụ huynh từ English/Academy -> redirect sang KID domain.

References

• REG_Login_UX_Blueprint.md
• REG_Login_Scenario_Catalog.md
• REG_Login_UX_Review_Checklist.md
• REG_Registration_Trigger_Points.md

Change log

• 2026-03-05: Rút gọn screen flow về mức UX supporting, loại bỏ mô tả kỹ thuật không cần cho quyết định thiết kế.
• 2026-03-05: Bổ sung flow parent-managed KID và flow nâng cấp KID -> login độc lập.
• 2026-03-05: Thêm rule redirect về KID khi flow phụ huynh bị mở từ English/Academy.
• 2026-03-06: Bổ sung flow 1 email recovery chứa OTP + link shortcut và làm rõ rule chọn full-page/popup.