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*

CICC DIGITAL ECOSYSTEM

Tiếp tục hành trình cùng hệ sinh thái CiCC

Từ tư vấn và đào tạo đến LeanERP và AI ứng dụng, chọn đúng nền tảng cho bước tiếp theo của doanh nghiệp.

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

Tiếp tục hành trình cùng hệ sinh thái CiCC

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