From cb431a95ffd1fba35a2b843d9cfb97f94465b88b Mon Sep 17 00:00:00 2001
From: Jason Kulatunga <jason@thesparktree.com>
Date: Tue, 27 Sep 2022 17:57:36 -0700
Subject: [PATCH] print error messages during login/signup.

---
 frontend/src/app/app.component.ts               | 14 +++++++-------
 .../auth-signin/auth-signin.component.html      |  3 +++
 .../pages/auth-signin/auth-signin.component.ts  |  4 +++-
 .../auth-signup/auth-signup.component.html      |  4 ++++
 .../pages/auth-signup/auth-signup.component.ts  |  6 +++++-
 frontend/src/app/services/fasten-api.service.ts | 17 +++++++++++++----
 6 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
index af5d173c..8bd2ebcb 100644
--- a/frontend/src/app/app.component.ts
+++ b/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;
+      }
     }
   }
 }
diff --git a/frontend/src/app/pages/auth-signin/auth-signin.component.html b/frontend/src/app/pages/auth-signin/auth-signin.component.html
index 16ad98db..7d2f02de 100644
--- a/frontend/src/app/pages/auth-signin/auth-signin.component.html
+++ b/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">
diff --git a/frontend/src/app/pages/auth-signin/auth-signin.component.ts b/frontend/src/app/pages/auth-signin/auth-signin.component.ts
index f51a4b30..8384d6f8 100644
--- a/frontend/src/app/pages/auth-signin/auth-signin.component.ts
+++ b/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"
     })
   }
 }
diff --git a/frontend/src/app/pages/auth-signup/auth-signup.component.html b/frontend/src/app/pages/auth-signup/auth-signup.component.html
index 658427a1..235c9c76 100644
--- a/frontend/src/app/pages/auth-signup/auth-signup.component.html
+++ b/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">
diff --git a/frontend/src/app/pages/auth-signup/auth-signup.component.ts b/frontend/src/app/pages/auth-signup/auth-signup.component.ts
index 0ec3a2c1..b5b76f46 100644
--- a/frontend/src/app/pages/auth-signup/auth-signup.component.ts
+++ b/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"
+    })
   }
 
 }
diff --git a/frontend/src/app/services/fasten-api.service.ts b/frontend/src/app/services/fasten-api.service.ts
index 3bcfc832..33a312d6 100644
--- a/frontend/src/app/services/fasten-api.service.ts
+++ b/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)
+        }
       }
     ));
   }