Making password change erroring more friendly
If you leave the form but the 2 password is different a big red boxappears to warn you (no need to click on the button).The submit buttonis desactivated if the 2 password isn't the same.
This commit is contained in:
parent
c75937d04f
commit
a94419a604
|
@ -6,6 +6,7 @@
|
|||
<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'] }}
|
||||
|
@ -13,8 +14,8 @@
|
|||
|
||||
<input
|
||||
type="password" id="new-confirmed-password" i18n-placeholder placeholder="Confirm new password"
|
||||
formControlName="new-confirmed-password"
|
||||
formControlName="new-confirmed-password" (change)="validateNewPassword()" (blur)="printAnError()"
|
||||
>
|
||||
|
||||
<input type="submit" i18n-value value="Change password" [disabled]="!form.valid">
|
||||
<input type="submit" i18n-value value="Change password" [disabled]="!form.valid || unsendable">
|
||||
</form>
|
||||
|
|
|
@ -12,6 +12,7 @@ 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,
|
||||
|
@ -30,18 +31,31 @@ export class MyAccountChangePasswordComponent extends FormReactive implements On
|
|||
})
|
||||
}
|
||||
|
||||
changePassword () {
|
||||
const newPassword = this.form.value['new-password']
|
||||
const newConfirmedPassword = this.form.value['new-confirmed-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
|
||||
}
|
||||
|
||||
this.error = null
|
||||
|
||||
if (newPassword !== newConfirmedPassword) {
|
||||
printAnError () {
|
||||
console.log(this.unsendable)
|
||||
this.validateNewPassword()
|
||||
if (this.unsendable) {
|
||||
this.error = this.i18n('The new password and the confirmed password do not correspond.')
|
||||
}
|
||||
}
|
||||
|
||||
changePassword () {
|
||||
if (this.unsendable) {
|
||||
return
|
||||
}
|
||||
|
||||
this.userService.changePassword(newPassword).subscribe(
|
||||
this.userService.changePassword(this.form.value['new-password']).subscribe(
|
||||
() => this.notificationsService.success(this.i18n('Success'), this.i18n('Password updated.')),
|
||||
|
||||
err => this.error = err.message
|
||||
|
|
Loading…
Reference in New Issue