Add Password Strength Classifier

package.json

@@ -14,11 +14,14 @@
   },
   "private": true,
   "dependencies": {
+    "@angular-material-extensions/password-strength": "^4.1.2",
     "@angular/animations": "~8.2.14",
+    "@angular/cdk": "~8.2.3",
     "@angular/common": "~8.2.14",
     "@angular/compiler": "~8.2.14",
     "@angular/core": "~8.2.14",
     "@angular/forms": "~8.2.14",
+    "@angular/material": "^8.2.3",
     "@angular/platform-browser": "~8.2.14",
     "@angular/platform-browser-dynamic": "~8.2.14",
     "@angular/router": "~8.2.14",

src/app/app.component.spec.ts

@@ -2,13 +2,20 @@ import { TestBed, async } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
 import { FormsModule } from '@angular/forms';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatPasswordStrengthModule } from '@angular-material-extensions/password-strength';
+import {MatTooltipModule} from '@angular/material/tooltip';
+
 
 describe('AppComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [
         RouterTestingModule,
-        FormsModule
+        FormsModule,
+        BrowserAnimationsModule,
+        MatPasswordStrengthModule,
+        MatTooltipModule
       ],
       declarations: [
         AppComponent

src/app/app.module.ts

@@ -20,6 +20,9 @@ import { ContributionComponent } from './components/contribution/contribution.co
 import { FilesComponent } from './components/files/files.component';
 import { FilterFolderPipe } from './shared/filter-folder.pipe';
 import { ClockComponent } from './plugins/clock/clock.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatPasswordStrengthModule } from '@angular-material-extensions/password-strength';
+import {MatTooltipModule} from '@angular/material/tooltip';
 
 @NgModule({
   declarations: [
@@ -44,7 +47,10 @@ import { ClockComponent } from './plugins/clock/clock.component';
     BrowserModule,
     AppRoutingModule,
     HttpClientModule,
-    FormsModule
+    FormsModule,
+    BrowserAnimationsModule,
+    MatPasswordStrengthModule,
+    MatTooltipModule
   ],
   providers: [AuthGuard],
   bootstrap: [AppComponent]

src/app/components/sign-up/sign-up.component.html

@@ -1,3 +1,4 @@
+<script src="https://kit.fontawesome.com/061912f229.js" crossorigin="anonymous"></script>
 <div class="container-fluid height">
   <div class="row h-100">
     <div class="col-md-3 col-sm-10 main-scr">
@@ -9,6 +10,7 @@
         <div class="welcome">
           <p>Welcome!!👋</p>
         </div>
+
         <div class="form-group">
           <label for="inputUsername"><strong>Username</strong></label>
           <input type="text" class="form-control" id="inputUsername" placeholder="Enter Username" [(ngModel)]="userName" [ngModelOptions]="{standalone: true}">
@@ -20,9 +22,37 @@
         </div>
         <div class="form-group">
           <label for="exampleInputPassword1"><strong>Password</strong></label>
-          <input type="password" class="form-control" id="exampleInputPassword1" aria-describedby="passwordHelp" placeholder="Password" [(ngModel)]="password" [ngModelOptions]="{standalone: true}" >
-          <small id="passwordHelp" class="form-text text-muted">Min 6 characters</small>
+          <input
+            id="password-field"
+            type="password"
+            [type]="hide ? 'password' : 'text'"
+            class="form-control"
+            id="exampleInputPassword1"
+            aria-describedby="passwordHelp"
+            placeholder="Password"
+            ngModel
+            #pass ='ngModel'
+            [(ngModel)]="password"
+            [ngModelOptions]="{standalone: true}"
+            matTooltip=" Must contain atleast one lower case character&#13;Must contain atleast one upper case character
+            Must contain atleast one digit character&#13;Must contain atleast one special character&#13;Must contain atleast 6 characters"
+            [matTooltipPosition]="position">
+          <div toggle="#password-field" class="mb-2" (click)="ontoggle()">
+            <i *ngIf="hide" class="fa fa-eye eye-icon" aria-hidden="true"></i>
+            <i *ngIf="!hide" class="fa fa-eye-slash eye-icon" aria-hidden="true"></i>
+          </div>
+        <mat-password-strength
+          #passwordComponent
+          [enableLowerCaseLetterRule] = true
+          [enableUpperCaseLetterRule] = "true"
+          [enableDigitRule] = "true"
+          [enableSpecialCharRule] = "true"
+          min = 6
+          (onStrengthChanged)= "onStrengthChanged($event)"
+          [password]= "password">
+        </mat-password-strength>
         </div>
+
         <div class="form-group">
           <button type="button" class="btn-grad btn-outline-dark" (click)="signUp()"><strong style="padding:10px">Sign Up</strong></button>
           <p style="font-size: 15px;">Already have an account?</p>

src/app/components/sign-up/sign-up.component.scss

@@ -6,7 +6,7 @@
 }
 
 // .back-img{
-//   background-image: linear-gradient(90deg, rgba(179,227,221,1) 0%, rgba(128,208,199,1) 20%, rgba(0,147,233,1) 40%, rgba(0,147,233,1) 60%, rgba(128,208,199,1) 80%, rgba(179,227,221,1) 100%); 
+//   background-image: linear-gradient(90deg, rgba(179,227,221,1) 0%, rgba(128,208,199,1) 20%, rgba(0,147,233,1) 40%, rgba(0,147,233,1) 60%, rgba(128,208,199,1) 80%, rgba(179,227,221,1) 100%);
 // 	background-size: 400% 400%;
 //   animation: gradient 15s ease infinite;
 
@@ -38,38 +38,38 @@
         .ani{
 
           // background: rgb(179,227,221);
-          // background: linear-gradient(90deg, rgba(179,227,221,1) 0%, rgba(128,208,199,1) 20%, rgba(0,147,233,1) 50%, rgba(128,208,199,1) 80%, rgba(179,227,221,1) 100%); 
-      
+          // background: linear-gradient(90deg, rgba(179,227,221,1) 0%, rgba(128,208,199,1) 20%, rgba(0,147,233,1) 50%, rgba(128,208,199,1) 80%, rgba(179,227,221,1) 100%);
+
           // background: rgb(179,227,221);
-          // background: linear-gradient(90deg, rgba(179,227,221,1) 0%, rgba(128,208,199,1) 0%, rgba(0,147,233,1) 50%, rgba(128,208,199,1) 100%, rgba(179,227,221,1) 100%); 
-      
+          // background: linear-gradient(90deg, rgba(179,227,221,1) 0%, rgba(128,208,199,1) 0%, rgba(0,147,233,1) 50%, rgba(128,208,199,1) 100%, rgba(179,227,221,1) 100%);
+
           // background: rgb(128,208,199);
-          // background: linear-gradient(90deg, rgba(128,208,199,1) 0%, rgba(179,227,221,1) 20%, rgba(0,147,233,1) 40%, rgba(0,147,233,1) 60%, rgba(128,208,199,1) 80%, rgba(179,227,221,1) 100%); 
-      
+          // background: linear-gradient(90deg, rgba(128,208,199,1) 0%, rgba(179,227,221,1) 20%, rgba(0,147,233,1) 40%, rgba(0,147,233,1) 60%, rgba(128,208,199,1) 80%, rgba(179,227,221,1) 100%);
+
           background: rgb(179,227,221);
-          background: linear-gradient(90deg, rgba(179,227,221,1) 0%, rgba(128,208,199,1) 20%, rgba(0,147,233,1) 40%, rgba(0,147,233,1) 60%, rgba(128,208,199,1) 80%, rgba(179,227,221,1) 100%); 
-      
-          
+          background: linear-gradient(90deg, rgba(179,227,221,1) 0%, rgba(128,208,199,1) 20%, rgba(0,147,233,1) 40%, rgba(0,147,233,1) 60%, rgba(128,208,199,1) 80%, rgba(179,227,221,1) 100%);
+
+
           // background: rgb(179,227,221);
-          // background: linear-gradient(90deg, rgba(179,227,221,1) 0%, rgba(0,171,233,1) 20%, rgba(0,147,233,1) 40%, rgba(0,147,233,1) 60%, rgba(0,171,233,1) 80%, rgba(179,227,221,1) 100%); 
-      
+          // background: linear-gradient(90deg, rgba(179,227,221,1) 0%, rgba(0,171,233,1) 20%, rgba(0,147,233,1) 40%, rgba(0,147,233,1) 60%, rgba(0,171,233,1) 80%, rgba(179,227,221,1) 100%);
+
           // background: rgb(54,188,229);
-          // background: linear-gradient(90deg, rgba(54,188,229,1) 0%, rgba(0,171,233,1) 20%, rgba(0,147,233,1) 40%, rgba(0,147,233,1) 60%, rgba(0,171,233,1) 80%, rgba(54,188,229,1) 100%); 
-      
+          // background: linear-gradient(90deg, rgba(54,188,229,1) 0%, rgba(0,171,233,1) 20%, rgba(0,147,233,1) 40%, rgba(0,147,233,1) 60%, rgba(0,171,233,1) 80%, rgba(54,188,229,1) 100%);
+
           /* Set the background size and repeat properties. */
           background-size: 200% auto;
           background-repeat: repeat;
-      
+
           /* Use the text as a mask for the background. */
           /* This will show the gradient as a text color rather than element bg. */
           -webkit-background-clip: text;
-          -webkit-text-fill-color: transparent; 
-          
-      
+          -webkit-text-fill-color: transparent;
+
+
           background-clip: text;
-        
+
           animation: shine 5s linear infinite;
-        
+
           /* Animate the text when loading the element. */
           /* This animates it on page load and when hovering out. */
           // animation: rainbow-text-simple-animation-rev 0.25s ease forwards;
@@ -100,8 +100,8 @@
           // border-radius: 10px;
           display: block;
           font-family: Poppins;
-   
-   
+
+
           // padding: 15px 30px;
           // font-size: 20px;
           font-weight: 900;
@@ -144,3 +144,25 @@
  display:none;
 }
 }
+
+@media (max-width: 600px) {
+  ::ng-deep .mat-tooltip {
+    display: block;
+
+  }
+}
+
+
+
+
+.eye-icon {
+  margin-top: -25px;
+  float: right;
+  position: relative;
+  z-index: 2;
+  cursor: pointer;
+}
+
+::ng-deep .mat-tooltip {
+  white-space: pre-line; // Allow line break
+}

src/app/components/sign-up/sign-up.component.spec.ts

@@ -5,6 +5,10 @@ import { SignUpComponent } from './sign-up.component';
 import { FormsModule } from '@angular/forms';
 import { RouterTestingModule } from '@angular/router/testing';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatPasswordStrengthModule } from '@angular-material-extensions/password-strength';
+import {MatTooltipModule} from '@angular/material/tooltip';
+
 
 describe('SignUpComponent', () => {
   let component: SignUpComponent;
@@ -13,7 +17,14 @@ describe('SignUpComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ SignUpComponent ],
-      imports: [ RouterTestingModule, FormsModule, HttpClientTestingModule ]
+      imports: [
+        RouterTestingModule,
+        FormsModule,
+        HttpClientTestingModule,
+        BrowserAnimationsModule,
+        MatPasswordStrengthModule,
+        MatTooltipModule
+      ]
     })
     .compileComponents();
   }));

src/app/components/sign-up/sign-up.component.ts

@@ -1,28 +1,59 @@
 import { Component, OnInit } from '@angular/core';
 import { AuthService } from 'src/app/services/auth.service';
+import Swal from 'sweetalert2';
+import { HostListener } from '@angular/core';
 
 @Component({
   selector: 'app-sign-up',
   templateUrl: './sign-up.component.html',
-  styleUrls: ['./sign-up.component.scss']
+  styleUrls: ['./sign-up.component.scss'],
 })
 export class SignUpComponent implements OnInit {
-
   userName = '';
   email = '';
   password = '';
+  hide = true;
+  checksPassed = false;
+  screenWidth = 0;
+  position = '';
 
-  constructor(private authService: AuthService) { }
+  constructor(private authService: AuthService) {}
 
   ngOnInit() {
+    this.getScreenSize();
   }
 
+  @HostListener('window:resize')
+  getScreenSize(): void {
+    this.screenWidth = window.innerWidth;
+    if (this.screenWidth > 600) {
+      this.position = 'right';
+    } else {
+      this.position = 'below';
+    }
+    }
+
   signUp(): any {
-    this.authService.signUpReqObj = {};
-    this.authService.signUpReqObj.email_id = this.email;
-    this.authService.signUpReqObj.password = this.password;
-    this.authService.signUpReqObj.user_name = this.userName;
-    this.authService.signUp();
+    if (this.checksPassed === true) {
+      this.authService.signUpReqObj = {};
+      this.authService.signUpReqObj.email_id = this.email;
+      this.authService.signUpReqObj.password = this.password;
+      this.authService.signUpReqObj.user_name = this.userName;
+      this.authService.signUp();
+    } else {
+      Swal.fire({ icon: 'error', text: 'Strong Password needed!' });
+    }
   }
 
+  onStrengthChanged(passStrength: number): void {
+    if (passStrength === 100) {
+      this.checksPassed = true;
+    } else {
+      this.checksPassed = false;
+    }
+  }
+
+  ontoggle(): void {
+    this.hide = !this.hide;
+  }
 }

src/index.html

@@ -18,6 +18,8 @@
   <!-- PDF Render -->
   <script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.4.456/build/pdf.min.js"></script>
   <script src="https://kit.fontawesome.com/061912f229.js" crossorigin="anonymous"></script>
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>