enable switching to https on login page (#2406)

* enable switching to https on login page * add trust Root CA to http login page * add node-jose back for setup wiz * add tooltips, branding, logic for launch box spinner display, and enable config to toggle https mode on mocks * cleanup * copy changes * style fixes * abstract component, fix https mocks * always show login from localhost * launch .local when on IP --------- Co-authored-by: Matt Hill <[email protected]>
Start9Labs · Sep 26, 2023 · 0daaf3b · 0daaf3b
1 parent 8e21504
commit 0daaf3b
Show file tree

Hide file tree

Showing 25 changed files with 511 additions and 255 deletions.
diff --git a/frontend/angular.json b/frontend/angular.json
@@ -36,6 +36,11 @@
                 "input": "node_modules/monaco-editor",
                 "output": "assets/monaco-editor/"
               },
+              {
+                "glob": "**/*",
+                "input": "node_modules/@taiga-ui/icons/src",
+                "output": "assets/taiga-ui/icons"
+              },
               "projects/ui/src/manifest.webmanifest",
               {
                 "glob": "ngsw.json",
@@ -44,6 +49,7 @@
               }
             ],
             "styles": [
+              "node_modules/@taiga-ui/core/styles/taiga-ui-theme.less",
               "projects/shared/styles/variables.scss",
               "projects/shared/styles/global.scss",
               "projects/shared/styles/shared.scss",

diff --git a/frontend/config-sample.json b/frontend/config-sample.json
@@ -14,6 +14,7 @@
     },
     "mocks": {
       "maskAs": "tor",
+      "maskAsHttps": true,
       "skipStartupAlerts": true
     }
   },

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -70,7 +70,7 @@
     "monaco-editor": "^0.33.0",
     "mustache": "^4.2.0",
     "ng-qrcode": "^7.0.0",
-    "node-jose": "^2.1.1",
+    "node-jose": "^2.2.0",
     "patch-db-client": "file: ../../../patch-db/client",
     "pbkdf2": "^3.1.2",
     "rxjs": "^7.5.6",

diff --git a/frontend/projects/shared/src/services/http.service.ts b/frontend/projects/shared/src/services/http.service.ts
@@ -38,12 +38,13 @@ export class HttpService {
 
   async rpcRequest<T>(
     opts: RPCOptions,
+    fullUrl?: string,
   ): Promise<LocalHttpResponse<RPCResponse<T>>> {
     const { method, headers, params, timeout } = opts
 
     return this.httpRequest<RPCResponse<T>>({
       method: Method.POST,
-      url: this.relativeUrl,
+      url: fullUrl || this.relativeUrl,
       headers,
       body: { method, params },
       timeout,

diff --git a/frontend/projects/shared/src/types/workspace-config.ts b/frontend/projects/shared/src/types/workspace-config.ts
@@ -15,7 +15,9 @@ export type WorkspaceConfig = {
       community: 'https://community-registry.start9.com/'
     }
     mocks: {
-      maskAs: 'tor' | 'lan'
+      maskAs: 'tor' | 'local' | 'localhost'
+      // enables local development in secure mode
+      maskAsHttps: boolean
       skipStartupAlerts: boolean
     }
   }

diff --git a/frontend/projects/ui/src/app/pages/apps-routes/app-show/app-show.page.html b/frontend/projects/ui/src/app/pages/apps-routes/app-show/app-show.page.html
@@ -15,63 +15,33 @@
 
     <!-- Installed -->
     <ng-template #installed>
-      <!-- SECURE -->
-      <ng-container *ngIf="secure; else insecure">
-        <ng-container *ngIf="pkg | toDependencies as dependencies">
-          <ion-item-group *ngIf="pkg | toStatus as status">
-            <!-- ** status ** -->
-            <app-show-status
+      <ng-container *ngIf="pkg | toDependencies as dependencies">
+        <ion-item-group *ngIf="pkg | toStatus as status">
+          <!-- ** status ** -->
+          <app-show-status
+            [pkg]="pkg"
+            [dependencies]="dependencies"
+            [status]="status"
+          ></app-show-status>
+          <!-- ** installed && !backing-up ** -->
+          <ng-container *ngIf="isInstalled(pkg) && !isBackingUp(status)">
+            <!-- ** health checks ** -->
+            <app-show-health-checks
+              *ngIf="isRunning(status)"
               [pkg]="pkg"
+            ></app-show-health-checks>
+            <!-- ** dependencies ** -->
+            <app-show-dependencies
+              *ngIf="dependencies.length"
               [dependencies]="dependencies"
-              [status]="status"
-            ></app-show-status>
-            <!-- ** installed && !backing-up ** -->
-            <ng-container *ngIf="isInstalled(pkg) && !isBackingUp(status)">
-              <!-- ** health checks ** -->
-              <app-show-health-checks
-                *ngIf="isRunning(status)"
-                [pkg]="pkg"
-              ></app-show-health-checks>
-              <!-- ** dependencies ** -->
-              <app-show-dependencies
-                *ngIf="dependencies.length"
-                [dependencies]="dependencies"
-              ></app-show-dependencies>
-              <!-- ** menu ** -->
-              <app-show-menu [buttons]="pkg | toButtons"></app-show-menu>
-              <!-- ** additional ** -->
-              <app-show-additional [pkg]="pkg"></app-show-additional>
-            </ng-container>
-          </ion-item-group>
-        </ng-container>
+            ></app-show-dependencies>
+            <!-- ** menu ** -->
+            <app-show-menu [buttons]="pkg | toButtons"></app-show-menu>
+            <!-- ** additional ** -->
+            <app-show-additional [pkg]="pkg"></app-show-additional>
+          </ng-container>
+        </ion-item-group>
       </ng-container>
-
-      <!-- INSECURE -->
-      <ng-template #insecure>
-        <ion-grid style="max-width: 540px">
-          <ion-row class="ion-align-items-center">
-            <ion-col class="ion-text-center">
-              <h2>
-                <ion-text color="warning">Http detected</ion-text>
-              </h2>
-              <p class="ion-padding-bottom">
-                Your connection is insecure.
-                <a
-                  [routerLink]="['/system', 'root-ca']"
-                  style="color: var(--ion-color-dark)"
-                >
-                  Download and trust your server's Root CA
-                </a>
-                , then switch to https.
-              </p>
-              <ion-button (click)="launchHttps()">
-                Open https
-                <ion-icon slot="end" name="open-outline"></ion-icon>
-              </ion-button>
-            </ion-col>
-          </ion-row>
-        </ion-grid>
-      </ng-template>
     </ng-template>
   </ion-content>
 </ng-container>
diff --git a/frontend/projects/ui/src/app/pages/apps-routes/app-show/app-show.page.ts b/frontend/projects/ui/src/app/pages/apps-routes/app-show/app-show.page.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Inject } from '@angular/core'
+import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { NavController } from '@ionic/angular'
 import { PatchDB } from 'patch-db-client'
 import {
@@ -13,9 +13,6 @@ import {
 import { tap } from 'rxjs/operators'
 import { ActivatedRoute } from '@angular/router'
 import { getPkgId } from '@start9labs/shared'
-import { DOCUMENT } from '@angular/common'
-import { ConfigService } from 'src/app/services/config.service'
-import { getServerInfo } from 'src/app/util/get-server-info'
 
 const STATES = [
   PackageState.Installing,
@@ -29,8 +26,6 @@ const STATES = [
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppShowPage {
-  readonly secure = this.config.isSecure()
-
   private readonly pkgId = getPkgId(this.route)
 
   readonly pkg$ = this.patch.watch$('package-data', this.pkgId).pipe(
@@ -44,8 +39,6 @@ export class AppShowPage {
     private readonly route: ActivatedRoute,
     private readonly navCtrl: NavController,
     private readonly patch: PatchDB<DataModel>,
-    private readonly config: ConfigService,
-    @Inject(DOCUMENT) private readonly document: Document,
   ) {}
 
   isInstalled({ state }: PackageDataEntry): boolean {
@@ -63,11 +56,4 @@ export class AppShowPage {
   showProgress({ state }: PackageDataEntry): boolean {
     return STATES.includes(state)
   }
-
-  async launchHttps() {
-    const onTor = this.config.isTor()
-    const { 'lan-address': lanAddress, 'tor-address': torAddress } =
-      await getServerInfo(this.patch)
-    onTor ? window.open(torAddress) : window.open(lanAddress)
-  }
 }
diff --git a/frontend/projects/ui/src/app/pages/login/ca-wizard/ca-wizard.component.html b/frontend/projects/ui/src/app/pages/login/ca-wizard/ca-wizard.component.html
@@ -0,0 +1,108 @@
+<ion-grid class="grid-wiz">
+  <img width="60px" height="60px" src="/assets/img/icon_transparent.png" />
+  <ion-row>
+    <ion-col class="ion-text-center">
+      <ion-icon name="lock-closed-outline" class="wiz-icon"></ion-icon>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col class="ion-text-center">
+      <h2><b>Trust your Root Certificate Authority (CA)</b></h2>
+      <p>
+        Download and trust your server's Root CA to establish secure, encrypted
+        (
+        <b>HTTPS</b>
+        ) connections with your server
+      </p>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col sizeXs="12" sizeLg="4">
+      <div class="wiz-card">
+        <ion-row class="ion-justify-content-between">
+          <b class="wiz-step">1</b>
+          <tui-tooltip
+            content="Your server uses its Root CA to generate SSL/TLS certificates for itself and its installed services. These certificates are used to encrypt network traffic with your client devices."
+            direction="right"
+          ></tui-tooltip>
+        </ion-row>
+        <div class="ion-text-center">
+          <h2>Download Root CA</h2>
+          <p>Download your server's Root CA</p>
+        </div>
+        <ion-button class="wiz-card-button" shape="round" (click)="download()">
+          <ion-icon slot="start" name="download-outline"></ion-icon>
+          Download
+        </ion-button>
+      </div>
+    </ion-col>
+    <ion-col sizeXs="12" sizeLg="4">
+      <div class="wiz-card" [class.disabled]="!downloadClicked">
+        <ion-row class="ion-justify-content-between">
+          <b class="wiz-step">2</b>
+          <tui-tooltip
+            content="By trusting your server's Root CA, your device can verify the authenticity of its encrypted communications with your server and installed services. You will need to trust the Root CA on every device used to connect to your server."
+            direction="right"
+          ></tui-tooltip>
+        </ion-row>
+        <div class="ion-text-center">
+          <h2>Trust Root CA</h2>
+          <p>Follow instructions for your OS</p>
+        </div>
+        <ion-button
+          class="wiz-card-button"
+          shape="round"
+          (click)="instructions()"
+          [disabled]="!downloadClicked"
+        >
+          View Docs
+          <ion-icon slot="end" name="open-outline"></ion-icon>
+        </ion-button>
+      </div>
+    </ion-col>
+    <ion-col sizeXs="12" sizeLg="4">
+      <div class="wiz-card" [class.disabled]="!polling && !caTrusted">
+        <b class="wiz-step">3</b>
+        <div class="ion-text-center">
+          <h2>Go To Login</h2>
+          <p *ngIf="instructionsClicked; else space" class="inline-center">
+            <ion-spinner
+              class="wiz-spinner"
+              *ngIf="!caTrusted; else trusted"
+            ></ion-spinner>
+            <ng-template #trusted>
+              <ion-icon name="ribbon-outline" color="success"></ion-icon>
+            </ng-template>
+            &nbsp;{{ caTrusted ? 'Root CA trusted!' : 'Waiting for trust...' }}
+          </p>
+          <ng-template #space>
+            <!-- to keep alignment -->
+            <p><br /></p>
+          </ng-template>
+        </div>
+        <ion-button
+          class="wiz-card-button"
+          shape="round"
+          (click)="launchHttps()"
+          [disabled]="!caTrusted"
+        >
+          Open
+          <ion-icon slot="end" name="open-outline"></ion-icon>
+        </ion-button>
+      </div>
+    </ion-col>
+  </ion-row>
+  <ion-row>
+    <ion-col class="ion-text-center">
+      <ion-button fill="clear" (click)="launchHttps()" [disabled]="caTrusted">
+        Skip
+        <ion-icon slot="end" name="open-outline"></ion-icon>
+      </ion-button>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+<a
+  id="install-cert"
+  href="/public/eos/local.crt"
+  [download]="document.location.hostname"
+></a>