Fixed: Couple small issues with Auth forms

Added custom validator for Password Matching to Register forms

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 )
             {

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 )
             {

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;
             }

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">

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
+        };
+    }
+}

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">

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
+        };
+    }
+}

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;
             }

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;
             }