adding spinner when redirected back after hello login

adding empty dashboard view.

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

@@ -3,16 +3,24 @@
     <h1 class="az-logo">fasten</h1>
     <div class="az-signin-header">
       <h2>{{showExternalIdP ? "Welcome!" : "Welcome back!"}}</h2>
-      <h4>Please sign in to continue</h4>
+      <h4 *ngIf="!loading">Please sign in to continue</h4>
 
       <form *ngIf="showExternalIdP">
-        <div class="pt-4 pb-3">
+        <div class="pt-4 pb-3" *ngIf="!loading else isLoadingTemplate">
           <p class="pb-3">You can use the button below to create an account or signin to your existing Fasten account.</p>
           <div class="hello-container">
             <button (click)="idpConnectHello($event)" class="hello-btn"></button>
             <button class="hello-about"></button>
           </div>
         </div>
+        <ng-template #isLoadingTemplate>
+          <div class="text-center">
+            <p class="pb-3">Please wait, connecting account...</p>
+            <div class="spinner-border" role="status">
+              <span class="sr-only">Loading...</span>
+            </div>
+          </div>
+        </ng-template>
       </form>
 
       <form  *ngIf="!showExternalIdP" (ngSubmit)="signinSubmit()" #userForm="ngForm">

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

@@ -19,6 +19,8 @@ export class AuthSigninComponent implements OnInit {
   errorMsg: string = ""
   showExternalIdP: boolean = environment.is_cloud
 
+  loading: boolean = false
+
   constructor(
     private fastenDb: FastenDbService,
     private authService: AuthService,
@@ -32,6 +34,7 @@ export class AuthSigninComponent implements OnInit {
 
     let idpType = this.route.snapshot.paramMap.get('idp_type')
     if(idpType){
+      this.loading = true
       let params = new URLSearchParams(window.location.hash.substring(1))
       let code = params.get('code') // eyJhbGciOiJSUzI1...rest_of_ID_Token
       let state = params.get('state') // eyJhbGciOiJSUzI1...rest_of_ID_Token

frontend/src/app/pages/dashboard/dashboard.component.html

@@ -135,7 +135,7 @@
           </div>
         </div>
         <div class="card-body">
-          <div class="table-responsive">
+          <div *ngIf="!sources else emptyDashboard" class="table-responsive">
             <table class="table mg-b-0">
               <tbody>
               <tr *ngFor="let source of sources" (click)="selectSource(source)" class="alert cursor-pointer" role="alert">
@@ -159,14 +159,25 @@
                 <td class="align-middle"><p><small class="tx-gray-600">expires:</small><br/> <span [ngbTooltip]="source.expires_at | amFromUnix | date">{{source.expires_at | amFromUnix | amTimeAgo}}</span></p></td>
                 <td class="align-middle"><p><i class="fas fa-chevron-right"></i></td>
               </tr>
-
               </tbody>
             </table>
-
-
-
-
           </div><!-- table-responsive -->
+
+          <ng-template #emptyDashboard>
+            <div class="modal-body tx-center pd-y-20 pd-x-20">
+              <h4 class="tx-purple mg-b-20">No Sources Connected!</h4>
+              <p class="mg-b-20 mg-x-20">
+                Fasten securely connects your healthcare providers together, creating a single location to access your entire medical history.
+              </p>
+              <p class="mg-b-20 mg-x-20">
+                Click below to add a new healthcare provider to Fasten.
+              </p>
+              <button [routerLink]="'/sources'" type="button" class="btn btn-purple pd-x-25">Add Source</button>
+            </div><!-- modal-body -->
+          </ng-template>
+
+
+
         </div>
       </div>
     </div><!-- az-content-body -->