UI_Quản lý Người dùng & Xác thực
Giới thiệu & tài liệu liên quan
Đặc tả giao diện cho module Quản lý Người dùng & Xác thực. Xem thêm Tổng quan module · UC · SRS.
Quy tắc xác minh dùng chung
Màn Xác minh mã (MH4) được dùng chung cho cả ba luồng: đăng ký onboarding, đăng nhập 2 lớp và quên mật khẩu — người dùng không gặp nhiều màn xác minh khác nhau.
Trạng thái ảnh chụp
Pickleball hiện chưa có ứng dụng/màn hình thật trong workspace nên các ảnh chụp dưới đây ⏳ chờ chụp thực tế. Các bảng hạng mục được mô tả từ năng lực đã chốt ở Tổng quan module; cần cập nhật ảnh khi có môi trường dev.
1/ Danh sách màn hình
| Mã | Màn hình | Mô tả |
|---|---|---|
| MH1 | Landing page | Giới thiệu sản phẩm; CTA "Dùng thử miễn phí 14 ngày" và lối vào đăng nhập |
| MH2 | Đăng nhập Admin Portal | Email/SĐT + mật khẩu, "Ghi nhớ đăng nhập", đăng nhập nhanh Google/Zalo |
| MH3 | Đăng ký chủ sân | Email/SĐT + mật khẩu + đồng ý điều khoản |
| MH4 | Xác minh mã | Nhập mã xác minh, gửi lại mã; dùng chung 3 luồng |
| MH5 | Thiết lập sân đầu tiên | Tên sân, số lượng sân, mã QR thanh toán |
| MH6 | Danh sách nhân viên | Bảng nhân viên: tên · vai trò · chi nhánh · trạng thái |
| MH7 | Form tài khoản nhân viên | Tạo/sửa nhân viên, gán chi nhánh, khoá tài khoản |
2/ Luồng di chuyển màn hình
3/ Mô tả màn hình
MH1 — Landing page ⏳ chờ chụp thực tế
Trang giới thiệu giá trị sản phẩm, tính năng và số liệu; thanh điều hướng có nút đăng nhập, khối hero có nút kêu gọi dùng thử.
| STT | Hạng mục | Kiểu hiển thị | Kiểu thao tác | Bắt buộc | Độ dài | Mô tả |
|---|---|---|---|---|---|---|
| 1 | Nút Dùng thử miễn phí | Button | Click | - | - | Hành vi: sang màn đăng ký chủ sân (MH3) |
| 2 | Nút Đăng nhập | Button | Click | - | - | Hành vi: sang màn đăng nhập (MH2) |
| 3 | Khối nội dung giới thiệu | Label | ReadOnly | - | - | Mục đích: trình bày tính năng, giá trị, số liệu sản phẩm |
MH2 — Đăng nhập Admin Portal ⏳ chờ chụp thực tế
Form đăng nhập với ô email/SĐT, ô mật khẩu ẩn/hiện, tuỳ chọn ghi nhớ, nút đăng nhập nhanh và liên kết quên mật khẩu.
| STT | Hạng mục | Kiểu hiển thị | Kiểu thao tác | Bắt buộc | Độ dài | Mô tả |
|---|---|---|---|---|---|---|
| 1 | Email / SĐT | Textbox | Text | Có | ≤ 255 | Ràng buộc: không để trống |
| 2 | Mật khẩu | Textbox (ẩn/hiện) | Password | Có | ≤ 64 | Hành vi: nút toggle ẩn/hiện mật khẩu |
| 3 | Ghi nhớ đăng nhập | Checkbox | Check | Không | - | Hành vi: đánh dấu thiết bị tin cậy cho lần sau |
| 4 | Nút Đăng nhập | Button | Click | - | - | Hành vi: xác thực; nếu cần thì sang xác minh (MH4) |
| 5 | Đăng nhập Google/Zalo | Button | Click | - | - | Hành vi: đăng nhập nhanh, đối chiếu tài khoản đã đăng ký |
| 6 | Quên mật khẩu | Hyperlink | Click | - | - | Hành vi: mở luồng đặt lại mật khẩu qua xác minh mã |
MH3 — Đăng ký chủ sân ⏳ chờ chụp thực tế
Form đăng ký với email/SĐT, mật khẩu, ô đồng ý điều khoản và lựa chọn đăng ký nhanh.
| STT | Hạng mục | Kiểu hiển thị | Kiểu thao tác | Bắt buộc | Độ dài | Mô tả |
|---|---|---|---|---|---|---|
| 1 | Email / SĐT | Textbox | Text | Có | ≤ 255 | Ràng buộc: duy nhất, chưa gắn tài khoản nào |
| 2 | Mật khẩu | Textbox (ẩn/hiện) | Password | Có | ≤ 64 | Ràng buộc: đáp ứng độ mạnh tối thiểu |
| 3 | Đồng ý điều khoản | Checkbox | Check | Có | - | Ràng buộc: phải tick mới được đăng ký |
| 4 | Nút Đăng ký | Button | Click | - | - | Hành vi: gửi mã xác minh, sang MH4 |
| 5 | Đăng ký Google/Zalo | Button | Click | - | - | Hành vi: đăng ký nhanh, bỏ qua nhập mật khẩu |
MH4 — Xác minh mã ⏳ chờ chụp thực tế
Màn nhập mã xác minh với ô nhập mã, bộ đếm hiệu lực và nút gửi lại; dùng chung cho onboarding, đăng nhập 2 lớp và quên mật khẩu.
| STT | Hạng mục | Kiểu hiển thị | Kiểu thao tác | Bắt buộc | Độ dài | Mô tả |
|---|---|---|---|---|---|---|
| 1 | Ô nhập mã xác minh | Textbox | Text | Có | - | Ràng buộc: đúng mã đã gửi và còn hiệu lực |
| 2 | Bộ đếm hiệu lực | Label | ReadOnly | - | - | Mục đích: hiển thị thời gian còn lại của mã |
| 3 | Nút Gửi lại mã | Button | Click | - | - | Hành vi: gửi mã mới khi mã cũ hết hạn / chưa nhận |
| 4 | Nút Xác nhận | Button | Click | - | - | Hành vi: xác minh và tiếp tục luồng tương ứng |
MH5 — Thiết lập sân đầu tiên ⏳ chờ chụp thực tế
Bước cuối onboarding: nhập tên sân, số lượng sân và tải mã QR thanh toán trước khi vào Welcome Dashboard.
| STT | Hạng mục | Kiểu hiển thị | Kiểu thao tác | Bắt buộc | Độ dài | Mô tả |
|---|---|---|---|---|---|---|
| 1 | Tên sân | Textbox | Text | Có | ≤ 120 | Ràng buộc: không để trống |
| 2 | Số lượng sân | Textbox (số) | Text | Có | - | Ràng buộc: số lớn hơn 0 |
| 3 | Mã QR thanh toán | Button (upload) | Click | Không | - | Hành vi: tải ảnh QR; có thể bỏ qua, bổ sung sau |
| 4 | Nút Hoàn tất | Button | Click | - | - | Hành vi: tạo sân đầu tiên, vào Welcome Dashboard |
MH6 — Danh sách nhân viên ⏳ chờ chụp thực tế
Bảng nhân viên với cột tên, vai trò, chi nhánh, trạng thái; thanh công cụ có nút thêm nhân viên và nút thao tác trên từng dòng.
| STT | Hạng mục | Kiểu hiển thị | Kiểu thao tác | Bắt buộc | Độ dài | Mô tả |
|---|---|---|---|---|---|---|
| 1 | Nút Thêm nhân viên | Button | Click | - | - | Hành vi: mở form tạo nhân viên (MH7) |
| 2 | Bảng nhân viên | List | Click | - | - | Mục đích: xem & chọn nhân viên để sửa |
| 3 | Cột vai trò | Label | ReadOnly | - | - | Mục đích: hiển thị vai trò được gán |
| 4 | Cột chi nhánh | Label | ReadOnly | - | - | Mục đích: hiển thị chi nhánh nhân viên được gán |
| 5 | Cột trạng thái | Label | ReadOnly | - | - | Mục đích: hiển thị Hoạt động / Đã khoá |
| 6 | Nút Sửa | Button | Click | - | - | Hành vi: mở form chỉnh nhân viên (MH7) |
MH7 — Form tài khoản nhân viên ⏳ chờ chụp thực tế
Form tạo/sửa nhân viên: tên, vai trò, chi nhánh được gán, công tắc khoá tài khoản và vùng cảnh báo khi khoá.
| STT | Hạng mục | Kiểu hiển thị | Kiểu thao tác | Bắt buộc | Độ dài | Mô tả |
|---|---|---|---|---|---|---|
| 1 | Tên nhân viên | Textbox | Text | Có | ≤ 120 | Ràng buộc: không để trống |
| 2 | Email / SĐT | Textbox | Text | Có | ≤ 255 | Ràng buộc: duy nhất, dùng để gửi email kích hoạt |
| 3 | Vai trò | List | Select | Có | - | Ràng buộc: không gán ngang/cao hơn vai trò người tạo |
| 4 | Chi nhánh được gán | List (đa chọn) | Select | Có | - | Ràng buộc: chỉ chi nhánh thuộc tổ chức; gán mới thay toàn bộ gán cũ |
| 5 | Khoá tài khoản | Checkbox | Check | - | - | Hành vi: khoá khiến nhân viên bị đăng xuất, không đăng nhập được |
| 6 | Cảnh báo khi khoá | Alert | ReadOnly | - | - | Hành vi: nhắc hệ quả khoá trước khi xác nhận |
| 7 | Nút Lưu | Button | Click | - | - | Hành vi: tạo + gửi email kích hoạt, hoặc cập nhật/khoá |