print error messages during login/signup.

frontend/src/app/app.component.ts

@@ -22,18 +22,18 @@ 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'))
- {
- this.showHeader = false;
- } else {
- this.showHeader = true;
+ 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 @@ <h4>Please sign in to continue</h4>
  </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 @@ <h4>Create an account, and get started.</h4>
  </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,7 +26,10 @@ 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) => {
- localStorage.setItem(this.AUTH_TOKEN_KEY, res.data);
- return res.data
+ 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) => {
- localStorage.setItem(this.AUTH_TOKEN_KEY, res.data);
- return res.data
+ if(res.success){
+ localStorage.setItem(this.AUTH_TOKEN_KEY, res.data);
+ return res.data
+ } else {
+ throw new Error(res.error)
+ }
  }
  ));
  }