print error messages during login/signup.

frontend/src/app/app.component.ts

@@ -22,20 +22,20 @@ export class AppComponent implements OnInit {
     navbarBackdrop.classList.add('az-navbar-backdrop');
     document.querySelector('body').appendChild(navbarBackdrop);
 
-    //TODO: onfirst load the header is always shown, why?
-    // seems to be related to the presence of jwt token, and/or auth-interceptor.
     //determine if we should show the header
     this.router.events.subscribe(event => this.modifyHeader(event));
   }
 
   modifyHeader(event) {
-    if(event instanceof NavigationEnd && event.url?.startsWith('/auth'))
-    {
+    if (event instanceof NavigationEnd) {
+      if (event.url?.startsWith('/auth')) {
         this.showHeader = false;
       } else {
+        // console.log("NU")
         this.showHeader = true;
       }
     }
   }
+}
 
 

frontend/src/app/pages/auth-signin/auth-signin.component.html

@@ -37,6 +37,9 @@
         </div><!-- form-group -->
         <button [disabled]="!userForm.form.valid" type="submit" class="btn btn-az-primary btn-block">Sign In</button>
 
+        <div *ngIf="errorMsg" class="alert alert-danger mt-3" role="alert">
+          <strong>Error</strong> {{errorMsg}}
+        </div>
       </form>
     </div><!-- az-signin-header -->
     <div class="az-signin-footer">

frontend/src/app/pages/auth-signin/auth-signin.component.ts

@@ -11,6 +11,7 @@ import {Router} from '@angular/router';
 export class AuthSigninComponent implements OnInit {
   submitted: boolean = false
   existingUser: User = new User()
+  errorMsg: string = ""
 
   constructor(private fastenApi: FastenApiService,  private router: Router) { }
 
@@ -22,8 +23,9 @@ export class AuthSigninComponent implements OnInit {
 
     this.fastenApi.signin(this.existingUser.username, this.existingUser.password).subscribe((tokenResp: any) => {
       console.log(tokenResp);
-
       this.router.navigateByUrl('/dashboard');
+    }, (err)=>{
+      this.errorMsg = err?.error?.error || "an unknown error occurred during sign-in"
     })
   }
 }

frontend/src/app/pages/auth-signup/auth-signup.component.html

@@ -64,6 +64,10 @@
           </div>
         </div><!-- form-group -->
         <button [disabled]="!userForm.form.valid" type="submit" class="btn btn-az-primary btn-block">Create Account</button>
+
+        <div *ngIf="errorMsg" class="alert alert-danger mt-3" role="alert">
+          <strong>Error</strong> {{errorMsg}}
+        </div>
       </form>
     </div><!-- az-signup-header -->
     <div class="az-signup-footer">

frontend/src/app/pages/auth-signup/auth-signup.component.ts

@@ -12,6 +12,7 @@ import {Router} from '@angular/router';
 export class AuthSignupComponent implements OnInit {
   submitted: boolean = false
   newUser: User = new User()
+  errorMsg: string = ""
 
   constructor(private fastenApi: FastenApiService, private router: Router) { }
 
@@ -25,6 +26,9 @@ export class AuthSignupComponent implements OnInit {
         console.log(tokenResp);
 
         this.router.navigateByUrl('/dashboard');
+      },
+      (err)=>{
+      this.errorMsg = err?.error?.error || "an unknown error occurred during sign-up"
     })
   }
 

frontend/src/app/services/fasten-api.service.ts

@@ -42,8 +42,13 @@ export class FastenApiService {
   signup(newUser: User): Observable<any> {
     return this._httpClient.post<any>(`${this.getBasePath()}/api/auth/signup`, newUser).pipe(
       map((res: any) => {
+        if(res.success){
           localStorage.setItem(this.AUTH_TOKEN_KEY, res.data);
           return res.data
+        } else {
+          throw new Error(res.error)
+        }
+
       }
     ));
   }
@@ -58,8 +63,12 @@ export class FastenApiService {
 
     return this._httpClient.post<any>(`${this.getBasePath()}/api/auth/signin`, data).pipe(
       map((res: any) => {
+        if(res.success){
           localStorage.setItem(this.AUTH_TOKEN_KEY, res.data);
           return res.data
+        } else {
+          throw new Error(res.error)
+        }
       }
     ));
   }