use hostname from patchDB as default server name (#1758)

* replace offline toast with global indicator

* use hostname from patchDB as default server name

* add alert to marketplace delete and reword logout alert

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { Component } from '@angular/core'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import {
   ServerNotifications,

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

@@ -1,6 +1,7 @@
 import { Component, Inject } from '@angular/core'
 import {
   ActionSheetController,
+  AlertController,
   LoadingController,
   ModalController,
 } from '@ionic/angular'
@@ -51,6 +52,7 @@ export class MarketplacesPage {
     private readonly config: ConfigService,
     private readonly patch: PatchDbService,
     private readonly destroy$: DestroyService,
+    private readonly alertCtrl: AlertController,
   ) {}
 
   ngOnInit() {
@@ -129,7 +131,7 @@ export class MarketplacesPage {
         text: 'Delete',
         role: 'destructive',
         handler: () => {
-          this.delete(id)
+          this.presentAlertDelete(id)
         },
       })
     }
@@ -189,6 +191,28 @@ export class MarketplacesPage {
       .subscribe()
   }
 
+  private async presentAlertDelete(id: string) {
+    const name = this.marketplaces.find(m => m.id === id)?.name
+
+    const alert = await this.alertCtrl.create({
+      header: 'Confirm',
+      message: `Are you sure you want to delete ${name}?`,
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+        },
+        {
+          text: 'Delete',
+          handler: () => this.delete(id),
+          cssClass: 'enter-click',
+        },
+      ],
+    })
+
+    await alert.present()
+  }
+
   private async delete(id: string): Promise<void> {
     const data = await getMarketplace(this.patch)
     const marketplace: UIMarketplaceData = JSON.parse(JSON.stringify(data))

frontend/projects/ui/src/app/pages/server-routes/preferences/preferences.page.html

@@ -8,24 +8,21 @@
 </ion-header>
 
 <ion-content class="ion-padding-top">
-  <ng-container *ngIf="ui$ | async as ui">
-    <ion-item-group *ngIf="server$ | async as server">
-      <ion-item-divider>General</ion-item-divider>
-      <ion-item button (click)="presentModalName('My Embassy', ui.name)">
-        <ion-label>Device Name</ion-label>
-        <ion-note slot="end">{{ ui.name || 'My Embassy' }}</ion-note>
-      </ion-item>
+  <ion-item-group *ngIf="name$ | async as name">
+    <ion-item-divider>General</ion-item-divider>
+    <ion-item button (click)="presentModalName(name)">
+      <ion-label>Device Name</ion-label>
+      <ion-note slot="end">{{ name.current }}</ion-note>
+    </ion-item>
 
-      <ion-item-divider>Marketplace</ion-item-divider>
-      <ion-item
-        button
-        (click)="serverConfig.presentAlert('auto-check-updates', ui['auto-check-updates'] !== false)"
-      >
-        <ion-label>Auto Check for Updates</ion-label>
-        <ion-note slot="end">
-          {{ ui['auto-check-updates'] !== false ? 'Enabled' : 'Disabled' }}
-        </ion-note>
-      </ion-item>
-    </ion-item-group>
-  </ng-container>
+    <ion-item-divider>Marketplace</ion-item-divider>
+    <ion-item
+      *ngIf="autoCheck$ | async as auto"
+      button
+      (click)="serverConfig.presentAlert('auto-check-updates', auto)"
+    >
+      <ion-label>Auto Check for Updates</ion-label>
+      <ion-note slot="end"> {{ auto ? 'Enabled' : 'Disabled' }} </ion-note>
+    </ion-item>
+  </ion-item-group>
 </ion-content>

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

@@ -12,6 +12,10 @@ import {
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { ServerConfigService } from 'src/app/services/server-config.service'
 import { LocalStorageService } from '../../../services/local-storage.service'
+import {
+  ServerNameInfo,
+  ServerNameService,
+} from 'src/app/services/server-name.service'
 
 @Component({
   selector: 'preferences',
@@ -22,8 +26,9 @@ import { LocalStorageService } from '../../../services/local-storage.service'
 export class PreferencesPage {
   clicks = 0
 
-  readonly ui$ = this.patch.watch$('ui')
+  readonly autoCheck$ = this.patch.watch$('ui', 'auto-check-updates')
   readonly server$ = this.patch.watch$('server-info')
+  readonly name$ = this.serverNameService.name$
 
   constructor(
     private readonly loadingCtrl: LoadingController,
@@ -32,24 +37,22 @@ export class PreferencesPage {
     private readonly toastCtrl: ToastController,
     private readonly localStorageService: LocalStorageService,
     private readonly patch: PatchDbService,
+    private readonly serverNameService: ServerNameService,
     readonly serverConfig: ServerConfigService,
   ) {}
 
-  async presentModalName(
-    placeholder: string,
-    initialValue: string,
-  ): Promise<void> {
+  async presentModalName(name: ServerNameInfo): Promise<void> {
     const options: GenericInputOptions = {
       title: 'Edit Device Name',
       message: 'This is for your reference only.',
       label: 'Device Name',
       useMask: false,
-      placeholder,
+      placeholder: name.default,
       nullable: true,
-      initialValue,
+      initialValue: name.current,
       buttonText: 'Save',
       submitFn: (value: string) =>
-        this.setDbValue('name', value || placeholder),
+        this.setDbValue('name', value || name.default),
     }
 
     const modal = await this.modalCtrl.create({

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

@@ -1,7 +1,7 @@
 <ion-header>
   <ion-toolbar>
-    <ion-title *ngIf="ui$ | async as ui; else loadingTitle">
-      {{ ui.name || "My Embassy" }}
+    <ion-title *ngIf="name$ | async as name; else loadingTitle">
+      {{ name.current }}
     </ion-title>
     <ng-template #loadingTitle>
       <ion-title>

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

@@ -8,6 +8,7 @@ import {
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { ActivatedRoute } from '@angular/router'
 import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
+import { ServerNameService } from 'src/app/services/server-name.service'
 import { Observable, of } from 'rxjs'
 import { filter, take, tap } from 'rxjs/operators'
 import { isEmptyObject, ErrorToastService } from '@start9labs/shared'
@@ -15,6 +16,7 @@ import { EOSService } from 'src/app/services/eos.service'
 import { LocalStorageService } from 'src/app/services/local-storage.service'
 import { OSUpdatePage } from 'src/app/modals/os-update/os-update.page'
 import { getAllPackages } from '../../../util/get-package-data'
+import { AuthService } from 'src/app/services/auth.service'
 
 @Component({
   selector: 'server-show',
@@ -26,7 +28,7 @@ export class ServerShowPage {
   clicks = 0
 
   readonly server$ = this.patch.watch$('server-info')
-  readonly ui$ = this.patch.watch$('ui')
+  readonly name$ = this.serverNameService.name$
   readonly showUpdate$ = this.eosService.showUpdate$
   readonly showDiskRepair$ = this.localStorageService.showDiskRepair$
 
@@ -41,6 +43,8 @@ export class ServerShowPage {
     private readonly patch: PatchDbService,
     private readonly eosService: EOSService,
     private readonly localStorageService: LocalStorageService,
+    private readonly serverNameService: ServerNameService,
+    private readonly authService: AuthService,
   ) {}
 
   ngOnInit() {
@@ -74,6 +78,26 @@ export class ServerShowPage {
     }
   }
 
+  async presentAlertLogout() {
+    const alert = await this.alertCtrl.create({
+      header: 'Confirm',
+      message: 'Are you sure you want to log out?',
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+        },
+        {
+          text: 'Logout',
+          handler: () => this.logout(),
+          cssClass: 'enter-click',
+        },
+      ],
+    })
+
+    await alert.present()
+  }
+
   async presentAlertRestart() {
     const alert = await this.alertCtrl.create({
       header: 'Restart',
@@ -171,6 +195,12 @@ export class ServerShowPage {
     await alert.present()
   }
 
+  // should wipe cache independent of actual BE logout
+  private logout() {
+    this.embassyApi.logout({}).catch(e => console.error('Failed to log out', e))
+    this.authService.setUnverified()
+  }
+
   private async restart() {
     const action = 'Restart'
 
@@ -456,6 +486,14 @@ export class ServerShowPage {
       },
     ],
     Power: [
+      {
+        title: 'Log Out',
+        description: '',
+        icon: 'log-out-outline',
+        action: () => this.presentAlertLogout(),
+        detail: false,
+        disabled$: of(false),
+      },
       {
         title: 'Restart',
         description: '',

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

@@ -95,18 +95,14 @@ export class SideloadPage {
         manifest: this.toUpload.manifest!,
         icon: this.toUpload.icon!,
       })
-      this.api
-        .uploadPackage(guid, await blobToBuffer(this.toUpload.file!))
-        .catch(e => {
-          this.errToast.present(e)
-        })
+      const buffer = await blobToBuffer(this.toUpload.file!)
+      this.api.uploadPackage(guid, buffer).catch(e => console.error(e))
+
+      this.navCtrl.navigateRoot('/services')
     } catch (e: any) {
       this.errToast.present(e)
     } finally {
       loader.dismiss()
-      await this.navCtrl.navigateForward(
-        `/services/${this.toUpload.manifest!.id}`,
-      )
       this.clearToUpload()
     }
   }