Update/misc frontend

build/RELEASE.md

@@ -70,3 +70,7 @@
   - `make eos_raspberrypi.img`
   - `tar --format=posix -cS -f- eos-<version>-<git hash>-<date>_raspberrypi.img | gzip > eos-<version>-<git hash>-<date>_raspberrypi.tar.gz`
 - Artifact `./eos-<version>-<git hash>-<date>_raspberrypi.tar.gz`
+
+## `embassy-sdk`
+
+- Build and deploy to all registries

frontend/projects/marketplace/src/pages/show/about/about.component.html

@@ -24,3 +24,12 @@
     <h2>{{ pkg.manifest.description.long }}</h2>
   </ion-label>
 </ion-item>
+<div
+  *ngIf="pkg.manifest['marketing-site'] as url"
+  style="padding: 4px 0 10px 14px"
+>
+  <ion-button [href]="url" target="_blank" rel="noreferrer" color="tertiary">
+    View marketing website
+    <ion-icon slot="end" name="open-outline"></ion-icon>
+  </ion-button>
+</div>

frontend/projects/marketplace/src/pages/show/additional/additional.component.html

@@ -1,13 +1,3 @@
-<div
-  *ngIf="pkg.manifest['marketing-site'] as url"
-  style="padding: 4px 0 10px 14px"
->
-  <ion-button [href]="url" target="_blank" rel="noreferrer" color="tertiary">
-    View marketing website
-    <ion-icon slot="end" name="open-outline"></ion-icon>
-  </ion-button>
-</div>
-
 <ng-container *ngIf="pkg.manifest.replaces as replaces">
   <div *ngIf="replaces.length" class="ion-padding-bottom">
     <ion-item-divider>Intended to replace</ion-item-divider>

frontend/projects/setup-wizard/src/app/pages/embassy/embassy.page.ts

@@ -154,9 +154,7 @@ export class EmbassyPage {
       await this.stateService.setupEmbassy(logicalname, password)
       await this.navCtrl.navigateForward(`/loading`)
     } catch (e: any) {
-      this.errorToastService.present({
-        message: `${e.message}\n\nRestart Embassy to try again.`,
-      })
+      this.errorToastService.present(e)
       console.error(e)
     } finally {
       loader.dismiss()

frontend/projects/setup-wizard/src/app/pages/home/home.page.html

@@ -66,57 +66,61 @@ <h2><ion-text color="danger">Recover</ion-text></h2>
 
               <!-- SLIDE 2 -->
               <ng-template swiperSlide>
-                <!-- restore from backup -->
+                <!-- attach -->
                 <ion-item
                   button
-                  lines="none"
                   detail="false"
-                  routerLink="/recover"
+                  lines="none"
+                  routerLink="/attach"
                 >
-                  <ion-icon slot="start" name="save-outline"></ion-icon>
+                  <ion-icon slot="start" name="cube-outline"></ion-icon>
                   <ion-label>
                     <h2>
-                      <ion-text color="warning">Restore From Backup</ion-text>
+                      <ion-text color="success">Use Existing Drive</ion-text>
                     </h2>
-                    <p>Restore an Embassy from an encrypted backup</p>
+                    <p>
+                      Attach an existing embassyOS data drive (
+                      <b>not</b>
+                      a backup)
+                    </p>
                   </ion-label>
                 </ion-item>
 
-                <!-- attach -->
+                <!-- transfer -->
                 <ion-item
                   button
                   detail="false"
                   lines="none"
-                  routerLink="/attach"
+                  routerLink="/transfer"
                 >
-                  <ion-icon slot="start" name="cube-outline"></ion-icon>
+                  <ion-icon slot="start" name="share-outline"></ion-icon>
                   <ion-label>
                     <h2>
-                      <ion-text color="primary">Use Existing Drive</ion-text>
+                      <ion-text color="primary">Transfer</ion-text>
                     </h2>
                     <p>
-                      Use an existing, valid Embassy data drive (not a backup)
+                      Transfer data from an existing embassyOS data drive (not a
+                      backup) to a new, preferred drive
+                      <br />
                     </p>
                   </ion-label>
                 </ion-item>
 
-                <!-- transfer -->
+                <!-- restore from backup -->
                 <ion-item
                   button
-                  detail="false"
                   lines="none"
-                  routerLink="/transfer"
+                  detail="false"
+                  routerLink="/recover"
                 >
-                  <ion-icon slot="start" name="share-outline"></ion-icon>
+                  <ion-icon slot="start" name="save-outline"></ion-icon>
                   <ion-label>
                     <h2>
-                      <ion-text color="success">Transfer</ion-text>
+                      <ion-text color="warning">
+                        Restore From Backup (Disaster Recovery)
+                      </ion-text>
                     </h2>
-                    <p>
-                      Transfer data from an existing, valid Embassy data drive
-                      (not a backup) to a new drive<br />(e.g. in order to
-                      transfer data to another device)
-                    </p>
+                    <p>Restore embassyOS data from an encrypted backup</p>
                   </ion-label>
                 </ion-item>
               </ng-template>

frontend/projects/setup-wizard/src/app/services/state.service.ts

@@ -49,9 +49,7 @@ export class StateService {
         )
       }
     } catch (e: any) {
-      this.errorToastService.present({
-        message: `${e.message}\n\nRestart Embassy to try again.`,
-      })
+      this.errorToastService.present(e)
     }
     setTimeout(() => this.pollDataTransferProgress(), 0) // prevent call stack from growing
   }

frontend/projects/shared/src/classes/http-error.ts

@@ -3,8 +3,6 @@ import { HttpErrorResponse } from '@angular/common/http'
 export class HttpError {
   readonly code = this.error.status
   readonly message = this.error.statusText
-  readonly details = null
-  readonly revision = null
 
   constructor(private readonly error: HttpErrorResponse) {}
 }

frontend/projects/shared/src/services/error-toast.service.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core'
 import { IonicSafeString, ToastController } from '@ionic/angular'
+import { HttpError } from '../classes/http-error'
 
 @Injectable({
   providedIn: 'root',
@@ -9,7 +10,7 @@ export class ErrorToastService {
 
   constructor(private readonly toastCtrl: ToastController) {}
 
-  async present(e: { message: string }, link?: string): Promise<void> {
+  async present(e: HttpError | string, link?: string): Promise<void> {
     console.error(e)
 
     if (this.toast) return
@@ -42,12 +43,21 @@ export class ErrorToastService {
 }
 
 export function getErrorMessage(
-  { message }: { message: string },
+  e: HttpError | string,
   link?: string,
 ): string | IonicSafeString {
-  if (!message) {
-    message = 'Unknown Error.'
+  let message = ''
+
+  if (typeof e === 'string') {
+    message = e
+  } else if (e.code === 0) {
+    message =
+      'Request Error. Your browser blocked the request. This is usually caused by a corrupt browser cache or an overly aggressive ad blocker. Please clear your browser cache and/or adjust your ad blocker and try again'
+  } else if (!e.message) {
+    message = 'Unknown Error'
     link = 'https://docs.start9.com/latest/support/faq'
+  } else {
+    message = e.message
   }
 
   if (link) {

frontend/projects/ui/src/app/app.component.ts

@@ -6,13 +6,14 @@ import { PatchDataService } from './services/patch-data.service'
 import { PatchMonitorService } from './services/patch-monitor.service'
 import { ConnectionService } from './services/connection.service'
 import { Title } from '@angular/platform-browser'
-import { ServerNameService } from './services/server-name.service'
 import {
   ClientStorageService,
   WidgetDrawer,
 } from './services/client-storage.service'
 import { ThemeSwitcherService } from './services/theme-switcher.service'
 import { THEME } from '@start9labs/shared'
+import { PatchDB } from 'patch-db-client'
+import { DataModel } from './services/patch-db/data-model'
 
 @Component({
   selector: 'app-root',
@@ -30,17 +31,17 @@ export class AppComponent implements OnDestroy {
     private readonly patchData: PatchDataService,
     private readonly patchMonitor: PatchMonitorService,
     private readonly splitPane: SplitPaneTracker,
-    private readonly serverNameService: ServerNameService,
+    private readonly patch: PatchDB<DataModel>,
     readonly authService: AuthService,
     readonly connection: ConnectionService,
     readonly clientStorageService: ClientStorageService,
     readonly themeSwitcher: ThemeSwitcherService,
   ) {}
 
   ngOnInit() {
-    this.serverNameService.name$.subscribe(({ current }) =>
-      this.titleService.setTitle(current),
-    )
+    this.patch
+      .watch$('ui', 'name')
+      .subscribe(name => this.titleService.setTitle(name || 'embassyOS'))
   }
 
   splitPaneVisible({ detail }: any) {

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

@@ -9,7 +9,6 @@ import {
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { ActivatedRoute } from '@angular/router'
 import { PatchDB } from 'patch-db-client'
-import { ServerNameService } from 'src/app/services/server-name.service'
 import { combineLatest, firstValueFrom, map, Observable, of } from 'rxjs'
 import { ErrorToastService } from '@start9labs/shared'
 import { EOSService } from 'src/app/services/eos.service'
@@ -52,27 +51,25 @@ export class ServerShowPage {
     private readonly patch: PatchDB<DataModel>,
     private readonly eosService: EOSService,
     private readonly ClientStorageService: ClientStorageService,
-    private readonly serverNameService: ServerNameService,
     private readonly authService: AuthService,
     private readonly toastCtrl: ToastController,
     private readonly config: ConfigService,
     @Inject(DOCUMENT) private readonly document: Document,
   ) {}
 
   async presentModalName(): Promise<void> {
-    const name = await firstValueFrom(this.serverNameService.name$)
+    const chosenName = await firstValueFrom(this.patch.watch$('ui', 'name'))
 
     const options: GenericInputOptions = {
       title: 'Set Device Name',
       message: 'This will be displayed in your browser tab',
       label: 'Device Name',
       useMask: false,
-      placeholder: name.default,
+      placeholder: 'embassyOS',
       nullable: true,
-      initialValue: name.current,
+      initialValue: chosenName,
       buttonText: 'Save',
-      submitFn: (value: string) =>
-        this.setDbValue('name', value || name.default),
+      submitFn: (name: string) => this.setName(name || null),
     }
 
     const modal = await this.modalCtrl.create({
@@ -227,14 +224,14 @@ export class ServerShowPage {
     }
   }
 
-  private async setDbValue(key: string, value: string): Promise<void> {
+  private async setName(value: string | null): Promise<void> {
     const loader = await this.loadingCtrl.create({
       message: 'Saving...',
     })
     await loader.present()
 
     try {
-      await this.embassyApi.setDbValue<string>([key], value)
+      await this.embassyApi.setDbValue<string | null>(['name'], value)
     } finally {
       loader.dismiss()
     }
@@ -393,8 +390,8 @@ export class ServerShowPage {
         disabled$: this.eosService.updatingOrBackingUp$,
       },
       {
-        title: 'Set Device Name',
-        description: 'Give your device a name for easy identification',
+        title: 'Browser Tab Title',
+        description: `Customize the display name of your browser tab. This does not affect your server's LAN address.`,
         icon: 'pricetag-outline',
         action: () => this.presentModalName(),
         detail: false,
@@ -429,7 +426,7 @@ export class ServerShowPage {
         disabled$: of(false),
       },
       {
-        title: 'Sideload Service',
+        title: 'Sideload a Service',
         description: `Manually install a service`,
         icon: 'push-outline',
         action: () =>