display errors when updating user pwd does not work

Author: kflemin

src/@seed/api/user/user.service.ts

@@ -2,7 +2,7 @@ import type { HttpErrorResponse } from '@angular/common/http'
 import { HttpClient } from '@angular/common/http'
 import { inject, Injectable } from '@angular/core'
 import type { Observable } from 'rxjs'
-import { catchError, distinctUntilChanged, ReplaySubject, switchMap, take, tap } from 'rxjs'
+import { catchError, distinctUntilChanged, ReplaySubject, switchMap, take, tap, throwError } from 'rxjs'
 import type {
   CurrentUser,
   GenerateApiKeyResponse,
@@ -78,7 +78,9 @@ export class UserService {
       tap(() => {
         this.getCurrentUser().subscribe()
       }),
-      // todo: how do I catch errors?
+      catchError((error: HttpErrorResponse) => {
+        return throwError(() => error)
+      }),
     )
   }
 

src/app/core/auth/auth.interceptor.ts

@@ -32,8 +32,8 @@ export const authInterceptor = (req: HttpRequest<unknown>, next: HttpHandlerFn):
         })
 
         return next(newReq).pipe(
-          catchError(() => {
-            return throwError(() => new Error(`Failed request ${req.method} ${req.url}`))
+          catchError((error: HttpErrorResponse) => {
+            return throwError(() => error)
           }),
         )
       } else {

src/app/modules/profile/security/security.component.html

@@ -7,28 +7,15 @@ <h1 class="mb-6 flex items-center text-center text-2xl"><mat-icon class="mr-2" s
         <mat-form-field class="gt-xs:pr-3 flex-auto">
           <mat-label>{{ t('Current Password') }} </mat-label>
           <input [formControlName]="'currentPassword'" type="password" matInput [type]="hide() ? 'password' : 'text'" />
-          <button
-            mat-icon-button
-            matSuffix
-            (click)="clickEvent($event)"
-            [attr.aria-label]="'Hide password'"
-            [attr.aria-pressed]="hide()"
-          >
+          <button mat-icon-button matSuffix (click)="clickEvent($event)" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide()">
             <mat-icon class="icon-size-5" [svgIcon]="hide() ? 'fa-solid:eye-slash' : 'fa-solid:eye'"></mat-icon>
           </button>
         </mat-form-field>
 
-
         <mat-form-field class="gt-xs:pl-3 mb-6 flex-auto">
           <mat-label>{{ t('New Password') }}</mat-label>
           <input [formControlName]="'newPassword'" type="password" matInput [type]="hide() ? 'password' : 'text'" />
-          <button
-            mat-icon-button
-            matSuffix
-            (click)="clickEvent($event)"
-            [attr.aria-label]="'Hide password'"
-            [attr.aria-pressed]="hide()"
-          >
+          <button mat-icon-button matSuffix (click)="clickEvent($event)" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide()">
             <mat-icon class="icon-size-5" [svgIcon]="hide() ? 'fa-solid:eye-slash' : 'fa-solid:eye'"></mat-icon>
           </button>
           <mat-hint>{{
@@ -45,13 +32,7 @@ <h1 class="mb-6 flex items-center text-center text-2xl"><mat-icon class="mr-2" s
         <mat-form-field class="flex-auto">
           <mat-label>{{ t('Confirm New Password') }}</mat-label>
           <input [formControlName]="'confirmNewPassword'" type="password" matInput [type]="hide() ? 'password' : 'text'" />
-          <button
-            mat-icon-button
-            matSuffix
-            (click)="clickEvent($event)"
-            [attr.aria-label]="'Hide password'"
-            [attr.aria-pressed]="hide()"
-          >
+          <button mat-icon-button matSuffix (click)="clickEvent($event)" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide()">
             <mat-icon class="icon-size-5" [svgIcon]="hide() ? 'fa-solid:eye-slash' : 'fa-solid:eye'"></mat-icon>
           </button>
           <!-- this isn't working reliably -->

src/app/modules/profile/security/security.component.ts

@@ -16,7 +16,7 @@ import { SharedImports } from '@seed/directives'
   selector: 'seed-profile-security',
   templateUrl: './security.component.html',
   encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
+  changeDetection: ChangeDetectionStrategy.Default,
   imports: [
     AlertComponent,
     MatIconModule,
@@ -70,19 +70,18 @@ export class ProfileSecurityComponent implements OnInit, OnDestroy {
   onSubmit() {
     // Handle form submission
     if (this.passwordForm.valid) {
-      console.log('VALID')
       const passwordData = {
         current_password: this.passwordForm.value.currentPassword,
         password_1: this.passwordForm.value.newPassword,
         password_2: this.passwordForm.value.confirmNewPassword,
       } as PasswordUpdateRequest
 
       this._userService.updatePassword(passwordData).subscribe({
-        error: (error) => {
-          console.error('Error:', error)
+        error: (error: { error?: { message?: string } }) => {
+          const error_msg = error.error?.message || 'An unknown error occurred.'
           this.alert = {
             type: 'error',
-            message: 'Update User Unsuccessful...',
+            message: `Error Updating Password: ${error_msg}`,
           }
           this.showAlert = true
         },
@@ -94,9 +93,6 @@ export class ProfileSecurityComponent implements OnInit, OnDestroy {
           this.showAlert = true
         },
       })
-    } else {
-      console.log('NOT VALID')
-      // TODO: handle
     }
   }