feat(login): Friendly info modal when pending account approval

GeminiEnergySolutions · Aug 31, 2024 · 079fa5a · 079fa5a
1 parent 210fbce
commit 079fa5a
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 2 deletions.
diff --git a/src/app/auth/login/login.component.html b/src/app/auth/login/login.component.html
@@ -26,3 +26,19 @@ <h1>
     Don't have an account? <a routerLink="/auth/signup">Sign Up</a>
   </div>
 </div>
+
+<ng-template #pendingModal let-modal>
+  <div class="modal-header">
+    <h4 class="modal-title">Pending Admin Approval</h4>
+    <button type="button" class="btn-close" aria-label="Close" (click)="modal.dismiss()"></button>
+  </div>
+  <div class="modal-body">
+    <p>
+      Thank you for signing up with Conserve!
+      Our admin still needs to approve your account – we’ll send you an email shortly when you’re all set to log in.
+    </p>
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-primary" (click)="modal.dismiss()">OK</button>
+  </div>
+</ng-template>
diff --git a/src/app/auth/login/login.component.ts b/src/app/auth/login/login.component.ts
@@ -1,19 +1,23 @@
-import {Component} from '@angular/core';
+import {Component, TemplateRef, ViewChild} from '@angular/core';
 import {Router} from '@angular/router';
 import {AuthService} from 'src/app/shared/services/auth.service';
+import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.css']
 })
 export class LoginComponent {
+  @ViewChild('pendingModal', {static: true}) pendingModal!: TemplateRef<any>;
+
   loggingIn = false;
   email = '';
   password = '';
 
   constructor(
     private authService: AuthService,
+    private modalService: NgbModal,
     private router: Router,
   ) {
   }
@@ -28,7 +32,10 @@ export class LoginComponent {
       localStorage.setItem('accessToken', res.token);
       this.authService.currentLoginUser = res.user;
       this.router.navigate(['audits']);
-    }, () => {
+    }, err => {
+      if (err.status === 400 && err.error.message === 'Authorized still in pending') {
+        this.modalService.open(this.pendingModal);
+      }
       this.loggingIn = false;
     });
   }

diff --git a/src/app/shared/interceptor/error.interceptor.ts b/src/app/shared/interceptor/error.interceptor.ts
@@ -34,6 +34,12 @@ export class ErrorInterceptor implements HttpInterceptor {
         break;
       case 500:
         break;
+      case 400:
+        if (err.error?.message === 'Authorized still in pending') {
+          // Don't show a toast -- this error is handled by the login component
+          break;
+        }
+        // fallthrough
       default:
         this.toaster.error('Error', message);
         break;