@@ -23,16 +45,59 @@
Import
Getting Started
-
Password is applied to an input field with pPassword directive.
+
Component is defined using p-password element with a mask and two-way value binding is enabled with standard ngModel directive.
<input type="password" pPassword />
+<p-password></p-password>
Model Binding
A model can be bound using standard ngModel directive.
-<input type="password" pPassword [(ngModel)]="property"/>
+<p-password [(ngModel)]="value1"></p-password>
+
+
+
Customization
+
Password component uses regular expressions for middle and strong passwords with the following defaults.
+
+
Medium
+
^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,}).
+
+ - At least one lowercase
+ - At least one uppercase or one number
+ - Minimum 6 characters
+
+
+
Strong
+
^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,})
+
+ - At least one lowercase
+ - At least one uppercase
+ - At least one numeric
+ - Minimum 8 characters
+
+
+
It is possible to define your own checks with the mediumRegex and strongRegex properties.
+
+
Templating
+
3 templates are included to customize the overlay. These are header, content and footer. Note that content overrides the default meter.
+
+<p-password [(ngModel)]="value4">
+ <ng-template pTemplate="header">
+ <h6>Pick a password</h6>
+ </ng-template>
+ <ng-template pTemplate="footer">
+ <p-divider></p-divider>
+ <p class="p-mt-2">Suggestions</p>
+ <ul class="p-pl-2 p-ml-2 p-mt-0" style="line-height: 1.5">
+ <li>At least one lowercase</li>
+ <li>At least one uppercase</li>
+ <li>At least one numeric</li>
+ <li>Minimum 8 characters</li>
+ </ul>
+ </ng-template>
+</p-password>
Properties
@@ -50,26 +115,38 @@
Properties
| promptLabel |
string |
- Please enter a password |
- Text to prompt password entry. |
+ null |
+ Text to prompt password entry. Defaults to PrimeNG I18N API configuration. |
+
+
+ | mediumRegex |
+ string |
+ Regex for a medium level password. |
+ ^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,}). |
+
+
+ | strongRegex |
+ string |
+ Regex for a strong level password. |
+ ^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.{8,}) |
| weakLabel |
string |
- Weak |
- Text for a weak password. |
+ null |
+ Text for a weak password. Defaults to PrimeNG I18N API configuration. |
| mediumLabel |
string |
- Medium |
- Text for a medium password. |
+ null |
+ Text for a medium password. Defaults to PrimeNG I18N API configuration. |
| strongLabel |
string |
- Strong |
- Text for a strong password. |
+ null |
+ Text for a strong password. Defaults to PrimeNG I18N API configuration. |
| feedback |
@@ -78,10 +155,40 @@ Properties
Whether to show the strength indicator or not. |
- | showPassword |
+ toggleMask |
boolean |
false |
- When true, change the input type to text by displaying the password. |
+ Whether to show an icon to display the password as plain text. |
+
+
+ | appendTo |
+ string |
+ null |
+ Id of the element or "body" for document where the overlay should be appended to. |
+
+
+ | inputStyle |
+ any |
+ null |
+ Inline style of the input field. |
+
+
+ | inputStyleClass |
+ string |
+ null |
+ Style class of the input field. |
+
+
+ | style |
+ string |
+ null |
+ Inline style of the component. |
+
+
+ | styleClass |
+ string |
+ null |
+ Style class of the component. |
@@ -126,8 +233,53 @@
Dependencies
Edit in StackBlitz
-<h5>Password</h5>
-<input pPassword type="password"/>
+<div class="card">
+ <h5>Basic</h5>
+ <p-password [(ngModel)]="value1" [feedback]="false"></p-password>
+
+ <h5>Password Meter</h5>
+ <p-password [(ngModel)]="value2"></p-password>
+
+ <h5>Show Password</h5>
+ <p-password [(ngModel)]="value3" [toggleMask]="true"></p-password>
+
+ <h5>Templating</h5>
+ <p-password [(ngModel)]="value4">
+ <ng-template pTemplate="header">
+ <h6>Pick a password</h6>
+ </ng-template>
+ <ng-template pTemplate="footer">
+ <p-divider></p-divider>
+ <p class="p-mt-2">Suggestions</p>
+ <ul class="p-pl-2 p-ml-2 p-mt-0" style="line-height: 1.5">
+ <li>At least one lowercase</li>
+ <li>At least one uppercase</li>
+ <li>At least one numeric</li>
+ <li>Minimum 8 characters</li>
+ </ul>
+ </ng-template>
+ </p-password>
+</div>
+
+
+@Component({
+ templateUrl: './passworddemo.html',
+ styles: [`
+ :host ::ng-deep .p-password input {
+ width: 15rem
+ }
+ `]
+})
+export class PasswordDemo {
+
+ value1: string;
+
+ value2: string;
+
+ value3: string;
+
+ value4: string;
+}
diff --git a/src/app/showcase/components/password/passworddemo.module.ts b/src/app/showcase/components/password/passworddemo.module.ts
index 2f584aa8670..64f2186502d 100755
--- a/src/app/showcase/components/password/passworddemo.module.ts
+++ b/src/app/showcase/components/password/passworddemo.module.ts
@@ -1,9 +1,11 @@
import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
import {CommonModule} from '@angular/common';
import {PasswordDemo} from './passworddemo';
import {PasswordDemoRoutingModule} from './passworddemo-routing.module';
import {PasswordModule} from 'primeng/password';
import {TabViewModule} from 'primeng/tabview';
+import {DividerModule} from 'primeng/divider';
import {AppInputStyleSwitchModule} from '../../app.inputstyleswitch.component';
import {AppCodeModule} from '../../app.code.component';
@@ -12,7 +14,9 @@ import {AppCodeModule} from '../../app.code.component';
CommonModule,
PasswordDemoRoutingModule,
PasswordModule,
+ DividerModule,
TabViewModule,
+ FormsModule,
AppInputStyleSwitchModule,
AppCodeModule
],
diff --git a/src/app/showcase/components/password/passworddemo.ts b/src/app/showcase/components/password/passworddemo.ts
index 2d649a5d29c..dee85b3daaf 100755
--- a/src/app/showcase/components/password/passworddemo.ts
+++ b/src/app/showcase/components/password/passworddemo.ts
@@ -1,8 +1,20 @@
import {Component} from '@angular/core';
@Component({
- templateUrl: './passworddemo.html'
+ templateUrl: './passworddemo.html',
+ styles: [`
+ :host ::ng-deep .p-password input {
+ width: 15rem
+ }
+ `]
})
export class PasswordDemo {
+ value1: string;
+
+ value2: string;
+
+ value3: string;
+
+ value4: string;
}
\ No newline at end of file