Subnav (#391)

* begin subnav implementation

* implement subnav AND angular forms for comparison

* unions working-ish, list of enums working

* new form approach almost complete

* finish new forms approach for action inputs and config

* expandable list items and handlebars display

* Config animation (#394)

* config cammel

* config animation

Co-authored-by: Drew Ansbacher <drew.ansbacher@spiredigital.com>

* improve server settings inputs, still needs work

* delete all notifications, styling, and bugs

* contracted by default

Co-authored-by: Drew Ansbacher <drew.ansbacher@gmail.com>
Co-authored-by: Drew Ansbacher <drew.ansbacher@spiredigital.com>

ui/src/app/pages/server-routes/lan/lan.module.ts

@@ -3,7 +3,6 @@ import { CommonModule } from '@angular/common'
 import { Routes, RouterModule } from '@angular/router'
 import { IonicModule } from '@ionic/angular'
 import { LANPage } from './lan.page'
-import { PwaBackComponentModule } from 'src/app/components/pwa-back-button/pwa-back.component.module'
 import { SharingModule } from 'src/app/modules/sharing.module'
 
 const routes: Routes = [
@@ -18,7 +17,6 @@ const routes: Routes = [
     CommonModule,
     IonicModule,
     RouterModule.forChild(routes),
-    PwaBackComponentModule,
     SharingModule,
   ],
   declarations: [LANPage],

ui/src/app/pages/server-routes/security-routes/security-options/security-options.module.ts

@@ -3,8 +3,6 @@ import { CommonModule } from '@angular/common'
 import { IonicModule } from '@ionic/angular'
 import { SecurityOptionsPage } from './security-options.page'
 import { Routes, RouterModule } from '@angular/router'
-import { PwaBackComponentModule } from 'src/app/components/pwa-back-button/pwa-back.component.module'
-import { ObjectConfigComponentModule } from 'src/app/components/object-config/object-config.component.module'
 import { SharingModule } from 'src/app/modules/sharing.module'
 
 const routes: Routes = [
@@ -18,9 +16,7 @@ const routes: Routes = [
   imports: [
     CommonModule,
     IonicModule,
-    ObjectConfigComponentModule,
     RouterModule.forChild(routes),
-    PwaBackComponentModule,
     SharingModule,
   ],
   declarations: [

ui/src/app/pages/server-routes/security-routes/security-options/security-options.page.html

@@ -11,23 +11,23 @@
 
   <ion-item-group>
     <ion-item-divider>General</ion-item-divider>
-    <ion-item button (click)="presentModalValueEdit('shareStats', patch.data['server-info']['share-stats'])">
+    <ion-item button (click)="serverConfig.presentAlert('share-stats', server['share-stats'])">
       <ion-label>Share Anonymous Statistics</ion-label>
-      <ion-note slot="end">{{ patch.data['server-info']['share-stats'] }}</ion-note>
+      <ion-note slot="end">{{ server['share-stats'] ? 'Enabled' : 'Disabled' }}</ion-note>
     </ion-item>
 
     <ion-item-divider>Marketplace</ion-item-divider>
-    <ion-item button (click)="presentModalValueEdit('autoCheckUpdates', patch.data.ui['auto-check-updates'])">
+    <ion-item button (click)="serverConfig.presentAlert('auto-check-updates', patch.data.ui['auto-check-updates'])">
       <ion-label>Auto Check for Updates</ion-label>
-      <ion-note slot="end">{{ patch.data.ui['auto-check-updates'] }}</ion-note>
+      <ion-note slot="end">{{ patch.data.ui['auto-check-updates'] ? 'Enabled' : 'Disabled' }}</ion-note>
     </ion-item>
-    <ion-item button (click)="presentModalValueEdit('eosMarketplace', patch.data['server-info']['eos-marketplace'] === config.start9Marketplace.tor)">
+    <ion-item button (click)="serverConfig.presentAlert('eos-marketplace', server['eos-marketplace'] === config.start9Marketplace.tor)">
       <ion-label>Tor Only Marketplace</ion-label>
-      <ion-note slot="end">{{ patch.data['server-info']['eos-marketplace'] === config.start9Marketplace.tor }}</ion-note>
+      <ion-note slot="end">{{ server['eos-marketplace'] === config.start9Marketplace.tor ? 'Enabled' : 'Disabled' }}</ion-note>
     </ion-item>
-    <!-- <ion-item button (click)="presentModalValueEdit('packageMarketplace', patch.data['server-info']['package-marketplace'])">
+    <!-- <ion-item button (click)="presentModalValueEdit('packageMarketplace', server['package-marketplace'])">
       <ion-label>Package Marketplace</ion-label>
-      <ion-note slot="end">{{ patch.data['server-info']['package-marketplace'] }}</ion-note>
+      <ion-note slot="end">{{ server['package-marketplace'] }}</ion-note>
     </ion-item> -->
 
     <ion-item-divider>Security</ion-item-divider>

ui/src/app/pages/server-routes/security-routes/security-options/security-options.page.ts

@@ -1,7 +1,8 @@
-import { Component } from '@angular/core'
+import { Component, ViewChild } from '@angular/core'
 import { ServerConfigService } from 'src/app/services/server-config.service'
 import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
 import { ConfigService } from 'src/app/services/config.service'
+import { IonContent } from '@ionic/angular'
 
 @Component({
   selector: 'security-options',
@@ -9,14 +10,15 @@ import { ConfigService } from 'src/app/services/config.service'
   styleUrls: ['./security-options.page.scss'],
 })
 export class SecurityOptionsPage {
+  @ViewChild(IonContent) content: IonContent
 
   constructor (
-    private readonly serverConfigService: ServerConfigService,
+    public readonly serverConfig: ServerConfigService,
     public readonly config: ConfigService,
     public readonly patch: PatchDbService,
   ) { }
 
-  async presentModalValueEdit (key: string, current?: any): Promise<void> {
-    await this.serverConfigService.presentModalValueEdit(key, current)
+  ngAfterViewInit () {
+    this.content.scrollToPoint(undefined, 1)
   }
 }

ui/src/app/pages/server-routes/security-routes/sessions/sessions.module.ts

@@ -3,9 +3,7 @@ import { CommonModule } from '@angular/common'
 import { IonicModule } from '@ionic/angular'
 import { RouterModule, Routes } from '@angular/router'
 import { SessionsPage } from './sessions.page'
-import { PwaBackComponentModule } from 'src/app/components/pwa-back-button/pwa-back.component.module'
 import { SharingModule } from 'src/app/modules/sharing.module'
-import { TextSpinnerComponentModule } from 'src/app/components/text-spinner/text-spinner.component.module'
 
 const routes: Routes = [
   {
@@ -19,9 +17,7 @@ const routes: Routes = [
     CommonModule,
     IonicModule,
     RouterModule.forChild(routes),
-    PwaBackComponentModule,
     SharingModule,
-    TextSpinnerComponentModule,
   ],
   declarations: [SessionsPage],
 })

ui/src/app/pages/server-routes/security-routes/sessions/sessions.page.html

@@ -31,8 +31,9 @@
           <h2>Last Active: {{ session.value['last-active'] | date : 'medium' }}</h2>
           <p>{{ session.value['user-agent'] }}</p>
         </ion-label>
-        <ion-button slot="end" fill="clear" (click)="presentAlertKill(session.key)">
-          <ion-icon slot="icon-only" name="close-outline"></ion-icon>
+        <ion-button slot="end" fill="clear" color="danger" (click)="presentAlertKill(session.key)">
+          <ion-icon slot="start" name="close"></ion-icon>
+          Kill
         </ion-button>
       </ion-item>
     </div>

ui/src/app/pages/server-routes/security-routes/sessions/sessions.page.ts

@@ -2,7 +2,7 @@ import { Component } from '@angular/core'
 import { AlertController, getPlatforms, LoadingController } from '@ionic/angular'
 import { ErrorToastService } from 'src/app/services/error-toast.service'
 import { ApiService } from 'src/app/services/api/embassy/embassy-api.service'
-import { PlatformType, RR, SessionMetadata } from 'src/app/services/api/api.types'
+import { PlatformType, RR } from 'src/app/services/api/api.types'
 
 @Component({
   selector: 'sessions',

ui/src/app/pages/server-routes/security-routes/ssh-keys/ssh-keys.module.ts

@@ -3,9 +3,7 @@ import { CommonModule } from '@angular/common'
 import { IonicModule } from '@ionic/angular'
 import { RouterModule, Routes } from '@angular/router'
 import { SSHKeysPage } from './ssh-keys.page'
-import { PwaBackComponentModule } from 'src/app/components/pwa-back-button/pwa-back.component.module'
 import { SharingModule } from 'src/app/modules/sharing.module'
-import { TextSpinnerComponentModule } from 'src/app/components/text-spinner/text-spinner.component.module'
 
 const routes: Routes = [
   {
@@ -19,9 +17,7 @@ const routes: Routes = [
     CommonModule,
     IonicModule,
     RouterModule.forChild(routes),
-    PwaBackComponentModule,
     SharingModule,
-    TextSpinnerComponentModule,
   ],
   declarations: [SSHKeysPage],
 })

ui/src/app/pages/server-routes/security-routes/ssh-keys/ssh-keys.page.html

@@ -5,7 +5,7 @@
     </ion-buttons>
     <ion-title>SSH Keys</ion-title>
     <ion-buttons slot="end">
-      <ion-button (click)="presentModalAdd()">
+      <ion-button (click)="serverConfig.presentAlert('ssh')">
         <ion-icon slot="icon-only" name="add-outline"></ion-icon>
       </ion-button>
     </ion-buttons>
@@ -15,14 +15,25 @@
 <ion-content class="ion-padding-top">
   <text-spinner *ngIf="loading" text="Loading Keys"></text-spinner>
 
-  <ion-item-group>
+  <ion-item-group *ngIf="!loading">
+    <!-- about -->
+    <ion-item>
+      <ion-label class="ion-text-wrap">
+        <p class="ion-padding-bottom">About</p>
+        <h2>Adding an SSH key to your Embassy can be useful for advanced usage from the command line, as well as for debugging purposes.</h2>
+      </ion-label>
+    </ion-item>
+    <ion-item [href]="docsUrl" target="_blank" detail="false">
+      <ion-icon slot="start" name="list-outline"></ion-icon>
+      <ion-label>View Instructions</ion-label>
+    </ion-item>
     <ion-item-divider>Saved Keys</ion-item-divider>
     <ion-item *ngFor="let ssh of sshKeys | keyvalue : asIsOrder">
       <ion-label class="ion-text-wrap">
         {{ ssh.value.alg }} {{ ssh.key }} {{ ssh.value.hostname }}
       </ion-label>
       <ion-button slot="end" fill="clear" (click)="presentAlertDelete(ssh.key)">
-        <ion-icon slot="icon-only" name="close-outline"></ion-icon>
+        <ion-icon slot="icon-only" name="close"></ion-icon>
       </ion-button>
     </ion-item>
   </ion-item-group>

ui/src/app/pages/server-routes/security-routes/ssh-keys/ssh-keys.page.ts

@@ -15,13 +15,14 @@ export class SSHKeysPage {
   loading = true
   sshKeys: SSHKeys
   subs: Subscription[] = []
+  readonly docsUrl = 'https://docs.start9.com/user-manual/general/developer-options/ssh-setup.html'
 
   constructor (
     private readonly loadingCtrl: LoadingController,
     private readonly errToast: ErrorToastService,
-    private readonly serverConfigService: ServerConfigService,
     private readonly alertCtrl: AlertController,
     private readonly sshService: SSHService,
+    public readonly serverConfig: ServerConfigService,
   ) { }
 
   async ngOnInit () {
@@ -41,10 +42,6 @@ export class SSHKeysPage {
     this.subs.forEach(sub => sub.unsubscribe())
   }
 
-  async presentModalAdd () {
-    await this.serverConfigService.presentModalValueEdit('ssh')
-  }
-
   async presentAlertDelete (hash: string) {
     const alert = await this.alertCtrl.create({
       backdropDismiss: false,

ui/src/app/pages/server-routes/server-backup/server-backup.module.ts

@@ -4,8 +4,7 @@ import { IonicModule } from '@ionic/angular'
 import { ServerBackupPage } from './server-backup.page'
 import { RouterModule, Routes } from '@angular/router'
 import { BackupConfirmationComponentModule } from 'src/app/modals/backup-confirmation/backup-confirmation.component.module'
-import { PwaBackComponentModule } from 'src/app/components/pwa-back-button/pwa-back.component.module'
-import { TextSpinnerComponentModule } from 'src/app/components/text-spinner/text-spinner.component.module'
+import { SharingModule } from 'src/app/modules/sharing.module'
 
 const routes: Routes = [
   {
@@ -20,8 +19,7 @@ const routes: Routes = [
     IonicModule,
     RouterModule.forChild(routes),
     BackupConfirmationComponentModule,
-    PwaBackComponentModule,
-    TextSpinnerComponentModule,
+    SharingModule,
   ],
   declarations: [
     ServerBackupPage,

ui/src/app/pages/server-routes/server-logs/server-logs.module.ts

@@ -3,8 +3,7 @@ import { CommonModule } from '@angular/common'
 import { Routes, RouterModule } from '@angular/router'
 import { IonicModule } from '@ionic/angular'
 import { ServerLogsPage } from './server-logs.page'
-import { PwaBackComponentModule } from 'src/app/components/pwa-back-button/pwa-back.component.module'
-import { TextSpinnerComponentModule } from 'src/app/components/text-spinner/text-spinner.component.module'
+import { SharingModule } from 'src/app/modules/sharing.module'
 
 const routes: Routes = [
   {
@@ -18,8 +17,7 @@ const routes: Routes = [
     CommonModule,
     IonicModule,
     RouterModule.forChild(routes),
-    PwaBackComponentModule,
-    TextSpinnerComponentModule,
+    SharingModule,
   ],
   declarations: [ServerLogsPage],
 })

ui/src/app/pages/server-routes/server-metrics/server-metrics.module.ts

@@ -3,8 +3,8 @@ import { CommonModule } from '@angular/common'
 import { Routes, RouterModule } from '@angular/router'
 import { IonicModule } from '@ionic/angular'
 import { ServerMetricsPage } from './server-metrics.page'
-import { PwaBackComponentModule } from 'src/app/components/pwa-back-button/pwa-back.component.module'
 import { SkeletonListComponentModule } from 'src/app/components/skeleton-list/skeleton-list.component.module'
+import { SharingModule } from 'src/app/modules/sharing.module'
 
 const routes: Routes = [
   {
@@ -18,8 +18,8 @@ const routes: Routes = [
     CommonModule,
     IonicModule,
     RouterModule.forChild(routes),
-    PwaBackComponentModule,
     SkeletonListComponentModule,
+    SharingModule,
   ],
   declarations: [ServerMetricsPage],
 })

ui/src/app/pages/server-routes/server-metrics/server-metrics.page.ts

@@ -1,4 +1,5 @@
-import { Component } from '@angular/core'
+import { Component, ViewChild } from '@angular/core'
+import { IonContent } from '@ionic/angular'
 import { Metrics } from 'src/app/services/api/api.types'
 import { ApiService } from 'src/app/services/api/embassy/embassy-api.service'
 import { ErrorToastService } from 'src/app/services/error-toast.service'
@@ -13,6 +14,7 @@ export class ServerMetricsPage {
   loading = true
   going = false
   metrics: Metrics = { }
+  @ViewChild(IonContent) content: IonContent
 
   constructor (
     private readonly errToast: ErrorToastService,
@@ -23,6 +25,10 @@ export class ServerMetricsPage {
     this.startDaemon()
   }
 
+  ngAfterViewInit () {
+    this.content.scrollToPoint(undefined, 1)
+  }
+
   ngOnDestroy () {
     this.stopDaemon()
   }

ui/src/app/pages/server-routes/server-show/server-show.module.ts

@@ -6,7 +6,6 @@ import { ServerShowPage } from './server-show.page'
 import { StatusComponentModule } from 'src/app/components/status/status.component.module'
 import { FormsModule } from '@angular/forms'
 import { SharingModule } from 'src/app/modules/sharing.module'
-import { PwaBackComponentModule } from 'src/app/components/pwa-back-button/pwa-back.component.module'
 import { BadgeMenuComponentModule } from 'src/app/components/badge-menu-button/badge-menu.component.module'
 
 const routes: Routes = [
@@ -24,7 +23,6 @@ const routes: Routes = [
     IonicModule,
     RouterModule.forChild(routes),
     SharingModule,
-    PwaBackComponentModule,
     BadgeMenuComponentModule,
   ],
   declarations: [ServerShowPage],

ui/src/app/pages/server-routes/server-specs/server-specs.module.ts

@@ -3,7 +3,6 @@ import { CommonModule } from '@angular/common'
 import { Routes, RouterModule } from '@angular/router'
 import { IonicModule } from '@ionic/angular'
 import { ServerSpecsPage } from './server-specs.page'
-import { PwaBackComponentModule } from 'src/app/components/pwa-back-button/pwa-back.component.module'
 import { SharingModule } from 'src/app/modules/sharing.module'
 
 const routes: Routes = [
@@ -18,7 +17,6 @@ const routes: Routes = [
     CommonModule,
     IonicModule,
     RouterModule.forChild(routes),
-    PwaBackComponentModule,
     SharingModule,
   ],
   declarations: [ServerSpecsPage],

ui/src/app/pages/server-routes/server-specs/server-specs.page.ts

@@ -1,8 +1,7 @@
-import { Component } from '@angular/core'
-import { ToastController } from '@ionic/angular'
+import { Component, ViewChild } from '@angular/core'
+import { IonContent, ToastController } from '@ionic/angular'
 import { copyToClipboard } from 'src/app/util/web.util'
 import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
-import { Subscription } from 'rxjs'
 
 @Component({
   selector: 'server-specs',
@@ -10,13 +9,17 @@ import { Subscription } from 'rxjs'
   styleUrls: ['./server-specs.page.scss'],
 })
 export class ServerSpecsPage {
-  subs: Subscription[] = []
+  @ViewChild(IonContent) content: IonContent
 
   constructor (
     private readonly toastCtrl: ToastController,
     public readonly patch: PatchDbService,
   ) { }
 
+  ngAfterViewInit () {
+    this.content.scrollToPoint(undefined, 1)
+  }
+
   async copy (address: string) {
     let message = ''
     await copyToClipboard(address || '')

ui/src/app/pages/server-routes/wifi/wifi-add/wifi-add.module.ts

@@ -4,7 +4,7 @@ import { FormsModule } from '@angular/forms'
 import { IonicModule } from '@ionic/angular'
 import { RouterModule, Routes } from '@angular/router'
 import { WifiAddPage } from './wifi-add.page'
-import { PwaBackComponentModule } from 'src/app/components/pwa-back-button/pwa-back.component.module'
+import { SharingModule } from 'src/app/modules/sharing.module'
 
 const routes: Routes = [
   {
@@ -19,7 +19,7 @@ const routes: Routes = [
     FormsModule,
     IonicModule,
     RouterModule.forChild(routes),
-    PwaBackComponentModule,
+    SharingModule,
   ],
   declarations: [WifiAddPage],
 })

ui/src/app/pages/server-routes/wifi/wifi.module.ts

@@ -3,7 +3,6 @@ import { CommonModule } from '@angular/common'
 import { IonicModule } from '@ionic/angular'
 import { RouterModule, Routes } from '@angular/router'
 import { WifiListPage } from './wifi.page'
-import { PwaBackComponentModule } from 'src/app/components/pwa-back-button/pwa-back.component.module'
 import { SharingModule } from 'src/app/modules/sharing.module'
 
 const routes: Routes = [
@@ -22,7 +21,6 @@ const routes: Routes = [
     CommonModule,
     IonicModule,
     RouterModule.forChild(routes),
-    PwaBackComponentModule,
     SharingModule,
   ],
   declarations: [WifiListPage],