@libs-ui/components-inputs-password

Component nhập liệu mật khẩu với tính năng ẩn/hiện, kiểm tra quy tắc bảo mật và tự động tạo mật khẩu ngẫu nhiên.

Giới thiệu

@libs-ui/components-inputs-password là component chuyên dụng để nhận input mật khẩu trong Angular. Component cung cấp tính năng chuyển đổi ẩn/hiện mật khẩu, hiển thị trực quan trạng thái đáp ứng từng quy tắc bảo mật (độ dài, ký tự hoa, thường, số, ký tự đặc biệt), và hỗ trợ tự động sinh mật khẩu ngẫu nhiên thỏa mãn cấu hình đã định.

Tính năng

• ✅ Ẩn/hiện mật khẩu với icon mắt chuyển đổi động
• ✅ Kiểm tra quy tắc bảo mật: độ dài tối thiểu/tối đa, chữ hoa, chữ thường, chữ số, ký tự đặc biệt
• ✅ Hiển thị trực quan từng quy tắc đã thỏa mãn hay chưa (màu xanh/xám)
• ✅ Hỗ trợ 2 chế độ kiểm tra: key: 'all' (phải đáp ứng toàn bộ) hoặc theo số lượng quy tắc tối thiểu
• ✅ Tự động sinh mật khẩu ngẫu nhiên theo cấu hình bảo mật
• ✅ Tích hợp với LibsUiComponentsInputsValidComponent — hỗ trợ required, minLength, pattern validation
• ✅ Hỗ trợ chế độ readonly, label, placeholder, icon tùy chỉnh
• ✅ Ngăn tự động điền mật khẩu của trình duyệt (autocomplete)
• ✅ Cung cấp FunctionsControl getter để parent gọi checkIsValid() qua ViewChild

Khi nào sử dụng

• Form đăng nhập, đăng ký tài khoản cần trường nhập mật khẩu tiêu chuẩn
• Trang đổi mật khẩu cần hiển thị checklist quy tắc bảo mật trực quan
• Form tạo tài khoản có nút sinh mật khẩu ngẫu nhiên cho admin
• Bất kỳ trường nhập liệu nào cần giao diện ẩn/hiện mật khẩu nhất quán trong toàn ứng dụng

Cài đặt

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

Import

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

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

Ví dụ sử dụng

1. Input mật khẩu cơ bản (đăng nhập)

// login.component.ts
import { LibsUiComponentsInputsPasswordComponent } from '@libs-ui/components-inputs-password';
import { signal } from '@angular/core';

@Component({
  standalone: true,
  imports: [LibsUiComponentsInputsPasswordComponent],
  templateUrl: './login.component.html',
})
export class LoginComponent {
  protected loginData = signal<Record<string, string>>({ password: '' });
}

<!-- login.component.html -->
<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>

2. Input mật khẩu bảo mật mạnh (đăng ký / đổi mật khẩu)

// register.component.ts
import { LibsUiComponentsInputsPasswordComponent, IConfig } from '@libs-ui/components-inputs-password';
import { signal } from '@angular/core';

@Component({
  standalone: true,
  imports: [LibsUiComponentsInputsPasswordComponent],
  templateUrl: './register.component.html',
})
export class RegisterComponent {
  protected accountData = signal<Record<string, string>>({ newPassword: '' });

  readonly secureConfig: IConfig = {
    length_min: 8,
    length_max: 16,
    uppercase: 1,
    lowercase: 1,
    number: 1,
    symbol: 1,
    key: 'all',   // phải thỏa mãn toàn bộ quy tắc
    value: '4',
  };
}

<!-- register.component.html -->
<libs_ui-components-inputs-password
  [fieldNameBind]="'newPassword'"
  [(item)]="accountData"
  [isPassword]="true"
  [config]="secureConfig"
  [placeholder]="'Tối thiểu 8 ký tự, đủ hoa, thường, số, ký tự đặc biệt'">
</libs_ui-components-inputs-password>

3. Input mật khẩu ở chế độ chỉ đọc (xem thông tin)

// profile.component.ts
import { LibsUiComponentsInputsPasswordComponent } from '@libs-ui/components-inputs-password';
import { signal } from '@angular/core';

@Component({
  standalone: true,
  imports: [LibsUiComponentsInputsPasswordComponent],
  templateUrl: './profile.component.html',
})
export class ProfileComponent {
  protected profileData = signal<Record<string, string>>({ pass: 'secret123' });
}

<!-- profile.component.html -->
<libs_ui-components-inputs-password
  [fieldNameBind]="'pass'"
  [(item)]="profileData"
  [readonly]="true"
  [labelConfig]="{ labelLeft: 'Mật khẩu hiện tại' }">
</libs_ui-components-inputs-password>

4. Kiểm tra hợp lệ từ component cha qua ViewChild

// parent.component.ts
import { LibsUiComponentsInputsPasswordComponent, IConfig } from '@libs-ui/components-inputs-password';
import { IInputValidFunctionControlEvent } from '@libs-ui/components-inputs-valid';
import { signal, viewChild } from '@angular/core';

@Component({
  standalone: true,
  imports: [LibsUiComponentsInputsPasswordComponent],
  templateUrl: './parent.component.html',
})
export class ParentComponent {
  protected formData = signal<Record<string, string>>({ password: '' });
  private passwordRef = viewChild<LibsUiComponentsInputsPasswordComponent>('passwordRef');

  protected handlerFunctionsControl(event: IInputValidFunctionControlEvent): void {
    event.stopPropagation();
    // Lưu lại để gọi checkIsValid khi submit
  }

  protected async handlerSubmit(): Promise<void> {
    const isValid = await this.passwordRef()?.FunctionsControl?.checkIsValid();
    if (!isValid) return;
    // Xử lý submit...
  }
}

<!-- parent.component.html -->
<libs_ui-components-inputs-password
  #passwordRef
  [fieldNameBind]="'password'"
  [(item)]="formData"
  [isPassword]="true"
  [placeholder]="'Nhập mật khẩu'"
  (outFunctionsControl)="handlerFunctionsControl($event)">
</libs_ui-components-inputs-password>

<button (click)="handlerSubmit()">Xác nhận</button>

5. Cấu hình tùy chọn số quy tắc tối thiểu (không cần thỏa mãn toàn bộ)

// Chỉ cần thỏa mãn ít nhất 2 trong 4 loại ký tự
readonly flexConfig: IConfig = {
  length_min: 6,
  length_max: 20,
  uppercase: 1,
  lowercase: 1,
  number: 1,
  symbol: 1,
  key: '',     // không phải 'all' → dùng value để đếm
  value: '2',  // đủ 2 loại ký tự là được
};

<libs_ui-components-inputs-password
  [fieldNameBind]="'password'"
  [(item)]="formData"
  [isPassword]="true"
  [config]="flexConfig"
  [placeholder]="'Ít nhất 2 trong 4 loại ký tự'">
</libs_ui-components-inputs-password>

@Input()

| Input | Type | Default | Mô tả | Ví dụ | |---|---|---|---|---| | fieldNameBind | string | (Bắt buộc) | Tên key trong object item dùng để bind giá trị | [fieldNameBind]="'password'" | | item | Record<string, any> | (Bắt buộc, model) | Object chứa dữ liệu nhập liệu, dùng two-way binding | [(item)]="loginData" | | isPassword | boolean | false | Nếu true, hiển thị icon mắt để ẩn/hiện mật khẩu và mặc định type là password | [isPassword]="true" | | config | IConfig | defaultConfig() | Cấu hình quy tắc bảo mật: độ dài, số lượng từng loại ký tự, chế độ kiểm tra | [config]="secureConfig" | | classIncludeInput | string | undefined | Class CSS bổ sung cho wrapper bao ngoài input | [classIncludeInput]="'mt-4'" | | configUnitRight | IInputValidUnitConfig | undefined | Cấu hình hiển thị đơn vị ở bên phải input | [configUnitRight]="unitConfig" | | contentPopoverOverlayIconShowOrHiddenPass | IContentWhenHiddenOrShowPassword | defaultContentWhenHiddenOrShowPassword() | Nội dung tooltip hiển thị khi hover icon ẩn/hiện mật khẩu | [contentPopoverOverlayIconShowOrHiddenPass]="{ show: 'Hiện', hidden: 'Ẩn' }" | | defaultHeight | number | undefined | Chiều cao mặc định (px) của input | [defaultHeight]="40" | | iconLeftClass | string | undefined (model) | Class icon hiển thị bên trái input | [(iconLeftClass)]="leftIcon" | | iconRightClass | string | Auto khi isPassword=true (model) | Class icon hiển thị bên phải input. Tự động set icon mắt khi isPassword=true | [(iconRightClass)]="rightIcon" | | ignoreWidthInput100 | boolean | undefined | Khi true, input không chiếm 100% chiều rộng | [ignoreWidthInput100]="true" | | keySelectedUnitRight | unknown | undefined | Key của đơn vị mặc định được chọn ở bên phải | [keySelectedUnitRight]="'vnd'" | | labelConfig | ILabel | undefined | Cấu hình label hiển thị trên hoặc bên trái input | [labelConfig]="{ labelLeft: 'Mật khẩu' }" | | maxLength | number | 20 | Giới hạn số ký tự tối đa người dùng có thể nhập | [maxLength]="32" | | placeholder | string | undefined | Văn bản gợi ý hiển thị khi input rỗng | [placeholder]="'Nhập mật khẩu'" | | popoverContentIconRight | string | undefined | Nội dung tooltip hiển thị khi hover/click icon bên phải | [popoverContentIconRight]="'Tạo mật khẩu'" | | readonly | boolean | undefined | Khi true, input chỉ hiển thị, không cho phép chỉnh sửa | [readonly]="true" | | resetAutoCompletePassword | boolean | undefined | Khi true, vô hiệu hóa tính năng tự động điền mật khẩu của trình duyệt | [resetAutoCompletePassword]="true" | | typeInput | TYPE_INPUT | undefined (model) | Kiểu input ('text' hoặc 'password'), tự chuyển đổi khi click icon mắt | [(typeInput)]="inputType" | | unitsRight | Array<Record<string, unknown>> | undefined | Danh sách các tùy chọn đơn vị hiển thị ở bên phải input | [unitsRight]="currencyList" | | validMinLength | IValidLength | defaultValidMinLength() | Cấu hình thông báo lỗi khi mật khẩu chưa đủ độ dài tối thiểu | [validMinLength]="{ length: 8, message: 'i18n_min_8' }" | | validPattern | Array<IValidPattern> | undefined | Danh sách các pattern regex validation tùy chỉnh bổ sung | [validPattern]="customPatterns" | | validRequired | IValidRequired | defaultValidRequired() | Cấu hình validation khi trường bị để trống | [validRequired]="{ isRequired: true, message: 'i18n_required' }" | | zIndexPopoverOverlay | number | undefined | Z-index của lớp overlay popover (dùng khi bị che bởi modal/dialog) | [zIndexPopoverOverlay]="1050" |

@Output()

| Output | Type | Mô tả | Handler TS | Binding HTML | |---|---|---|---|---| | (outClickIconRight) | void | Phát ra khi người dùng click vào icon bên phải | handlerClickIconRight(): void { event.stopPropagation(); } | (outClickIconRight)="handlerClickIconRight()" | | (outFunctionsControl) | IInputValidFunctionControlEvent | Cung cấp đối tượng điều khiển gồm checkIsValid() để validate từ bên ngoài | handlerFunctionsControl(e: IInputValidFunctionControlEvent): void { e.stopPropagation(); this.controlRef = e; } | (outFunctionsControl)="handlerFunctionsControl($event)" | | (outGeneratePassword) | string | Phát ra mật khẩu ngẫu nhiên vừa được sinh ra | handlerGeneratePassword(pass: string): void { event.stopPropagation(); console.log(pass); } | (outGeneratePassword)="handlerGeneratePassword($event)" | | (outValueChange) | string \| number | Phát ra giá trị mật khẩu mỗi khi người dùng nhập liệu | handlerValueChange(value: string \| number): void { event.stopPropagation(); } | (outValueChange)="handlerValueChange($event)" |

Types & Interfaces

import { IConfig, IContentWhenHiddenOrShowPassword } from '@libs-ui/components-inputs-password';

IConfig

Cấu hình quy tắc bảo mật mật khẩu:

interface IConfig {
  length_min: number;   // Độ dài tối thiểu (default: 4)
  length_max: number;   // Độ dài tối đa (default: 20)
  uppercase: number;    // Số chữ hoa tối thiểu (0 = không yêu cầu)
  lowercase: number;    // Số chữ thường tối thiểu (0 = không yêu cầu)
  number: number;       // Số chữ số tối thiểu (0 = không yêu cầu)
  symbol: number;       // Số ký tự đặc biệt tối thiểu (0 = không yêu cầu)
  key: string;          // 'all' = phải thỏa mãn tất cả loại, '' = dùng value
  value: string;        // Số lượng loại ký tự cần thỏa mãn (khi key !== 'all')
}

Giá trị mặc định (defaultConfig()):

{
  length_max: 20,
  length_min: 4,
  uppercase: 0,
  lowercase: 0,
  symbol: 0,
  key: '',
  number: 0,
  value: '0',
}

Ví dụ cấu hình phổ biến:

// Mật khẩu mạnh — bắt buộc đủ 4 loại ký tự
const strongConfig: IConfig = {
  length_min: 8,
  length_max: 20,
  uppercase: 1,
  lowercase: 1,
  number: 1,
  symbol: 1,
  key: 'all',
  value: '4',
};

// Mật khẩu trung bình — chỉ cần 2 trong 4 loại
const mediumConfig: IConfig = {
  length_min: 6,
  length_max: 20,
  uppercase: 1,
  lowercase: 1,
  number: 1,
  symbol: 1,
  key: '',
  value: '2',
};

// Chỉ kiểm tra độ dài, không giới hạn ký tự
const lengthOnlyConfig: IConfig = {
  length_min: 8,
  length_max: 32,
  uppercase: 0,
  lowercase: 0,
  number: 0,
  symbol: 0,
  key: '',
  value: '0',
};

IContentWhenHiddenOrShowPassword

Nội dung tooltip cho icon ẩn/hiện mật khẩu:

interface IContentWhenHiddenOrShowPassword {
  show: string;    // Tooltip khi mật khẩu đang bị ẩn (icon mắt mở)
  hidden: string;  // Tooltip khi mật khẩu đang hiện (icon mắt gạch)
}

// Giá trị mặc định (dùng i18n key):
const defaultContent: IContentWhenHiddenOrShowPassword = {
  show: 'i18n_show',
  hidden: 'i18n_hidden',
};

IValidStatus (internal)

Trạng thái kiểm tra từng quy tắc bảo mật — dùng nội bộ để render checklist:

interface IValidStatus {
  upper?: boolean;        // Đủ chữ hoa
  number?: boolean;       // Đủ chữ số
  lower?: boolean;        // Đủ chữ thường
  symbol?: boolean;       // Đủ ký tự đặc biệt
  numberOfChar?: boolean; // Đủ số loại ký tự
  length_max?: boolean;   // Không vượt quá độ dài tối đa
  length_min?: boolean;   // Đạt độ dài tối thiểu
}

FunctionsControl (Getter API)

Component expose getter FunctionsControl để component cha có thể gọi checkIsValid() qua ViewChild:

// Định nghĩa trong component:
get FunctionsControl(): IInputValidFunctionControlEvent | undefined

// Trong IInputValidFunctionControlEvent:
interface IInputValidFunctionControlEvent {
  checkIsValid: () => Promise<boolean>;
}

Ví dụ sử dụng từ component cha:

// parent.component.ts
import { LibsUiComponentsInputsPasswordComponent } from '@libs-ui/components-inputs-password';
import { viewChild } from '@angular/core';

export class ParentComponent {
  private passwordRef = viewChild<LibsUiComponentsInputsPasswordComponent>('passwordRef');

  protected async handlerSubmit(): Promise<void> {
    const isValid = await this.passwordRef()?.FunctionsControl?.checkIsValid();
    if (!isValid) return;
    // Tiến hành submit...
  }
}

<libs_ui-components-inputs-password
  #passwordRef
  [fieldNameBind]="'password'"
  [(item)]="formData"
  [isPassword]="true">
</libs_ui-components-inputs-password>

Lưu ý quan trọng

⚠️ fieldNameBind phải khớp với key trong item: Nếu fieldNameBind="'password'" thì object item phải có key password. Sai tên key sẽ khiến validation và generate password không hoạt động.

⚠️ isPassword mặc định là false: Nếu không truyền [isPassword]="true", icon mắt sẽ không hiển thị và input sẽ render dưới dạng text thông thường thay vì password.

⚠️ config.key = 'all' yêu cầu thỏa mãn toàn bộ: Khi key: 'all', tất cả các loại ký tự có số lượng > 0 đều phải đáp ứng. Nếu chỉ cần thỏa mãn một phần, đặt key: '' và dùng value để chỉ định số lượng tối thiểu.

⚠️ validRequired mặc định isRequired = true: Component mặc định kiểm tra trường bắt buộc. Nếu trường không bắt buộc, truyền [validRequired]="{ isRequired: false, message: '' }".

⚠️ Generate password dựa trên config: Chức năng tự sinh mật khẩu chỉ hoạt động đúng khi label config có nút "Generate" (outClickButtonLabel) được kích hoạt từ LibsUiComponentsInputsValidComponent. Mật khẩu sinh ra sẽ tự điền vào item[fieldNameBind].

⚠️ Ký tự đặc biệt được hỗ trợ: Bộ ký tự đặc biệt mặc định gồm: ~\!@#$%^&*()_=+}{";:.,?|/<>-`. Không hỗ trợ tùy chỉnh bộ ký tự này.