fix(demo): improved the demo app

AnthonyNahas · AnthonyNahas · commit 4f543f706cb7 · 2020-02-09T21:42:58.000+01:00
diff --git a/angular.json b/angular.json
@@ -29,9 +29,15 @@
             ],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
-              "src/styles.scss"
+              "src/styles.scss",
+              "./node_modules/prismjs/themes/prism-okaidia.css"
             ],
-            "scripts": []
+            "scripts": [
+              "./node_modules/marked/lib/marked.js",
+              "./node_modules/prismjs/prism.js",
+              "./node_modules/prismjs/components/prism-typescript.min.js",
+              "./node_modules/prismjs/components/prism-css.min.js"
+            ]
           },
           "configurations": {
             "production": {
@@ -222,4 +228,4 @@
   "cli": {
     "analytics": "80a8e7b5-ce29-40b8-a31c-aa518596a68a"
   }
-}
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -437,7 +437,7 @@ <h2>Usage</h2>
 
   <div class="password-container" fxLayout="column">
     <mat-toolbar *ngIf="true" style="max-width: 100%">
-      @angular-material-extensions/password-strength
+      <span class="toolbar-title">@angular-material-extensions/password-strength</span>
       <span fxFlex></span>
 
       <button mat-icon-button
@@ -458,12 +458,12 @@ <h2>Usage</h2>
           <!--tab 1-->
           <mat-tab>
             <ng-template mat-tab-label>HTML</ng-template>
-            <!--            <markdown src="assets/md/home/e1/html.md"></markdown>-->
+            <markdown src="assets/md/home/e1/html.md"></markdown>
           </mat-tab>
 
           <mat-tab>
             <ng-template mat-tab-label>TS</ng-template>
-            <!--            <markdown src="assets/md/home/e1/ts.md"></markdown>-->
+            <markdown src="assets/md/home/e1/ts.md"></markdown>
           </mat-tab>
         </mat-tab-group>
       </mat-card-content>
@@ -505,7 +505,7 @@ <h2>Usage</h2>
   <!--NGX-MATERIAL-PASSWORD-STRENGTH WITH VALIDATION AND FORM CONTROLLER-->
   <div class="password-container" fxLayout="column">
     <mat-toolbar>
-      @angular-material-extensions/password-strength
+      <span class="toolbar-title">@angular-material-extensions/password-strength</span>
       <span fxFlex></span>
 
       <button mat-icon-button
@@ -528,12 +528,12 @@ <h2>Usage</h2>
           <!--tab 1-->
           <mat-tab>
             <ng-template mat-tab-label>HTML</ng-template>
-            <!--            <markdown src="assets/md/home/e2/html.md"></markdown>-->
+            <markdown src="assets/md/home/e2/html.md"></markdown>
           </mat-tab>
 
           <mat-tab>
             <ng-template mat-tab-label>TS</ng-template>
-            <!--            <markdown src="assets/md/home/e2/ts.md"></markdown>-->
+            <markdown src="assets/md/home/e2/ts.md"></markdown>
           </mat-tab>
         </mat-tab-group>
       </mat-card-content>
@@ -583,9 +583,9 @@ <h2>Usage</h2>
   </div>
 
   <!--    CONFIRM PASSWORD-->
-  <div class="password-container"  fxLayout="column">
+  <div class="password-container" fxLayout="column">
     <mat-toolbar>
-      @angular-material-extensions/password-strength
+      <span class="toolbar-title">@angular-material-extensions/password-strength</span>
       <span fxFlex></span>
 
       <button mat-icon-button
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -2,3 +2,9 @@
   max-width: 100%;
   margin-bottom: 1rem;
 }
+
+.toolbar-title {
+  overflow: hidden;
+  white-space: nowrap; /* Don't forget this one */
+  text-overflow: ellipsis;
+}
diff --git a/src/assets/md/examples/e1.md b/src/assets/md/examples/e1.md
@@ -0,0 +1,7 @@
+```html
+<mat-password-strength #passwordComponent
+                       [enableDigitRule]="false"
+                       (onStrengthChanged)="onStrengthChanged($event)"
+                       [password]="password.value">
+</mat-password-strength>
+```
diff --git a/src/assets/md/examples/e2.md b/src/assets/md/examples/e2.md
@@ -0,0 +1,8 @@
+```html
+<mat-password-strength #passwordComponent
+                       [enableLowerCaseLetterRule]="false"
+                       [enableSpecialCharRule]="false"
+                       (onStrengthChanged)="onStrengthChanged($event)"
+                       [password]="password.value">
+</mat-password-strength>
+```
diff --git a/src/assets/md/examples/e3.md b/src/assets/md/examples/e3.md
@@ -0,0 +1,8 @@
+```html
+<mat-password-strength #passwordComponent
+                       [enableLengthRule]="false"
+                       [enableUpperCaseLetterRule]="false"
+                       (onStrengthChanged)="onStrengthChanged($event)"
+                       [password]="password.value">
+</mat-password-strength>
+```
diff --git a/src/assets/md/examples/e4.md b/src/assets/md/examples/e4.md
@@ -0,0 +1,8 @@
+```html
+<mat-password-strength #passwordComponent
+                       [min]="6"
+                       [max]="12"
+                       (onStrengthChanged)="onStrengthChanged($event)"
+                       [password]="password.value">
+</mat-password-strength>
+```
diff --git a/src/assets/md/examples/e5.md b/src/assets/md/examples/e5.md
@@ -0,0 +1,18 @@
+```html
+ <mat-form-field appearance="outline" style="width: 100%" [color]="passwordComponent.color">
+  <mat-label>Password</mat-label>
+  <input matInput #password
+         type="password"
+         value="2Am.;!#019s'"
+         placeholder="Password">
+  <mat-hint align="end" aria-live="polite">
+    {{password.value.length}} / {{passwordComponent.max}}
+  </mat-hint>
+</mat-form-field>
+ 
+        
+<mat-password-strength #passwordComponent
+  (onStrengthChanged)="onStrengthChanged($event)"
+  [password]="password.value">
+</mat-password-strength>
+```
diff --git a/src/assets/md/examples/e6.md b/src/assets/md/examples/e6.md
@@ -0,0 +1,35 @@
+```html
+<mat-slide-toggle #toggle>Show Password Details</mat-slide-toggle>
+      
+ <mat-form-field appearance="outline" style="width: 100%" [color]="passwordComponent.color">
+  <mat-label>Password</mat-label>
+  <mat-pass-toggle-visibility #toggleVisbility matSuffix></mat-pass-toggle-visibility>
+  <input matInput #password
+         [type]="toggleVisbility.type"
+         placeholder="Password">
+  <mat-hint align="end" aria-live="polite">
+    {{password.value.length}} / {{passwordComponent.max}}
+  </mat-hint>
+</mat-form-field>
+ 
+        
+<mat-password-strength #passwordComponent
+  (onStrengthChanged)="onStrengthChanged($event)"
+  [password]="password.value"
+  [customValidator]="pattern">
+</mat-password-strength>
+
+<mat-password-strength-info
+  *ngIf="toggle.checked"
+  [passwordComponent]="passwordComponent6"
+  customCharsCriteriaMsg="1 german special chars is required"
+  [enableScoreInfo]="true">
+</mat-password-strength-info>
+
+```
+
+
+
+```ts
+pattern = new RegExp(/^(?=.*?[äöüÄÖÜß])/);
+```
diff --git a/src/assets/md/examples/e7.md b/src/assets/md/examples/e7.md
@@ -0,0 +1,6 @@
+```html
+<mat-password-strength #passwordComponent
+                       class="green"
+                       [password]="password.value">
+</mat-password-strength>
+```
diff --git a/src/assets/md/examples/info/e1.md b/src/assets/md/examples/info/e1.md
@@ -0,0 +1,4 @@
+```html
+<mat-password-strength-info [passwordComponent]="passwordComponent">
+</mat-password-strength-info>
+```
diff --git a/src/assets/md/examples/info/e2.md b/src/assets/md/examples/info/e2.md
@@ -0,0 +1,10 @@
+```html
+<mat-password-strength-info
+              lowerCaseCriteriaMsg="your best lower case criteria msg"
+              upperCaseCriteriaMsg="your best upper case criteria msg"
+              digitsCriteriaMsg="your best digit char criteria msg"
+              specialCharsCriteriaMsg="your best special char criteria msg"
+              minCharsCriteriaMsg="your best min char criteria msg"
+              [passwordComponent]="passwordComponent">
+ </mat-password-strength-info>
+```
diff --git a/src/assets/md/examples/info/e3.md b/src/assets/md/examples/info/e3.md
@@ -0,0 +1,46 @@
+```html
+<mat-password-strength-info
+              [lowerCaseCriteriaMsg]="'LOWER_CASE_CRITERIA_MSG' | translate"
+              [upperCaseCriteriaMsg]="'UPPER_CASE_CRITERIA_MSG '| translate"
+              [digitsCriteriaMsg]="'DIGITS_CRITERIA_MSG '| translate"
+              [specialCharsCriteriaMsg]="'SPECIAL_CHARS_CRITERIA_MSG' | translate"
+              [minCharsCriteriaMsg]="'MIN_CHARS_CRITERIA_MSG' | translate"
+              [passwordComponent]="passwordComponent">
+</mat-password-strength-info>
+```
+
+`assets/i18n/en.json`
+
+```json
+{
+  "LOWER_CASE_CRITERIA_MSG" : "contains at least one lower character",
+  "UPPER_CASE_CRITERIA_MSG" : "contains at least one upper character",
+  "DIGITS_CRITERIA_MSG" : "contains at least one digit",
+  "SPECIAL_CHARS_CRITERIA_MSG" : "contains at least one special character",
+  "MIN_CHARS_CRITERIA_MSG" : "contains at least {{value}} characters"
+}
+```
+
+`assets/i18n/de.json`
+
+```json
+{
+  "LOWER_CASE_CRITERIA_MSG" : "enthält mindestens ein unteres Zeichen",
+  "UPPER_CASE_CRITERIA_MSG" : "enthält mindestens ein oberes Zeichen",
+  "DIGITS_CRITERIA_MSG" : "enthält mindestens eine Ziffer",
+  "SPECIAL_CHARS_CRITERIA_MSG" : "contains at least one special character",
+  "MIN_CHARS_CRITERIA_MSG" : "enthält mindestens {{value}} Zeichen"
+}
+```
+
+`assets/i18n/fr.json`
+
+```json
+{
+  "LOWER_CASE_CRITERIA_MSG" : "contient au moins un caractère inférieur",
+  "UPPER_CASE_CRITERIA_MSG" : "contient au moins un caractère supérieur",
+  "DIGITS_CRITERIA_MSG" : "contient au moins un chiffre",
+  "SPECIAL_CHARS_CRITERIA_MSG" : "contient au moins un caractère spécial",
+  "MIN_CHARS_CRITERIA_MSG" : "contient au moins {{valeur}} caractères"
+}
+```
diff --git a/src/assets/md/home/e1/html.md b/src/assets/md/home/e1/html.md
@@ -0,0 +1,26 @@
+```html
+<div fxFlex>
+  <!--password input filed-->
+  <mat-form-field appearance="outline" style="width: 100%" [color]="passwordComponent.color">
+    <mat-label>Password</mat-label>
+    <mat-pass-toggle-visibility #toggle matSuffix></mat-pass-toggle-visibility>
+    <input matInput #password
+           [type]="toggle.type"
+           required
+           placeholder="Password">
+    <mat-hint align="end" aria-live="polite">
+      {{password.value.length}} / {{passwordComponent.max}}
+    </mat-hint>
+  </mat-form-field>
+  <!--@angular-material-extensions/password-strength's main component-->
+  <mat-password-strength #passwordComponent
+                         (onStrengthChanged)="onStrengthChanged($event)"
+                         [password]="password.value">
+  </mat-password-strength>
+  <!--Password's strength info-->
+  <mat-password-strength-info
+    *ngIf="showDetails"
+    [passwordComponent]="passwordComponent">
+  </mat-password-strength-info>
+</div>
+```
diff --git a/src/assets/md/home/e1/ts.md b/src/assets/md/home/e1/ts.md
@@ -0,0 +1,20 @@
+```typescript
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss']
+})
+export class HomeComponent implements OnInit {
+
+  showDetails: boolean;
+
+  ngOnInit() {
+  }
+
+  onStrengthChanged(strength: number) {
+    console.log('password strength = ', strength);
+  }
+}
+```
diff --git a/src/assets/md/home/e2/html.md b/src/assets/md/home/e2/html.md
@@ -0,0 +1,36 @@
+```html
+ <!--password input filed-->
+  <mat-form-field appearance="outline" [color]="passwordComponentWithValidation.color" style="width: 100%">
+    <mat-label>Password</mat-label>
+    <mat-pass-toggle-visibility #toggle matSuffix></mat-pass-toggle-visibility>
+    <input matInput #passwordWithValidation
+           [type]="toggle.type"
+           required
+           [formControl]="passwordComponentWithValidation.passwordFormControl"
+           placeholder="Password">
+
+     <!--password hint-->
+     <mat-hint align="end" aria-live="polite">
+       {{passwordWithValidation.value.length}} / {{passwordComponentWithValidation.max}}
+     </mat
+     <!--password error msgs-->
+     <mat-error *ngIf="passwordComponentWithValidation.passwordFormControl.hasError('required')">
+       Password is required
+     </mat-error>
+     <mat-error *ngIf="passwordComponentWithValidation.passwordFormControl.hasError('pattern')">
+       Password is not valid
+     </mat-error>
+
+     </mat-form-field>
+
+     <!--@angular-material-extensions/password-strength's main component-->
+     <mat-password-strength #passwordComponentWithValidation
+                            (onStrengthChanged)="onStrengthChanged($event)"
+                            [password]="passwordWithValidation.value">
+     </mat-password-str   
+     <!--Password's strength info-->
+     <mat-password-strength-info
+       *ngIf="showDetails"
+       [passwordComponent]="passwordComponentWithValidation">
+     </mat-password-strength  
+```
diff --git a/src/assets/md/home/e2/ts.md b/src/assets/md/home/e2/ts.md
@@ -0,0 +1,20 @@
+```typescript
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss']
+})
+export class HomeComponent implements OnInit {
+
+  showDetails: boolean;
+
+  ngOnInit() {
+  }
+
+  onStrengthChanged(strength: number) {
+    console.log('password strength = ', strength);
+  }
+}
+```
diff --git a/src/assets/md/home/e3/html.md b/src/assets/md/home/e3/html.md
diff --git a/src/assets/md/home/e3/ts.md b/src/assets/md/home/e3/ts.md
