adding spinner when redirected back after hello login

adding empty dashboard view.
This commit is contained in:
Jason Kulatunga 2022-11-04 21:37:55 -07:00
parent bcb3f58d6e
commit 1cb848d724
3 changed files with 30 additions and 8 deletions

View File

@ -3,16 +3,24 @@
<h1 class="az-logo">fasten</h1> <h1 class="az-logo">fasten</h1>
<div class="az-signin-header"> <div class="az-signin-header">
<h2>{{showExternalIdP ? "Welcome!" : "Welcome back!"}}</h2> <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"> <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> <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"> <div class="hello-container">
<button (click)="idpConnectHello($event)" class="hello-btn"></button> <button (click)="idpConnectHello($event)" class="hello-btn"></button>
<button class="hello-about"></button> <button class="hello-about"></button>
</div> </div>
</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>
<form *ngIf="!showExternalIdP" (ngSubmit)="signinSubmit()" #userForm="ngForm"> <form *ngIf="!showExternalIdP" (ngSubmit)="signinSubmit()" #userForm="ngForm">

View File

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

View File

@ -135,7 +135,7 @@
</div> </div>
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="table-responsive"> <div *ngIf="!sources else emptyDashboard" class="table-responsive">
<table class="table mg-b-0"> <table class="table mg-b-0">
<tbody> <tbody>
<tr *ngFor="let source of sources" (click)="selectSource(source)" class="alert cursor-pointer" role="alert"> <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><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> <td class="align-middle"><p><i class="fas fa-chevron-right"></i></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div><!-- table-responsive --> </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> </div>
</div><!-- az-content-body --> </div><!-- az-content-body -->