update the sources page when connecting sources.

frontend/src/app/pages/medical-sources/medical-sources.component.html

@@ -5,7 +5,20 @@
       <div class="az-content-breadcrumb">
         <span>Medical Sources</span>
       </div>
-      <h2 class="az-content-title">Medical Sources</h2>
+
+      <h2 class="az-content-title">Connected Sources</h2>
+
+      <div class="row">
+        <div *ngFor="let sourceData of connectedSourceList" (click)="connect($event, sourceData['providerId'])" class="col-sm-3 mg-b-20 px-3">
+          <div class="card h-100 d-flex align-items-center justify-content-center p-3 rounded-0">
+            <div class="card-body">
+              <img [src]="'assets/sources/'+sourceData['providerId']+'.png'" alt="client" class="img-fluid">
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <h2 class="az-content-title mg-t-40">Medical Sources</h2>
 
       <div class="az-content-label mg-b-5">Hospitals & Medical Clinics</div>
       <p class="mg-b-20">The following medical insurance companies have API's which Fasten can use to retrieve your medical history.
@@ -31,11 +44,11 @@
 
       <div class="row row-sm">
 
-        <div *ngFor="let sourceData of sourceDataList" (click)="connect($event, sourceData['providerId'])" class="col-md-6 col-lg-4 d-flex align-items-stretch mg-b-20">
-          <div class="card bd">
-            <img [src]="'assets/sources/'+sourceData['providerId']+'.png'" alt="Image" class="img-fluid">
+
+        <div *ngFor="let sourceData of availableSourceList" (click)="connect($event, sourceData['providerId'])" class="col-sm-3 mg-b-20 px-3">
+          <div class="card h-100 d-flex align-items-center justify-content-center p-3 rounded-0">
             <div class="card-body">
-              <p class="card-text">{{sourceData['display']}}</p>
+              <img [src]="'assets/sources/'+sourceData['providerId']+'.png'" alt="client" class="img-fluid">
             </div>
           </div>
         </div>

frontend/src/app/pages/medical-sources/medical-sources.component.ts

@@ -26,33 +26,42 @@ export class MedicalSourcesComponent implements OnInit {
     private fastenApi: FastenApiService,
   ) { }
 
-  sourceDataList = [
-    {
-      "providerId": "aetna",
-      "display": "Aetna",
-    },
-    {
-      "providerId": "anthem",
-      "display": "Anthem",
-    },
-    {
-      "providerId": "cigna",
-      "display": "Cigna",
-    },
-    {
-      "providerId": "humana",
-      "display": "Humana",
-    },
-    {
-      "providerId": "kaiser",
-      "display": "Kaiser",
-    },
-    {
-      "providerId": "unitedhealthcare",
-      "display": "United Healthcare",
-    }
-  ]
+  sourceLookup = {
+    "aetna": {"display": "Aetna"},
+    "anthem": {"display": "Anthem"},
+    "cigna": {"display": "Cigna"},
+    "humana": {"display": "Humana"},
+    "kaiser": {"display": "Kaiser"},
+    "unitedhealthcare": {"display": "United Healthcare"},
+  }
+
+  connectedSourceList = []
+  availableSourceList = []
+
+
+
+
   ngOnInit(): void {
+    this.fastenApi.getSources()
+      .subscribe((sourceList: Source[]) => {
+
+        for (const sourceId in this.sourceLookup) {
+          let isConnected = false
+          for(const connectedSource of sourceList){
+            if(connectedSource.provider_id == sourceId){
+              this.connectedSourceList.push({"providerId": sourceId, "display": this.sourceLookup[sourceId]["display"]})
+              isConnected = true
+              break
+            }
+          }
+
+          if(!isConnected){
+            //this source has not been found in the connected list, lets add it to the available list.
+            this.availableSourceList.push({"providerId": sourceId, "display": this.sourceLookup[sourceId]["display"]})
+          }
+        }
+
+      })
   }
 
   connect($event: MouseEvent, providerId: string) {

frontend/src/app/services/auth-interceptor.service.ts

@@ -27,6 +27,11 @@ export class AuthInterceptorService implements HttpInterceptor {
   }
 
   intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    //only intercept requests to the fasten API, all other requests should be sent as-is
+    if(!req.url.startsWith('/api/secure/')){
+      return next.handle(req)
+    }
+
     // Clone the request to add the new header.
     const authReq = req.clone({headers: req.headers.set('Authorization', 'Bearer ' + this.fastenApiService.token())});
     // catch the error, make specific functions for catching specific errors and you can chain through them with more catch operators

frontend/src/app/services/fasten-api.service.ts

@@ -75,6 +75,16 @@ export class FastenApiService {
       );
   }
 
+  getSources(): Observable<Source[]> {
+    return this._httpClient.get<any>(`${this.getBasePath()}/api/secure/source`)
+      .pipe(
+        map((response: ResponseWrapper) => {
+          console.log("SOURCE RESPONSE", response)
+          return response.data as Source[]
+        })
+      );
+  }
+
   getResources(resourceType: string, resourceId?: string ) {
     return this._httpClient.get<any>(`${this.getBasePath()}/api/secure/fhir/${resourceType}/${resourceId ? resourceId : ''}`)
       .pipe(