@duplicati/ngclient 0.0.1

package/src/app/logout/logout.component.ts

@@ -0,0 +1,18 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { AppAuthState } from '../core/states/app-auth.state';
+
+@Component({
+  selector: 'app-logout',
+  standalone: true,
+  imports: [],
+  templateUrl: './logout.component.html',
+  styleUrl: './logout.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export default class LogoutComponent {
+  #auth = inject(AppAuthState);
+
+  ngOnInit() {
+    this.#auth.logout();
+  }
+}

package/src/app/restore/restore.component.html

@@ -0,0 +1,56 @@
+<app-status-bar />
+
+<section>
+  <h2>Where do you want to restore from?</h2>
+
+  <!-- <spk-card class="type-a">
+    <img src="/assets/images/backup.png" alt="" width="48px" />
+    <div class="text">
+      <h3>Direct restore from backup files</h3>
+      <p>Point to your backup files and restore from there.</p>
+    </div>
+    <button spk-button [routerLink]="['/restore-flow']">
+      Start
+      <spk-icon>play-circle</spk-icon>
+    </button>
+  </spk-card> -->
+
+  <!-- <spk-card class="type-a">
+    <img src="/assets/images/restore.png" alt="" width="48px" />
+    <div class="text">
+      <h3>Restore from configuration</h3>
+      <p>Load destination from an exported job or a storage provider</p>
+    </div>
+    <button spk-button>
+      Start
+      <spk-icon>play-circle</spk-icon>
+    </button>
+  </spk-card>
+
+  <spk-divider>Or existing</spk-divider> -->
+
+  @if (backupsLoading()) {
+    <spk-progress-bar class="indeterminate primary"></spk-progress-bar>
+  } @else if (backups().length) {
+    @for (backup of backups(); track $index) {
+      <spk-card class="type-a">
+        <img src="/assets/images/folder.png" alt="" width="48px" />
+
+        <div class="text">
+          <h3>Restore {{ backup.Backup?.Name ?? 'Backup name missing' }}</h3>
+          <p>
+            {{ backup.Backup?.Metadata?.['SourceSizeString'] ?? '-' }} /
+            {{ backup.Backup?.Metadata?.['BackupListCount'] ?? '-' }}
+          </p>
+        </div>
+
+        <button spk-button [routerLink]="['/restore-flow', backup.Backup?.ID]">
+          Restore
+          <spk-icon>arrow-right</spk-icon>
+        </button>
+      </spk-card>
+    }
+  } @else {
+    No backups found
+  }
+</section>

package/src/app/restore/restore.component.scss

@@ -0,0 +1,37 @@
+@use '@sparkle-ui/core/styles/helpers' as *;
+
+:host {
+  display: block;
+}
+
+h2 {
+  font: var(--title-30);
+  text-align: center;
+  padding: p2r(32);
+}
+section {
+  max-width: p2r(700);
+  margin: 0 auto;
+  padding: p2r(32 0);
+  display: flex;
+  flex-direction: column;
+  gap: p2r(16);
+}
+
+spk-divider {
+  color: var(--base-level-60);
+}
+
+spk-card {
+  display: flex;
+  align-items: center;
+  gap: p2r(16);
+  --card-padding: #{p2r(32)};
+
+  .text {
+    flex: 1 0;
+    display: flex;
+    flex-direction: column;
+    gap: p2r(4);
+  }
+}

package/src/app/restore/restore.component.ts

@@ -0,0 +1,55 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import {
+  SparkleButtonComponent,
+  SparkleCardComponent,
+  SparkleDividerComponent,
+  SparkleIconComponent,
+  SparkleProgressBarComponent,
+} from '@sparkle-ui/core';
+import StatusBarComponent from '../core/components/status-bar/status-bar.component';
+import { BackupAndScheduleOutputDto, DuplicatiServerService } from '../core/openapi';
+import { BackupsState } from '../core/states/backups.state';
+
+@Component({
+  selector: 'app-restore',
+  standalone: true,
+  imports: [
+    StatusBarComponent,
+    SparkleCardComponent,
+    SparkleButtonComponent,
+    SparkleDividerComponent,
+    SparkleIconComponent,
+    SparkleProgressBarComponent,
+    RouterLink,
+  ],
+  templateUrl: './restore.component.html',
+  styleUrl: './restore.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export default class RestoreComponent {
+  #backupsState = inject(BackupsState);
+  #dupServer = inject(DuplicatiServerService);
+
+  backups = this.#backupsState.backups;
+  backupsLoading = this.#backupsState.backupsLoading;
+
+  ngOnInit() {
+    this.#backupsState.getBackups();
+  }
+
+  restoreNow(backup: BackupAndScheduleOutputDto) {
+    this.#dupServer.postApiV1BackupByIdRestore({
+      id: backup.Backup?.ID!,
+      requestBody: {
+        // paths?: Array<(string)> | null;
+        // passphrase?: (string) | null;
+        // time?: (string) | null;
+        // restore_path?: (string) | null;
+        // overwrite?: (boolean) | null;
+        // permissions?: (boolean) | null;
+        // skip_metadata?: (boolean) | null;
+      },
+    });
+  }
+}

package/src/app/restore-flow/options/options.component.html

@@ -0,0 +1,57 @@
+<form [formGroup]="optionsForm" #formRef (submit)="submit()">
+  <h3 class="title-30">Restore options</h3>
+
+  <app-toggle-card [disallowToggle]="true">
+    <ng-container title>Where do you want to restore files from?</ng-container>
+
+    <spk-radio class="raised primary">
+      Original location
+      <input type="radio" name="restoreFrom" value="orignal" formControlName="restoreFrom" />
+    </spk-radio>
+
+    <spk-radio class="raised primary">
+      Pick location
+      <input type="radio" name="restoreFrom" value="pickLocation" formControlName="restoreFrom" />
+    </spk-radio>
+
+    <app-file-tree [disabled]="optionsFormSignal()?.restoreFrom !== 'pickLocation'">
+      <label for="path">Path</label>
+      <input type="text" id="path" formControlName="restoreFromPath" />
+    </app-file-tree>
+  </app-toggle-card>
+
+  <app-toggle-card [disallowToggle]="true">
+    <ng-container title>How do you want to handle existing files?</ng-container>
+
+    <spk-radio class="raised primary">
+      Overwrite
+      <input type="radio" name="handleExisting" value="overwrite" formControlName="handleExisting" />
+    </spk-radio>
+
+    <spk-radio class="raised primary">
+      Save different versions with timestamp in file name
+      <input type="radio" name="handleExisting" value="saveTimestamp" formControlName="handleExisting" />
+    </spk-radio>
+  </app-toggle-card>
+
+  <app-toggle-card>
+    <ng-container title>Permissions</ng-container>
+
+    <spk-toggle class="primary raised">
+      Restore read/write permissions
+      <input type="checkbox" formControlName="permissions" />
+    </spk-toggle>
+  </app-toggle-card>
+
+  <div class="form-actions">
+    <button spk-button type="button" (click)="goBack()">
+      <spk-icon>arrow-left</spk-icon>
+      Go back
+    </button>
+
+    <button spk-button class="raised primary" type="submit">
+      <spk-icon>arrow-right</spk-icon>
+      Submit
+    </button>
+  </div>
+</form>

package/src/app/restore-flow/options/options.component.scss

@@ -0,0 +1,16 @@
+@use '@sparkle-ui/core/styles/helpers' as *;
+
+:host {
+  display: block;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: p2r(24);
+}
+
+.form-actions {
+  display: flex;
+  justify-content: space-between;
+}

package/src/app/restore-flow/options/options.component.ts

@@ -0,0 +1,58 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import {
+  SparkleButtonComponent,
+  SparkleIconComponent,
+  SparkleRadioComponent,
+  SparkleToggleComponent,
+} from '@sparkle-ui/core';
+import FileTreeComponent from '../../core/components/file-tree/file-tree.component';
+import ToggleCardComponent from '../../core/components/toggle-card/toggle-card.component';
+import { RestoreFlowState } from '../restore-flow.state';
+
+const fb = new FormBuilder();
+
+export const createRestoreOptionsForm = () => {
+  return fb.group({
+    restoreFrom: fb.control<'orignal' | 'pickLocation'>('orignal'),
+    restoreFromPath: fb.control<string>(''),
+    handleExisting: fb.control<'overwrite' | 'saveTimestamp'>('overwrite'),
+    permissions: fb.control<boolean>(false),
+  });
+};
+
+@Component({
+  selector: 'app-options',
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+
+    ToggleCardComponent,
+    FileTreeComponent,
+
+    SparkleToggleComponent,
+    SparkleRadioComponent,
+    SparkleButtonComponent,
+    SparkleIconComponent,
+  ],
+  templateUrl: './options.component.html',
+  styleUrl: './options.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export default class OptionsComponent {
+  #restoreFlowState = inject(RestoreFlowState);
+  #router = inject(Router);
+  #route = inject(ActivatedRoute);
+
+  optionsForm = this.#restoreFlowState.optionsForm;
+  optionsFormSignal = this.#restoreFlowState.optionsFormSignal;
+
+  goBack() {
+    this.#router.navigate(['select-files'], { relativeTo: this.#route.parent });
+  }
+
+  submit() {
+    this.#restoreFlowState.submit();
+  }
+}

package/src/app/restore-flow/restore-flow.component.html

@@ -0,0 +1,14 @@
+<spk-stepper>
+  <div spk-step routerLinkActive="active" [routerLink]="['/restore-flow', backupId(), 'select-files']">
+    <spk-radio />
+    Select files
+  </div>
+  <div spk-step routerLinkActive="active" [routerLink]="['/restore-flow', backupId(), 'options']">
+    <spk-radio />
+    Options
+  </div>
+</spk-stepper>
+
+<section>
+  <router-outlet />
+</section>

package/src/app/restore-flow/restore-flow.component.scss

@@ -0,0 +1,15 @@
+@use '@sparkle-ui/core/styles/helpers' as *;
+
+:host {
+  display: block;
+}
+
+spk-stepper {
+  max-width: p2r(500);
+  margin: p2r(40) auto;
+}
+
+section {
+  max-width: p2r(500);
+  margin: 0 auto p2r(40);
+}

package/src/app/restore-flow/restore-flow.component.ts

@@ -0,0 +1,23 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { ActivatedRoute, RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { SparkleRadioComponent, SparkleStepperComponent } from '@sparkle-ui/core';
+import { RestoreFlowState } from './restore-flow.state';
+
+@Component({
+  selector: 'app-restore-flow',
+  standalone: true,
+  imports: [SparkleStepperComponent, SparkleRadioComponent, RouterOutlet, RouterLink, RouterLinkActive],
+  templateUrl: './restore-flow.component.html',
+  styleUrl: './restore-flow.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export default class RestoreFlowComponent {
+  #route = inject(ActivatedRoute);
+  #restoreFlowState = inject(RestoreFlowState);
+
+  backupId = this.#restoreFlowState.backupId;
+
+  ngOnInit() {
+    this.#restoreFlowState.init(this.#route.snapshot.params['id']);
+  }
+}

package/src/app/restore-flow/restore-flow.state.ts

@@ -0,0 +1,120 @@
+import { inject, Injectable, signal } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { Router } from '@angular/router';
+import { finalize, forkJoin, take } from 'rxjs';
+import { DuplicatiServerService, GetBackupResultDto, IListResultFileset } from '../core/openapi';
+import { createRestoreOptionsForm } from './options/options.component';
+import { createRestoreSelectFilesForm } from './select-files/select-files.component';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class RestoreFlowState {
+  #router = inject(Router);
+  #dupServer = inject(DuplicatiServerService);
+
+  backupId = signal<'string' | null>(null);
+  backup = signal<GetBackupResultDto | null>(null);
+  selectFilesForm = createRestoreSelectFilesForm();
+  optionsForm = createRestoreOptionsForm();
+  optionsFormSignal = toSignal(this.optionsForm.valueChanges);
+  selectFilesFormSignal = toSignal(this.selectFilesForm.valueChanges);
+  versionOptionsLoading = signal(false);
+  versionOptions = signal<IListResultFileset[]>([]);
+  isSubmitting = signal(false);
+
+  init(id: 'string') {
+    this.backupId.set(id);
+    this.#getBackupData(id, true);
+  }
+
+  // restoreFrom: fb.control<'orignal' | 'pickLocation'>('orignal'),
+  // restoreFromPath: fb.control<string>(''),
+  // handleExisting: fb.control<'overwrite' | 'saveTimestamp'>('overwrite'),
+  // permissions: fb.control<boolean>(false),
+  // {
+  //   "paths": [
+  //     "string"
+  //   ],
+  //   "passphrase": "string",
+  //   "time": "string",
+  //   "restore_path": "string",
+  //   "overwrite": true,
+  //   "permissions": true,
+  //   "skip_metadata": true
+  // }
+  submit() {
+    this.isSubmitting.set(true);
+
+    const id = this.backupId();
+    const optionsValue = this.optionsForm.value;
+    const selectFilesFormValue = this.selectFilesForm.value;
+    const selectedOption = this.versionOptions()?.find((x) => x.Version === selectFilesFormValue.selectedOption);
+
+    this.#dupServer
+      .postApiV1BackupByIdRestore({
+        id: id ?? '',
+        requestBody: {
+          paths: selectFilesFormValue.filesToRestore?.split('\0').map((x) => `${x}*`) ?? [],
+          passphrase: selectFilesFormValue.passphrase ?? null,
+          time: selectedOption?.Time,
+          restore_path: optionsValue.restoreFromPath,
+          overwrite: optionsValue.handleExisting === 'overwrite',
+          permissions: optionsValue.permissions,
+          skip_metadata: true,
+        },
+      })
+      .pipe(finalize(() => this.isSubmitting.set(false)))
+      .subscribe({
+        next: () => {
+          this.exit();
+        },
+        error: (err) => {
+          console.error('restore error', err);
+        },
+      });
+  }
+
+  exit() {
+    // TODOS
+    // - Are you sure dialog
+    this.#resetAllForms();
+    this.#router.navigate(['/']);
+  }
+
+  getVersionOptions() {
+    this.versionOptions();
+  }
+
+  #getBackupData(id: string, setFirstToForm = false) {
+    this.versionOptionsLoading.set(true);
+
+    forkJoin([
+      this.#dupServer.getApiV1BackupById({
+        id,
+      }),
+      this.#dupServer.getApiV1BackupByIdFilesets({
+        id,
+      }),
+    ])
+      .pipe(
+        take(1),
+        finalize(() => this.versionOptionsLoading.set(false))
+      )
+      .subscribe({
+        next: ([backup, filesets]) => {
+          this.versionOptions.set(filesets);
+          this.backup.set(backup);
+
+          if (setFirstToForm) {
+            this.selectFilesForm.controls.selectedOption.setValue(filesets[0].Version as number);
+          }
+        },
+      });
+  }
+
+  #resetAllForms() {
+    this.selectFilesForm.reset();
+    this.optionsForm.reset();
+  }
+}

package/src/app/restore-flow/select-files/select-files.component.html

@@ -0,0 +1,42 @@
+<form [formGroup]="selectFilesForm" #formRef (submit)="next()">
+  <h3 class="title-30">Select files</h3>
+
+  @if (versionOptionsLoading()) {
+    <spk-progress-bar class="indeterminate primary"></spk-progress-bar>
+  } @else {
+    <spk-select [displayFn]="displayFn()">
+      <input type="number" placeholder="Select an option..." formControlName="selectedOption" />
+
+      <ng-container options>
+        @for (option of versionOptions(); track $index) {
+          <option [value]="option.Version">{{ option.Version }}: {{ option.Time | date: 'd MMM y, h:mm' }}</option>
+        }
+      </ng-container>
+    </spk-select>
+
+    @if (rootPathLoaded()) {
+      <app-file-tree
+        [rootPath]="rootPath()"
+        [backupSettings]="backupSettings()"
+        [multiSelect]="true"
+        [showFiles]="true">
+        <label for="path">Path</label>
+        <input type="text" id="path" formControlName="filesToRestore" />
+      </app-file-tree>
+    }
+  }
+
+  <!-- <pre>{{ selectFilesFormSignal() | json }}</pre> -->
+
+  <div class="form-actions">
+    <button spk-button type="button" (click)="exit()">
+      <spk-icon>arrow-left</spk-icon>
+      Exit
+    </button>
+
+    <button spk-button class="raised primary" type="submit">
+      <spk-icon>arrow-right</spk-icon>
+      Continue
+    </button>
+  </div>
+</form>

package/src/app/restore-flow/select-files/select-files.component.scss

@@ -0,0 +1,16 @@
+@use '@sparkle-ui/core/styles/helpers' as *;
+
+:host {
+  display: block;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: p2r(24);
+}
+
+.form-actions {
+  display: flex;
+  justify-content: space-between;
+}

package/src/app/restore-flow/select-files/select-files.component.ts

@@ -0,0 +1,129 @@
+import { DatePipe, JsonPipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import {
+  SparkleButtonComponent,
+  SparkleIconComponent,
+  SparkleProgressBarComponent,
+  SparkleSelectComponent,
+} from '@sparkle-ui/core';
+import { derivedFrom } from 'ngxtension/derived-from';
+import { map, of, pipe, startWith, switchMap } from 'rxjs';
+import FileTreeComponent from '../../core/components/file-tree/file-tree.component';
+import { DuplicatiServerService } from '../../core/openapi';
+import { RestoreFlowState } from '../restore-flow.state';
+
+const fb = new FormBuilder();
+
+export const createRestoreSelectFilesForm = () => {
+  return fb.group({
+    filesToRestore: fb.control<string>(''),
+    selectedOption: fb.control<number | null>(null),
+    passphrase: fb.control<string | null>(null),
+  });
+};
+
+@Component({
+  selector: 'app-select-files',
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    DatePipe,
+    JsonPipe,
+
+    FileTreeComponent,
+
+    SparkleButtonComponent,
+    SparkleIconComponent,
+    SparkleSelectComponent,
+    SparkleProgressBarComponent,
+  ],
+  templateUrl: './select-files.component.html',
+  styleUrl: './select-files.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [DatePipe],
+})
+export default class SelectFilesComponent {
+  #dupServer = inject(DuplicatiServerService);
+  #restoreFlowState = inject(RestoreFlowState);
+  #router = inject(Router);
+  #route = inject(ActivatedRoute);
+  #datePipe = inject(DatePipe);
+
+  selectFilesForm = this.#restoreFlowState.selectFilesForm;
+  selectFilesFormSignal = this.#restoreFlowState.selectFilesFormSignal;
+  backupId = this.#restoreFlowState.backupId;
+  versionOptionsLoading = this.#restoreFlowState.versionOptionsLoading;
+  versionOptions = this.#restoreFlowState.versionOptions;
+  backupSettings = computed(() => {
+    const id = this.backupId();
+    const selectedOption = this.selectFilesFormSignal()?.selectedOption;
+
+    if (!(typeof selectedOption === 'number') || !id) return null;
+
+    const option = this.versionOptions()?.find((x) => x.Version === selectedOption);
+    const time = option?.Time ?? null;
+
+    if (!time) return null;
+
+    return {
+      id,
+      time,
+    };
+  });
+
+  rootPathLoaded = signal(false);
+  rootPath = derivedFrom(
+    [this.selectFilesFormSignal, this.backupId],
+    pipe(
+      startWith([null, null]),
+      switchMap(([selectFilesFormSignal, backupId]) => {
+        const selectedOption = selectFilesFormSignal?.selectedOption;
+        const id = backupId;
+
+        if (!(typeof selectedOption === 'number') || !id) return of('/');
+
+        const option = this.versionOptions()?.find((x) => x.Version === selectedOption);
+
+        return this.#dupServer
+          .getApiV1BackupByIdFiles({
+            id,
+            time: option?.Time ?? '',
+            prefixOnly: false,
+            folderContents: true,
+          })
+          .pipe(
+            map((x) => {
+              this.rootPathLoaded.set(true);
+
+              return (x['Files'] as any)[0].Path;
+            })
+          );
+      })
+    )
+  );
+
+  displayFn() {
+    const options = this.versionOptions();
+
+    return (val: string) => {
+      if (!val) return '';
+
+      const item = options?.find((x) => x.Version?.toString() === val);
+
+      if (!item) {
+        return '';
+      }
+      return `${item.Version}: ${this.#datePipe.transform(item.Time, 'd MMM y, h:mm')}`;
+    };
+  }
+
+  next() {
+    this.#router.navigate(['options'], { relativeTo: this.#route.parent });
+  }
+
+  exit() {
+    this.#restoreFlowState.exit();
+  }
+}