cosmetics plus a slew of little frontend rendering bugs

ui/src/app/services/api/api.fixures.ts

@@ -832,11 +832,13 @@ export module Mock {
 
   export const SshKeys: RR.GetSSHKeysRes = {
     '28:d2:7e:78:61:b4:bf:g2:de:24:15:96:4e:d4:15:53': {
+      'created-at': new Date().toISOString(),
       alg: 'ed25519',
       hostname: 'Matt Key',
       hash: 'VeryLongHashOfSSHKey1',
     },
     '12:f8:7e:78:61:b4:bf:e2:de:24:15:96:4e:d4:72:53': {
+      'created-at': new Date().toISOString(),
       alg: 'ed25519',
       hostname: 'Aiden Key',
       hash: 'VeryLongHashOfSSHKey2',
@@ -845,6 +847,7 @@ export module Mock {
 
   export const SshKey: RR.AddSSHKeyRes = {
     '44:44:7e:78:61:b4:bf:g2:de:24:15:96:4e:d4:15:53': {
+      'created-at': new Date().toISOString(),
       alg: 'ed25519',
       hostname: 'Lucy Key',
       hash: 'VeryLongHashOfSSHKey3',

ui/src/app/services/api/api.types.ts

@@ -308,6 +308,7 @@ export interface SSHKeys {
 }
 
 export interface SSHKeyEntry {
+  'created-at': string
   alg: string
   hostname: string
   hash: string

ui/src/app/services/config.service.ts

@@ -49,15 +49,15 @@ export class ConfigService {
     return this.isConsulate || (mocks.enabled && mocks.connection === 'poll')
   }
 
-  isLaunchable (pkg: PackageDataEntry): boolean {
-    if (this.isConsulate || pkg.state !== PackageState.Installed) {
+  isLaunchable (state: PackageState, status: PackageMainStatus, interfaces: { [id: string]: InterfaceDef }): boolean {
+    if (this.isConsulate || state !== PackageState.Installed) {
       return false
     }
 
-    return pkg.installed.status.main.status === PackageMainStatus.Running &&
+    return status === PackageMainStatus.Running &&
     (
-      (hasTorUi(pkg.manifest.interfaces) && this.isTor()) ||
-      (hasLanUi(pkg.manifest.interfaces) && !this.isTor())
+      (hasTorUi(interfaces) && this.isTor()) ||
+      (hasLanUi(interfaces) && !this.isTor())
     )
   }
 

ui/src/app/services/emver.service.ts

@@ -1,24 +1,21 @@
 import { Injectable } from '@angular/core'
+import * as emver from '@start9labs/emver'
+
 
 @Injectable({
   providedIn: 'root',
 })
 export class Emver {
-  private e: typeof import('@start9labs/emver')
   constructor () { }
 
-  async init () {
-    this.e = await import('@start9labs/emver')
-  }
-
   compare (lhs: string, rhs: string): number {
-    console.log('EMVER', this.e)
-    const compare = this.e.compare(lhs, rhs)
+    console.log('EMVER', emver)
+    const compare = emver.compare(lhs, rhs)
     console.log('COMPARE', compare)
     return compare
   }
 
   satisfies (version: string, range: string): boolean {
-    return this.e.satisfies(version, range)
+    return emver.satisfies(version, range)
   }
 }

ui/src/app/services/error-toast.service.ts

@@ -17,24 +17,9 @@ export class ErrorToastService {
 
     if (this.toast) return
 
-    let message: string | IonicSafeString
-
-    if (e.code) message = String(e.code)
-    if (e.message) message = `${message ? message + ' ' : ''}${e.message}`
-    if (e.details) message = `${message ? message + ': ' : ''}${e.details}`
-
-    if (!message) {
-      message = 'Unknown Error.'
-      link = 'https://docs.start9.com'
-    }
-
-    if (link) {
-      message = new IonicSafeString(`${message}<br /><br /><a href=${link} target="_blank" style="color: white;">Get Help</a>`)
-    }
-
     this.toast = await this.toastCtrl.create({
       header: 'Error',
-      message,
+      message: getErrorMessage(e, link),
       duration: 0,
       position: 'top',
       cssClass: 'error-toast',
@@ -57,4 +42,23 @@ export class ErrorToastService {
       this.toast = undefined
     }
   }
+}
+
+export function getErrorMessage (e: RequestError, link?: string): string | IonicSafeString {
+  let message: string | IonicSafeString
+
+  if (e.code) message = String(e.code)
+  if (e.message) message = `${message ? message + ' ' : ''}${e.message}`
+  if (e.details) message = `${message ? message + ': ' : ''}${e.details}`
+
+  if (!message) {
+    message = 'Unknown Error.'
+    link = 'https://docs.start9.com'
+  }
+
+  if (link) {
+    message = new IonicSafeString(`${message}<br /><br /><a href=${link} target="_blank" style="color: white;">Get Help</a>`)
+  }
+
+  return message
 }

ui/src/app/services/server-config.service.ts

@@ -1,12 +1,12 @@
 import { Injectable } from '@angular/core'
 import { AlertInput, AlertButton } from '@ionic/core'
-// import { AppConfigValuePage } from '../modals/app-config-value/app-config-value.page'
 import { ApiService } from './api/embassy-api.service'
-import { ConfigSpec } from '../pkg-config/config-types'
+import { ConfigSpec, ValueSpecString } from '../pkg-config/config-types'
 import { SSHService } from '../pages/server-routes/security-routes/ssh-keys/ssh.service'
 import { AlertController, LoadingController } from '@ionic/angular'
 import { ErrorToastService } from './error-toast.service'
-// import { ModalController } from '@ionic/angular'
+import { ModalController } from '@ionic/angular'
+import { BackupConfirmationComponent } from '../modals/backup-confirmation/backup-confirmation.component'
 
 @Injectable({
   providedIn: 'root',
@@ -14,7 +14,7 @@ import { ErrorToastService } from './error-toast.service'
 export class ServerConfigService {
 
   constructor (
-    // private readonly modalCtrl: ModalController,
+    private readonly modalCtrl: ModalController,
     private readonly loadingCtrl: LoadingController,
     private readonly errToast: ErrorToastService,
     private readonly alertCtrl: AlertController,
@@ -71,16 +71,8 @@ export class ServerConfigService {
           },
         ]
         break
-      case 'string':
-        inputs = [
-          {
-            name: key,
-            type: 'textarea',
-            placeholder: 'Enter SSH public key',
-            value: current,
-          },
-        ]
-        break
+      default:
+        return
     }
 
     const alert = await this.alertCtrl.create({
@@ -92,6 +84,24 @@ export class ServerConfigService {
     await alert.present()
   }
 
+  async presentInputModal (key: string, current?: string) {
+    const { name, description, masked } = serverConfig[key] as ValueSpecString
+
+    const modal = await this.modalCtrl.create({
+      component: BackupConfirmationComponent,
+      componentProps: {
+        title: name,
+        message: description,
+        label: name,
+        useMask: masked,
+        value: current,
+        submitFn: this.saveFns[key],
+      },
+      cssClass: 'alertlike-modal',
+    })
+    await modal.present()
+  }
+
   // async presentModalForm (key: string, current?: string) {
   //   const modal = await this.modalCtrl.create({
   //     component: AppConfigValuePage,
@@ -105,7 +115,6 @@ export class ServerConfigService {
 
   saveFns: { [key: string]: (val: any) => Promise<any> } = {
     'auto-check-updates': async (enabled: boolean) => {
-      console.log('SAVING auto check', enabled)
       return this.embassyApi.setDbValue({ pointer: '/auto-check-updates', value: enabled })
     },
     ssh: async (pubkey: string) => {
@@ -136,7 +145,7 @@ export const serverConfig: ConfigSpec = {
   ssh: {
     type: 'string',
     name: 'SSH Key',
-    description: 'Enter an SSH public key to authorize root access from the command line.',
+    description: 'Enter the SSH public key of you would like to authorize for root access to your Embassy.',
     nullable: false,
     // @TODO regex for SSH Key
     // pattern: '',