Password Input Component

@libs-ui/components-inputs-password là một component nhập liệu mật khẩu chuyên dụng, cung cấp các tính năng bảo mật như ẩn/hiện mật khẩu, kiểm tra độ mạnh của mật khẩu (validation rules) và tự động tạo mật khẩu ngẫu nhiên.

Tính năng nổi bật

• 👁️ Ẩn/Hiện mật khẩu: Cho phép người dùng chuyển đổi chế độ xem mật khẩu dễ dàng.
• ✅ Validation phức tạp: Kiểm tra các quy tắc như độ dài tối thiểu/tối đa, sự xuất hiện của chữ hoa, chữ thường, số và ký tự đặc biệt.
• 🎲 Tạo mật khẩu ngẫu nhiên: Hỗ trợ generate mật khẩu dựa trên cấu hình bảo mật được thiết lập.
• 🛠️ Tích hợp Validation: Sử dụng LibsUiComponentsInputsValidComponent để hiển thị lỗi và quản lý trạng thái hợp lệ.
• 🎨 Tùy biến cao: Cho phép tùy chỉnh icon, placeholder, label và các thuộc tính CSS.

Cài đặt

Sử dụng npm hoặc yarn để cài đặt:

npm install @libs-ui/components-inputs-password

Cách sử dụng

Import Module

import { LibsUiComponentsInputsPasswordComponent } from '@libs-ui/components-inputs-password';

@Component({
  standalone: true,
  imports: [LibsUiComponentsInputsPasswordComponent],
  // ...
})
export class YourComponent {}

Ví dụ cơ bản (Input mật khẩu thông thường)

<libs_ui-components-inputs-password
  [fieldNameBind]="'password'"
  [(item)]="loginData"
  [isPassword]="true"
  [placeholder]="'Nhập mật khẩu của bạn'"></libs_ui-components-inputs-password>

Ví dụ nâng cao (Kiểm tra độ mạnh mật khẩu)

<libs_ui-components-inputs-password
  [fieldNameBind]="'newPassword'"
  [(item)]="accountData"
  [isPassword]="true"
  [config]="passwordSecurityConfig"
  [placeholder]="'Tạo mật khẩu mạnh'"></libs_ui-components-inputs-password>

passwordSecurityConfig = {
  length_min: 8,
  length_max: 20,
  uppercase: 1, // Ít nhất 1 chữ hoa
  number: 1, // Ít nhất 1 chữ số
  symbol: 1, // Ít nhất 1 ký tự đặc biệt
  key: 'all', // Yêu cầu thỏa mãn tất cả quy tắc
};

API Reference

Inputs

| Thuộc tính | Kiểu dữ liệu | Mặc định | Mô tả | | :--------------- | :-------------------- | :------------------------ | :-------------------------------------------------------- | | fieldNameBind | string | (Required) | Tên trường dữ liệu trong object item để bind giá trị. | | item | Record<string, any> | (Model) {} | Object chứa dữ liệu nhập liệu. | | config | IConfig | defaultConfig() | Cấu hình các quy tắc bảo mật (độ dài, ký tự đặc biệt...). | | isPassword | boolean | false | Nếu true, hiển thị icon ẩn/hiện mật khẩu. | | placeholder | string | undefined | Văn bản gợi ý trong ô input. | | readonly | boolean | false | Chế độ chỉ đọc. | | labelConfig | ILabel | undefined | Cấu hình label cho input. | | maxLength | number | 20 | Giới hạn độ dài tối đa của chuỗi nhập vào. | | validRequired | IValidRequired | defaultValidRequired() | Cấu hình thông báo khi trường bị bỏ trống. | | validMinLength | IValidLength | defaultValidMinLength() | Cấu hình thông báo khi không đủ độ dài tối thiểu. |

Outputs

| Sự kiện | Kiểu dữ liệu | Mô tả | | :-------------------- | :-------------------------------- | :-------------------------------------------------------- | | outValueChange | string \| number | Phát ra khi giá trị mật khẩu thay đổi. | | outGeneratePassword | string | Phát ra khi một mật khẩu ngẫu nhiên được tạo tự động. | | outClickIconRight | void | Phát ra khi click vào icon bên phải (thường là icon mắt). | | outFunctionsControl | IInputValidFunctionControlEvent | Cung cấp phương thức điều khiển (checkIsValid). |

Types & Interfaces

export interface IConfig {
  length_max: number;
  length_min: number;
  uppercase: number;
  lowercase: number;
  symbol: number;
  number: number;
  key: string; // 'all' hoặc các giá trị khác để xác định mức độ ưu tiên
  value: string; // Số lượng quy tắc cần thỏa mãn nếu key không phải 'all'
}

export interface IValidStatus {
  upper?: boolean;
  number?: boolean;
  lower?: boolean;
  symbol?: boolean;
  length_max?: boolean;
  length_min?: boolean;
}

Tech Stack

• Framework: Angular 18+
• I18n: @ngx-translate/core
• Validation: @libs-ui/components-inputs-valid
• Styling: Vanilla SCSS + Tailwind CSS class support

License

MIT