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 1/4] 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;
             }

From 4c6ef29e2020c92e4e995ba2779f12076a356a59 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Tue, 28 Nov 2017 10:48:52 +0300
Subject: [PATCH 2/4] Fixed: Behavior Subject must be array

---
 src/app/main/content/apps/contacts/contacts.service.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/main/content/apps/contacts/contacts.service.ts b/src/app/main/content/apps/contacts/contacts.service.ts
index 4c96bed4..aa1ff0c2 100644
--- a/src/app/main/content/apps/contacts/contacts.service.ts
+++ b/src/app/main/content/apps/contacts/contacts.service.ts
@@ -10,7 +10,7 @@ import { Subject } from 'rxjs/Subject';
 @Injectable()
 export class ContactsService implements Resolve<any>
 {
-    onContactsChanged: BehaviorSubject<any> = new BehaviorSubject({});
+    onContactsChanged: BehaviorSubject<any> = new BehaviorSubject([]);
     onSelectedContactsChanged: BehaviorSubject<any> = new BehaviorSubject([]);
     onUserDataChanged: BehaviorSubject<any> = new BehaviorSubject([]);
     onSearchTextChanged: Subject<any> = new Subject();

From ad21d9fed56f2d0d1974ebd4d6aa5295763deaa2 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Thu, 30 Nov 2017 10:21:22 +0300
Subject: [PATCH 3/4] Further improvements to Auth pages

---
 .../forgot-password-2.component.html          |  3 +-
 .../forgot-password-2.component.ts            |  1 -
 .../forgot-password.component.html            |  3 +-
 .../authentication/lock/lock.component.ts     |  1 -
 .../login-2/login-2.component.html            |  5 +--
 .../login-2/login-2.component.ts              |  1 -
 .../authentication/login/login.component.html |  2 +-
 .../authentication/login/login.component.ts   |  1 -
 .../mail-confirm/mail-confirm.component.ts    |  3 +-
 .../register-2/register-2.component.html      |  5 +--
 .../register-2/register-2.component.ts        |  2 --
 .../register/register.component.html          |  2 +-
 .../register/register.component.ts            |  1 -
 .../reset-password-2.component.html           | 10 ++++--
 .../reset-password-2.component.ts             | 33 +++++++++++++++++--
 .../reset-password.component.html             |  7 ++--
 .../reset-password.component.ts               | 33 +++++++++++++++++--
 17 files changed, 85 insertions(+), 28 deletions(-)

diff --git a/src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.component.html b/src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.component.html
index 70d797b6..668cac38 100644
--- a/src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.component.html
+++ b/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">
 
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 6a26dd6c..b934433a 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
@@ -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';
diff --git a/src/app/main/content/pages/authentication/forgot-password/forgot-password.component.html b/src/app/main/content/pages/authentication/forgot-password/forgot-password.component.html
index 65694575..5fdedb29 100644
--- a/src/app/main/content/pages/authentication/forgot-password/forgot-password.component.html
+++ b/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">
 
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 6132336f..22e18a08 100644
--- a/src/app/main/content/pages/authentication/lock/lock.component.ts
+++ b/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';
diff --git a/src/app/main/content/pages/authentication/login-2/login-2.component.html b/src/app/main/content/pages/authentication/login-2/login-2.component.html
index 435581f4..68377365 100644
--- a/src/app/main/content/pages/authentication/login-2/login-2.component.html
+++ b/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>
diff --git a/src/app/main/content/pages/authentication/login-2/login-2.component.ts b/src/app/main/content/pages/authentication/login-2/login-2.component.ts
index f74ba611..c0637711 100644
--- a/src/app/main/content/pages/authentication/login-2/login-2.component.ts
+++ b/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';
diff --git a/src/app/main/content/pages/authentication/login/login.component.html b/src/app/main/content/pages/authentication/login/login.component.html
index d47e9e6e..b94ddc49 100644
--- a/src/app/main/content/pages/authentication/login/login.component.html
+++ b/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>
diff --git a/src/app/main/content/pages/authentication/login/login.component.ts b/src/app/main/content/pages/authentication/login/login.component.ts
index c8f4f4a4..0d052fb9 100644
--- a/src/app/main/content/pages/authentication/login/login.component.ts
+++ b/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';
diff --git a/src/app/main/content/pages/authentication/mail-confirm/mail-confirm.component.ts b/src/app/main/content/pages/authentication/mail-confirm/mail-confirm.component.ts
index 91fef411..b0c357f2 100644
--- a/src/app/main/content/pages/authentication/mail-confirm/mail-confirm.component.ts
+++ b/src/app/main/content/pages/authentication/mail-confirm/mail-confirm.component.ts
@@ -1,5 +1,4 @@
-import { Component} from '@angular/core';
-
+import { Component } from '@angular/core';
 import { FuseConfigService } from '../../../../../core/services/config.service';
 import { fuseAnimations } from '../../../../../core/animations';
 
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 eacb649d..82331d80 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
@@ -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>
 
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 f4923bd6..441bcae2 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,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 )
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 4ac04c61..12c92522 100644
--- a/src/app/main/content/pages/authentication/register/register.component.html
+++ b/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>
 
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 1aa85da0..e1df0c37 100644
--- a/src/app/main/content/pages/authentication/register/register.component.ts
+++ b/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';
diff --git a/src/app/main/content/pages/authentication/reset-password-2/reset-password-2.component.html b/src/app/main/content/pages/authentication/reset-password-2/reset-password-2.component.html
index 4ad45524..e5017346 100644
--- a/src/app/main/content/pages/authentication/reset-password-2/reset-password-2.component.html
+++ b/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"
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 e433bdfa..29cf69f6 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
@@ -1,6 +1,5 @@
 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';
 
@@ -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
+        };
+    }
+}
diff --git a/src/app/main/content/pages/authentication/reset-password/reset-password.component.html b/src/app/main/content/pages/authentication/reset-password/reset-password.component.html
index 0bb702e3..190b9a5e 100644
--- a/src/app/main/content/pages/authentication/reset-password/reset-password.component.html
+++ b/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"
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 53069d27..f068e1a9 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
@@ -1,6 +1,5 @@
 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';
 
@@ -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
+        };
+    }
+}

From 2bbc90af64866f0c08106a0de04fea6fe8efdcad Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Thu, 30 Nov 2017 10:22:18 +0300
Subject: [PATCH 4/4] Perfect scrollbar shouldn't be destroyed if it's not
 available + Print media css classes updated to hide the perfect scrollbars

---
 .../fuse-perfect-scrollbar.directive.ts                       | 2 +-
 src/app/core/scss/partials/_print.scss                        | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/core/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts b/src/app/core/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts
index 4979c2a4..0f882493 100644
--- a/src/app/core/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts
+++ b/src/app/core/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts
@@ -54,7 +54,7 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
 
     ngOnDestroy()
     {
-        if ( !this.isInitialized )
+        if ( !this.isInitialized || !this.ps )
         {
             return;
         }
diff --git a/src/app/core/scss/partials/_print.scss b/src/app/core/scss/partials/_print.scss
index e4c7971a..4e81f02c 100644
--- a/src/app/core/scss/partials/_print.scss
+++ b/src/app/core/scss/partials/_print.scss
@@ -42,8 +42,8 @@
         fuse-footer,
         fuse-quick-panel,
         fuse-theme-options,
-        .ps > .ps__scrollbar-x-rail,
-        .ps > .ps__scrollbar-y-rail {
+        .ps > .ps__rail-x,
+        .ps > .ps__rail-y {
             display: none !important;
         }