demo(package): integration of the mat-password-strength

Author: AnthonyNahas

demo/README.md

@@ -1,4 +1,4 @@
-# ngx-material-password-strength-demo
+# @angular-material-extensions/password-strength-demo
 
 This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.7.3.
 

demo/package-lock.json

@@ -1,8 +1,8 @@
 {
-  "name": "ngx-material-password-strength-demo",
+  "name": "@angular-material-extensions/password-strength-demo",
   "version": "1.0.5",
   "license": "MIT",
-  "description": "Demo app for ngx-material-password-strength",
+  "description": "Demo app for @angular-material-extensions/password-strength",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

demo/package.json

@@ -20,7 +20,7 @@ import {MatInputModule} from '@angular/material';
     // Add .withServerTransition() to support Universal rendering.
     // The application ID can be any identifier which is unique on
     // the page.
-    BrowserModule.withServerTransition({appId: 'ngx-material-password-strength-demo-id'}),
+    BrowserModule.withServerTransition({appId: '@angular-material-extensions/password-strength-demo-id'}),
     ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production}),
     BrowserAnimationsModule,
     FormsModule,

demo/src/app/app.module.ts

@@ -7,7 +7,7 @@ <h1>Getting Started</h1>
 <section class="getting-started">
   <div class="container">
 
-    <ngx-material-pages title="ngx-material-password-strength">
+    <ngx-material-pages title="@angular-material-extensions/password-strength">
 
       <!--1-->
       <ngx-material-page-loader>
@@ -143,10 +143,10 @@ <h1>Getting Started</h1>
         <ngx-material-page-content>
           <mat-card-title>Animations + Material + CDK</mat-card-title>
           <div class="comment-container">
-            <p><a href="https://www.npmjs.com/package/ngx-material-password-strength"
+            <p><a href="https://www.npmjs.com/package/@angular-material-extensions/password-strength"
                   mat-button
                   color="primary">
-              ngx-material-password-strength
+              @angular-material-extensions/password-strength
             </a>
               is built on the top of
               <a href="https://www.npmjs.com/package/@angular/material"
@@ -158,7 +158,7 @@ <h1>Getting Started</h1>
                  mat-button
                  color="primary">
                 angular component development kit
-              </a> ! That's why we need to install them as peer dependencies to the ngx-material-password-strength
+              </a> ! That's why we need to install them as peer dependencies to the @angular-material-extensions/password-strength
               module.
             </p>
           </div>
@@ -402,18 +402,18 @@ <h1>Getting Started</h1>
           </mat-card-title>
           <div class="comment-container">
             Open a new terminal and run the following command to get
-            <a href="https://www.npmjs.com/package/ngx-material-password-strength" mat-button
-               color="primary">ngx-material-password-strength</a>
+            <a href="https://www.npmjs.com/package/@angular-material-extensions/password-strength" mat-button
+               color="primary">@angular-material-extensions/password-strength</a>
             from npm
           </div>
           <div fxLayout="row" fxLayoutAlign="space-between">
             <pre><code highlight
-                       [code]="'$ npm i -s ngx-material-password-strength'"></code></pre>
+                       [code]="'$ npm i -s @angular-material-extensions/password-strength'"></code></pre>
             <button mat-icon-button
                     ngxClipboard
-                    [cbContent]="'npm i -s ngx-material-password-strength'"
+                    [cbContent]="'npm i -s @angular-material-extensions/password-strength'"
                     matTooltip="copy"
-                    (click)="showCopyMessage('npm i -s ngx-material-password-strength')">
+                    (click)="showCopyMessage('npm i -s @angular-material-extensions/password-strength')">
               <mat-icon aria-label="copy content" class="mat-18">content_copy</mat-icon>
             </button>
           </div>
@@ -432,7 +432,7 @@ <h1>Getting Started</h1>
             <mat-card-subtitle>
               Note:If you are using SystemJS, you should adjust your configuration to point to the UMD
               bundle. In your systemjs config file, map needs to tell the System loader where to look for
-              ngx-material-password-strength
+              @angular-material-extensions/password-strength
             </mat-card-subtitle>
             <mat-card-content>
               <div fxLayout="row" fxLayoutAlign="space-between">
@@ -453,45 +453,45 @@ <h1>Getting Started</h1>
           </div>
           <div fxLayout="row" fxLayoutAlign="space-between">
                  <pre><code highlight
-                            [code]="importNgxMaterialPasswordStrengthModule"></code></pre>
+                            [code]="importMatPasswordStrengthModule"></code></pre>
             <button mat-icon-button
                     ngxClipboard
-                    [cbContent]="importNgxMaterialPasswordStrengthModule"
+                    [cbContent]="importMatPasswordStrengthModule"
                     matTooltip="copy"
-                    (click)="showCopyMessage(importNgxMaterialPasswordStrengthModule)">
+                    (click)="showCopyMessage(importMatPasswordStrengthModule)">
               <mat-icon aria-label="copy content" class="mat-18">content_copy</mat-icon>
             </button>
           </div>
           <div class="comment-container">
             <p>The only remaining part is to list the imported module in your application module. The exact method
               will be slightly different for the root (top-level) module for which you should end up with the code
-              similar to (notice NgxMaterialPasswordStrengthModule .forRoot()):
+              similar to (notice MatPasswordStrengthModule .forRoot()):
 
               NB: please do not forget to import the angular animations module in your root component too!
               (usally app.component.ts)</p>
           </div>
           <div fxLayout="row" fxLayoutAlign="space-between">
                  <pre><code highlight
-                            [code]="importNgxMaterialPasswordStrengthModuleInAppModule"></code></pre>
+                            [code]="importMatPasswordStrengthModuleInAppModule"></code></pre>
             <button mat-icon-button
                     ngxClipboard
-                    [cbContent]="importNgxMaterialPasswordStrengthModuleInAppModule"
+                    [cbContent]="importMatPasswordStrengthModuleInAppModule"
                     matTooltip="copy"
-                    (click)="showCopyMessage(importNgxMaterialPasswordStrengthModuleInAppModule)">
+                    (click)="showCopyMessage(importMatPasswordStrengthModuleInAppModule)">
               <mat-icon aria-label="copy content" class="mat-18">content_copy</mat-icon>
             </button>
           </div>
           <div class="comment-container">
-            <p>Other modules in your application can simply import NgxMaterialPasswordStrengthModule:</p>
+            <p>Other modules in your application can simply import MatPasswordStrengthModule:</p>
           </div>
           <div fxLayout="row" fxLayoutAlign="space-between">
                  <pre><code highlight
-                            [code]="importNgxMaterialPasswordStrengthModuleInOtherModule"></code></pre>
+                            [code]="importMatPasswordStrengthModuleInOtherModule"></code></pre>
             <button mat-icon-button
                     ngxClipboard
-                    [cbContent]="importNgxMaterialPasswordStrengthModuleInOtherModule"
+                    [cbContent]="importMatPasswordStrengthModuleInOtherModule"
                     matTooltip="copy"
-                    (click)="showCopyMessage(importNgxMaterialPasswordStrengthModuleInOtherModule)">
+                    (click)="showCopyMessage(importMatPasswordStrengthModuleInOtherModule)">
               <mat-icon aria-label="copy content" class="mat-18">content_copy</mat-icon>
             </button>
           </div>
@@ -540,7 +540,7 @@ <h1>Getting Started</h1>
           </div>
 
           <mat-card fxFlex>
-            <mat-card-title>ngx-material-password-strength
+            <mat-card-title>@angular-material-extensions/password-strength
             </mat-card-title>
             <mat-card-subtitle>
               <mat-slide-toggle (change)="onSlideToggleChange($event)">Show Password</mat-slide-toggle>
@@ -579,7 +579,7 @@ <h1>Getting Started</h1>
           <img style="width: 50px; height: 50px" src="assets/icons/github.svg">
         </ngx-material-page-outlook>
         <ngx-material-page-content>
-          <mat-card-title-group><a href="https://github.com/AnthonyNahas/ngx-material-password-strength"
+          <mat-card-title-group><a href="https://github.com/AnthonyNahas/@angular-material-extensions/password-strength"
                                    target="_blank"
                                    mat-button
                                    color="primary">Clone the repo</a></mat-card-title-group>
@@ -590,12 +590,12 @@ <h1>Getting Started</h1>
           </div>
           <div fxLayout="row" fxLayoutAlign="space-between">
                  <pre><code highlight
-                            [code]="'git clone https://github.com/AnthonyNahas/ngx-material-password-strength.git'"></code></pre>
+                            [code]="'git clone https://github.com/AnthonyNahas/@angular-material-extensions/password-strength.git'"></code></pre>
             <button mat-icon-button
                     ngxClipboard
-                    [cbContent]="'git clone https://github.com/AnthonyNahas/ngx-material-password-strength.git'"
+                    [cbContent]="'git clone https://github.com/AnthonyNahas/@angular-material-extensions/password-strength.git'"
                     matTooltip="copy"
-                    (click)="showCopyMessage('git clone https://github.com/AnthonyNahas/ngx-material-password-strength.git')">
+                    (click)="showCopyMessage('git clone https://github.com/AnthonyNahas/@angular-material-extensions/password-strength.git')">
               <mat-icon aria-label="copy content" class="mat-18">content_copy</mat-icon>
             </button>
           </div>
@@ -614,7 +614,7 @@ <h1>Getting Started</h1>
             </button>
           </div>
           <div class="comment-container">
-            <p>Link ngx-material-password-strength's package</p>
+            <p>Link @angular-material-extensions/password-strength's package</p>
           </div>
           <div fxLayout="row" fxLayoutAlign="space-between">
                  <pre><code highlight
@@ -687,7 +687,7 @@ <h1>Getting Started</h1>
                  color="primary">ngx-auth-firebaseui</a>
               Since client side password validation is required by many projects, I decided to hold
               the code in an angular library! Please support this project by starring it on
-              <a href="https://github.com/AnthonyNahas/ngx-material-password-strength"
+              <a href="https://github.com/AnthonyNahas/@angular-material-extensions/password-strength"
                  target="_blank"
                  mat-button
                  color="primary">Github</a>
@@ -706,7 +706,7 @@ <h1>Getting Started</h1>
             </mat-card-subtitle>
 
             <img matCardImage height="256px" width="256px"
-                 src="https://cdn.rawgit.com/anthonynahas/ngx-material-password-strength/master/demo/src/assets/logo.svg">
+                 src="https://cdn.rawgit.com/anthonynahas/@angular-material-extensions/password-strength/master/demo/src/assets/logo.svg">
             <mat-card-content>
               <mat-nav-list>
                 <a mat-list-item *ngFor="let link of links; last as last" [href]="link.url" target="_blank">

demo/src/app/getting-started/getting-started.component.html

@@ -118,29 +118,29 @@ export class GettingStartedComponent implements OnInit {
   // 6
 
   systemJSModuleImport = `map: {
-  'ngx-material-password-strength': 'node_modules/ngx-material-password-strength/bundles/ngx-material-password-strength.umd.js',
+  '@angular-material-extensions/password-strength': 'node_modules/@angular-material-extensions/password-strength/bundles/@angular-material-extensions/password-strength.umd.js',
   }`;
 
-  importNgxMaterialPasswordStrengthModule = `import { NgxMaterialPasswordStrengthModule } from 'ngx-material-password-strength';`;
+  importMatPasswordStrengthModule = `import { MatPasswordStrengthModule } from '@angular-material-extensions/password-strength';`;
 
-  importNgxMaterialPasswordStrengthModuleInAppModule = `import { NgxMaterialPasswordStrengthModule } from 'ngx-material-password-strength';
+  importMatPasswordStrengthModuleInAppModule = `import { MatPasswordStrengthModule } from '@angular-material-extensions/password-strength';
                                               import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 
                                               @NgModule({
                                                 declarations: [AppComponent, ...],
-                                                imports: [NgxMaterialPasswordStrengthModule.forRoot(),
+                                                imports: [MatPasswordStrengthModule.forRoot(),
                                                 BrowserAnimationsModule,
                                                  ...],
                                                 bootstrap: [AppComponent]
                                               })
                                               export class AppModule {
                                               }`;
 
-  importNgxMaterialPasswordStrengthModuleInOtherModule = `import { NgxMaterialPasswordStrengthModule } from 'ngx-material-password-strength';
+  importMatPasswordStrengthModuleInOtherModule = `import { MatPasswordStrengthModule } from '@angular-material-extensions/password-strength';
 
                                                 @NgModule({
                                                   declarations: [OtherComponent, ...],
-                                                  imports: [NgxMaterialPasswordStrengthModule, ...],
+                                                  imports: [MatPasswordStrengthModule, ...],
                                                 })
                                                 export class OtherModule {
                                                 }`;

demo/src/app/getting-started/getting-started.component.ts

@@ -2,15 +2,15 @@
   <div class="container">
     <div class="row">
       <div class="col-sm-4 d-flex justify-content-center justify-content-md-end">
-        <img src="assets/logo.svg" alt="ngx-material-password-strength logo" class="logo">
+        <img src="assets/logo.svg" alt="@angular-material-extensions/password-strength logo" class="logo">
       </div>
       <div class="col-sm-8 text-center text-md-left">
-        <h1>ngx-material-password-strength</h1>
+        <h1>@angular-material-extensions/password-strength</h1>
         <p>Material password strength meter to indicate how secure is the provided password</p>
         <p>Scroll down to see it in action!</p>
         <p class="buttons">
           <a class="btn btn-outline-primary btn-lg"
-             href="https://github.com/anthonynahas/ngx-material-password-strength" target="_blank"><i
+             href="https://github.com/angular-material-extensions/password-strength" target="_blank"><i
             class="fa fa-github fa-lg"></i> Code on Github</a>
           <a class="btn btn-outline-primary btn-lg" href="doc/index.html" target="_blank"><i
             class="fa fa-book fa-lg"></i> Documentation</a>
@@ -26,7 +26,7 @@ <h1>ngx-material-password-strength</h1>
 
     <div fxLayout="column">
       <mat-toolbar>
-        ngx-material-password-strength
+        @angular-material-extensions/password-strength
         <span style="width: 100%"></span>
 
         <button mat-icon-button
@@ -77,7 +77,7 @@ <h1>ngx-material-password-strength</h1>
               </mat-hint>
             </mat-form-field>
 
-            <!--ngx-material-password-strength's main component-->
+            <!--@angular-material-extensions/password-strength's main component-->
             <mat-password-strength #passwordComponent
                                    (onStrengthChanged)="onStrengthChanged($event)"
                                    [password]="password.value">
@@ -97,7 +97,7 @@ <h1>ngx-material-password-strength</h1>
 
     <div fxLayout="column" style="margin-top: 3rem">
       <mat-toolbar>
-        ngx-material-password-strength
+        @angular-material-extensions/password-strength
         <span style="width: 100%"></span>
 
         <button mat-icon-button
@@ -157,7 +157,7 @@ <h1>ngx-material-password-strength</h1>
 
           </mat-form-field>
 
-          <!--ngx-material-password-strength's main component-->
+          <!--@angular-material-extensions/password-strength's main component-->
           <mat-password-strength #passwordComponentWithValidation
                                  (onStrengthChanged)="onStrengthChanged($event)"
                                  [password]="passwordWithValidation.value">

demo/src/app/home/home.component.html

@@ -59,7 +59,7 @@ export class HomeComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.titleService.setTitle('Home | ngx-material-password-strength');
+    this.titleService.setTitle('Home | @angular-material-extensions/password-strength');
   }
 
   onStrengthChanged(strength: number) {
@@ -74,7 +74,7 @@ export class HomeComponent implements OnInit {
 
   html1 = `<mat-card fxFlex>
       <mat-card-title>
-        ngx-material-password-strength
+        @angular-material-extensions/password-strength
       </mat-card-title>
       <mat-card-subtitle>
         stand alone password component
@@ -100,7 +100,7 @@ export class HomeComponent implements OnInit {
             </mat-hint>
           </mat-form-field>
 
-          <!--ngx-material-password-strength's main component-->
+          <!--@angular-material-extensions/password-strength's main component-->
           <mat-password-strength #passwordComponent
                                           (onStrengthChanged)="onStrengthChanged($event)"
                                           [password]="password.value">
@@ -142,7 +142,7 @@ export class HomeComponent implements OnInit {
 
           </mat-form-field>
 
-          <!--ngx-material-password-strength's main component-->
+          <!--@angular-material-extensions/password-strength's main component-->
           <mat-password-strength #passwordComponentWithValidation
                                           (onStrengthChanged)="onStrengthChanged($event)"
                                           [password]="passwordWithValidation.value">

demo/src/app/home/home.component.ts

@@ -1,6 +1,6 @@
 <footer class="bd-footer text-muted">
 	<div class="container">
 		<p> Coded with <i class="fa fa-heart heart"></i> by <a href="https://github.com/anthonynahas" target="_blank">anthonynahas</a>.</p>
-		<p> Code licensed under <a href="https://raw.githubusercontent.com/anthonynahas/ngx-material-password-strength/master/LICENSE" target="_blank">MIT license conditions.</a></p>
+		<p> Code licensed under <a href="https://raw.githubusercontent.com/anthonynahas/@angular-material-extensions/password-strength/master/LICENSE" target="_blank">MIT license conditions.</a></p>
 	</div>
-</footer>
+</footer>