From a74c5108fd3b3e5eb317d42da3456d6d8ea2ef75 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Tue, 28 Nov 2017 10:42:41 +0300
Subject: [PATCH] Fixed: Couple small issues with Auth forms Added custom
 validator for Password Matching to Register forms

---
 .../forgot-password-2.component.ts            |  2 +-
 .../forgot-password.component.ts              |  2 +-
 .../authentication/lock/lock.component.ts     |  2 +-
 .../register-2/register-2.component.html      |  7 ++--
 .../register-2/register-2.component.ts        | 33 +++++++++++++++++--
 .../register/register.component.html          |  7 ++--
 .../register/register.component.ts            | 33 +++++++++++++++++--
 .../reset-password-2.component.ts             |  2 +-
 .../reset-password.component.ts               |  2 +-
 9 files changed, 76 insertions(+), 14 deletions(-)

diff --git a/src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.component.ts b/src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.component.ts
index 611dcb0d..6a26dd6c 100644
--- a/src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.component.ts
+++ b/src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.component.ts
@@ -57,7 +57,7 @@ export class FuseForgotPassword2Component implements OnInit
             this.forgotPasswordFormErrors[field] = {};
 
             // Get the control
-            const control = this.forgotPasswordFormErrors.get(field);
+            const control = this.forgotPasswordForm.get(field);
 
             if ( control && control.dirty && !control.valid )
             {
diff --git a/src/app/main/content/pages/authentication/forgot-password/forgot-password.component.ts b/src/app/main/content/pages/authentication/forgot-password/forgot-password.component.ts
index 5c060222..1ea17741 100644
--- a/src/app/main/content/pages/authentication/forgot-password/forgot-password.component.ts
+++ b/src/app/main/content/pages/authentication/forgot-password/forgot-password.component.ts
@@ -56,7 +56,7 @@ export class FuseForgotPasswordComponent implements OnInit
             this.forgotPasswordFormErrors[field] = {};
 
             // Get the control
-            const control = this.forgotPasswordFormErrors.get(field);
+            const control = this.forgotPasswordForm.get(field);
 
             if ( control && control.dirty && !control.valid )
             {
diff --git a/src/app/main/content/pages/authentication/lock/lock.component.ts b/src/app/main/content/pages/authentication/lock/lock.component.ts
index 27fc8c5d..6132336f 100644
--- a/src/app/main/content/pages/authentication/lock/lock.component.ts
+++ b/src/app/main/content/pages/authentication/lock/lock.component.ts
@@ -55,7 +55,7 @@ export class FuseLockComponent implements OnInit
     {
         for ( const field in this.lockFormErrors )
         {
-            if ( this.lockFormErrors.hasOwnProperty(field) )
+            if ( !this.lockFormErrors.hasOwnProperty(field) )
             {
                 continue;
             }
diff --git a/src/app/main/content/pages/authentication/register-2/register-2.component.html b/src/app/main/content/pages/authentication/register-2/register-2.component.html
index c3a3269f..eacb649d 100644
--- a/src/app/main/content/pages/authentication/register-2/register-2.component.html
+++ b/src/app/main/content/pages/authentication/register-2/register-2.component.html
@@ -48,17 +48,20 @@
                 </mat-form-field>
 
                 <mat-form-field>
-                    <input matInput placeholder="Password" formControlName="password">
+                    <input matInput type="password" placeholder="Password" formControlName="password">
                     <mat-error *ngIf="registerFormErrors.password.required">
                         Password is required
                     </mat-error>
                 </mat-form-field>
 
                 <mat-form-field>
-                    <input matInput placeholder="Password (Confirm)" formControlName="passwordConfirm">
+                    <input matInput type="password" placeholder="Password (Confirm)" formControlName="passwordConfirm">
                     <mat-error *ngIf="registerFormErrors.passwordConfirm.required">
                         Password confirmation is required
                     </mat-error>
+                    <mat-error *ngIf="registerFormErrors.passwordConfirm.passwordsNotMatch">
+                        Password confirmation must match with password
+                    </mat-error>
                 </mat-form-field>
 
                 <div class="terms" fxLayout="row" fxLayoutAlign="center center">
diff --git a/src/app/main/content/pages/authentication/register-2/register-2.component.ts b/src/app/main/content/pages/authentication/register-2/register-2.component.ts
index 57e6db4a..f4923bd6 100644
--- a/src/app/main/content/pages/authentication/register-2/register-2.component.ts
+++ b/src/app/main/content/pages/authentication/register-2/register-2.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { FuseConfigService } from '../../../../../core/services/config.service';
 import { fuseAnimations } from '../../../../../core/animations';
 
@@ -42,7 +42,7 @@ export class FuseRegister2Component implements OnInit
             name           : ['', Validators.required],
             email          : ['', [Validators.required, Validators.email]],
             password       : ['', Validators.required],
-            passwordConfirm: ['', Validators.required]
+            passwordConfirm: ['', [Validators.required, confirmPassword]]
         });
 
         this.registerForm.valueChanges.subscribe(() => {
@@ -72,3 +72,32 @@ export class FuseRegister2Component implements OnInit
         }
     }
 }
+
+
+function confirmPassword(control: AbstractControl)
+{
+    if ( !control.parent || !control )
+    {
+        return;
+    }
+
+    const password = control.parent.get('password');
+    const passwordConfirm = control.parent.get('passwordConfirm');
+
+    if ( !password || !passwordConfirm )
+    {
+        return;
+    }
+
+    if ( passwordConfirm.value === '' )
+    {
+        return;
+    }
+
+    if ( password.value !== passwordConfirm.value )
+    {
+        return {
+            passwordsNotMatch: true
+        };
+    }
+}
diff --git a/src/app/main/content/pages/authentication/register/register.component.html b/src/app/main/content/pages/authentication/register/register.component.html
index 32f6d0bb..4ac04c61 100644
--- a/src/app/main/content/pages/authentication/register/register.component.html
+++ b/src/app/main/content/pages/authentication/register/register.component.html
@@ -30,17 +30,20 @@
                 </mat-form-field>
 
                 <mat-form-field>
-                    <input matInput placeholder="Password" formControlName="password">
+                    <input matInput type="password" placeholder="Password" formControlName="password">
                     <mat-error *ngIf="registerFormErrors.password.required">
                         Password is required
                     </mat-error>
                 </mat-form-field>
 
                 <mat-form-field>
-                    <input matInput placeholder="Password (Confirm)" formControlName="passwordConfirm">
+                    <input matInput type="password" placeholder="Password (Confirm)" formControlName="passwordConfirm">
                     <mat-error *ngIf="registerFormErrors.passwordConfirm.required">
                         Password confirmation is required
                     </mat-error>
+                    <mat-error *ngIf="registerFormErrors.passwordConfirm.passwordsNotMatch">
+                        Password confirmation must match with password
+                    </mat-error>
                 </mat-form-field>
 
                 <div class="terms" fxLayout="row" fxLayoutAlign="center center">
diff --git a/src/app/main/content/pages/authentication/register/register.component.ts b/src/app/main/content/pages/authentication/register/register.component.ts
index 69b64353..1aa85da0 100644
--- a/src/app/main/content/pages/authentication/register/register.component.ts
+++ b/src/app/main/content/pages/authentication/register/register.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { FuseConfigService } from '../../../../../core/services/config.service';
 import { fuseAnimations } from '../../../../../core/animations';
 
@@ -38,12 +38,11 @@ export class FuseRegisterComponent implements OnInit
 
     ngOnInit()
     {
-
         this.registerForm = this.formBuilder.group({
             name           : ['', Validators.required],
             email          : ['', [Validators.required, Validators.email]],
             password       : ['', Validators.required],
-            passwordConfirm: ['', Validators.required]
+            passwordConfirm: ['', [Validators.required, confirmPassword]]
         });
 
         this.registerForm.valueChanges.subscribe(() => {
@@ -73,3 +72,31 @@ export class FuseRegisterComponent implements OnInit
         }
     }
 }
+
+function confirmPassword(control: AbstractControl)
+{
+    if ( !control.parent || !control )
+    {
+        return;
+    }
+
+    const password = control.parent.get('password');
+    const passwordConfirm = control.parent.get('passwordConfirm');
+
+    if ( !password || !passwordConfirm )
+    {
+        return;
+    }
+
+    if ( passwordConfirm.value === '' )
+    {
+        return;
+    }
+
+    if ( password.value !== passwordConfirm.value )
+    {
+        return {
+            passwordsNotMatch: true
+        };
+    }
+}
diff --git a/src/app/main/content/pages/authentication/reset-password-2/reset-password-2.component.ts b/src/app/main/content/pages/authentication/reset-password-2/reset-password-2.component.ts
index 9a9b8a62..e433bdfa 100644
--- a/src/app/main/content/pages/authentication/reset-password-2/reset-password-2.component.ts
+++ b/src/app/main/content/pages/authentication/reset-password-2/reset-password-2.component.ts
@@ -52,7 +52,7 @@ export class FuseResetPassword2Component implements OnInit
     {
         for ( const field in this.resetPasswordFormErrors )
         {
-            if ( this.resetPasswordFormErrors.hasOwnProperty(field) )
+            if ( !this.resetPasswordFormErrors.hasOwnProperty(field) )
             {
                 continue;
             }
diff --git a/src/app/main/content/pages/authentication/reset-password/reset-password.component.ts b/src/app/main/content/pages/authentication/reset-password/reset-password.component.ts
index f33643d9..53069d27 100644
--- a/src/app/main/content/pages/authentication/reset-password/reset-password.component.ts
+++ b/src/app/main/content/pages/authentication/reset-password/reset-password.component.ts
@@ -52,7 +52,7 @@ export class FuseResetPasswordComponent implements OnInit
     {
         for ( const field in this.resetPasswordFormErrors )
         {
-            if ( this.resetPasswordFormErrors.hasOwnProperty(field) )
+            if ( !this.resetPasswordFormErrors.hasOwnProperty(field) )
             {
                 continue;
             }