Màn hình Đăng nhập & Đăng ký

Đường dẫn: http://localhost/lean.vn/app6suser/ (local) hoặc https://lean.vn/app6suser/ (production)
File: index.html lines 36-105, app.js lines 34-216

1. Màn hình Đăng nhập

Khi mới truy cập, đây là màn hình đầu tiên xuất hiện.

Trường nhập liệu

Nút bấm

Xử lý khi nhấn Enter

• Cả 2 ô input đều có onkeyup="if(event.key==='Enter') doLogin()" — nhấn Enter = bấm Đăng nhập.

Luồng xử lý (doLogin)

Nhập login + password
    → fetch POST /auth/login
    → success? Lưu vào localStorage('6s_user') → checkAuth()
    → fail? Hiển thị thông báo lỗi

Dữ liệu lưu trong localStorage:

{
  "user_6s_id": 1,
  "wp_user_id": 2,
  "username": "danhgia",
  "display_name": "Nguyễn Văn A",
  "phone": "090xxx",
  "role_code": "R07",
  "location_id": [22, 8, 12, 18],
  "tenant_id": 1,
  "login_identifier": "danhgia"
}

Lưu ý

• Tài khoản phải được Admin kích hoạt (status = 'active') mới đăng nhập được.
• wp_user_id (WordPress) ≠ user_6s_id (bảng 6S) — dùng user_6s_id cho API locations.

2. Màn hình Đăng ký

Click "Chưa có tài khoản? Đăng ký ngay" để mở form.

Trường nhập liệu

Chọn vị trí (Tree Picker)

1. Bấm vào ô 📍 Vị trí phụ trách
2. Chọn Khách hàng trước (nếu chưa)
3. Cây phả hệ hiện ra dạng:

   🏢 TCTY ĐỆT MAY HÒA THỌ
     └─ 🏭 Khối Nhà máy May
          └─ 🏘️ NM Hòa Thọ 1
               └─ 🏘️ Xưởng May 2
                    ├─ 🔧 C1 - Chuyền 1 ☐
                    ├─ 🔧 C2 - Chuyền 2 ☐
                    └─ 🔧 C3 - Chuyền 3 ☐
   

1. Tích chọn checkbox — tự động chọn cả cây con
2. Bấm XÁC NHẬN CHỌN
3. Các chip location hiện ra phía dưới

Nút bấm

Luồng xử lý (doRegister)

Validate các trường
    → Kiểm tra trùng (API)
    → Hash password (bcrypt/wp_hash_password)
    → INSERT vào wp_6s_users với status='inactive'
    → Trả về "Đăng ký thành công! Tài khoản đang chờ kích hoạt."

3. Sau đăng nhập (checkAuth)

Đọc localStorage('6s_user')
    → Ẩn auth-container, hiện .app
    → Hiển thị tên + avatar (2 ký tự đầu của tên) + vai trò
    → Gọi loadUserLocations(userId) — tải danh sách vị trí được phân quyền
    → switchTab('treo') — vào tab Treo thẻ

Header sau login

[🏷️ 6S CiCC Tagging]         [NV] [ON] [🔄] [🚪]
                              Nguyễn Văn A ▾

• Avatar: 2 ký tự đầu của tên, hiển thị trong vòng tròn gradient
• Status indicator: ON (online) / Off (offline)
• Nút Sync: đồng bộ dữ liệu
• Nút Logout: xóa localStorage → quay về màn hình login

Audio thuyết minh

Click play để nghe hướng dẫn bằng giọng đọc.

Screenshots

Chú thích: Giao diện màn hình Đăng nhập với trường Tài khoản và Mật khẩu

Chú thích: Form đăng nhập đã điền tài khoản "danhgia" và mật khẩu "123456"

Chú thích: Header sau đăng nhập hiển thị tên user + avatar + nút Logout

Chú thích: Form Đăng ký mới với đầy đủ trường nhập liệu (Họ tên, Email, SĐT, Username, Mật khẩu, Khách hàng, Vai trò, Vị trí)

Chú thích: Các chip hiển thị vị trí đã chọn sau khi xác nhận Tree Picker

Chú thích: Toast thông báo khi đăng nhập sai tài khoản hoặc mật khẩu