@duplicati/ngclient 0.0.1

package/src/app/create-edit-backup/destination/destination.component.html

@@ -0,0 +1,367 @@
+@if (destinationOptions().length && sysIsLoaded() && destinationIsLoaded()) {
+  <form [formGroup]="destinationForm" #formRef (submit)="next()">
+    <header>
+      <h3 class="title-30">Backup destination</h3>
+      @if (destinationCount() > 0) {
+        <p (click)="removeDestinationFormGroup(destinationCount() - 1)">
+          Wanna select another destination?
+          <span class="spk-primary">Click here</span>
+        </p>
+      }
+    </header>
+
+    @if (destinationCount() === 0) {
+      <div class="most-common-destinations">
+        <div class="tile" (click)="addDestinationFormGroup('file')">
+          <h3>File system</h3>
+          <p>Store backups on your local file system.</p>
+        </div>
+
+        <div class="tile" (click)="addDestinationFormGroup('gcs')">
+          <h3>Google Cloud Storage</h3>
+          <p>Store backups in Google Cloud Storage.</p>
+        </div>
+
+        <div class="tile" (click)="addDestinationFormGroup('s3')">
+          <h3>S3 compatible bucket</h3>
+          <p>Store backups in any S3 compatible bucket.</p>
+        </div>
+
+        <div class="tile" (click)="addDestinationFormGroup('ssh')">
+          <h3>SSH</h3>
+          <p>Store backups in SSH.</p>
+        </div>
+        <div class="tile" (click)="addDestinationFormGroup('googledrive')">
+          <h3>Google Drive</h3>
+          <p>Store backups in Google Drive.</p>
+        </div>
+      </div>
+
+      <p>More destinations are coming soon.</p>
+      <!-- <spk-menu>
+        <button spk-button type="button" class="outlined">Other destinations</button>
+
+        <ng-container menu>
+          @for (destination of destinationOptions(); track $index) {
+            <button spk-menu-item type="button" (click)="addDestinationFormGroup(destination.Key)">
+              {{ destination.DisplayName }}
+            </button>
+          }
+        </ng-container>
+      </spk-menu> -->
+    }
+
+    @if (destinationFormSignal()?.destinations?.length) {
+      <ng-container formArrayName="destinations">
+        <ng-container formGroupName="0">
+          @if (destinationFormPair().custom.length) {
+            <ng-container>
+              @for (destination of destinationFormPair().custom; track $index) {
+                <ng-container
+                  *ngTemplateOutlet="
+                    fieldTemplate;
+                    context: {
+                      $implicit: {
+                        destination: destination,
+                        destinationType: destinationFormSignal()?.destinations?.[0]?.destinationType,
+                        index: $index,
+                        formGroupName: 'custom',
+                        oauthField: destinationFormPair().oauthField,
+                      },
+                    }
+                  "></ng-container>
+              }
+            </ng-container>
+          }
+
+          @if (destinationFormPair().dynamic.length) {
+            <ng-container>
+              @for (destination of destinationFormPair().dynamic; track $index) {
+                <ng-container
+                  *ngTemplateOutlet="
+                    fieldTemplate;
+                    context: {
+                      $implicit: {
+                        destination: destination,
+                        destinationType: destinationFormSignal()?.destinations?.[0]?.destinationType,
+                        index: $index,
+                        formGroupName: 'dynamic',
+                        oauthField: destinationFormPair().oauthField,
+                      },
+                    }
+                  "></ng-container>
+              }
+            </ng-container>
+          }
+
+          @if (destinationFormPair().advanced.length) {
+            <app-toggle-card [disallowToggle]="true">
+              <ng-container title>
+                Advanced options
+
+                <spk-menu>
+                  <button spk-button type="button" class="outlined small">
+                    Add advanced option
+                    <spk-icon>plus</spk-icon>
+                  </button>
+
+                  <ng-container menu>
+                    @for (option of notSelectedAdvancedFormPair(); track $index) {
+                      <button spk-menu-item type="button" (click)="addAdvancedFormPair(option)">
+                        {{ option.name }}
+                      </button>
+                    }
+                  </ng-container>
+                </spk-menu>
+              </ng-container>
+
+              <ng-container>
+                @for (destination of selectedAdvancedFormPair(); track $index) {
+                  <ng-container
+                    *ngTemplateOutlet="
+                      fieldTemplate;
+                      context: {
+                        $implicit: {
+                          destination: destination,
+                          destinationType: destinationFormSignal()?.destinations?.[0]?.destinationType,
+                          index: $index,
+                          formGroupName: 'advanced',
+                          oauthField: destinationFormPair().oauthField,
+                        },
+                      }
+                    "></ng-container>
+                }
+              </ng-container>
+            </app-toggle-card>
+          }
+
+          <ng-template #fieldTemplate let-item>
+            <ng-container [formGroupName]="item.formGroupName">
+              @if (item.destination.type === 'file-tree') {
+                <app-file-tree
+                  [startingPath]="getFormFieldValue(item.index, item.formGroupName, item.destination.name)">
+                  <label for="destination-{{ item.formGroupName }}-{{ item.formGroupName }}-{{ item.index }}">
+                    {{ item.destination.shortDescription ?? item.destination.name }}
+                    @if (item.destination.longDescription) {
+                      <spk-icon [attr.spk-tooltip-primary]="item.destination.longDescription" spk-tooltip-right>
+                        question
+                      </spk-icon>
+                    }
+                  </label>
+                  <input
+                    type="text"
+                    id="destination-{{ item.formGroupName }}-{{ item.index }}"
+                    formControlName="{{ item.destination.name }}" />
+                </app-file-tree>
+              } @else if (item.destination.type === 'String' || item.destination.type === 'Path') {
+                <spk-form-field>
+                  <label for="destination-{{ item.formGroupName }}-{{ item.index }}">
+                    {{ item.destination.shortDescription ?? item.destination.name }}
+                    @if (item.destination.longDescription) {
+                      <spk-icon [attr.spk-tooltip-primary]="item.destination.longDescription" spk-tooltip-right>
+                        question
+                      </spk-icon>
+                    }
+                  </label>
+
+                  <input
+                    type="text"
+                    id="destination-{{ item.formGroupName }}-{{ item.index }}"
+                    formControlName="{{ item.destination.name }}" />
+
+                  @if (item.destination.type === 'Path') {
+                    <spk-icon spkPrefix>link</spk-icon>
+                  } @else {
+                    <spk-icon spkPrefix>textbox</spk-icon>
+                  }
+                </spk-form-field>
+              } @else if (item.destination.type === 'Password') {
+                <spk-form-field>
+                  <label for="destination-{{ item.formGroupName }}-{{ item.index }}">
+                    {{ item.destination.shortDescription ?? item.destination.name }} -- {{ item.oauthField }}
+                    {{ item.destinationType }} {{ item.destination.name }}
+                  </label>
+                  <input
+                    [type]="$any(item.destination).showPassword ? 'text' : 'password'"
+                    id="destination-{{ item.formGroupName }}-{{ item.index }}"
+                    formControlName="{{ item.destination.name }}" />
+
+                  @if (item.oauthField === item.destination.name) {
+                    <span spkPrefix class="link" (click)="oauthStartTokenCreation(item.destinationType)">AuthID</span>
+                  } @else {
+                    <spk-icon spkPrefix>password</spk-icon>
+                  }
+                  @if ($any(item.destination).showPassword) {
+                    <spk-icon
+                      class="clickable"
+                      spkSuffix
+                      (click)="$any(item.destination).showPassword = !$any(item.destination).showPassword">
+                      eye
+                    </spk-icon>
+                  } @else {
+                    <spk-icon
+                      class="clickable"
+                      spkSuffix
+                      (click)="$any(item.destination).showPassword = !$any(item.destination).showPassword">
+                      eye-slash
+                    </spk-icon>
+                  }
+                </spk-form-field>
+              } @else if (item.destination.type === 'Enumeration') {
+                <spk-select>
+                  <label for="destination-{{ item.formGroupName }}-{{ item.index }}">
+                    {{ item.destination.shortDescription ?? item.destination.name }}
+
+                    @if (item.destination.longDescription) {
+                      <spk-icon [attr.spk-tooltip-primary]="item.destination.longDescription" spk-tooltip-right>
+                        question
+                      </spk-icon>
+                    }
+                  </label>
+                  <input
+                    type="search"
+                    id="destination-{{ item.formGroupName }}-{{ item.index }}"
+                    formControlName="{{ item.destination.name }}" />
+
+                  <ng-container options>
+                    @for (option of item.destination.options; track $index) {
+                      <option [value]="option">{{ option }}</option>
+                    }
+                  </ng-container>
+                </spk-select>
+              } @else if (item.destination.type === 'Size') {
+                <div class="form-column" [formGroupName]="item.destination.name">
+                  <label for="destination-{{ item.formGroupName }}-{{ item.index }}">
+                    {{ item.destination.shortDescription ?? item.destination.name }}
+
+                    @if (item.destination.longDescription) {
+                      <spk-icon [attr.spk-tooltip-primary]="item.destination.longDescription" spk-tooltip-right>
+                        question
+                      </spk-icon>
+                    }
+                  </label>
+
+                  <div class="form-row">
+                    <spk-form-field>
+                      <input
+                        type="number"
+                        id="destination-{{ item.formGroupName }}-{{ item.index }}"
+                        formControlName="size" />
+
+                      <spk-icon spkPrefix>resize</spk-icon>
+                    </spk-form-field>
+
+                    <spk-select>
+                      <label></label>
+                      <input type="search" formControlName="unit" />
+
+                      <ng-container options>
+                        @for (option of sizeOptions(); track $index) {
+                          <option [value]="option">{{ option }}</option>
+                        }
+                      </ng-container>
+                    </spk-select>
+                  </div>
+                </div>
+              } @else if (item.destination.type === 'Integer') {
+                <spk-form-field>
+                  <label for="destination-{{ item.formGroupName }}-{{ item.index }}">
+                    {{ item.destination.shortDescription ?? item.destination.name }}
+                    @if (item.destination.longDescription) {
+                      <spk-icon [attr.spk-tooltip-primary]="item.destination.longDescription" spk-tooltip-right>
+                        question
+                      </spk-icon>
+                    }
+                  </label>
+                  <input
+                    type="number"
+                    id="destination-{{ item.formGroupName }}-{{ item.index }}"
+                    formControlName="{{ item.destination.name }}" />
+                  <spk-icon spkPrefix>numpad</spk-icon>
+                </spk-form-field>
+              } @else if (item.destination.type === 'Boolean') {
+                <spk-toggle class="primary raised">
+                  <label for="destination-{{ item.formGroupName }}-{{ item.index }}">
+                    {{ item.destination.shortDescription ?? item.destination.name }}
+                    @if (item.destination.longDescription) {
+                      <spk-icon [attr.spk-tooltip-primary]="item.destination.longDescription" spk-tooltip-right>
+                        question
+                      </spk-icon>
+                    }
+                  </label>
+                  <input
+                    type="checkbox"
+                    id="destination-{{ item.formGroupName }}-{{ item.index }}"
+                    formControlName="{{ item.destination.name }}" />
+                </spk-toggle>
+              } @else if (item.destination.type === 'Flags') {
+                <spk-select [selectMultiple]="true" class="primary">
+                  <label for="destination-{{ item.formGroupName }}-{{ item.index }}">
+                    {{ item.destination.shortDescription ?? item.destination.name }}
+                    @if (item.destination.longDescription) {
+                      <spk-icon [attr.spk-tooltip-primary]="item.destination.longDescription" spk-tooltip-right>
+                        question
+                      </spk-icon>
+                    }
+                  </label>
+                  <input type="text" id="text" formControlName="{{ item.destination.name }}" />
+
+                  <ng-container options>
+                    @for (option of item.destination.options; track $index) {
+                      @if (option === 'None') {
+                        <spk-option [value]="'None'" deselect>None</spk-option>
+                      } @else {
+                        <spk-option [value]="option">
+                          {{ option }}
+
+                          <spk-checkbox class="raised primary" />
+                        </spk-option>
+                      }
+                    }
+                  </ng-container>
+                </spk-select>
+              } @else if (item.destination.type === 'Timespan') {
+                <spk-form-field>
+                  <label for="destination-{{ item.formGroupName }}-{{ item.index }}">
+                    {{ item.destination.shortDescription ?? item.destination.name }}
+                    @if (item.destination.longDescription) {
+                      <spk-icon [attr.spk-tooltip-primary]="item.destination.longDescription" spk-tooltip-right>
+                        question
+                      </spk-icon>
+                    }
+                  </label>
+                  <input
+                    type="text"
+                    id="destination-{{ item.formGroupName }}-{{ item.index }}"
+                    formControlName="{{ item.destination.name }}" />
+
+                  <span spkError>
+                    <!-- {{ destinationForm.controls.destinations.controls[index]?.hasError('pattern') }} -->
+                  </span>
+                </spk-form-field>
+              }
+            </ng-container>
+          </ng-template>
+        </ng-container>
+      </ng-container>
+    }
+
+    <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>
+        Continue
+      </button>
+    </div>
+  </form>
+
+  <!-- <pre>{{ destinationFormSignal() | json }}</pre> -->
+  <!-- <pre style="white-space: wrap">{{ targetUrl() }}</pre>
+  <pre>{{ destinationFormSignal() | json }}</pre> -->
+  <!-- <pre>{{ targetUrlsAsFormObjects() | json }}</pre>
+  <pre>{{ formObjectsAsTargetUrls() | json }}</pre> -->
+}

package/src/app/create-edit-backup/destination/destination.component.scss

@@ -0,0 +1,85 @@
+@use '@sparkle-ui/core/styles/helpers' as *;
+
+:host {
+  display: block;
+}
+
+header {
+  display: flex;
+  flex-direction: column;
+  gap: p2r(8);
+
+  p {
+    span {
+      cursor: pointer;
+      text-decoration: underline;
+    }
+  }
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: p2r(24);
+}
+
+.form-actions {
+  display: flex;
+  justify-content: space-between;
+}
+
+.form-column {
+  display: flex;
+  flex-direction: column;
+
+  label {
+    display: flex;
+    align-items: center;
+    gap: p2r(4);
+  }
+
+  spk-icon {
+    font-size: p2r(16);
+  }
+}
+
+.form-row {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: p2r(8);
+  align-items: flex-end;
+}
+
+.clickable {
+  cursor: pointer;
+  color: var(--primary-500);
+}
+
+.most-common-destinations {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: p2r(16);
+
+  .tile {
+    display: flex;
+    flex-direction: column;
+    gap: p2r(8);
+    padding: p2r(16);
+    border: 1px solid var(--base-level-40);
+    border-radius: var(--shape-3);
+    box-shadow: var(--shadow-1);
+    background-color: var(--base-level-20);
+    cursor: pointer;
+
+    h3 {
+      font: var(--paragraph-10);
+      margin: 0;
+    }
+  }
+}
+
+[spkprefix].link {
+  cursor: pointer;
+  text-decoration: underline;
+  color: var(--primary-500);
+}

package/src/app/create-edit-backup/destination/destination.component.ts

@@ -0,0 +1,249 @@
+import { JsonPipe, NgTemplateOutlet } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+import { ChangeDetectionStrategy, Component, computed, ElementRef, inject, signal, viewChild } from '@angular/core';
+import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import {
+  SparkleButtonGroupComponent,
+  SparkleCheckboxComponent,
+  SparkleDividerComponent,
+  SparkleFormFieldComponent,
+  SparkleIconComponent,
+  SparkleMenuComponent,
+  SparkleOptionComponent,
+  SparkleSelectComponent,
+  SparkleToggleComponent,
+} from '@sparkle-ui/core';
+import { finalize } from 'rxjs';
+import FileTreeComponent from '../../core/components/file-tree/file-tree.component';
+import ToggleCardComponent from '../../core/components/toggle-card/toggle-card.component';
+import { IDynamicModule } from '../../core/openapi';
+import { SysinfoState } from '../../core/states/sysinfo.state';
+import { CreateEditBackupState } from '../create-edit-backup.state';
+import { FormView } from './destination.config';
+import { toTargetPath } from './destination.mapper';
+
+const SIZE_OPTIONS = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB'] as const;
+
+export type Size = (typeof SIZE_OPTIONS)[number];
+const fb = new FormBuilder();
+
+export const createDestinationForm = (
+  defaults = {
+    destinations: [],
+  }
+) => {
+  return fb.group({
+    destinations: fb.array<DestinationFormGroup>(defaults.destinations),
+  });
+};
+
+export const createDestinationFormGroup = ({
+  key,
+  customGroup,
+  dynamicGroup,
+  advancedGroup,
+}: {
+  key: string;
+  customGroup: FormGroup;
+  dynamicGroup: FormGroup;
+  advancedGroup: FormGroup;
+}) => {
+  return fb.group({
+    destinationType: fb.control<string>(key),
+    custom: customGroup,
+    dynamic: dynamicGroup,
+    advanced: advancedGroup,
+  });
+};
+
+export type DestinationFormGroup = ReturnType<typeof createDestinationFormGroup>;
+export type DestinationFormGroupValue = ReturnType<typeof createDestinationFormGroup>['value'];
+
+@Component({
+  selector: 'app-destination',
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    NgTemplateOutlet,
+
+    SparkleFormFieldComponent,
+    SparkleSelectComponent,
+    SparkleMenuComponent,
+    SparkleCheckboxComponent,
+    SparkleOptionComponent,
+    SparkleButtonGroupComponent,
+    SparkleIconComponent,
+    SparkleToggleComponent,
+    SparkleDividerComponent,
+
+    ToggleCardComponent,
+    FileTreeComponent,
+    JsonPipe,
+  ],
+  templateUrl: './destination.component.html',
+  styleUrl: './destination.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export default class DestinationComponent {
+  #router = inject(Router);
+  #route = inject(ActivatedRoute);
+  #sysinfo = inject(SysinfoState);
+  #httpClient = inject(HttpClient);
+  #createEditBackupState = inject(CreateEditBackupState);
+
+  formRef = viewChild.required<ElementRef<HTMLFormElement>>('formRef');
+
+  sysIsLoaded = this.#sysinfo.isLoaded;
+  destinationIsLoaded = this.#createEditBackupState.destinationIsLoaded;
+  destinationForm = this.#createEditBackupState.destinationForm;
+  destinationFormPair = this.#createEditBackupState.destinationFormPair;
+  selectedAdvancedFormPair = this.#createEditBackupState.selectedAdvancedFormPair;
+  notSelectedAdvancedFormPair = this.#createEditBackupState.notSelectedAdvancedFormPair;
+  destinationOptions = this.#createEditBackupState.destinationOptions;
+  destinationFormSignal = this.#createEditBackupState.destinationFormSignal;
+  destinationCount = computed(() => this.destinationFormSignal()?.destinations?.length ?? 0);
+  sizeOptions = signal(SIZE_OPTIONS);
+
+  getFormFieldValue(
+    destinationIndex: number,
+    formGroupName: 'custom' | 'dynamic' | 'advanced',
+    formControlName: string
+  ) {
+    const dest = this.destinationForm.controls.destinations.controls?.[destinationIndex];
+    const group = dest.controls?.[formGroupName];
+
+    return group.controls[formControlName].value;
+  }
+
+  addDestinationFormGroup(key: IDynamicModule['Key']) {
+    this.#createEditBackupState.addDestinationFormGroup(key);
+  }
+
+  addAdvancedFormPair(item: FormView) {
+    this.selectedAdvancedFormPair.update((y) => {
+      y.push(item);
+
+      return y;
+    });
+
+    this.notSelectedAdvancedFormPair.update((y) => {
+      y = y.filter((x) => x.name !== item.name);
+
+      return y;
+    });
+  }
+
+  targetUrl = computed(() => {
+    const destinationGroup = this.destinationFormSignal()?.destinations?.[0];
+
+    if (!destinationGroup) return '';
+
+    return toTargetPath(destinationGroup);
+  });
+  mapToTargetUrl(destinationGroup: DestinationFormGroup) {
+    return toTargetPath(destinationGroup.value);
+  }
+
+  removeDestinationFormGroup(index: number) {
+    this.destinationForm.controls.destinations.removeAt(index);
+  }
+
+  displayFn(key: IDynamicModule['Key']) {
+    const item = this.destinationOptions().find((x) => x.Key === key);
+
+    return item ? `${item.DisplayName}` : '';
+  }
+
+  goBack() {
+    this.#router.navigate(['general'], { relativeTo: this.#route.parent });
+  }
+
+  next() {
+    this.#router.navigate(['source-data'], { relativeTo: this.#route.parent });
+  }
+
+  #oauthServiceLink = signal('https://duplicati-oauth-handler.appspot.com/').asReadonly();
+  #oauthCreateToken = signal(
+    Math.random().toString(36).substring(2) + Math.random().toString(36).substring(2)
+  ).asReadonly();
+  #oauthInProgress = signal(false);
+  #oauthId = signal(null);
+
+  keyCreation() {}
+
+  oauthStartTokenCreation(backendKey: string) {
+    // if (!servicelink.endsWith('/')) servicelink += '/';
+
+    this.#oauthInProgress.set(true);
+
+    const w = 450;
+    const h = 600;
+    const startlink = this.#oauthServiceLink() + '?type=' + backendKey + '&token=' + this.#oauthCreateToken();
+
+    // const countDown = 100;
+    // const ft = oauthCreateToken;
+    const left = screen.width / 2 - w / 2;
+    const top = screen.height / 2 - h / 2;
+    const wnd = window.open(
+      startlink,
+      '_blank',
+      'height=' + h + ',width=' + w + ',menubar=0,status=0,titlebar=0,toolbar=0,left=' + left + ',top=' + top
+    );
+
+    wnd?.addEventListener('blur', (event) => {
+      console.log('event blur', event);
+    });
+
+    wnd?.addEventListener('beforeunload', (event) => {
+      console.log('event beforeunload', event);
+      this.#httpClient
+        .get(this.#oauthServiceLink() + 'fetch?callback=JSON_CALLBACK', {
+          params: { token: this.#oauthCreateToken() },
+        })
+        .pipe(finalize(() => this.#oauthInProgress.set(false)))
+        .subscribe({
+          next: (res: any) => {
+            console.log('res', res);
+
+            if (res?.authid) {
+              this.#oauthId.set(res.authid);
+
+              // wnd.close();
+            }
+          },
+        });
+    });
+
+    // var recheck = function () {
+    //   countDown--;
+    //   if (countDown > 0 && ft == oauthCreateToken) {
+    //     $http
+    //       .jsonp(servicelink + "fetch?callback=JSON_CALLBACK", {
+    //         params: { token: ft },
+    //       })
+    //       .then(
+    //         function (response) {
+    //           if (response.data.authid) {
+    //             const AuthID = response.data.authid;
+    //             const oauth_in_progress = false;
+    //             wnd.close();
+    //           } else {
+    //             setTimeout(recheck, 3000);
+    //           }
+    //         },
+    //         function (response) {
+    //           setTimeout(recheck, 3000);
+    //         }
+    //       );
+    //   } else {
+    //     const oauth_in_progress = false;
+    //     if (wnd != null) wnd.close();
+    //   }
+    // };
+
+    // setTimeout(recheck, 6000);
+
+    // return false;
+  }
+}