Đặc tả Màn hình: Đăng nhập (Login Screen)

Mã tài liệu:	EZD-DES-SCR-ADM-001	Phiên bản:	1.0
User Story liên quan:	`us-adm-01`	Ngày hiệu lực:	14/09/2025
Người soạn:	Stephen	Người phê duyệt:	Stephen

1. Mục tiêu của Màn hình

Đảm bảo một quy trình đăng nhập an toàn, rõ ràng và nhanh chóng cho Tenant (Anh Phong), đồng thời hỗ trợ các tình huống phổ biến như sai mật khẩu hoặc quên mật khẩu, tuân thủ nguyên tắc Zero Learning Curve.

2. Bố cục Tổng thể (Overall Layout)

Giao diện sử dụng kiến trúc “Form-centered Layout”, tập trung toàn bộ nội dung ở trung tâm màn hình, phù hợp với màn hình desktop 16:9.

Toàn bộ bố cục tuân thủ Hệ thống Lưới 8-Point và Vùng An toàn 48px.
3 vùng chính: Logo (trên), Form login (giữa), Footer hỗ trợ (dưới).

3. Phân rã các Thành phần (Component Breakdown)

Thành phần 1: Nền (Background)

Mô tả: Một nền sáng trung tính để nhấn mạnh form chính.
Tiêu chuẩn áp dụng:
Màu sắc: #F9FAFB (Neutral Light Gray).

Thành phần 2: Logo của Tenant (Branding - Vùng Trên)

Vị trí: Trung tâm phía trên, cách lề trên 64px.
Mục đích: Thể hiện branding TTTM hoặc EZD AI Booth (nếu chưa cá nhân hóa).
Kích thước: Logo cao 48px.

Thành phần 3: Form Đăng nhập (Main Form - Vùng Giữa)

1. Input Fields

Email Input
Label: “Email”
Placeholder: “name@company.com”
Validation: bắt buộc, định dạng email.
Password Input
Label: “Mật khẩu”
Placeholder: “••••••••”
Validation: bắt buộc, tối thiểu 8 ký tự.
Checkbox: “Ghi nhớ đăng nhập” (optional).

2. Buttons

Primary Button: “Đăng nhập”
Style: Filled, width = 100% form.
State: Disabled khi form chưa valid.
Secondary Link: “Quên mật khẩu?” (mở luồng reset).

Thành phần 4: Thông báo Lỗi / Thành công

Sai mật khẩu: Banner đỏ trên form với text: “Sai mật khẩu, vui lòng thử lại”.
Quên mật khẩu (reset success): Banner xanh lá: “Mật khẩu đã được đặt lại. Vui lòng đăng nhập lại.”

Kiểu chữ: Body Small (14px, Regular) màu #6B7280 (Neutral Gray).

4. Hành vi Chuyển tiếp (Transition Behavior)

Khi bấm Đăng nhập → gọi API Auth.
Nếu thành công → chuyển đến Dashboard Screen.
Nếu sai → hiển thị error state, cho retry.
Khi bấm Quên mật khẩu → mở flow reset:
Nhập email → gửi OTP.
Nhập OTP + mật khẩu mới.
Thành công → hiển thị success message + quay về màn login.
Guardrail: toàn bộ reset flow phải hoàn tất < 5 phút (theo us-adm-01).

5. Triết lý Thiết kế (Design Philosophy)

Đơn giản & trực quan: Chỉ giữ các trường cần thiết (email + password).
Khả năng phục hồi (Resilience): Luôn có giải pháp cho tình huống sai mật khẩu / quên mật khẩu.
An toàn: Input password masked, hỗ trợ session timeout.
Nhất quán: Màu, font, spacing tuân thủ EZD-DSGN-STD (Phần B – Admin Webapp).