Further improvements to Auth pages

src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.component.html

@@ -17,7 +17,8 @@
 
     </div>
 
-    <div id="forgot-password-form-wrapper" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',x:'100%'}}">
+    <div id="forgot-password-form-wrapper" fusePerfectScrollbar *fuseIfOnDom
+         [@animate]="{value:'*',params:{delay:'300ms',x:'100%'}}">
 
         <div id="forgot-password-form">
 

src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.component.ts

@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { FuseConfigService } from '../../../../../core/services/config.service';
 import { fuseAnimations } from '../../../../../core/animations';

src/app/main/content/pages/authentication/forgot-password/forgot-password.component.html

@@ -1,6 +1,7 @@
 <div id="forgot-password" fxLayout="column" fusePerfectScrollbar>
 
-    <div id="forgot-password-form-wrapper" fxLayout="column" fxLayoutAlign="center center" *fuseIfOnDom [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
+    <div id="forgot-password-form-wrapper" fxLayout="column" fxLayoutAlign="center center" *fuseIfOnDom
+         [@animate]="{value:'*',params:{duration:'300ms',y:'100px'}}">
 
         <div id="forgot-password-form">
 

src/app/main/content/pages/authentication/lock/lock.component.ts

@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { FuseConfigService } from '../../../../../core/services/config.service';
 import { fuseAnimations } from '../../../../../core/animations';

src/app/main/content/pages/authentication/login-2/login-2.component.html

@@ -17,7 +17,8 @@
 
     </div>
 
-    <div id="login-form-wrapper" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',x:'100%'}}">
+    <div id="login-form-wrapper" fusePerfectScrollbar *fuseIfOnDom
+         [@animate]="{value:'*',params:{delay:'300ms',x:'100%'}}">
 
         <div id="login-form">
 
@@ -41,7 +42,7 @@
                 </mat-form-field>
 
                 <mat-form-field>
-                    <input matInput placeholder="Password" formControlName="password">
+                    <input matInput type="password" placeholder="Password" formControlName="password">
                     <mat-error *ngIf="loginFormErrors.password.required">
                         Password is required
                     </mat-error>

src/app/main/content/pages/authentication/login-2/login-2.component.ts

@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { FuseConfigService } from '../../../../../core/services/config.service';
 import { fuseAnimations } from '../../../../../core/animations';

src/app/main/content/pages/authentication/login/login.component.html

@@ -23,7 +23,7 @@
                 </mat-form-field>
 
                 <mat-form-field>
-                    <input matInput placeholder="Password" formControlName="password">
+                    <input matInput type="password" placeholder="Password" formControlName="password">
                     <mat-error *ngIf="loginFormErrors.password.required">
                         Password is required
                     </mat-error>

src/app/main/content/pages/authentication/login/login.component.ts

@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { FuseConfigService } from '../../../../../core/services/config.service';
 import { fuseAnimations } from '../../../../../core/animations';

src/app/main/content/pages/authentication/mail-confirm/mail-confirm.component.ts

@@ -1,5 +1,4 @@
 import { Component } from '@angular/core';
-
 import { FuseConfigService } from '../../../../../core/services/config.service';
 import { fuseAnimations } from '../../../../../core/animations';
 

src/app/main/content/pages/authentication/register-2/register-2.component.html

@@ -17,7 +17,8 @@
 
     </div>
 
-    <div id="register-form-wrapper" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',x:'100%'}}">
+    <div id="register-form-wrapper" fusePerfectScrollbar *fuseIfOnDom
+         [@animate]="{value:'*',params:{delay:'300ms',x:'100%'}}">
 
         <div id="register-form">
 
@@ -60,7 +61,7 @@
                         Password confirmation is required
                     </mat-error>
                     <mat-error *ngIf="registerFormErrors.passwordConfirm.passwordsNotMatch">
-                        Password confirmation must match with password
+                        Passwords must match
                     </mat-error>
                 </mat-form-field>
 

src/app/main/content/pages/authentication/register-2/register-2.component.ts

@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-
 import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { FuseConfigService } from '../../../../../core/services/config.service';
 import { fuseAnimations } from '../../../../../core/animations';
@@ -73,7 +72,6 @@ export class FuseRegister2Component implements OnInit
     }
 }
 
-
 function confirmPassword(control: AbstractControl)
 {
     if ( !control.parent || !control )

src/app/main/content/pages/authentication/register/register.component.html

@@ -42,7 +42,7 @@
                         Password confirmation is required
                     </mat-error>
                     <mat-error *ngIf="registerFormErrors.passwordConfirm.passwordsNotMatch">
-                        Password confirmation must match with password
+                        Passwords must match
                     </mat-error>
                 </mat-form-field>
 

src/app/main/content/pages/authentication/register/register.component.ts

@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-
 import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { FuseConfigService } from '../../../../../core/services/config.service';
 import { fuseAnimations } from '../../../../../core/animations';

src/app/main/content/pages/authentication/reset-password-2/reset-password-2.component.html

@@ -17,7 +17,8 @@
 
     </div>
 
-    <div id="reset-password-form-wrapper" fusePerfectScrollbar *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms',x:'100%'}}">
+    <div id="reset-password-form-wrapper" fusePerfectScrollbar *fuseIfOnDom
+         [@animate]="{value:'*',params:{delay:'300ms',x:'100%'}}">
 
         <div id="reset-password-form">
 
@@ -41,17 +42,20 @@
                 </mat-form-field>
 
                 <mat-form-field>
-                    <input matInput placeholder="Password" formControlName="password">
+                    <input matInput type="password" placeholder="Password" formControlName="password">
                     <mat-error *ngIf="resetPasswordFormErrors.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="resetPasswordFormErrors.passwordConfirm.required">
                         Password confirmation is required
                     </mat-error>
+                    <mat-error *ngIf="resetPasswordFormErrors.passwordConfirm.passwordsNotMatch">
+                        Passwords must match
+                    </mat-error>
                 </mat-form-field>
 
                 <button mat-raised-button class="submit-button" color="accent"

src/app/main/content/pages/authentication/reset-password-2/reset-password-2.component.ts

@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-
+import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { FuseConfigService } from '../../../../../core/services/config.service';
 import { fuseAnimations } from '../../../../../core/animations';
 
@@ -40,7 +39,7 @@ export class FuseResetPassword2Component implements OnInit
         this.resetPasswordForm = this.formBuilder.group({
             email          : ['', [Validators.required, Validators.email]],
             password       : ['', Validators.required],
-            passwordConfirm: ['', Validators.required]
+            passwordConfirm: ['', [Validators.required, confirmPassword]]
         });
 
         this.resetPasswordForm.valueChanges.subscribe(() => {
@@ -70,3 +69,31 @@ export class FuseResetPassword2Component 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/reset-password.component.html

@@ -24,17 +24,20 @@
                 </mat-form-field>
 
                 <mat-form-field>
-                    <input matInput placeholder="Password" formControlName="password">
+                    <input matInput type="password" placeholder="Password" formControlName="password">
                     <mat-error *ngIf="resetPasswordFormErrors.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="resetPasswordFormErrors.passwordConfirm.required">
                         Password confirmation is required
                     </mat-error>
+                    <mat-error *ngIf="resetPasswordFormErrors.passwordConfirm.passwordsNotMatch">
+                        Passwords must match
+                    </mat-error>
                 </mat-form-field>
 
                 <button mat-raised-button class="submit-button" color="accent"

src/app/main/content/pages/authentication/reset-password/reset-password.component.ts

@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-
+import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { FuseConfigService } from '../../../../../core/services/config.service';
 import { fuseAnimations } from '../../../../../core/animations';
 
@@ -40,7 +39,7 @@ export class FuseResetPasswordComponent implements OnInit
         this.resetPasswordForm = this.formBuilder.group({
             email          : ['', [Validators.required, Validators.email]],
             password       : ['', Validators.required],
-            passwordConfirm: ['', Validators.required]
+            passwordConfirm: ['', [Validators.required, confirmPassword]]
         });
 
         this.resetPasswordForm.valueChanges.subscribe(() => {
@@ -70,3 +69,31 @@ export class FuseResetPasswordComponent 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
+        };
+    }
+}