Email & Password confirmation fields

2023-11-21 14:56:32 -08:00 · 2023-11-21 14:56:32 -08:00 · 5d4ef6f958
commit 5d4ef6f958
parent 356394dcd8
5 changed files with 203 additions and 18 deletions
--- a/src-ui/src/app/components/common/input/password/password.component.html
+++ b/src-ui/src/app/components/common/input/password/password.component.html
@ -1,6 +1,6 @@
 <div class="mb-3">
  <label class="form-label" [for]="inputId">{{title}}</label>
-  <input #inputField type="password" class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)">
+  <input #inputField type="password" class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [disabled]="disabled">
  <small *ngIf="hint" class="form-text text-muted" [innerHTML]="hint | safeHtml"></small>
  <div class="invalid-feedback">
    {{error}}
--- a/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html
+++ b/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.html
@ -5,13 +5,31 @@
      </button>
    </div>
    <div class="modal-body">
-        <pngx-input-text i18n-title title="Email" formControlName="email" [error]="error?.email"></pngx-input-text>
-        <pngx-input-password i18n-title title="Password" formControlName="password" [error]="error?.password"></pngx-input-password>
+        <pngx-input-text i18n-title title="Email" formControlName="email" (keyup)="onEmailKeyUp($event)" [error]="error?.email"></pngx-input-text>
+        <div ngbAccordion>
+          <div ngbAccordionItem="first" [collapsed]="!showEmailConfirm" class="border-0 bg-transparent">
+            <div ngbAccordionCollapse>
+              <div ngbAccordionBody class="p-0 pb-3">
+                <pngx-input-text i18n-title title="Confirm Email" formControlName="email_confirm" (keyup)="onEmailConfirmKeyUp($event)" [error]="error?.email_confirm"></pngx-input-text>
+              </div>
+            </div>
+          </div>
+        </div>
+        <pngx-input-password i18n-title title="Password" formControlName="password" (keyup)="onPasswordKeyUp($event)" [error]="error?.password"></pngx-input-password>
+        <div ngbAccordion>
+          <div ngbAccordionItem="first" [collapsed]="!showPasswordConfirm" class="border-0 bg-transparent">
+            <div ngbAccordionCollapse>
+              <div ngbAccordionBody class="p-0 pb-3">
+                <pngx-input-password i18n-title title="Confirm Password" formControlName="password_confirm" (keyup)="onPasswordConfirmKeyUp($event)" [error]="error?.password_confirm"></pngx-input-password>
+              </div>
+            </div>
+          </div>
+        </div>
        <pngx-input-text i18n-title title="First name" formControlName="first_name" [error]="error?.first_name"></pngx-input-text>
        <pngx-input-text i18n-title title="Last name" formControlName="last_name" [error]="error?.first_name"></pngx-input-text>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-outline-secondary" (click)="cancel()" i18n [disabled]="networkActive">Cancel</button>
-      <button type="submit" class="btn btn-primary" i18n [disabled]="networkActive">Save</button>
+      <button type="submit" class="btn btn-primary" i18n [disabled]="networkActive || saveDisabled">Save</button>
    </div>
  </form>
--- a/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.scss
+++ b/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.scss
@ -0,0 +1,5 @@
+::ng-deep {
+    .accordion-body .mb-3 {
+        margin: 0 !important; // hack-ish, for animation
+    }
+}
--- a/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.spec.ts
+++ b/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.spec.ts
@ -4,6 +4,7 @@ import { ProfileEditDialogComponent } from './profile-edit-dialog.component'
 import { ProfileService } from 'src/app/services/profile.service'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import {
+  NgbAccordionModule,
  NgbActiveModal,
  NgbModal,
  NgbModalModule,
@ -14,6 +15,7 @@ import { TextComponent } from '../input/text/text.component'
 import { PasswordComponent } from '../input/password/password.component'
 import { of, throwError } from 'rxjs'
 import { ToastService } from 'src/app/services/toast.service'
+import { By } from '@angular/platform-browser'

 const profile = {
  email: 'foo@bar.com',
@ -41,6 +43,7 @@ describe('ProfileEditDialogComponent', () => {
        ReactiveFormsModule,
        FormsModule,
        NgbModalModule,
+        NgbAccordionModule,
      ],
    })
    profileService = TestBed.inject(ProfileService)
@ -86,4 +89,66 @@ describe('ProfileEditDialogComponent', () => {
    component.cancel()
    expect(closeSpy).toHaveBeenCalled()
  })
+
+  it('should show additional confirmation field when email changes, warn with error & disable save', () => {
+    expect(component.form.get('email_confirm').enabled).toBeFalsy()
+    const getSpy = jest.spyOn(profileService, 'get')
+    getSpy.mockReturnValue(of(profile))
+    component.ngOnInit()
+    component.form.get('email').patchValue('foo@bar2.com')
+    component.onEmailKeyUp({ target: { value: 'foo@bar2.com' } } as any)
+    fixture.detectChanges()
+    expect(component.form.get('email_confirm').enabled).toBeTruthy()
+    expect(fixture.debugElement.nativeElement.textContent).toContain(
+      'Emails must match'
+    )
+    expect(component.saveDisabled).toBeTruthy()
+
+    component.form.get('email_confirm').patchValue('foo@bar2.com')
+    component.onEmailConfirmKeyUp({ target: { value: 'foo@bar2.com' } } as any)
+    fixture.detectChanges()
+    expect(fixture.debugElement.nativeElement.textContent).not.toContain(
+      'Emails must match'
+    )
+    expect(component.saveDisabled).toBeFalsy()
+
+    component.form.get('email').patchValue(profile.email)
+    fixture.detectChanges()
+    expect(component.form.get('email_confirm').enabled).toBeFalsy()
+    expect(fixture.debugElement.nativeElement.textContent).not.toContain(
+      'Emails must match'
+    )
+    expect(component.saveDisabled).toBeFalsy()
+  })
+
+  it('should show additional confirmation field when password changes, warn with error & disable save', () => {
+    expect(component.form.get('password_confirm').enabled).toBeFalsy()
+    const getSpy = jest.spyOn(profileService, 'get')
+    getSpy.mockReturnValue(of(profile))
+    component.ngOnInit()
+    component.form.get('password').patchValue('new*pass')
+    component.onPasswordKeyUp({ target: { value: 'new*pass' } } as any)
+    fixture.detectChanges()
+    expect(component.form.get('password_confirm').enabled).toBeTruthy()
+    expect(fixture.debugElement.nativeElement.textContent).toContain(
+      'Passwords must match'
+    )
+    expect(component.saveDisabled).toBeTruthy()
+
+    component.form.get('password_confirm').patchValue('new*pass')
+    component.onPasswordConfirmKeyUp({ target: { value: 'new*pass' } } as any)
+    fixture.detectChanges()
+    expect(fixture.debugElement.nativeElement.textContent).not.toContain(
+      'Passwords must match'
+    )
+    expect(component.saveDisabled).toBeFalsy()
+
+    component.form.get('password').patchValue(profile.password)
+    fixture.detectChanges()
+    expect(component.form.get('password_confirm').enabled).toBeFalsy()
+    expect(fixture.debugElement.nativeElement.textContent).not.toContain(
+      'Passwords must match'
+    )
+    expect(component.saveDisabled).toBeFalsy()
+  })
 })
--- a/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.ts
+++ b/src-ui/src/app/components/common/profile-edit-dialog/profile-edit-dialog.component.ts
@ -1,25 +1,39 @@
-import { Component, OnInit } from '@angular/core'
+import { Component, OnDestroy, OnInit } from '@angular/core'
 import { FormControl, FormGroup } from '@angular/forms'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 import { ProfileService } from 'src/app/services/profile.service'
 import { ToastService } from 'src/app/services/toast.service'
+import { Subject, takeUntil } from 'rxjs'

@Component({
  selector: 'pngx-profile-edit-dialog',
  templateUrl: './profile-edit-dialog.component.html',
  styleUrls: ['./profile-edit-dialog.component.scss'],
 })
-export class ProfileEditDialogComponent implements OnInit {
+export class ProfileEditDialogComponent implements OnInit, OnDestroy {
  public networkActive: boolean = false
  public error: any
+  private unsubscribeNotifier: Subject<any> = new Subject()

  public form = new FormGroup({
    email: new FormControl(''),
+    email_confirm: new FormControl({ value: null, disabled: true }),
    password: new FormControl(null),
+    password_confirm: new FormControl({ value: null, disabled: true }),
    first_name: new FormControl(''),
    last_name: new FormControl(''),
  })

+  private currentPassword: string
+  private newPassword: string
+  private passwordConfirm: string
+  public showPasswordConfirm: boolean = false
+
+  private currentEmail: string
+  private newEmail: string
+  private emailConfirm: string
+  public showEmailConfirm: boolean = false
+
  constructor(
    private profileService: ProfileService,
    public activeModal: NgbActiveModal,
@ -27,22 +41,105 @@ export class ProfileEditDialogComponent implements OnInit {
  ) {}

  ngOnInit(): void {
-    this.profileService.get().subscribe((profile) => {
-      this.form.patchValue(profile)
-    })
+    this.networkActive = true
+    this.profileService
+      .get()
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe((profile) => {
+        this.networkActive = false
+        this.form.patchValue(profile)
+        this.currentEmail = profile.email
+        this.form.get('email').valueChanges.subscribe((newEmail) => {
+          this.newEmail = newEmail
+          this.onEmailChange()
+        })
+        this.currentPassword = profile.password
+        this.form.get('password').valueChanges.subscribe((newPassword) => {
+          this.newPassword = newPassword
+          this.onPasswordChange()
+        })
+      })
+  }
+
+  ngOnDestroy(): void {
+    this.unsubscribeNotifier.next(true)
+    this.unsubscribeNotifier.complete()
+  }
+
+  get saveDisabled(): boolean {
+    return this.error?.password_confirm || this.error?.email_confirm
+  }
+
+  onEmailKeyUp(event: KeyboardEvent) {
+    this.newEmail = (event.target as HTMLInputElement)?.value
+    this.onEmailChange()
+  }
+
+  onEmailConfirmKeyUp(event: KeyboardEvent) {
+    this.emailConfirm = (event.target as HTMLInputElement)?.value
+    this.onEmailChange()
+  }
+
+  onEmailChange() {
+    this.showEmailConfirm = this.currentEmail !== this.newEmail
+    if (this.showEmailConfirm) {
+      this.form.get('email_confirm').enable()
+      if (this.newEmail !== this.emailConfirm) {
+        if (!this.error) this.error = {}
+        this.error.email_confirm = $localize`Emails must match`
+      } else {
+        delete this.error?.email_confirm
+      }
+    } else {
+      this.form.get('email_confirm').disable()
+      delete this.error?.email_confirm
+    }
+  }
+
+  onPasswordKeyUp(event: KeyboardEvent) {
+    this.newPassword = (event.target as HTMLInputElement)?.value
+    this.onPasswordChange()
+  }
+
+  onPasswordConfirmKeyUp(event: KeyboardEvent) {
+    this.passwordConfirm = (event.target as HTMLInputElement)?.value
+    this.onPasswordChange()
+  }
+
+  onPasswordChange() {
+    this.showPasswordConfirm = this.currentPassword !== this.newPassword
+    console.log(this.currentPassword, this.newPassword, this.passwordConfirm)
+
+    if (this.showPasswordConfirm) {
+      this.form.get('password_confirm').enable()
+      if (this.newPassword !== this.passwordConfirm) {
+        if (!this.error) this.error = {}
+        this.error.password_confirm = $localize`Passwords must match`
+      } else {
+        delete this.error?.password_confirm
+      }
+    } else {
+      this.form.get('password_confirm').disable()
+      delete this.error?.password_confirm
+    }
  }

  save() {
    const profile = Object.assign({}, this.form.value)
-    this.profileService.update(profile).subscribe({
-      next: () => {
-        this.toastService.showInfo($localize`Profile updated successfully`)
-        this.activeModal.close()
-      },
-      error: (error) => {
-        this.toastService.showError($localize`Error saving profile`, error)
-      },
-    })
+    this.networkActive = true
+    this.profileService
+      .update(profile)
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe({
+        next: () => {
+          this.toastService.showInfo($localize`Profile updated successfully`)
+          this.activeModal.close()
+        },
+        error: (error) => {
+          this.toastService.showError($localize`Error saving profile`, error)
+          this.networkActive = false
+        },
+      })
  }

  cancel() {