forks/peertube
1
0
Fork 0
Code Releases Activity

Making password change erroring more friendly

Browse source 
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:
Jorropo 2018-09-04 16:34:01 +02:00 committed by Chocobozzz
parent c75937d04f
commit a94419a604
2 changed files with 24 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
View file

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

28
client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts
View file

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