Skip to content

Commit

Permalink
Password demo updated for #9929
Browse files Browse the repository at this point in the history
  • Loading branch information
@yigitfindikli
yigitfindikli committed Feb 23, 2021
1 parent 9e56b16 commit 1ec6b32
Show file tree
Hide file tree
Showing 3 changed files with 186 additions and 18 deletions.
186 changes: 169 additions & 17 deletions src/app/showcase/components/password/passworddemo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,32 @@ <h1>Password</h1>

<div class="content-section implementation">
<div class="card">
<h5>Password</h5>
<input pPassword type="password"/>
</div>
<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>
</div>

<div class="content-section documentation">
Expand All @@ -23,16 +45,59 @@ <h5>Import</h5>
</app-code>

<h5>Getting Started</h5>
<p>Password is applied to an input field with pPassword directive.</p>
<p>Component is defined using p-password element with a mask and two-way value binding is enabled with standard ngModel directive.</p>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;input type="password" pPassword /&gt;
&lt;p-password&gt;&lt;/p-password&gt;
</app-code>

<h5>Model Binding</h5>
<p>A model can be bound using standard ngModel directive.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;input type="password" pPassword [(ngModel)]="property"/&gt;
&lt;p-password [(ngModel)]="value1"&gt;&lt;/p-password&gt;
</app-code>

<h5>Customization</h5>
<p>Password component uses regular expressions for middle and strong passwords with the following defaults.</p>

<h6>Medium</h6>
<p><i>^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.&#123;6,&#125;).</i></p>
<ul>
<li>At least one lowercase</li>
<li>At least one uppercase or one number</li>
<li>Minimum 6 characters</li>
</ul>

<h6>Strong</h6>
<p><i>^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.&#123;8,&#125;)</i></p>
<ul>
<li>At least one lowercase</li>
<li>At least one uppercase</li>
<li>At least one numeric</li>
<li>Minimum 8 characters</li>
</ul>

<p>It is possible to define your own checks with the <i>mediumRegex</i> and <i>strongRegex</i> properties.</p>

<h5>Templating</h5>
<p>3 templates are included to customize the overlay. These are <i>header</i>, <i>content</i> and <i>footer</i>. Note that content overrides the default meter.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-password [(ngModel)]="value4"&gt;
&lt;ng-template pTemplate="header"&gt;
&lt;h6&gt;Pick a password&lt;/h6&gt;
&lt;/ng-template&gt;
&lt;ng-template pTemplate="footer"&gt;
&lt;p-divider&gt;&lt;/p-divider&gt;
&lt;p class="p-mt-2"&gt;Suggestions&lt;/p&gt;
&lt;ul class="p-pl-2 p-ml-2 p-mt-0" style="line-height: 1.5"&gt;
&lt;li&gt;At least one lowercase&lt;/li&gt;
&lt;li&gt;At least one uppercase&lt;/li&gt;
&lt;li&gt;At least one numeric&lt;/li&gt;
&lt;li&gt;Minimum 8 characters&lt;/li&gt;
&lt;/ul&gt;
&lt;/ng-template&gt;
&lt;/p-password&gt;
</app-code>

<h5>Properties</h5>
Expand All @@ -50,26 +115,38 @@ <h5>Properties</h5>
<tr>
<td>promptLabel</td>
<td>string</td>
<td>Please enter a password</td>
<td>Text to prompt password entry.</td>
<td>null</td>
<td>Text to prompt password entry. Defaults to PrimeNG <a href="#" [routerLink]="['/i18n']">I18N API</a> configuration.</td>
</tr>
<tr>
<td>mediumRegex</td>
<td>string</td>
<td>Regex for a medium level password.</td>
<td>^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.&#123;6,&#125;).</td>
</tr>
<tr>
<td>strongRegex</td>
<td>string</td>
<td>Regex for a strong level password.</td>
<td>^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.&#123;8,&#125;)</td>
</tr>
<tr>
<td>weakLabel</td>
<td>string</td>
<td>Weak</td>
<td>Text for a weak password.</td>
<td>null</td>
<td>Text for a weak password. Defaults to PrimeNG <a href="#" [routerLink]="['/i18n']">I18N API</a> configuration.</td>
</tr>
<tr>
<td>mediumLabel</td>
<td>string</td>
<td>Medium</td>
<td>Text for a medium password.</td>
<td>null</td>
<td>Text for a medium password. Defaults to PrimeNG <a href="#" [routerLink]="['/i18n']">I18N API</a> configuration.</td>
</tr>
<tr>
<td>strongLabel</td>
<td>string</td>
<td>Strong</td>
<td>Text for a strong password.</td>
<td>null</td>
<td>Text for a strong password. Defaults to PrimeNG <a href="#" [routerLink]="['/i18n']">I18N API</a> configuration.</td>
</tr>
<tr>
<td>feedback</td>
Expand All @@ -78,10 +155,40 @@ <h5>Properties</h5>
<td>Whether to show the strength indicator or not.</td>
</tr>
<tr>
<td>showPassword</td>
<td>toggleMask</td>
<td>boolean</td>
<td>false</td>
<td>When true, change the input type to text by displaying the password.</td>
<td>Whether to show an icon to display the password as plain text.</td>
</tr>
<tr>
<td>appendTo</td>
<td>string</td>
<td>null</td>
<td>Id of the element or "body" for document where the overlay should be appended to.</td>
</tr>
<tr>
<td>inputStyle</td>
<td>any</td>
<td>null</td>
<td>Inline style of the input field.</td>
</tr>
<tr>
<td>inputStyleClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the input field.</td>
</tr>
<tr>
<td>style</td>
<td>string</td>
<td>null</td>
<td>Inline style of the component.</td>
</tr>
<tr>
<td>styleClass</td>
<td>string</td>
<td>null</td>
<td>Style class of the component.</td>
</tr>
</tbody>
</table>
Expand Down Expand Up @@ -126,8 +233,53 @@ <h5>Dependencies</h5>
<span>Edit in StackBlitz</span>
</a>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;h5&gt;Password&lt;/h5&gt;
&lt;input pPassword type="password"/&gt;
&lt;div class="card"&gt;
&lt;h5&gt;Basic&lt;/h5&gt;
&lt;p-password [(ngModel)]="value1" [feedback]="false"&gt;&lt;/p-password&gt;

&lt;h5&gt;Password Meter&lt;/h5&gt;
&lt;p-password [(ngModel)]="value2"&gt;&lt;/p-password&gt;

&lt;h5&gt;Show Password&lt;/h5&gt;
&lt;p-password [(ngModel)]="value3" [toggleMask]="true"&gt;&lt;/p-password&gt;

&lt;h5&gt;Templating&lt;/h5&gt;
&lt;p-password [(ngModel)]="value4"&gt;
&lt;ng-template pTemplate="header"&gt;
&lt;h6&gt;Pick a password&lt;/h6&gt;
&lt;/ng-template&gt;
&lt;ng-template pTemplate="footer"&gt;
&lt;p-divider&gt;&lt;/p-divider&gt;
&lt;p class="p-mt-2"&gt;Suggestions&lt;/p&gt;
&lt;ul class="p-pl-2 p-ml-2 p-mt-0" style="line-height: 1.5"&gt;
&lt;li&gt;At least one lowercase&lt;/li&gt;
&lt;li&gt;At least one uppercase&lt;/li&gt;
&lt;li&gt;At least one numeric&lt;/li&gt;
&lt;li&gt;Minimum 8 characters&lt;/li&gt;
&lt;/ul&gt;
&lt;/ng-template&gt;
&lt;/p-password&gt;
&lt;/div&gt;
</app-code>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
@Component(&#123;
templateUrl: './passworddemo.html',
styles: [`
:host ::ng-deep .p-password input &#123;
width: 15rem
&#125;
`]
&#125;)
export class PasswordDemo &#123;

value1: string;

value2: string;

value3: string;

value4: string;
&#125;
</app-code>

</p-tabPanel>
Expand Down
4 changes: 4 additions & 0 deletions src/app/showcase/components/password/passworddemo.module.ts
View file
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -12,7 +14,9 @@ import {AppCodeModule} from '../../app.code.component';
CommonModule,
PasswordDemoRoutingModule,
PasswordModule,
DividerModule,
TabViewModule,
FormsModule,
AppInputStyleSwitchModule,
AppCodeModule
],
Expand Down
14 changes: 13 additions & 1 deletion src/app/showcase/components/password/passworddemo.ts
View file
Original file line number Diff line number Diff line change
@@ -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;
}

0 comments on commit 1ec6b32

Please sign in to comment.