better UX for http/https switching (#2494)

* open https in same tab

* open http in same tab, use windowRef instead of window

frontend/projects/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.ts

@@ -1,4 +1,5 @@
-import { Component, Input } from '@angular/core'
+import { Component, Inject, Input } from '@angular/core'
+import { WINDOW } from '@ng-web-apis/common'
 import { ActivatedRoute } from '@angular/router'
 import { ModalController, ToastController } from '@ionic/angular'
 import { copyToClipboard, getPkgId } from '@start9labs/shared'
@@ -91,10 +92,11 @@ export class AppInterfacesItemComponent {
   constructor(
     private readonly toastCtrl: ToastController,
     private readonly modalCtrl: ModalController,
+    @Inject(WINDOW) private readonly windowRef: Window,
   ) {}
 
   launch(url: string): void {
-    window.open(url, '_blank', 'noreferrer')
+    this.windowRef.open(url, '_blank', 'noreferrer')
   }
 
   async showQR(text: string): Promise<void> {

frontend/projects/ui/src/app/pages/login/ca-wizard/ca-wizard.component.html

@@ -27,7 +27,13 @@
         your device can verify the authenticity of encrypted communications with
         your server.
         <br />
-        <ion-button strong size="small" (click)="instructions()">
+        <ion-button
+          strong
+          size="small"
+          href="https://docs.start9.com/0.3.5.x/user-manual/getting-started/trust-ca/#trust-root-ca"
+          target="_blank"
+          noreferrer
+        >
           View Instructions
           <ion-icon slot="end" name="open-outline"></ion-icon>
         </ion-button>

frontend/projects/ui/src/app/pages/login/ca-wizard/ca-wizard.component.ts

@@ -31,21 +31,13 @@ export class CAWizardComponent {
     this.document.getElementById('install-cert')?.click()
   }
 
-  instructions() {
-    this.windowRef.open(
-      'https://docs.start9.com/0.3.5.x/user-manual/getting-started/trust-ca/#trust-root-ca',
-      '_blank',
-      'noreferrer',
-    )
-  }
-
   refresh() {
     this.document.location.reload()
   }
 
   launchHttps() {
     const host = this.config.getHost()
-    this.windowRef.open(`https://${host}`, '_blank', 'noreferrer')
+    this.windowRef.open(`https://${host}`, '_self')
   }
 
   private async testHttps() {

frontend/projects/ui/src/app/pages/login/login.page.html

@@ -11,7 +11,17 @@
         <ion-icon slot="start" name="warning-outline"></ion-icon>
         <ion-label>
           <h2 style="font-weight: bold">Http detected</h2>
-          <p style="font-weight: 600">Tor is faster over https.</p>
+          <p style="font-weight: 600">
+            Tor is faster over https. Your Root CA must be trusted.
+            <a
+              href="https://docs.start9.com/0.3.5.x/user-manual/getting-started/trust-ca/#trust-root-ca"
+              target="_blank"
+              noreferrer
+              style="color: black"
+            >
+              View instructions
+            </a>
+          </p>
         </ion-label>
         <ion-button slot="end" color="light" (click)="launchHttps()">
           Open Https

frontend/projects/ui/src/app/pages/login/login.page.ts

@@ -29,7 +29,7 @@ export class LoginPage {
 
   launchHttps() {
     const host = this.config.getHost()
-    this.windowRef.open(`https://${host}`, '_blank', 'noreferrer')
+    this.windowRef.open(`https://${host}`, '_self')
   }
 
   async submit() {

frontend/projects/ui/src/app/pages/server-routes/server-show/server-show.page.ts

@@ -22,7 +22,7 @@ import {
   GenericInputOptions,
 } from 'src/app/modals/generic-input/generic-input.component'
 import { ConfigService } from 'src/app/services/config.service'
-import { DOCUMENT } from '@angular/common'
+import { WINDOW } from '@ng-web-apis/common'
 import { getServerInfo } from 'src/app/util/get-server-info'
 import { GenericFormPage } from 'src/app/modals/generic-form/generic-form.page'
 import { ConfigSpec } from 'src/app/pkg-config/config-types'
@@ -57,7 +57,7 @@ export class ServerShowPage {
     private readonly authService: AuthService,
     private readonly toastCtrl: ToastController,
     private readonly config: ConfigService,
-    @Inject(DOCUMENT) private readonly document: Document,
+    @Inject(WINDOW) private readonly windowRef: Window,
   ) {}
 
   async setBrowserTab(): Promise<void> {
@@ -307,7 +307,7 @@ export class ServerShowPage {
 
   async launchHttps() {
     const { 'tor-address': torAddress } = await getServerInfo(this.patch)
-    window.open(torAddress)
+    this.windowRef.open(torAddress, '_self')
   }
 
   addClick(title: string) {
@@ -495,7 +495,7 @@ export class ServerShowPage {
       },
       {
         title: 'Root CA',
-        description: `Download and trust your server's root certificate authority`,
+        description: `Download and trust your server's Root Certificate Authority`,
         icon: 'ribbon-outline',
         action: () =>
           this.navCtrl.navigateForward(['root-ca'], { relativeTo: this.route }),
@@ -621,7 +621,7 @@ export class ServerShowPage {
         description: 'Discover what StartOS can do',
         icon: 'map-outline',
         action: () =>
-          window.open(
+          this.windowRef.open(
             'https://docs.start9.com/0.3.5.x/user-manual',
             '_blank',
             'noreferrer',
@@ -634,7 +634,11 @@ export class ServerShowPage {
         description: 'Get help from the Start9 team and community',
         icon: 'chatbubbles-outline',
         action: () =>
-          window.open('https://start9.com/contact', '_blank', 'noreferrer'),
+          this.windowRef.open(
+            'https://start9.com/contact',
+            '_blank',
+            'noreferrer',
+          ),
         detail: true,
         disabled$: of(false),
       },
@@ -643,7 +647,7 @@ export class ServerShowPage {
         description: `Support StartOS development`,
         icon: 'logo-bitcoin',
         action: () =>
-          this.document.defaultView?.open(
+          this.windowRef.open(
             'https://donate.start9.com',
             '_blank',
             'noreferrer',

frontend/projects/ui/src/app/services/ui-launcher.service.ts

@@ -1,5 +1,5 @@
 import { Inject, Injectable } from '@angular/core'
-import { DOCUMENT } from '@angular/common'
+import { WINDOW } from '@ng-web-apis/common'
 import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
 import { ConfigService } from './config.service'
 
@@ -8,15 +8,11 @@ import { ConfigService } from './config.service'
 })
 export class UiLauncherService {
   constructor(
-    @Inject(DOCUMENT) private readonly document: Document,
+    @Inject(WINDOW) private readonly windowRef: Window,
     private readonly config: ConfigService,
   ) {}
 
   launch(pkg: PackageDataEntry): void {
-    this.document.defaultView?.open(
+    this.windowRef.open(this.config.launchableURL(pkg), '_blank', 'noreferrer')
-      this.config.launchableURL(pkg),
-      '_blank',
-      'noreferrer',
-    )
   }
 }