refactor: open external links without javascript in browser

Close #246

frontend/app/src/app/modules/data/elements/external-link.component.ts

@@ -14,7 +14,8 @@
  */
 
 import {Component, Input} from '@angular/core';
-import {SimpleBrowser} from '../../../util/browser.factory';
+import {Browser} from '@capacitor/browser';
+import {Capacitor} from '@capacitor/core';
 
 @Component({
   selector: 'stapps-external-link',
@@ -26,10 +27,32 @@ export class ExternalLinkComponent {
 
   @Input() text: string;
 
-  constructor(private browser: SimpleBrowser) {}
+  get url(): string {
+    try {
+      return new URL(this.link).href;
+    } catch {
+      return '';
+    }
+  }
 
-  onLinkClick(url: string) {
-    // make sure if the url is valid and then open it in the browser (prevent problem in iOS)
-    this.browser.open(new URL(url).href);
+  onLinkClick(event: MouseEvent) {
+    if (!this.url) {
+      event.preventDefault();
+      return;
+    }
+
+    // In a normal browser we deliberately do nothing here.
+    // The regular <a> element handles the navigation.
+    if (!Capacitor.isNativePlatform()) {
+      return;
+    }
+
+    // In the native iOS/Android app we prevent the WebView navigation
+    // and open the URL in the system-provided in-app browser instead.
+    event.preventDefault();
+
+    void Browser.open({
+      url: this.url,
+    });
   }
 }

frontend/app/src/app/modules/data/elements/external-link.html

@@ -12,4 +12,7 @@
   ~ You should have received a copy of the GNU General Public License along with
   ~ this program. If not, see <https://www.gnu.org/licenses/>.
   -->
-<a (click)="onLinkClick(link)">{{ text }}<ion-icon name="open_in_browser"></ion-icon> </a>
+<a [href]="url" target="_blank" (click)="onLinkClick($event)">
+  {{ text }}
+  <ion-icon name="open_in_browser"></ion-icon>
+</a>