@duplicati/ngclient 0.0.1 → 0.0.6

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

@@ -1,367 +0,0 @@
-@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

@@ -1,85 +0,0 @@
-@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

@@ -1,249 +0,0 @@
-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;
-  }
-}