feat: move all frontend projects under the same Angular workspace (#1141)

* feat: move all frontend projects under the same Angular workspace

* Refactor/angular workspace (#1154)

* update frontend build steps

Co-authored-by: waterplea <alexander@inkin.ru>
Co-authored-by: Matt Hill <matthewonthemoon@gmail.com>
Co-authored-by: Lucy Cifferello <12953208+elvece@users.noreply.github.com>

frontend/projects/ui/src/app/components/backup-drives/backup-drives-header.component.html

@@ -0,0 +1,14 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="embassy"></ion-back-button>
+    </ion-buttons>
+    <ion-title>{{ title }}</ion-title>
+    <ion-buttons slot="end">
+      <ion-button [disabled]="backupService.loading" (click)="refresh()">
+        Refresh
+        <ion-icon slot="end" name="refresh"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>

frontend/projects/ui/src/app/components/backup-drives/backup-drives-status.component.html

@@ -0,0 +1,16 @@
+<div class="inline">
+  <h2 *ngIf="type === 'create'; else restore">
+    <ion-icon name="cloud-outline" color="success"></ion-icon>
+    {{ hasValidBackup ? 'Available, contains existing backup' : 'Available for fresh backup' }}
+  </h2>
+  <ng-template #restore>
+    <h2 *ngIf="hasValidBackup">
+      <ion-icon name="cloud-done-outline" color="success"></ion-icon>
+      Embassy backup detected
+    </h2>
+    <h2 *ngIf="!hasValidBackup">
+      <ion-icon name="cloud-offline-outline" color="danger"></ion-icon>
+      No Embassy backup
+    </h2>
+  </ng-template>
+</div>

frontend/projects/ui/src/app/components/backup-drives/backup-drives.component.html

@@ -0,0 +1,82 @@
+<!-- loading -->
+<text-spinner *ngIf="backupService.loading; else loaded" [text]="loadingText"></text-spinner>
+
+<!-- loaded -->
+<ng-template #loaded>
+  <!-- error -->
+  <ion-item *ngIf="backupService.loadingError; else noError">
+    <ion-label>
+      <ion-text color="danger">
+        {{ backupService.loadingError }}
+      </ion-text>
+    </ion-label>
+  </ion-item>
+
+  <ng-template #noError>
+    <ion-item-group>
+      <!-- ** cifs ** -->
+      <ion-item-divider>Shared Network Folders</ion-item-divider>
+      <ion-item>
+        <ion-label>
+          <h2>
+            Shared folders are the recommended way to create Embassy backups. View the <a href="https://docs.start9.com/user-manual/general/backups.html#shared-network-folder" target="_blank" noreferrer>Instructions</a>
+          </h2>
+        </ion-label>
+      </ion-item>
+      <!-- add new cifs -->
+      <ion-item button detail="false" (click)="presentModalAddCifs()">
+        <ion-icon slot="start" name="add" size="large" color="dark"></ion-icon>
+        <ion-label>New shared folder</ion-label>
+      </ion-item>
+      <!-- cifs list -->
+      <ng-container *ngFor="let target of backupService.cifs; let i = index">
+        <ion-item button *ngIf="target.entry as cifs" (click)="presentActionCifs(target, i)">
+          <ion-icon slot="start" name="folder-open-outline" size="large"></ion-icon>
+          <ion-label>
+            <h1>{{ cifs.path.split('/').pop() }}</h1>
+            <ng-container *ngIf="cifs.mountable">
+              <backup-drives-status [type]="type" [hasValidBackup]="target.hasValidBackup"></backup-drives-status>
+            </ng-container>
+            <h2 *ngIf="!cifs.mountable" class="inline">
+              <ion-icon name="cellular-outline" color="danger"></ion-icon>
+              Unable to connect
+            </h2>
+            <p>Hostname: {{ cifs.hostname }}</p>
+            <p>Path: {{ cifs.path }}</p>
+          </ion-label>
+        </ion-item>
+      </ng-container>
+
+      <!-- ** drives ** -->
+      <ion-item-divider>Physical Drives</ion-item-divider>
+      <!-- no drives -->
+      <ion-item *ngIf="!backupService.drives.length; else hasDrives" class="ion-padding-bottom">
+        <ion-label>
+          <h2>
+            <ion-text color="warning">
+              Warning! Plugging a 2nd physical drive directly into your Embassy can lead to data corruption.
+            </ion-text>
+          </h2>
+          <br />
+          <h2>
+            To backup to a physical drive, please follow the <a href="https://docs.start9.com/user-manual/general/backups.html#physical-drive" target="_blank" noreferrer>instructions</a>.
+          </h2>
+        </ion-label>
+      </ion-item>
+      <!-- drives detected -->
+      <ng-template #hasDrives>
+        <ion-item button *ngFor="let target of backupService.drives" (click)="select(target)">
+          <ion-icon slot="start" name="save-outline" size="large"></ion-icon>
+          <ng-container *ngIf="target.entry as drive">
+            <ion-label>
+              <h1>{{ drive.label || drive.logicalname }}</h1>
+              <backup-drives-status [type]="type" [hasValidBackup]="target.hasValidBackup"></backup-drives-status>
+              <p>{{ drive.vendor || 'Unknown Vendor' }} - {{ drive.model || 'Unknown Model' }}</p>
+              <p>Capacity: {{ drive.capacity | convertBytes }}</p>
+            </ion-label>
+          </ng-container>
+        </ion-item>
+      </ng-template>
+    </ion-item-group>
+  </ng-template>
+</ng-template>

frontend/projects/ui/src/app/components/backup-drives/backup-drives.component.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { IonicModule } from '@ionic/angular'
+import { BackupDrivesComponent, BackupDrivesHeaderComponent, BackupDrivesStatusComponent } from './backup-drives.component'
+import { SharingModule } from '../../modules/sharing.module'
+import { GenericFormPageModule } from 'src/app/modals/generic-form/generic-form.module'
+
+@NgModule({
+  declarations: [
+    BackupDrivesComponent,
+    BackupDrivesHeaderComponent,
+    BackupDrivesStatusComponent,
+  ],
+  imports: [
+    CommonModule,
+    IonicModule,
+    SharingModule,
+    GenericFormPageModule,
+  ],
+  exports: [
+    BackupDrivesComponent,
+    BackupDrivesHeaderComponent,
+    BackupDrivesStatusComponent,
+  ],
+})
+export class BackupDrivesComponentModule { }

frontend/projects/ui/src/app/components/backup-drives/backup-drives.component.ts

@@ -0,0 +1,274 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { BackupService } from './backup.service'
+import { CifsBackupTarget, DiskBackupTarget, RR } from 'src/app/services/api/api.types'
+import { ActionSheetController, AlertController, LoadingController, ModalController } from '@ionic/angular'
+import { GenericFormPage } from 'src/app/modals/generic-form/generic-form.page'
+import { ConfigSpec } from 'src/app/pkg-config/config-types'
+import { ApiService } from 'src/app/services/api/embassy-api.service'
+import { ErrorToastService } from 'src/app/services/error-toast.service'
+import { MappedBackupTarget } from 'src/app/util/misc.util'
+
+@Component({
+  selector: 'backup-drives',
+  templateUrl: './backup-drives.component.html',
+  styleUrls: ['./backup-drives.component.scss'],
+})
+export class BackupDrivesComponent {
+  @Input() type: 'create' | 'restore'
+  @Output() onSelect: EventEmitter<MappedBackupTarget<CifsBackupTarget | DiskBackupTarget>> = new EventEmitter()
+  loadingText: string
+
+  constructor (
+    private readonly loadingCtrl: LoadingController,
+    private readonly actionCtrl: ActionSheetController,
+    private readonly alertCtrl: AlertController,
+    private readonly modalCtrl: ModalController,
+    private readonly embassyApi: ApiService,
+    private readonly errToast: ErrorToastService,
+    public readonly backupService: BackupService,
+  ) { }
+
+  ngOnInit () {
+    this.loadingText = this.type === 'create' ? 'Fetching Backup Targets' : 'Fetching Backup Sources'
+    this.backupService.getBackupTargets()
+  }
+
+  select (target: MappedBackupTarget<CifsBackupTarget | DiskBackupTarget>): void {
+    if (target.entry.type === 'cifs' && !target.entry.mountable) {
+      const message = 'Unable to connect to shared folder. Ensure (1) target computer is connected to LAN, (2) target folder is being shared, and (3) hostname, path, and credentials are accurate.'
+      this.presentAlertError(message)
+      return
+    }
+
+    if (this.type === 'restore' && !target.hasValidBackup) {
+      const message = `${target.entry.type === 'cifs' ? 'Shared folder' : 'Drive partition'} does not contain a valid Embassy backup.`
+      this.presentAlertError(message)
+      return
+    }
+
+    this.onSelect.emit(target)
+  }
+
+  async presentModalAddCifs (): Promise<void> {
+    const modal = await this.modalCtrl.create({
+      component: GenericFormPage,
+      componentProps: {
+        title: 'New Shared Folder',
+        spec: CifsSpec,
+        buttons: [
+          {
+            text: 'Save',
+            handler: (value: RR.AddBackupTargetReq) => {
+              return this.addCifs(value)
+            },
+            isSubmit: true,
+          },
+        ],
+      },
+    })
+    await modal.present()
+  }
+
+  async presentActionCifs (target: MappedBackupTarget<CifsBackupTarget>, index: number): Promise<void> {
+    const entry = target.entry as CifsBackupTarget
+
+    const action = await this.actionCtrl.create({
+      header: entry.hostname,
+      subHeader: 'Shared Folder',
+      mode: 'ios',
+      buttons: [
+        {
+          text: 'Forget',
+          icon: 'trash',
+          role: 'destructive',
+          handler: () => {
+            this.deleteCifs(target.id, index)
+          },
+        },
+        {
+          text: 'Edit',
+          icon: 'pencil',
+          handler: () => {
+            this.presentModalEditCifs(target.id, entry, index)
+          },
+        },
+        {
+          text: this.type === 'create' ? 'Create Backup' : 'Restore From Backup',
+          icon: this.type === 'create' ? 'cloud-upload-outline' : 'cloud-download-outline',
+          handler: () => {
+            this.select(target)
+          },
+        },
+      ],
+    })
+
+    await action.present()
+  }
+
+  private async presentAlertError (message: string): Promise<void> {
+    const alert = await this.alertCtrl.create({
+      header: 'Error',
+      message,
+      buttons: ['OK'],
+    })
+    await alert.present()
+  }
+
+  private async addCifs (value: RR.AddBackupTargetReq): Promise<boolean> {
+    const loader = await this.loadingCtrl.create({
+      spinner: 'lines',
+      message: 'Testing connectivity to shared folder...',
+      cssClass: 'loader',
+    })
+    await loader.present()
+
+    try {
+      const res = await this.embassyApi.addBackupTarget(value)
+      const [id, entry] = Object.entries(res)[0]
+      this.backupService.cifs.unshift({
+        id,
+        hasValidBackup: this.backupService.hasValidBackup(entry),
+        entry,
+      })
+      return true
+    } catch (e) {
+      this.errToast.present(e)
+      return false
+    } finally {
+      loader.dismiss()
+    }
+  }
+
+  private async presentModalEditCifs (id: string, entry: CifsBackupTarget, index: number): Promise<void> {
+    const { hostname, path, username } = entry
+
+    const modal = await this.modalCtrl.create({
+      component: GenericFormPage,
+      componentProps: {
+        title: 'Update Shared Folder',
+        spec: CifsSpec,
+        buttons: [
+          {
+            text: 'Save',
+            handler: (value: RR.AddBackupTargetReq) => {
+              return this.editCifs({ id, ...value }, index)
+            },
+            isSubmit: true,
+          },
+        ],
+        initialValue: {
+          hostname,
+          path,
+          username,
+        },
+      },
+    })
+    await modal.present()
+  }
+
+  private async editCifs (value: RR.UpdateBackupTargetReq, index: number): Promise<void> {
+    const loader = await this.loadingCtrl.create({
+      spinner: 'lines',
+      message: 'Testing connectivity to shared folder...',
+      cssClass: 'loader',
+    })
+    await loader.present()
+
+    try {
+      const res = await this.embassyApi.updateBackupTarget(value)
+      const entry = Object.values(res)[0]
+      this.backupService.cifs[index].entry = entry
+    } catch (e) {
+      this.errToast.present(e)
+    } finally {
+      loader.dismiss()
+    }
+  }
+
+  private async deleteCifs (id: string, index: number): Promise<void> {
+    const loader = await this.loadingCtrl.create({
+      spinner: 'lines',
+      message: 'Removing...',
+      cssClass: 'loader',
+    })
+    await loader.present()
+
+    try {
+      await this.embassyApi.removeBackupTarget({ id })
+      this.backupService.cifs.splice(index, 1)
+    } catch (e) {
+      this.errToast.present(e)
+    } finally {
+      loader.dismiss()
+    }
+  }
+}
+
+
+@Component({
+  selector: 'backup-drives-header',
+  templateUrl: './backup-drives-header.component.html',
+  styleUrls: ['./backup-drives.component.scss'],
+})
+export class BackupDrivesHeaderComponent {
+  @Input() title: string
+  @Output() onClose: EventEmitter<void> = new EventEmitter()
+
+  constructor (
+    public readonly backupService: BackupService,
+  ) { }
+
+  refresh () {
+    this.backupService.getBackupTargets()
+  }
+}
+
+
+@Component({
+  selector: 'backup-drives-status',
+  templateUrl: './backup-drives-status.component.html',
+  styleUrls: ['./backup-drives.component.scss'],
+})
+export class BackupDrivesStatusComponent {
+  @Input() type: string
+  @Input() hasValidBackup: boolean
+}
+
+const CifsSpec: ConfigSpec = {
+  hostname: {
+    type: 'string',
+    name: 'Hostname',
+    description: 'The hostname of your target device on the Local Area Network.',
+    placeholder: `e.g. 'My Computer' OR 'my-computer.local'`,
+    pattern: '^[a-zA-Z0-9._-]+( [a-zA-Z0-9]+)*$',
+    'pattern-description': `Must be a valid hostname. e.g. 'My Computer' OR 'my-computer.local'`,
+    nullable: false,
+    masked: false,
+    copyable: false,
+  },
+  path: {
+    type: 'string',
+    name: 'Path',
+    description: 'The directory path to the shared folder on your target device.',
+    placeholder: 'e.g. /Desktop/my-folder',
+    nullable: false,
+    masked: false,
+    copyable: false,
+  },
+  username: {
+    type: 'string',
+    name: 'Username',
+    description: 'The username of the user account on your target device.',
+    nullable: false,
+    masked: false,
+    copyable: false,
+  },
+  password: {
+    type: 'string',
+    name: 'Password',
+    description: 'The password of the user account on your target device.',
+    nullable: true,
+    masked: true,
+    copyable: false,
+  },
+}

frontend/projects/ui/src/app/components/backup-drives/backup.service.ts

@@ -0,0 +1,58 @@
+import { Injectable } from '@angular/core'
+import { IonicSafeString } from '@ionic/core'
+import { ApiService } from 'src/app/services/api/embassy-api.service'
+import { getErrorMessage } from 'src/app/services/error-toast.service'
+import { BackupTarget, CifsBackupTarget, DiskBackupTarget } from 'src/app/services/api/api.types'
+import { Emver } from 'src/app/services/emver.service'
+import { MappedBackupTarget } from 'src/app/util/misc.util'
+
+@Injectable({
+  providedIn: 'root',
+})
+export class BackupService {
+  cifs: MappedBackupTarget<CifsBackupTarget>[]
+  drives: MappedBackupTarget<DiskBackupTarget>[]
+  loading = true
+  loadingError: string | IonicSafeString
+
+  constructor (
+    private readonly embassyApi: ApiService,
+    private readonly emver: Emver,
+  ) { }
+
+  async getBackupTargets (): Promise<void> {
+    this.loading = true
+
+    try {
+      const targets = await this.embassyApi.getBackupTargets({ })
+      // cifs
+      this.cifs = Object.entries(targets)
+      .filter(([_, target]) => target.type === 'cifs')
+      .map(([id, cifs]) => {
+        return {
+          id,
+          hasValidBackup: this.hasValidBackup(cifs),
+          entry: cifs as CifsBackupTarget,
+        }
+      })
+      // drives
+      this.drives = Object.entries(targets)
+      .filter(([_, target]) => target.type === 'disk')
+      .map(([id, drive]) => {
+        return {
+          id,
+          hasValidBackup: this.hasValidBackup(drive),
+          entry: drive as DiskBackupTarget,
+        }
+      })
+    } catch (e) {
+      this.loadingError = getErrorMessage(e)
+    } finally {
+      this.loading = false
+    }
+  }
+
+  hasValidBackup (target: BackupTarget): boolean {
+    return [0, 1].includes(this.emver.compare(target['embassy-os']?.version, '0.3.0'))
+  }
+}