Clean up change password validation

2 files changed, 16 insertions, 27 deletions

diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
index 913b570cb..ab6df52be 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
@@ -6,7 +6,6 @@
   <input
     type="password" id="new-password" i18n-placeholder placeholder="New password"
     formControlName="new-password" [ngClass]="{ 'input-error': formErrors['new-password'] }"
-    (change)="validateNewPassword()"  (blur)="printAnError()"
   >
   <div *ngIf="formErrors['new-password']" class="form-error">
     {{ formErrors['new-password'] }}
@@ -14,8 +13,11 @@
 
   <input
     type="password" id="new-confirmed-password" i18n-placeholder placeholder="Confirm new password"
-    formControlName="new-confirmed-password" (change)="validateNewPassword()" (blur)="printAnError()"
+    formControlName="new-confirmed-password"
   >
+  <div *ngIf="formErrors['new-confirmed-password']" class="form-error">
+    {{ formErrors['new-confirmed-password'] }}
+  </div>
 
-  <input type="submit" i18n-value value="Change password" [disabled]="!form.valid || unsendable">
+  <input type="submit" i18n-value value="Change password" [disabled]="!form.valid">
 </form>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts
index 0707d8f9a..57a706b0f 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts
@@ -4,6 +4,7 @@ import { FormReactive, UserService } from '../../../shared'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
 import { UserValidatorsService } from '@app/shared/forms/form-validators/user-validators.service'
+import { filter } from 'rxjs/operators'
 
 @Component({
   selector: 'my-account-change-password',
@@ -12,7 +13,6 @@ import { UserValidatorsService } from '@app/shared/forms/form-validators/user-va
 })
 export class MyAccountChangePasswordComponent extends FormReactive implements OnInit {
   error: string = null
-  unsendable = true // default to true to not have to not the if in change password
 
   constructor (
     protected formValidatorService: FormValidatorService,
@@ -27,36 +27,23 @@ export class MyAccountChangePasswordComponent extends FormReactive implements On
   ngOnInit () {
     this.buildForm({
       'new-password': this.userValidatorsService.USER_PASSWORD,
-      'new-confirmed-password': this.userValidatorsService.USER_PASSWORD
+      'new-confirmed-password': this.userValidatorsService.USER_CONFIRM_PASSWORD
     })
-  }
 
-  validateNewPassword () {
-    if (this.form.value['new-password'] && this.form.value['new-confirmed-password']) {
-      if (this.form.value['new-password'] === this.form.value['new-confirmed-password']) {
-        this.error = null
-        this.unsendable = false
-        return
-      }
-    }
-    this.unsendable = true
-  }
+    const confirmPasswordControl = this.form.get('new-confirmed-password')
 
-  printAnError () {
-    console.log(this.unsendable)
-    this.validateNewPassword()
-    if (this.unsendable) {
-      this.error = this.i18n('The new password and the confirmed password do not correspond.')
-    }
+    confirmPasswordControl.valueChanges
+                          .pipe(filter(v => v !== this.form.value[ 'new-password' ]))
+                          .subscribe(() => confirmPasswordControl.setErrors({ matchPassword: true }))
   }
 
   changePassword () {
-    if (this.unsendable) {
-      return
-    }
+    this.userService.changePassword(this.form.value[ 'new-password' ]).subscribe(
+      () => {
+        this.notificationsService.success(this.i18n('Success'), this.i18n('Password updated.'))
 
-    this.userService.changePassword(this.form.value['new-password']).subscribe(
-      () => this.notificationsService.success(this.i18n('Success'), this.i18n('Password updated.')),
+        this.form.reset()
+      },
 
       err => this.error = err.message
     )