ensure that all external links (other than Source OAuth/SmartOnFire) open in an external window.

frontend/src/app/app.module.ts

@@ -35,6 +35,7 @@ import { NgSelectModule } from '@ng-select/ng-select';
 import {HTTP_CLIENT_TOKEN} from "./dependency-injection";
 import {WidgetsModule} from './widgets/widgets.module';
 import { ExploreComponent } from './pages/explore/explore.component';
+import {DirectivesModule} from './directives/directives.module';
 
 @NgModule({
   declarations: [
@@ -69,7 +70,8 @@ import { ExploreComponent } from './pages/explore/explore.component';
     PipesModule,
     InfiniteScrollModule,
     NgSelectModule,
-    WidgetsModule
+    WidgetsModule,
+    DirectivesModule
   ],
   providers: [
     {
@@ -94,6 +96,7 @@ import { ExploreComponent } from './pages/explore/explore.component';
       }
     }
   ],
+  exports: [],
   bootstrap: [AppComponent]
 })
 export class AppModule {

frontend/src/app/components/footer/footer.component.html

@@ -2,7 +2,7 @@
   <div class="container ht-100p pd-t-0-f">
     <div class="d-sm-flex justify-content-center justify-content-sm-between py-2 w-100">
       <span class="text-muted text-center text-sm-left d-block d-sm-inline-block">Copyright © Fasten 2022 | {{appVersion}}</span>
-      <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center">Open Source personal electronic medical record system. <a href="https://www.fastenhealth.com/" target="_blank">It's your health. Own it.</a></span>
+      <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center">Open Source personal electronic medical record system. <a href="https://www.fastenhealth.com/" externalLink>It's your health. Own it.</a></span>
     </div>
   </div><!-- container -->
 </div><!-- az-footer -->

frontend/src/app/components/glossary-lookup/glossary-lookup.component.html

@@ -1,6 +1,6 @@
 <div *ngIf="!loading else isLoadingTemplate">
   <div [innerHTML]="description"></div>
-  <p>Source: <a [href]="url">{{source}}</a></p>
+  <p>Source: <a [href]="url" externalLink>{{source}}</a></p>
 </div>
 
 <ng-template #isLoadingTemplate>

frontend/src/app/components/glossary-lookup/glossary-lookup.component.ts

@@ -4,10 +4,11 @@ import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
 import {LoadingSpinnerComponent} from "../loading-spinner/loading-spinner.component";
 import {AuthService} from "../../services/auth.service";
 import {CommonModule} from "@angular/common";
+import {DirectivesModule} from '../../directives/directives.module';
 
 @Component({
   standalone: true,
-  imports: [LoadingSpinnerComponent, CommonModule],
+  imports: [LoadingSpinnerComponent, CommonModule, DirectivesModule],
   providers: [FastenApiService, AuthService],
   selector: 'app-glossary-lookup',
   templateUrl: './glossary-lookup.component.html',

frontend/src/app/components/list-generic-resource/list-generic-resource.component.html

@@ -8,7 +8,7 @@
     <br/>
     You can click on a row to see the raw data.
     <br/>
-    If you have any feedback regarding the data displayed, please <a href="https://github.com/fastenhealth/fasten-onprem/issues">file a ticket <i class="fab fa-github"></i></a>
+    If you have any feedback regarding the data displayed, please <a href="https://github.com/fastenhealth/fasten-onprem/issues" externalLink>file a ticket <i class="fab fa-github"></i></a>
   </div>
 
   <ngx-datatable

frontend/src/app/components/shared.module.ts

@@ -81,6 +81,7 @@ import {ListServiceRequestComponent} from './list-generic-resource/list-service-
 import {NgbCollapseModule, NgbModule} from '@ng-bootstrap/ng-bootstrap';
 import {PipesModule} from '../pipes/pipes.module';
 import {ResourceListOutletDirective} from './resource-list/resource-list-outlet.directive';
+import {DirectivesModule} from '../directives/directives.module';
 
 @NgModule({
   imports: [
@@ -96,6 +97,7 @@ import {ResourceListOutletDirective} from './resource-list/resource-list-outlet.
     NgChartsModule,
     HighlightModule,
     PipesModule,
+    DirectivesModule,
 
     //standalone components
     LoadingSpinnerComponent,
@@ -231,7 +233,6 @@ import {ResourceListOutletDirective} from './resource-list/resource-list-outlet.
         UtilitiesSidebarComponent,
         MedicalSourcesCardComponent,
         MedicalSourcesConnectedComponent,
-
         //standalone components
         BadgeComponent,
         TableComponent,

frontend/src/app/directives/directives.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+
+
+// Directives
+import {ExternalLinkDirective} from './external-link.directive';
+
+@NgModule({
+  declarations: [
+    ExternalLinkDirective,
+  ],
+  imports: [
+
+  ],
+  exports: [
+    ExternalLinkDirective,
+  ]
+})
+export class DirectivesModule {}

frontend/src/app/directives/external-link.directive.spec.ts

@@ -0,0 +1,8 @@
+import { ExternalLinkDirective } from './external-link.directive';
+
+describe('ExternalLinkDirective', () => {
+  it('should create an instance', () => {
+    const directive = new ExternalLinkDirective();
+    expect(directive).toBeTruthy();
+  });
+});

frontend/src/app/directives/external-link.directive.ts

@@ -0,0 +1,51 @@
+import {Directive, HostBinding, HostListener, Input} from '@angular/core';
+import {environment} from '../../environments/environment';
+
+// In desktop mode external links can allow the user to navigate away from the app, without any means to return.
+// We can prevent this by forcing all external links to open in a new tab
+//
+// references:
+// https://www.educative.io/answers/how-to-open-a-link-in-a-new-tab-with-html-and-javascript
+// https://stackoverflow.com/questions/42775017/angular-2-redirect-to-an-external-url-and-open-in-a-new-tab
+// https://coryrylan.com/blog/managing-external-links-safely-in-angular
+// https://stackoverflow.com/questions/58862558/angular-directive-cannot-attach-event-listener-to-element
+// https://github.com/wailsapp/wails/issues/2691
+@Directive({
+  selector: '[externalLink]'
+})
+export class ExternalLinkDirective {
+  // @HostBinding('attr.rel') relAttr = '';
+  // @HostBinding('attr.target') targetAttr = '';
+  // @HostBinding('attr.href') hrefAttr = '';
+  // @Input() href: string;
+
+  // ngOnChanges() {
+  //   this.hrefAttr = this.href;
+  //
+  //   if (this.isLinkExternal()) {
+  //     this.relAttr = 'noopener';
+  //     this.targetAttr = '_blank';
+  //   }
+  //   console.log("Checking if link is external", this.href)
+  // }
+  //
+  // private isLinkExternal() {
+  //   return !this.href.includes(location.hostname);
+  // }
+
+  @HostListener("click", ["$event"])
+  onClick(event: MouseEvent) {
+    event.preventDefault();
+
+    let url: string = (<any>event.currentTarget).getAttribute("href");
+
+    //check if wails exists and is defined
+
+    if(typeof wails !== "undefined" && environment.environment_desktop){
+      wails.CallByName("pkg.AppService.BrowserOpenURL", url)
+    } else{
+      window.open(url, "_blank");
+    }
+  }
+
+}

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

@@ -9,7 +9,7 @@
       </p>
       <p>Build one consolidated health record of your full health history, supports multiple users, create accounts for your whole family
       </p>
-      <a href="https://www.fastenhealth.com/" class="btn btn-outline-indigo">Learn More</a>
+      <a href="https://www.fastenhealth.com/" class="btn btn-outline-indigo" externalLink>Learn More</a>
     </div>
   </div><!-- az-column-signup-left -->
   <div class="az-column-signup">

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

@@ -49,7 +49,7 @@
             <strong>Description:</strong> {{dashboardConfigs?.[selectedDashboardConfigNdx]?.description}}
             <br/>
             <span *ngIf="dashboardConfigs?.[selectedDashboardConfigNdx]?.source">
-              <strong>Source:</strong> <a [href]="dashboardConfigs?.[selectedDashboardConfigNdx]?.source" target="_blank"> {{dashboardConfigs?.[selectedDashboardConfigNdx]?.source}}</a>
+              <strong>Source:</strong> <a [href]="dashboardConfigs?.[selectedDashboardConfigNdx]?.source" externalLink> {{dashboardConfigs?.[selectedDashboardConfigNdx]?.source}}</a>
             </span>
           </div>
         </div>
@@ -74,10 +74,10 @@
       Users can create personalized dashboards tracking the information they care about, by querying their own medical records using a SQL-like syntax.
     </p>
     <p>
-      Fasten comes with a few <a target="_blank" href="https://github.com/fastenhealth/fasten-onprem/tree/main/backend/pkg/web/handler/dashboard">pre-built dashboards</a> to get you started. You can also add your own dashboards by providing a link to a Github Gist containing a JSON representation of your dashboard.
+      Fasten comes with a few <a href="https://github.com/fastenhealth/fasten-onprem/tree/main/backend/pkg/web/handler/dashboard" externalLink>pre-built dashboards</a> to get you started. You can also add your own dashboards by providing a link to a Github Gist containing a JSON representation of your dashboard.
     </p>
     <p>
-      See <a target="_blank" href="https://docs.fastenhealth.com/dashboard/configuration.html">Dashboard Configuration Documentation</a> for more information.
+      See <a href="https://docs.fastenhealth.com/dashboard/configuration.html" externalLink>Dashboard Configuration Documentation</a> for more information.
     </p>
     <form>
       <div class="mb-3">

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

@@ -13,13 +13,13 @@
         <strong>Work-in-Progress!</strong> Some sources may not be implemented correctly.
         Some sources may require frequent re-connection, as background refresh has not been implemented yet.
         <br/>
-        If you have feedback regarding healthcare sources, please <a href="https://github.com/fastenhealth/fasten-onprem/issues">file a ticket <i class="fab fa-github"></i></a>
+        If you have feedback regarding healthcare sources, please <a href="https://github.com/fastenhealth/fasten-onprem/issues" externalLink>file a ticket <i class="fab fa-github"></i></a>
 
         <span *ngIf="environment_name == 'sandbox'">
           <br/>
           <br/>
         In <strong>Sandbox mode</strong> Fasten Health cannot access real patient information. You must use Sandbox credentials when authenticating to healthcare sources.
-          <a href="https://github.com/fastenhealth/docs/blob/main/BETA.md#connecting-a-new-source">These credentials are available on Github</a>
+          <a href="https://github.com/fastenhealth/docs/blob/main/BETA.md#connecting-a-new-source" externalLink>These credentials are available on Github</a>
         </span>
       </div>
 
@@ -97,8 +97,7 @@
         <h6>{{modalSelectedSourceListItem?.metadata.display}}</h6>
         <a *ngIf="modalSelectedSourceListItem?.metadata.patient_access_url"
            [href]="modalSelectedSourceListItem.metadata?.patient_access_url"
-            target="_blank"
+           class="mg-b-0" externalLink>{{modalSelectedSourceListItem?.metadata.patient_access_url | shortDomain}}</a>
-           class="mg-b-0">{{modalSelectedSourceListItem?.metadata.patient_access_url | shortDomain}}</a>
       </div><!-- media-body -->
     </div><!-- media -->
     <button type="button" class="btn btn-close" aria-label="Close" (click)="modal.dismiss('Cross click')">
@@ -112,7 +111,7 @@
       where you can authenticate and select data to import into Fasten Health.
     </p>
     <p>
-      If the data about this institution is missing or incorrect, you can <a class="link" href="https://docs.google.com/spreadsheets/d/1ZSgwfd7kwxSnimk4yofIFcR8ZMUls0zi9SZpRiOJBx0/edit?usp=sharing">click here</a> to submit a correction.
+      If the data about this institution is missing or incorrect, you can <a class="link" href="https://docs.google.com/spreadsheets/d/1ZSgwfd7kwxSnimk4yofIFcR8ZMUls0zi9SZpRiOJBx0/edit?usp=sharing" externalLink>click here</a> to submit a correction.
     </p>
 
     <ng-container *ngIf="modalSelectedSourceListItem?.metadata?.category?.length > 0 || modalSelectedSourceListItem?.metadata?.patient_access_description">

frontend/src/app/pages/resource-creator/resource-creator.component.html

@@ -14,7 +14,7 @@
 
           <div class="alert alert-warning" role="alert">
             <strong>Warning!</strong> This form is in early-alpha and is not ready for general use. You will encounter bugs and missing features.
-            Please open a <a href="https://github.com/fastenhealth/fasten-onprem/issues/new?title=Resource+Create+-+Your+Feature+Or+Bug+Here">Github Issue</a> if you find any bugs or have any suggestions.
+            Please open a <a href="https://github.com/fastenhealth/fasten-onprem/issues/new?title=Resource+Create+-+Your+Feature+Or+Bug+Here" externalLink>Github Issue</a> if you find any bugs or have any suggestions.
             <br/>
             <br/>
             Enable Debug mode: <input type="checkbox" [(ngModel)]="debugMode"/>

frontend/src/polyfills.ts

@@ -61,6 +61,17 @@ import 'zone.js/dist/zone';  // Included with Angular CLI.
 /***************************************************************************************************
  * APPLICATION IMPORTS
  */
+//required for desktop apps
+declare global {
+  // let wails: any
+
+  let wails: {
+
+    Call: (options) => Promise<any>
+    CallByID: (methodID, ...args) => Promise<any>
+    CallByName: (name, ...args) => Promise<any>
+  }
+}
 
 //required for PouchDB
 (window as any).global = window;