@libs-ui/components-inputs-password 0.2.355-14 → 0.2.355-15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +126 -2
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -1,3 +1,127 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Password Input Component
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
`@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.
|
|
4
|
+
|
|
5
|
+
## Tính năng nổi bật
|
|
6
|
+
|
|
7
|
+
- 👁️ **Ẩ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.
|
|
8
|
+
- ✅ **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.
|
|
9
|
+
- 🎲 **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.
|
|
10
|
+
- 🛠️ **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ệ.
|
|
11
|
+
- 🎨 **Tùy biến cao**: Cho phép tùy chỉnh icon, placeholder, label và các thuộc tính CSS.
|
|
12
|
+
|
|
13
|
+
## Cài đặt
|
|
14
|
+
|
|
15
|
+
Sử dụng npm hoặc yarn để cài đặt:
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install @libs-ui/components-inputs-password
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Cách sử dụng
|
|
22
|
+
|
|
23
|
+
### Import Module
|
|
24
|
+
|
|
25
|
+
```typescript
|
|
26
|
+
import { LibsUiComponentsInputsPasswordComponent } from '@libs-ui/components-inputs-password';
|
|
27
|
+
|
|
28
|
+
@Component({
|
|
29
|
+
standalone: true,
|
|
30
|
+
imports: [LibsUiComponentsInputsPasswordComponent],
|
|
31
|
+
// ...
|
|
32
|
+
})
|
|
33
|
+
export class YourComponent {}
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
### Ví dụ cơ bản (Input mật khẩu thông thường)
|
|
37
|
+
|
|
38
|
+
```html
|
|
39
|
+
<libs_ui-components-inputs-password
|
|
40
|
+
[fieldNameBind]="'password'"
|
|
41
|
+
[(item)]="loginData"
|
|
42
|
+
[isPassword]="true"
|
|
43
|
+
[placeholder]="'Nhập mật khẩu của bạn'"></libs_ui-components-inputs-password>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
### Ví dụ nâng cao (Kiểm tra độ mạnh mật khẩu)
|
|
47
|
+
|
|
48
|
+
```html
|
|
49
|
+
<libs_ui-components-inputs-password
|
|
50
|
+
[fieldNameBind]="'newPassword'"
|
|
51
|
+
[(item)]="accountData"
|
|
52
|
+
[isPassword]="true"
|
|
53
|
+
[config]="passwordSecurityConfig"
|
|
54
|
+
[placeholder]="'Tạo mật khẩu mạnh'"></libs_ui-components-inputs-password>
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
```typescript
|
|
58
|
+
passwordSecurityConfig = {
|
|
59
|
+
length_min: 8,
|
|
60
|
+
length_max: 20,
|
|
61
|
+
uppercase: 1, // Ít nhất 1 chữ hoa
|
|
62
|
+
number: 1, // Ít nhất 1 chữ số
|
|
63
|
+
symbol: 1, // Ít nhất 1 ký tự đặc biệt
|
|
64
|
+
key: 'all', // Yêu cầu thỏa mãn tất cả quy tắc
|
|
65
|
+
};
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
## API Reference
|
|
69
|
+
|
|
70
|
+
### Inputs
|
|
71
|
+
|
|
72
|
+
| Thuộc tính | Kiểu dữ liệu | Mặc định | Mô tả |
|
|
73
|
+
| :--------------- | :-------------------- | :------------------------ | :-------------------------------------------------------- |
|
|
74
|
+
| `fieldNameBind` | `string` | **(Required)** | Tên trường dữ liệu trong object `item` để bind giá trị. |
|
|
75
|
+
| `item` | `Record<string, any>` | **(Model)** `{}` | Object chứa dữ liệu nhập liệu. |
|
|
76
|
+
| `config` | `IConfig` | `defaultConfig()` | Cấu hình các quy tắc bảo mật (độ dài, ký tự đặc biệt...). |
|
|
77
|
+
| `isPassword` | `boolean` | `false` | Nếu `true`, hiển thị icon ẩn/hiện mật khẩu. |
|
|
78
|
+
| `placeholder` | `string` | `undefined` | Văn bản gợi ý trong ô input. |
|
|
79
|
+
| `readonly` | `boolean` | `false` | Chế độ chỉ đọc. |
|
|
80
|
+
| `labelConfig` | `ILabel` | `undefined` | Cấu hình label cho input. |
|
|
81
|
+
| `maxLength` | `number` | `20` | Giới hạn độ dài tối đa của chuỗi nhập vào. |
|
|
82
|
+
| `validRequired` | `IValidRequired` | `defaultValidRequired()` | Cấu hình thông báo khi trường bị bỏ trống. |
|
|
83
|
+
| `validMinLength` | `IValidLength` | `defaultValidMinLength()` | Cấu hình thông báo khi không đủ độ dài tối thiểu. |
|
|
84
|
+
|
|
85
|
+
### Outputs
|
|
86
|
+
|
|
87
|
+
| Sự kiện | Kiểu dữ liệu | Mô tả |
|
|
88
|
+
| :-------------------- | :-------------------------------- | :-------------------------------------------------------- |
|
|
89
|
+
| `outValueChange` | `string \| number` | Phát ra khi giá trị mật khẩu thay đổi. |
|
|
90
|
+
| `outGeneratePassword` | `string` | Phát ra khi một mật khẩu ngẫu nhiên được tạo tự động. |
|
|
91
|
+
| `outClickIconRight` | `void` | Phát ra khi click vào icon bên phải (thường là icon mắt). |
|
|
92
|
+
| `outFunctionsControl` | `IInputValidFunctionControlEvent` | Cung cấp phương thức điều khiển (`checkIsValid`). |
|
|
93
|
+
|
|
94
|
+
## Types & Interfaces
|
|
95
|
+
|
|
96
|
+
```typescript
|
|
97
|
+
export interface IConfig {
|
|
98
|
+
length_max: number;
|
|
99
|
+
length_min: number;
|
|
100
|
+
uppercase: number;
|
|
101
|
+
lowercase: number;
|
|
102
|
+
symbol: number;
|
|
103
|
+
number: number;
|
|
104
|
+
key: string; // 'all' hoặc các giá trị khác để xác định mức độ ưu tiên
|
|
105
|
+
value: string; // Số lượng quy tắc cần thỏa mãn nếu key không phải 'all'
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
export interface IValidStatus {
|
|
109
|
+
upper?: boolean;
|
|
110
|
+
number?: boolean;
|
|
111
|
+
lower?: boolean;
|
|
112
|
+
symbol?: boolean;
|
|
113
|
+
length_max?: boolean;
|
|
114
|
+
length_min?: boolean;
|
|
115
|
+
}
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
## Tech Stack
|
|
119
|
+
|
|
120
|
+
- **Framework**: Angular 18+
|
|
121
|
+
- **I18n**: `@ngx-translate/core`
|
|
122
|
+
- **Validation**: `@libs-ui/components-inputs-valid`
|
|
123
|
+
- **Styling**: Vanilla SCSS + Tailwind CSS class support
|
|
124
|
+
|
|
125
|
+
## License
|
|
126
|
+
|
|
127
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-inputs-password",
|
|
3
|
-
"version": "0.2.355-
|
|
3
|
+
"version": "0.2.355-15",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/core": ">=18.0.0",
|
|
6
|
-
"@libs-ui/components-inputs-valid": "0.2.355-
|
|
7
|
-
"@libs-ui/components-label": "0.2.355-
|
|
8
|
-
"@libs-ui/utils": "0.2.355-
|
|
6
|
+
"@libs-ui/components-inputs-valid": "0.2.355-15",
|
|
7
|
+
"@libs-ui/components-label": "0.2.355-15",
|
|
8
|
+
"@libs-ui/utils": "0.2.355-15",
|
|
9
9
|
"@ngx-translate/core": "^15.0.0",
|
|
10
|
-
"@libs-ui/components-inputs-input": "0.2.355-
|
|
10
|
+
"@libs-ui/components-inputs-input": "0.2.355-15"
|
|
11
11
|
},
|
|
12
12
|
"sideEffects": false,
|
|
13
13
|
"module": "fesm2022/libs-ui-components-inputs-password.mjs",
|