Đặc tả Màn hình: Đặt lại Mật khẩu Mới (New Password Screen)

Mã tài liệu:	EZD-DES-SCR-ADM-008	Phiên bản:	1.0
User Story liên quan:	`us-adm-01` (Fail Path – Quên mật khẩu)	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

Cho phép Tenant (Anh Phong) đặt lại mật khẩu mới sau khi truy cập link khôi phục trong email.
Đây là bước cuối cùng trong flow reset, đảm bảo mật khẩu mới an toàn và xác nhận khớp.

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

Header: Logo EZD hoặc logo tenant.
Content chính (Card form ở giữa):
Input: Mật khẩu mới.
Input: Xác nhận mật khẩu mới.
Button: “Lưu thay đổi”.
Footer nhỏ: Link “← Quay lại đăng nhập”.

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

Thành phần 1: Logo/Header

Logo trung tâm trên cùng.
Tùy chọn hiển thị text: “Đặt lại mật khẩu”.

Thành phần 2: Form Reset Password

Fields:
Mật khẩu mới (type=password, required).
Xác nhận mật khẩu mới (type=password, required).
Button:
“Lưu thay đổi” (primary).
Validation:
Cả hai trường không được để trống.
Mật khẩu phải tuân thủ policy (tối thiểu 8 ký tự, có chữ hoa, số, ký tự đặc biệt).
Hai trường phải khớp nhau.

Thành phần 3: Notifications

Success: Banner xanh “Mật khẩu đã được đặt lại thành công. Vui lòng đăng nhập lại.”
Error: Banner đỏ “Đặt lại mật khẩu thất bại. Vui lòng thử lại.”
Loading: Spinner khi gửi yêu cầu.

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

Người dùng nhập mật khẩu mới + xác nhận → bấm Lưu thay đổi.
Nếu success → hiển thị thông báo + tự động chuyển về Login sau 3s, hoặc link “Quay lại đăng nhập”.
Nếu fail (OTP hết hạn, link invalid) → hiển thị thông báo lỗi + CTA “Gửi lại yêu cầu khôi phục”.

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

Đơn giản: Chỉ tập trung vào một hành động duy nhất – đặt lại mật khẩu.
An toàn: Policy mật khẩu rõ ràng, validation realtime.
Thân thiện: Có link quay lại đăng nhập để không mắc kẹt.
Consistency: Giữ form style theo chuẩn EZD-DSGN-STD.md.
Resilience: Xử lý tốt case link hết hạn hoặc không hợp lệ.