Bỏ qua

Đặc tả Màn hình: Yêu cầu Khôi phục Mật khẩu (Request Password Reset Screen)

Mã tài liệu: EZD-DES-SCR-ADM-007 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) yêu cầu khôi phục mật khẩu khi quên.
Màn hình này là bước đầu tiên trong flow reset: nhập email và gửi hướng dẫn qua email/OTP.

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

  • Header: Logo EZD (hoặc logo tenant nếu có).
  • Content chính (Card form ở giữa):
  • Input: Email.
  • Button: “Gửi hướng dẫn”.
  • Footer nhỏ: Link “Quay lại màn hình đă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.
  • Có thể hiển thị tên sản phẩm: EZD Admin Webapp.

Thành phần 2: Form Reset

  • Field:
  • Email (type=email, required).
  • Button:
  • “Gửi hướng dẫn” (primary).
  • Validation:
  • Email hợp lệ (định dạng).
  • Không để trống.
  • Text nhỏ bên dưới form:
  • “← Quay lại đăng nhập”.
  • Khi bấm → quay về màn hình Login.

Thành phần 4: Thông báo (Notifications)

  • Success/Fail (chung): Banner xanh “Nếu email tồn tại trong hệ thống, hướng dẫn khôi phục mật khẩu đã được gửi.”
  • Loading: Spinner khi gửi yêu cầu.
  • Không hiển thị thông báo lỗi chi tiết về sự tồn tại của email.

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

  • Nhập email hợp lệ + bấm Gửi hướng dẫn → call API gửi OTP/link reset.
  • Nếu success → hiển thị thông báo + hướng dẫn check email.
  • Nếu fail → thông báo lỗi và cho retry.
  • Bấm Quay lại đăng nhập → điều hướng về màn Login.

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

  • Đơn giản – Tập trung: Chỉ có 1 trường email để tránh phân tâm.
  • Nhanh gọn: Toàn bộ flow reset khởi động chỉ trong 1 thao tác.
  • An toàn: Không tiết lộ thông tin (ví dụ email có tồn tại hay không), chỉ dùng thông điệp chung: “Nếu email tồn tại trong hệ thống, hướng dẫn đã được gửi”.
  • Consistency: Giữ style form theo chuẩn EZD-DSGN-STD (Phần B – Admin Webapp).
  • Resilience: Luôn có link quay lại để không làm người dùng “mắc kẹt” ở bước này.