Hướng Dẫn Sử Dụng LeanERP & Apps

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

| Trường | Loại | Bắt buộc | Mô tả |
|--------|------|----------|-------|
| Tài khoản / Email / Số điện thoại | Text input | ✅ | Nhập username, email hoặc SĐT đã đăng ký |
| Mật khẩu | Password | ✅ | Nhập mật khẩu (hiện dấu ●) |

Nút bấm

| Nút | Hành động |
|-----|-----------|
| ĐĂNG NHẬP | Gọi API POST /cicc-6s/v1/auth/login. Nếu thành công → lưu 6s_user vào localStorage → vào màn hình chính |
| Chưa có tài khoản? Đăng ký ngay | Chuyển sang form Đăng ký |

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:

json

{

  "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






| Trường | Loại | Bắt buộc | Ghi chú |

|--------|------|----------|---------|

| Họ và tên \* | Text | ✅ |

id="reg-fullname"

 |

| Email \* | Email | ✅ |

id="reg-email"

 |

| Số điện thoại \* | Text | ✅ |

id="reg-phone"

 |

| Tên đăng nhập \* | Text | ✅ |

id="reg-username"

 |

| Mật khẩu \* | Password | ✅ | Tối thiểu 6 ký tự |

| Khách hàng (Tủ) | Select | ✅ | Load từ

GET /tenants. Gọi onTenantChange()

 |

| Vai trò 6S | Select | ✅ | Load từ file

get_6s_roles.php

 |

| 📍 Vị trí phụ trách \* | Click area | ✅ | Mở cây phả hệ chọn location |



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 ☐



4. Tích chọn checkbox — tự động chọn cả cây con

5. Bấm XÁC NHẬN CHỌN

6. Các chip location hiện ra phía dưới



Nút bấm






| Nút | Hành động |

|-----|-----------|

| TẠO TÀI KHOẢN | Gọi

POST /auth/register

. Gửi dữ liệu → thành công: alert + chuyển về form login |

| Đã có tài khoản? Đăng nhập | Quay lại form Login |

`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

📸 Nghe hướng dẫn
audio/02-dang-nhap.mp3

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

---

Screenshots

📸 Màn hình Đăng nhập
images/login/login-screen.png

*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*

📸 Form Đăng nhập điền sẵn
images/login/login-filled.png

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

📸 Đăng nhập thành công - Header
images/login/login-success-header.png

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

📸 Form Đăng ký tài khoản
images/login/register-form.png

*Chú thích: Form Đăng ký mới với đầy đủ trường nhập liệu*

📸 Tree Picker chọn vị trí
images/login/register-tree-picker.png

*Chú thích: Cây phả hệ Location khi đăng ký, chọn vị trí phụ trách*

📸 Chips vị trí sau khi chọn
images/login/register-location-chips.png

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

📸 Thông báo lỗi đăng nhập
images/login/login-error.png

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

6S Tagging — Từng Màn Hình, Từng Nút Bấm

Anh/Chị cần tư vấn Lean - Six Sigma - TPM - Kaizen?