remove product key from setup flow (#1750)

* remove product key flow from setup * feat: backend turned off encryption + new Id + no package id * implement new encryption scheme in FE * decode response string * crypto not working * update setup wizard closes #1762 * feat: Get the encryption key * fix: Get to recovery * remove old code * fix build * fix: Install works for now * fix bug in config for adding new list items * dismiss action modal on success * clear button in config * wip: Currently broken in avahi mdns * include headers with req/res and refactor patchDB init and usage * fix: Can now run in the main * flatline on failed init * update patch DB * add last-wifi-region to data model even though not used by FE * chore: Fix the start. * wip: Fix wrong order for getting hostname before sql has been created * fix edge case where union keys displayed as new when not new * fix: Can start * last backup color, markdown links always new tab, fix bug with login * refactor to remove WithRevision * resolve circular dep issue * update submodule * fix patch-db * update patchDB * update patch again * escape error * decodeuricomponent * increase proxy buffer size * increase proxy buffer size * fix nginx Co-authored-by: BluJ <mogulslayer@gmail.com> Co-authored-by: BluJ <dragondef@gmail.com> Co-authored-by: Aiden McClelland <me@drbonez.dev>
2026-03-30 20:14:49 +00:00 · 2022-09-07 09:25:01 -06:00
parent 76682ebef0
commit 50111e37da
175 changed files with 11436 additions and 2906 deletions
--- a/frontend/projects/ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts
+++ b/frontend/projects/ui/src/app/pages/apps-routes/app-actions/app-actions.page.ts
@@ -7,9 +7,10 @@ import {
  ModalController,
  NavController,
 } from '@ionic/angular'
-import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
+import { PatchDB } from 'patch-db-client'
 import {
  Action,
+  DataModel,
  PackageDataEntry,
  PackageMainStatus,
 } from 'src/app/services/patch-db/data-model'
@@ -36,7 +37,7 @@ export class AppActionsPage {
    private readonly errToast: ErrorToastService,
    private readonly loadingCtrl: LoadingController,
    private readonly navCtrl: NavController,
-    private readonly patch: PatchDbService,
+    private readonly patch: PatchDB<DataModel>,
  ) {}

  async handleAction(
@@ -197,10 +198,10 @@ export class AppActionsPage {
      })

      setTimeout(() => successModal.present(), 500)
-      return false
+      return true // needed to dismiss original modal/alert
    } catch (e: any) {
      this.errToast.present(e)
-      return false
+      return false // don't dismiss original modal/alert
    } finally {
      loader.dismiss()
    }
--- a/frontend/projects/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.ts
+++ b/frontend/projects/ui/src/app/pages/apps-routes/app-interfaces/app-interfaces.page.ts
@@ -4,10 +4,11 @@ import { ModalController, ToastController } from '@ionic/angular'
 import { getPkgId, copyToClipboard } from '@start9labs/shared'
 import { getUiInterfaceKey } from 'src/app/services/config.service'
 import {
+  DataModel,
  InstalledPackageDataEntry,
  InterfaceDef,
 } from 'src/app/services/patch-db/data-model'
-import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
+import { PatchDB } from 'patch-db-client'
 import { QRComponent } from 'src/app/components/qr/qr.component'
 import { getPackage } from '../../../util/get-package-data'

@@ -28,7 +29,7 @@ export class AppInterfacesPage {

  constructor(
    private readonly route: ActivatedRoute,
-    private readonly patch: PatchDbService,
+    private readonly patch: PatchDB<DataModel>,
  ) {}

  async ngOnInit() {
--- a/frontend/projects/ui/src/app/pages/apps-routes/app-list/app-list.page.ts
+++ b/frontend/projects/ui/src/app/pages/apps-routes/app-list/app-list.page.ts
@@ -1,6 +1,9 @@
 import { Component } from '@angular/core'
-import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
-import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
+import { PatchDB } from 'patch-db-client'
+import {
+  DataModel,
+  PackageDataEntry,
+} from 'src/app/services/patch-db/data-model'
 import { Observable } from 'rxjs'
 import { filter, map, switchMap, take, takeUntil, tap } from 'rxjs/operators'
 import { isEmptyObject, exists, DestroyService } from '@start9labs/shared'
@@ -22,7 +25,7 @@ export class AppListPage {
  constructor(
    private readonly api: ApiService,
    private readonly destroy$: DestroyService,
-    private readonly patch: PatchDbService,
+    private readonly patch: PatchDB<DataModel>,
  ) {}

  get empty(): boolean {
--- a/frontend/projects/ui/src/app/pages/apps-routes/app-list/package-info.pipe.ts
+++ b/frontend/projects/ui/src/app/pages/apps-routes/app-list/package-info.pipe.ts
@@ -1,15 +1,18 @@
 import { Pipe, PipeTransform } from '@angular/core'
 import { Observable } from 'rxjs'
 import { filter, map, startWith } from 'rxjs/operators'
-import { PackageDataEntry } from '../../../services/patch-db/data-model'
+import {
+  DataModel,
+  PackageDataEntry,
+} from 'src/app/services/patch-db/data-model'
 import { getPackageInfo, PkgInfo } from '../../../util/get-package-info'
-import { PatchDbService } from '../../../services/patch-db/patch-db.service'
+import { PatchDB } from 'patch-db-client'

@Pipe({
  name: 'packageInfo',
 })
 export class PackageInfoPipe implements PipeTransform {
-  constructor(private readonly patch: PatchDbService) {}
+  constructor(private readonly patch: PatchDB<DataModel>) {}

  transform(pkg: PackageDataEntry): Observable<PkgInfo> {
    return this.patch
--- a/frontend/projects/ui/src/app/pages/apps-routes/app-properties/app-properties.page.ts
+++ b/frontend/projects/ui/src/app/pages/apps-routes/app-properties/app-properties.page.ts
@@ -10,8 +10,11 @@ import {
 } from '@ionic/angular'
 import { PackageProperties } from 'src/app/util/properties.util'
 import { QRComponent } from 'src/app/components/qr/qr.component'
-import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
-import { PackageMainStatus } from 'src/app/services/patch-db/data-model'
+import { PatchDB } from 'patch-db-client'
+import {
+  DataModel,
+  PackageMainStatus,
+} from 'src/app/services/patch-db/data-model'
 import {
  DestroyService,
  ErrorToastService,
@@ -52,7 +55,7 @@ export class AppPropertiesPage {
    private readonly toastCtrl: ToastController,
    private readonly modalCtrl: ModalController,
    private readonly navCtrl: NavController,
-    private readonly patch: PatchDbService,
+    private readonly patch: PatchDB<DataModel>,
    private readonly destroy$: DestroyService,
  ) {}

--- a/frontend/projects/ui/src/app/pages/apps-routes/app-show/app-show.module.ts
+++ b/frontend/projects/ui/src/app/pages/apps-routes/app-show/app-show.module.ts
@@ -4,7 +4,6 @@ import { Routes, RouterModule } from '@angular/router'
 import { IonicModule } from '@ionic/angular'
 import { AppShowPage } from './app-show.page'
 import { EmverPipesModule } from '@start9labs/shared'
-import { AppWizardComponentModule } from 'src/app/components/app-wizard/app-wizard.component.module'
 import { StatusComponentModule } from 'src/app/components/status/status.component.module'
 import { AppConfigPageModule } from 'src/app/modals/app-config/app-config.module'
 import { LaunchablePipeModule } from 'src/app/pipes/launchable/launchable.module'
@@ -51,7 +50,6 @@ const routes: Routes = [
    StatusComponentModule,
    IonicModule,
    RouterModule.forChild(routes),
-    AppWizardComponentModule,
    AppConfigPageModule,
    EmverPipesModule,
    LaunchablePipeModule,
--- 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,7 +1,8 @@
 import { ChangeDetectionStrategy, Component, Inject } from '@angular/core'
 import { NavController } from '@ionic/angular'
-import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
+import { PatchDB } from 'patch-db-client'
 import {
+  DataModel,
  PackageDataEntry,
  PackageMainStatus,
  PackageState,
@@ -62,7 +63,7 @@ export class AppShowPage {
  constructor(
    private readonly route: ActivatedRoute,
    private readonly navCtrl: NavController,
-    private readonly patch: PatchDbService,
+    private readonly patch: PatchDB<DataModel>,
    @Inject(AbstractMarketplaceService)
    private readonly marketplaceService: MarketplaceService,
  ) {}
--- a/frontend/projects/ui/src/app/pages/apps-routes/app-show/pipes/to-buttons.pipe.ts
+++ b/frontend/projects/ui/src/app/pages/apps-routes/app-show/pipes/to-buttons.pipe.ts
@@ -8,6 +8,7 @@ import {
  removeTrailingSlash,
 } from '@start9labs/shared'
 import {
+  DataModel,
  PackageDataEntry,
  UIMarketplaceData,
 } from 'src/app/services/patch-db/data-model'
@@ -16,7 +17,8 @@ import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { from, map, Observable } from 'rxjs'
 import { Marketplace } from '@start9labs/marketplace'
 import { ActionMarketplaceComponent } from 'src/app/modals/action-marketplace/action-marketplace.component'
-import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
+import { PatchDB } from 'patch-db-client'
+
 export interface Button {
  title: string
  description: string
@@ -38,7 +40,7 @@ export class ToButtonsPipe implements PipeTransform {
    private readonly modalCtrl: ModalController,
    private readonly modalService: ModalService,
    private readonly apiService: ApiService,
-    private readonly patch: PatchDbService,
+    private readonly patch: PatchDB<DataModel>,
  ) {}

  transform(
--- a/frontend/projects/ui/src/app/pages/apps-routes/app-show/pipes/to-dependencies.pipe.ts
+++ b/frontend/projects/ui/src/app/pages/apps-routes/app-show/pipes/to-dependencies.pipe.ts
@@ -4,12 +4,13 @@ import { NavController } from '@ionic/angular'
 import { combineLatest, Observable } from 'rxjs'
 import { filter, map, startWith } from 'rxjs/operators'
 import {
+  DataModel,
  DependencyError,
  DependencyErrorType,
  PackageDataEntry,
 } from 'src/app/services/patch-db/data-model'
 import { DependentInfo } from 'src/app/types/dependent-info'
-import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
+import { PatchDB } from 'patch-db-client'
 import { ModalService } from 'src/app/services/modal.service'

 export interface DependencyInfo {
@@ -27,7 +28,7 @@ export interface DependencyInfo {
 })
 export class ToDependenciesPipe implements PipeTransform {
  constructor(
-    private readonly patch: PatchDbService,
+    private readonly patch: PatchDB<DataModel>,
    private readonly navCtrl: NavController,
    private readonly modalService: ModalService,
  ) {}
--- a/frontend/projects/ui/src/app/pages/apps-routes/app-show/pipes/to-health-checks.pipe.ts
+++ b/frontend/projects/ui/src/app/pages/apps-routes/app-show/pipes/to-health-checks.pipe.ts
@@ -1,19 +1,20 @@
 import { Pipe, PipeTransform } from '@angular/core'
 import {
+  DataModel,
  HealthCheckResult,
  PackageDataEntry,
  PackageMainStatus,
 } from 'src/app/services/patch-db/data-model'
 import { exists, isEmptyObject } from '@start9labs/shared'
 import { filter, map, startWith } from 'rxjs/operators'
-import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
+import { PatchDB } from 'patch-db-client'
 import { Observable } from 'rxjs'

@Pipe({
  name: 'toHealthChecks',
 })
 export class ToHealthChecksPipe implements PipeTransform {
-  constructor(private readonly patch: PatchDbService) {}
+  constructor(private readonly patch: PatchDB<DataModel>) {}

  transform(
    pkg: PackageDataEntry,
--- a/frontend/projects/ui/src/app/pages/developer-routes/dev-config/dev-config.page.ts
+++ b/frontend/projects/ui/src/app/pages/developer-routes/dev-config/dev-config.page.ts
@@ -5,9 +5,10 @@ import { debounce, ErrorToastService } from '@start9labs/shared'
 import * as yaml from 'js-yaml'
 import { filter, take } from 'rxjs/operators'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
-import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
+import { PatchDB } from 'patch-db-client'
 import { getProjectId } from 'src/app/util/get-project-id'
 import { GenericFormPage } from '../../../modals/generic-form/generic-form.page'
+import { DataModel } from 'src/app/services/patch-db/data-model'

@Component({
  selector: 'dev-config',
@@ -24,12 +25,12 @@ export class DevConfigPage {
    private readonly route: ActivatedRoute,
    private readonly errToast: ErrorToastService,
    private readonly modalCtrl: ModalController,
-    private readonly patchDb: PatchDbService,
+    private readonly patch: PatchDB<DataModel>,
    private readonly api: ApiService,
  ) {}

  ngOnInit() {
-    this.patchDb
+    this.patch
      .watch$('ui', 'dev', this.projectId, 'config')
      .pipe(filter(Boolean), take(1))
      .subscribe(config => {
--- a/frontend/projects/ui/src/app/pages/developer-routes/dev-instructions/dev-instructions.page.ts
+++ b/frontend/projects/ui/src/app/pages/developer-routes/dev-instructions/dev-instructions.page.ts
@@ -8,8 +8,9 @@ import {
  ErrorToastService,
  MarkdownComponent,
 } from '@start9labs/shared'
-import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
+import { PatchDB } from 'patch-db-client'
 import { getProjectId } from 'src/app/util/get-project-id'
+import { DataModel } from 'src/app/services/patch-db/data-model'

@Component({
  selector: 'dev-instructions',
@@ -26,12 +27,12 @@ export class DevInstructionsPage {
    private readonly route: ActivatedRoute,
    private readonly errToast: ErrorToastService,
    private readonly modalCtrl: ModalController,
-    private readonly patchDb: PatchDbService,
+    private readonly patch: PatchDB<DataModel>,
    private readonly api: ApiService,
  ) {}

  ngOnInit() {
-    this.patchDb
+    this.patch
      .watch$('ui', 'dev', this.projectId, 'instructions')
      .pipe(filter(Boolean), take(1))
      .subscribe(config => {
--- a/frontend/projects/ui/src/app/pages/developer-routes/dev-manifest/dev-manifest.page.ts
+++ b/frontend/projects/ui/src/app/pages/developer-routes/dev-manifest/dev-manifest.page.ts
@@ -2,8 +2,9 @@ import { Component } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
 import * as yaml from 'js-yaml'
 import { take } from 'rxjs/operators'
-import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
+import { PatchDB } from 'patch-db-client'
 import { getProjectId } from 'src/app/util/get-project-id'
+import { DataModel } from 'src/app/services/patch-db/data-model'

@Component({
  selector: 'dev-manifest',
@@ -17,11 +18,11 @@ export class DevManifestPage {

  constructor(
    private readonly route: ActivatedRoute,
-    private readonly patchDb: PatchDbService,
+    private readonly patch: PatchDB<DataModel>,
  ) {}

  ngOnInit() {
-    this.patchDb
+    this.patch
      .watch$('ui', 'dev', this.projectId)
      .pipe(take(1))
      .subscribe(devData => {
--- a/frontend/projects/ui/src/app/pages/developer-routes/developer-list/developer-list.page.ts
+++ b/frontend/projects/ui/src/app/pages/developer-routes/developer-list/developer-list.page.ts
@@ -10,12 +10,12 @@ import {
  GenericInputComponent,
  GenericInputOptions,
 } from 'src/app/modals/generic-input/generic-input.component'
-import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
+import { PatchDB } from 'patch-db-client'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { ConfigSpec } from 'src/app/pkg-config/config-types'
 import * as yaml from 'js-yaml'
 import { v4 } from 'uuid'
-import { DevData } from 'src/app/services/patch-db/data-model'
+import { DataModel, DevData } from 'src/app/services/patch-db/data-model'
 import { DestroyService, ErrorToastService } from '@start9labs/shared'
 import { takeUntil } from 'rxjs/operators'

@@ -35,7 +35,7 @@ export class DeveloperListPage {
    private readonly errToast: ErrorToastService,
    private readonly alertCtrl: AlertController,
    private readonly destroy$: DestroyService,
-    private readonly patch: PatchDbService,
+    private readonly patch: PatchDB<DataModel>,
    private readonly actionCtrl: ActionSheetController,
  ) {}

--- a/frontend/projects/ui/src/app/pages/developer-routes/developer-menu/developer-menu.page.ts
+++ b/frontend/projects/ui/src/app/pages/developer-routes/developer-menu/developer-menu.page.ts
@@ -3,11 +3,11 @@ import { ActivatedRoute } from '@angular/router'
 import { LoadingController, ModalController } from '@ionic/angular'
 import { GenericFormPage } from 'src/app/modals/generic-form/generic-form.page'
 import { BasicInfo, getBasicInfoSpec } from './form-info'
-import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
+import { PatchDB } from 'patch-db-client'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { ErrorToastService } from '@start9labs/shared'
 import { getProjectId } from 'src/app/util/get-project-id'
-import { DevProjectData } from 'src/app/services/patch-db/data-model'
+import { DataModel, DevProjectData } from 'src/app/services/patch-db/data-model'

@Component({
  selector: 'developer-menu',
@@ -25,7 +25,7 @@ export class DeveloperMenuPage {
    private readonly loadingCtrl: LoadingController,
    private readonly api: ApiService,
    private readonly errToast: ErrorToastService,
-    private readonly patch: PatchDbService,
+    private readonly patch: PatchDB<DataModel>,
  ) {}

  async openBasicInfoModal(data: DevProjectData) {
--- a/frontend/projects/ui/src/app/pages/login/login.page.scss
+++ b/frontend/projects/ui/src/app/pages/login/login.page.scss
@@ -6,7 +6,6 @@ ion-card-title {
 }

 ion-item {
-  --border-radius: 6px;
  --border-style: solid;
  --border-width: 1px;
  --border-color: var(--ion-color-light);
--- a/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.ts
+++ b/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.ts
@@ -1,8 +1,9 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { map } from 'rxjs/operators'
 import { AbstractMarketplaceService } from '@start9labs/marketplace'
-import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
+import { PatchDB } from 'patch-db-client'
 import { ConnectionService } from 'src/app/services/connection.service'
+import { DataModel } from 'src/app/services/patch-db/data-model'

@Component({
  selector: 'marketplace-list',
@@ -23,7 +24,7 @@ export class MarketplaceListPage {
    .pipe(map(({ name }) => name))

  constructor(
-    private readonly patch: PatchDbService,
+    private readonly patch: PatchDB<DataModel>,
    private readonly marketplaceService: AbstractMarketplaceService,
    private readonly connectionService: ConnectionService,
  ) {}
--- a/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show-controls/marketplace-show-controls.component.ts
+++ b/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show-controls/marketplace-show-controls.component.ts
@@ -11,6 +11,7 @@ import {
 } from '@start9labs/marketplace'
 import { Emver, ErrorToastService, isEmptyObject } from '@start9labs/shared'
 import {
+  DataModel,
  PackageDataEntry,
  PackageState,
 } from 'src/app/services/patch-db/data-model'
@@ -19,7 +20,7 @@ import { MarketplaceService } from 'src/app/services/marketplace.service'
 import { hasCurrentDeps } from 'src/app/util/has-deps'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { Breakages } from 'src/app/services/api/api.types'
-import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
+import { PatchDB } from 'patch-db-client'
 import { getAllPackages } from 'src/app/util/get-package-data'
 import { firstValueFrom } from 'rxjs'

@@ -49,7 +50,7 @@ export class MarketplaceShowControlsComponent {
    private readonly emver: Emver,
    private readonly errToast: ErrorToastService,
    private readonly embassyApi: ApiService,
-    private readonly patch: PatchDbService,
+    private readonly patch: PatchDB<DataModel>,
  ) {}

  get localVersion(): string {
--- a/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.module.ts
+++ b/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.module.ts
@@ -14,8 +14,6 @@ import {
  AdditionalModule,
  DependenciesModule,
 } from '@start9labs/marketplace'
-import { AppWizardComponentModule } from 'src/app/components/app-wizard/app-wizard.component.module'
-
 import { MarketplaceStatusModule } from '../marketplace-status/marketplace-status.module'
 import { MarketplaceShowPage } from './marketplace-show.page'
 import { MarketplaceShowHeaderComponent } from './marketplace-show-header/marketplace-show-header.component'
@@ -39,7 +37,6 @@ const routes: Routes = [
    EmverPipesModule,
    MarkdownPipeModule,
    MarketplaceStatusModule,
-    AppWizardComponentModule,
    PackageModule,
    AboutModule,
    DependenciesModule,
--- a/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.ts
+++ b/frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.ts
@@ -5,10 +5,10 @@ import {
  MarketplacePkg,
  AbstractMarketplaceService,
 } from '@start9labs/marketplace'
-import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
-import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
+import { PatchDB } from 'patch-db-client'
 import { BehaviorSubject, Observable, of } from 'rxjs'
 import { catchError, filter, shareReplay, switchMap } from 'rxjs/operators'
+import { DataModel } from 'src/app/services/patch-db/data-model'

@Component({
  selector: 'marketplace-show',
@@ -40,7 +40,7 @@ export class MarketplaceShowPage {
  constructor(
    private readonly route: ActivatedRoute,
    private readonly errToast: ErrorToastService,
-    private readonly patch: PatchDbService,
+    private readonly patch: PatchDB<DataModel>,
    private readonly marketplaceService: AbstractMarketplaceService,
  ) {}

--- a/frontend/projects/ui/src/app/pages/notifications/notifications.page.ts
+++ b/frontend/projects/ui/src/app/pages/notifications/notifications.page.ts
@@ -13,7 +13,8 @@ import {
 import { ActivatedRoute } from '@angular/router'
 import { ErrorToastService } from '@start9labs/shared'
 import { BackupReportPage } from 'src/app/modals/backup-report/backup-report.page'
-import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
+import { PatchDB } from 'patch-db-client'
+import { DataModel } from 'src/app/services/patch-db/data-model'

@Component({
  selector: 'notifications',
@@ -36,7 +37,7 @@ export class NotificationsPage {
    private readonly modalCtrl: ModalController,
    private readonly errToast: ErrorToastService,
    private readonly route: ActivatedRoute,
-    private readonly patch: PatchDbService,
+    private readonly patch: PatchDB<DataModel>,
  ) {}

  async ngOnInit() {
--- a/frontend/projects/ui/src/app/pages/server-routes/lan/lan.page.ts
+++ b/frontend/projects/ui/src/app/pages/server-routes/lan/lan.page.ts
@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { ConfigService } from 'src/app/services/config.service'
-import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
+import { PatchDB } from 'patch-db-client'
+import { DataModel } from 'src/app/services/patch-db/data-model'

@Component({
  selector: 'lan',
@@ -14,7 +15,7 @@ export class LANPage {

  constructor(
    private readonly config: ConfigService,
-    private readonly patch: PatchDbService,
+    private readonly patch: PatchDB<DataModel>,
  ) {}

  installCert(): void {
--- a/frontend/projects/ui/src/app/pages/server-routes/marketplaces/marketplaces.page.ts
+++ b/frontend/projects/ui/src/app/pages/server-routes/marketplaces/marketplaces.page.ts
@@ -11,9 +11,12 @@ import { AbstractMarketplaceService } from '@start9labs/marketplace'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { ValueSpecObject } from 'src/app/pkg-config/config-types'
 import { GenericFormPage } from 'src/app/modals/generic-form/generic-form.page'
-import { PatchDbService } from '../../../services/patch-db/patch-db.service'
+import { PatchDB } from 'patch-db-client'
 import { v4 } from 'uuid'
-import { UIMarketplaceData } from '../../../services/patch-db/data-model'
+import {
+  DataModel,
+  UIMarketplaceData,
+} from '../../../services/patch-db/data-model'
 import { ConfigService } from '../../../services/config.service'
 import { MarketplaceService } from 'src/app/services/marketplace.service'
 import {
@@ -50,7 +53,7 @@ export class MarketplacesPage {
    @Inject(AbstractMarketplaceService)
    private readonly marketplaceService: MarketplaceService,
    private readonly config: ConfigService,
-    private readonly patch: PatchDbService,
+    private readonly patch: PatchDB<DataModel>,
    private readonly destroy$: DestroyService,
    private readonly alertCtrl: AlertController,
  ) {}
--- a/frontend/projects/ui/src/app/pages/server-routes/preferences/preferences.page.ts
+++ b/frontend/projects/ui/src/app/pages/server-routes/preferences/preferences.page.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core'
-import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
+import { PatchDB } from 'patch-db-client'
 import {
  LoadingController,
  ModalController,
@@ -16,6 +16,7 @@ import {
  ServerNameInfo,
  ServerNameService,
 } from 'src/app/services/server-name.service'
+import { DataModel } from 'src/app/services/patch-db/data-model'

@Component({
  selector: 'preferences',
@@ -36,7 +37,7 @@ export class PreferencesPage {
    private readonly api: ApiService,
    private readonly toastCtrl: ToastController,
    private readonly localStorageService: LocalStorageService,
-    private readonly patch: PatchDbService,
+    private readonly patch: PatchDB<DataModel>,
    private readonly serverNameService: ServerNameService,
    readonly serverConfig: ServerConfigService,
  ) {}
--- a/frontend/projects/ui/src/app/pages/server-routes/server-backup/backing-up/backing-up.component.ts
+++ b/frontend/projects/ui/src/app/pages/server-routes/server-backup/backing-up/backing-up.component.ts
@@ -4,9 +4,12 @@ import {
  Pipe,
  PipeTransform,
 } from '@angular/core'
-import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
+import { PatchDB } from 'patch-db-client'
 import { filter, take } from 'rxjs/operators'
-import { PackageMainStatus } from 'src/app/services/patch-db/data-model'
+import {
+  DataModel,
+  PackageMainStatus,
+} from 'src/app/services/patch-db/data-model'
 import { Observable } from 'rxjs'

@Component({
@@ -26,7 +29,7 @@ export class BackingUpComponent {

  PackageMainStatus = PackageMainStatus

-  constructor(private readonly patch: PatchDbService) {}
+  constructor(private readonly patch: PatchDB<DataModel>) {}
 }

@Pipe({
@@ -44,5 +47,5 @@ export class PkgMainStatusPipe implements PipeTransform {
    )
  }

-  constructor(private readonly patch: PatchDbService) {}
+  constructor(private readonly patch: PatchDB<DataModel>) {}
 }
--- a/frontend/projects/ui/src/app/pages/server-routes/server-backup/server-backup.page.ts
+++ b/frontend/projects/ui/src/app/pages/server-routes/server-backup/server-backup.page.ts
@@ -9,7 +9,7 @@ import {
  GenericInputComponent,
  GenericInputOptions,
 } from 'src/app/modals/generic-input/generic-input.component'
-import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
+import { PatchDB } from 'patch-db-client'
 import { skip, takeUntil } from 'rxjs/operators'
 import { MappedBackupTarget } from 'src/app/types/mapped-backup-target'
 import * as argon2 from '@start9labs/argon2'
@@ -21,6 +21,7 @@ import { BackupSelectPage } from 'src/app/modals/backup-select/backup-select.pag
 import { EOSService } from 'src/app/services/eos.service'
 import { DestroyService } from '@start9labs/shared'
 import { getServerInfo } from 'src/app/util/get-server-info'
+import { DataModel } from 'src/app/services/patch-db/data-model'

@Component({
  selector: 'server-backup',
@@ -40,7 +41,7 @@ export class ServerBackupPage {
    private readonly navCtrl: NavController,
    private readonly destroy$: DestroyService,
    private readonly eosService: EOSService,
-    private readonly patch: PatchDbService,
+    private readonly patch: PatchDB<DataModel>,
  ) {}

  ngOnInit() {
--- a/frontend/projects/ui/src/app/pages/server-routes/server-show/server-show.module.ts
+++ b/frontend/projects/ui/src/app/pages/server-routes/server-show/server-show.module.ts
@@ -7,6 +7,7 @@ import { FormsModule } from '@angular/forms'
 import { TextSpinnerComponentModule } from '@start9labs/shared'
 import { BadgeMenuComponentModule } from 'src/app/components/badge-menu-button/badge-menu.component.module'
 import { OSUpdatePageModule } from 'src/app/modals/os-update/os-update.page.module'
+import { BackupColorPipeModule } from 'src/app/pipes/backup-color/backup-color.module'

 const routes: Routes = [
  {
@@ -24,6 +25,7 @@ const routes: Routes = [
    TextSpinnerComponentModule,
    BadgeMenuComponentModule,
    OSUpdatePageModule,
+    BackupColorPipeModule,
  ],
  declarations: [ServerShowPage],
 })
--- a/frontend/projects/ui/src/app/pages/server-routes/server-show/server-show.page.html
+++ b/frontend/projects/ui/src/app/pages/server-routes/server-show/server-show.page.html
@@ -48,7 +48,7 @@
            <p *ngIf="button.title === 'Create Backup'">
              <ng-container *ngIf="server['status-info'] as statusInfo">
                <ion-text
-                  color="warning"
+                  [color]="server['last-backup'] | backupColor"
                  *ngIf="!statusInfo['backup-progress'] && !statusInfo['update-progress']"
                >
                  Last Backup: {{ server['last-backup'] ? (server['last-backup']
--- a/frontend/projects/ui/src/app/pages/server-routes/server-show/server-show.page.ts
+++ b/frontend/projects/ui/src/app/pages/server-routes/server-show/server-show.page.ts
@@ -7,7 +7,7 @@ import {
 } from '@ionic/angular'
 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 { PatchDB } from 'patch-db-client'
 import { ServerNameService } from 'src/app/services/server-name.service'
 import { Observable, of } from 'rxjs'
 import { filter, take, tap } from 'rxjs/operators'
@@ -17,6 +17,7 @@ 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'
+import { DataModel } from 'src/app/services/patch-db/data-model'

@Component({
  selector: 'server-show',
@@ -40,7 +41,7 @@ export class ServerShowPage {
    private readonly embassyApi: ApiService,
    private readonly navCtrl: NavController,
    private readonly route: ActivatedRoute,
-    private readonly patch: PatchDbService,
+    private readonly patch: PatchDB<DataModel>,
    private readonly eosService: EOSService,
    private readonly localStorageService: LocalStorageService,
    private readonly serverNameService: ServerNameService,
--- a/frontend/projects/ui/src/app/pages/server-routes/server-specs/server-specs.page.ts
+++ b/frontend/projects/ui/src/app/pages/server-routes/server-specs/server-specs.page.ts
@@ -1,8 +1,9 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { ToastController } from '@ionic/angular'
-import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
+import { PatchDB } from 'patch-db-client'
 import { ConfigService } from 'src/app/services/config.service'
 import { copyToClipboard } from '@start9labs/shared'
+import { DataModel } from 'src/app/services/patch-db/data-model'

@Component({
  selector: 'server-specs',
@@ -15,7 +16,7 @@ export class ServerSpecsPage {

  constructor(
    private readonly toastCtrl: ToastController,
-    private readonly patch: PatchDbService,
+    private readonly patch: PatchDB<DataModel>,
    private readonly config: ConfigService,
  ) {}