@duplicati/ngclient 0.0.1

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

@@ -0,0 +1,103 @@
+import { FormBuilder } from '@angular/forms';
+import { ArgumentType, ICommandLineArgument } from '../../core/openapi';
+
+export type FormView = {
+  name: string;
+  type: ArgumentType | 'file-tree';
+  shortDescription?: string;
+  longDescription?: string;
+  options?: ICommandLineArgument['ValidValues'];
+};
+
+export type CustomFormView = FormView & {
+  formElement: any;
+};
+
+export type DestinationConfig = {
+  [key: string]: {
+    oauthField?: string;
+    customFields?: {
+      [key: string]: CustomFormView;
+    };
+    dynamicFields?: string[];
+    advancedFields?: string[];
+  };
+};
+
+const fb = new FormBuilder();
+
+export const DESTINATION_CONFIG: DestinationConfig = {
+  file: {
+    customFields: {
+      path: {
+        type: 'file-tree',
+        name: 'path',
+        shortDescription: 'File path',
+        longDescription: 'The path to store the backup',
+        formElement: (defaultValue?: any) => fb.control<string>(defaultValue ?? ''),
+      },
+    },
+  },
+  ssh: {
+    customFields: {
+      server: {
+        type: 'String',
+        name: 'server',
+        shortDescription: 'Server',
+        longDescription: 'The server to connect to',
+        formElement: (defaultValue?: any) => fb.control<string>(defaultValue ?? ''),
+      },
+      port: {
+        type: 'Integer',
+        name: 'port',
+        shortDescription: 'Port',
+        longDescription: 'The port to connect to',
+        formElement: (defaultValue?: any) => fb.control<string>(defaultValue ?? ''),
+      },
+      path: {
+        type: 'Path',
+        name: 'path',
+        shortDescription: 'File path on the server',
+        longDescription: 'File path on the server',
+        formElement: (defaultValue?: any) => fb.control<string>(defaultValue ?? ''),
+      },
+    },
+    dynamicFields: ['auth-username'],
+  },
+  s3: {
+    customFields: {
+      path: {
+        type: 'Path',
+        name: 'path',
+        shortDescription: 'File path on the server',
+        longDescription: 'File path on the server',
+        formElement: (defaultValue?: any) => fb.control<string>(defaultValue ?? ''),
+      },
+      bucket: {
+        type: 'String',
+        name: 'bucket',
+        shortDescription: 'Bucket name',
+        longDescription: 'Bucket name',
+        formElement: (defaultValue?: any) => fb.control<string>(defaultValue ?? ''),
+      },
+    },
+    dynamicFields: ['use-ssl', 's3-server-name', 'auth-username', 'auth-password'],
+  },
+  gcs: {
+    dynamicFields: ['gcs-location', 'gcs-storage-class', 'authid'],
+  },
+  googledrive: {
+    oauthField: 'authid',
+
+    customFields: {
+      path: {
+        type: 'Path',
+        name: 'path',
+        shortDescription: 'File path on the server',
+        longDescription: 'File path on the server',
+        formElement: (defaultValue?: any) => fb.control<string>(defaultValue ?? ''),
+      },
+    },
+    dynamicFields: ['authid'],
+  },
+};

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

@@ -0,0 +1,177 @@
+import { FormControl, FormGroup } from '@angular/forms';
+import { DestinationFormGroupValue } from './destination.component';
+import { DESTINATION_CONFIG } from './destination.config';
+
+type DestinationType = keyof typeof mappings | string;
+
+export type DestinationFormGroup = FormGroup<{
+  destinationType: FormControl<string>;
+  custom: FormGroup<any>;
+  dynamic: FormGroup<any>;
+  advanced: FormGroup<any>;
+}>;
+
+export type ValueOfDestinationFormGroup = DestinationFormGroup['value'];
+
+function handleSearchParams(destinationType: string, urlObj: URL) {
+  const advanced: { [key: string]: any } = {};
+  const dynamic: { [key: string]: any } = {};
+
+  urlObj.searchParams.forEach((value, key) => {
+    if (DESTINATION_CONFIG[destinationType].dynamicFields?.includes(key)) {
+      dynamic[key] = decodeURIComponent(value);
+    } else {
+      advanced[key] = decodeURIComponent(value);
+    }
+  });
+
+  return {
+    advanced,
+    dynamic,
+  };
+}
+
+function toSearchParams(arr: [string, string | number | unknown][]) {
+  const searchParamString = arr
+    .map(([key, value]) => {
+      return `${key}=${value ? encodeURIComponent((value as string | number).toString()) : ''}`;
+    })
+    .join('&');
+
+  return searchParamString ? '?' + searchParamString : '';
+}
+
+const mappings = {
+  file: {
+    to: (fields: ValueOfDestinationFormGroup): string => {
+      const urlParams = toSearchParams([...Object.entries(fields.advanced), ...Object.entries(fields.dynamic)]);
+
+      return `${fields.destinationType}://${fields.custom.path}${urlParams}`;
+    },
+    from: (destinationType: string, urlObj: URL, plainPath: string) => {
+      const hasLeadingSlash = plainPath.indexOf('file:///') === 0;
+      const hostNameCapitalFirstLetter =
+        plainPath.split(hasLeadingSlash ? '///' : '//')[1].substring(0, 1) + urlObj.hostname.substring(1);
+
+      return <ValueOfDestinationFormGroup>{
+        destinationType,
+        custom: {
+          path: `${hasLeadingSlash ? '/' : ''}${hostNameCapitalFirstLetter}${urlObj.pathname}`,
+        },
+        ...handleSearchParams(destinationType, urlObj),
+      };
+    },
+  },
+  ssh: {
+    to: (fields: any): string => {
+      const urlParams = toSearchParams([...Object.entries(fields.advanced), ...Object.entries(fields.dynamic)]);
+
+      return `${fields.destinationType}://${fields.custom.server}${fields.custom.port ? ':' + fields.custom.port : ''}${fields.custom.path.startsWith('/') ? fields.custom.path : '/' + fields.custom.path}${urlParams}`;
+    },
+    from: (destinationType: string, urlObj: URL, plainPath: string) => {
+      return <ValueOfDestinationFormGroup>{
+        destinationType,
+        custom: {
+          server: urlObj.hostname,
+          port: urlObj.port,
+          path: urlObj.pathname,
+        },
+        ...handleSearchParams(destinationType, urlObj),
+      };
+    },
+  },
+  s3: {
+    to: (fields: any): string => {
+      const urlParams = toSearchParams([...Object.entries(fields.advanced), ...Object.entries(fields.dynamic)]);
+
+      return `${fields.destinationType}://${fields.custom.bucket}${fields.custom.path}${urlParams}`;
+    },
+    from: (destinationType: string, urlObj: URL, plainPath: string) => {
+      return <ValueOfDestinationFormGroup>{
+        destinationType,
+        custom: {
+          path: urlObj.pathname,
+          bucket: urlObj.hostname,
+        },
+        ...handleSearchParams(destinationType, urlObj),
+      };
+    },
+  },
+  gcs: {
+    to: (fields: any): string => {
+      const bucket = fields.dynamic['gcs-location'] ?? '';
+
+      delete fields.dynamic['gcs-location'];
+
+      const urlParams = toSearchParams([...Object.entries(fields.advanced), ...Object.entries(fields.dynamic)]);
+
+      return `${fields.destinationType}://${bucket}${urlParams}`;
+    },
+    from: (destinationType: string, urlObj: URL, plainPath: string) => {
+      const { advanced, dynamic } = handleSearchParams(destinationType, urlObj);
+      return <ValueOfDestinationFormGroup>{
+        destinationType,
+        advanced,
+        dynamic: {
+          ...dynamic,
+          'gcs-location': urlObj.hostname + urlObj.pathname,
+        },
+      };
+    },
+  },
+  googledrive: {
+    to: (fields: any): string => {
+      const path = fields.custom.path;
+
+      return `${fields.destinationType}://${path}`;
+    },
+    from: (destinationType: string, urlObj: URL, plainPath: string) => {
+      return <ValueOfDestinationFormGroup>{
+        destinationType,
+        custom: {
+          path: plainPath,
+        },
+        ...handleSearchParams(destinationType, urlObj),
+      };
+    },
+  },
+
+  fallbackMapper: {
+    to: (fields: any): string => {
+      return '';
+    },
+    from: (destinationType: string, urlObj: URL, plainPath: string) => {
+      return <ValueOfDestinationFormGroup>{
+        destinationType,
+        ...handleSearchParams(destinationType, urlObj),
+      };
+    },
+  },
+};
+
+export function toTargetPath(fields: DestinationFormGroupValue): string {
+  const destinationType = fields.destinationType;
+
+  if (!destinationType || !mappings.hasOwnProperty(destinationType)) {
+    return ((mappings as any)['fallbackMapper'].to(fields) as string) ?? '';
+  }
+
+  return ((mappings as any)[destinationType].to(fields) as string) ?? '';
+}
+
+export function fromTargetPath(targetPath: string) {
+  const canParse = URL.canParse(targetPath);
+  const destinationType = targetPath.split('://')[0];
+  const fakeProtocolPrefixed = 'http://' + targetPath.split('://')[1];
+  const urlObj = new URL(fakeProtocolPrefixed);
+
+  if (!mappings.hasOwnProperty(destinationType)) {
+    return (mappings as any)['fallbackMapper'].from(destinationType, urlObj);
+  }
+
+  if (!canParse) {
+    throw new Error('Invalid target path');
+  }
+
+  return (mappings as any)[destinationType].from(destinationType, urlObj, targetPath);
+}

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

@@ -0,0 +1,108 @@
+<form [formGroup]="generalForm" autocomplete="off" #formRef (submit)="next()">
+  <h3 class="title-30">General backup settings</h3>
+
+  <spk-form-field>
+    <label for="backupName">Backup name</label>
+    <input type="text" tabindex="1" placeholder="Your backup name" formControlName="name" />
+  </spk-form-field>
+
+  <spk-form-field>
+    <label for="backupDescription">Backup description</label>
+    <textarea
+      id="backupDescription"
+      tabindex="2"
+      placeholder="Your backup description"
+      formControlName="description"></textarea>
+  </spk-form-field>
+
+  @if (isNew()) {
+    <spk-select [displayValue]="displayFn(generalForm.value.encryption ?? '')">
+      <label for="encryption">Encryption</label>
+      <input type="text" id="encryption" tabindex="3" placeholder="Encryption" formControlName="encryption" />
+
+      <ng-container options>
+        @for (encryption of encryptionOptions(); track $index) {
+          <option [value]="encryption.Key">{{ encryption.DisplayName }}</option>
+        }
+      </ng-container>
+    </spk-select>
+
+    @if (encryptionFieldSignal() !== 'none') {
+      <div class="passwords">
+        <spk-form-field>
+          <label for="password">Create a password</label>
+          <input
+            [type]="showPassword() ? 'text' : 'password'"
+            id="password"
+            tabindex="4"
+            placeholder="Password"
+            formControlName="password" />
+        </spk-form-field>
+
+        <spk-form-field>
+          <input
+            [type]="showPassword() ? 'text' : 'password'"
+            id="repeatPassword"
+            tabindex="5"
+            placeholder="Repeat password"
+            formControlName="repeatPassword" />
+        </spk-form-field>
+
+        <div class="password-actions">
+          <button spk-button type="button" class="small" (click)="showPassword.set(!showPassword())">
+            @if (showPassword()) {
+              <spk-icon>eye-slash</spk-icon>
+              hide
+            } @else {
+              <spk-icon>eye</spk-icon>
+              show
+            }
+          </button>
+
+          <button spk-button type="button" class="small" (click)="generatePassword()">
+            <spk-icon>password</spk-icon>
+            Generate password
+          </button>
+
+          @if (showCopyPassword()) {
+            <button spk-button type="button" class="small copy" (click)="copyPassword()">
+              @if (copiedPassword()) {
+                <spk-icon class="spk-success">check</spk-icon>
+              } @else {
+                <spk-icon>copy</spk-icon>
+              }
+              {{ copiedPassword() ? 'Copied' : 'Copy' }} password
+            </button>
+          }
+        </div>
+      </div>
+    }
+  }
+
+  <div class="form-actions">
+    <button spk-button (click)="exit()">
+      <spk-icon>arrow-left</spk-icon>
+      Exit
+    </button>
+
+    <div
+      [attr.spk-tooltip-primary]="
+        (generalForm.valid && encryptionFieldSignal() === 'none') || copiedPassword()
+          ? undefined
+          : 'Remember to copy the password'
+      ">
+      <button
+        spk-button
+        class="raised primary"
+        type="submit"
+        [disabled]="
+          generalForm.invalid || (encryptionFieldSignal() !== 'none' && showCopyPassword() && !copiedPassword())
+        ">
+        <spk-icon>arrow-right</spk-icon>
+        Continue
+      </button>
+    </div>
+  </div>
+</form>
+
+<!-- <pre>{{ generalForm.value | json }}</pre> -->

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

@@ -0,0 +1,34 @@
+@use '@sparkle-ui/core/styles/helpers' as *;
+
+:host {
+  display: block;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: p2r(24);
+}
+
+.passwords {
+  display: flex;
+  flex-direction: column;
+  gap: p2r(8);
+}
+
+.password-actions {
+  display: flex;
+  gap: p2r(8);
+  align-items: center;
+}
+
+.form-actions {
+  display: flex;
+  justify-content: space-between;
+}
+
+.copy {
+  spk-icon.spk-success {
+    color: var(--success-500);
+  }
+}

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

@@ -0,0 +1,136 @@
+import { JsonPipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, ElementRef, inject, signal, viewChild } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import {
+  SparkleButtonComponent,
+  SparkleFormFieldComponent,
+  SparkleIconComponent,
+  SparkleSelectComponent,
+} from '@sparkle-ui/core';
+import { IDynamicModule } from '../../core/openapi';
+import { PasswordGeneratorService } from '../../core/services/password-generator.service';
+import { SysinfoState } from '../../core/states/sysinfo.state';
+import { validateWhen, watchField } from '../../core/validators/custom.validators';
+import { CreateEditBackupState } from '../create-edit-backup.state';
+
+const fb = new FormBuilder();
+
+export const createGeneralForm = (
+  defaults = {
+    name: '',
+    description: '',
+    encryption: 'none',
+    password: '',
+    repeatPassword: '',
+  }
+) => {
+  return fb.group({
+    name: fb.control<string>(defaults.name, [Validators.required]),
+    description: fb.control<string>(defaults.description),
+    encryption: fb.control<string>(defaults.encryption, [Validators.required, watchField()]),
+    password: fb.control<string>(defaults.password, [
+      validateWhen((t) => t?.value.encryption !== 'none', [Validators.required]),
+    ]),
+    repeatPassword: fb.control<string>(defaults.repeatPassword, [
+      validateWhen((t) => t?.value.encryption !== 'none', [Validators.required]),
+    ]),
+  });
+};
+
+export const NONE_OPTION = {
+  Key: 'none',
+  DisplayName: 'None',
+};
+
+@Component({
+  selector: 'app-general',
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    SparkleFormFieldComponent,
+    SparkleSelectComponent,
+    SparkleButtonComponent,
+    SparkleIconComponent,
+    JsonPipe,
+  ],
+  templateUrl: './general.component.html',
+  styleUrl: './general.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export default class GeneralComponent {
+  #router = inject(Router);
+  #route = inject(ActivatedRoute);
+  #passwordGeneratorService = inject(PasswordGeneratorService);
+  #createEditBackupState = inject(CreateEditBackupState);
+  #sysinfo = inject(SysinfoState);
+
+  formRef = viewChild.required<ElementRef<HTMLFormElement>>('formRef');
+  generalForm = this.#createEditBackupState.generalForm;
+  encryptionFieldSignal = this.#createEditBackupState.encryptionFieldSignal;
+  encryptionOptions = this.#createEditBackupState.encryptionOptions;
+  isNew = this.#createEditBackupState.isNew;
+
+  showPassword = signal(false);
+  copiedPassword = signal(false);
+  showCopyPassword = signal(false);
+
+  ngOnInit() {
+    this.formRef().nativeElement.focus();
+  }
+
+  exit() {
+    this.#createEditBackupState.exit();
+  }
+
+  async copyPassword() {
+    const pass = this.generalForm.controls.password.value;
+
+    await this.#copyToClipboard(pass ?? '');
+
+    this.copiedPassword.set(true);
+  }
+
+  async #copyToClipboard(text: string) {
+    try {
+      // Attempt to use the Clipboard API
+      await navigator.clipboard.writeText(text);
+    } catch (err) {
+      // Fallback to execCommand if Clipboard API fails
+      try {
+        const textArea = document.createElement('textarea');
+        textArea.value = text;
+        document.body.appendChild(textArea);
+        textArea.select();
+        document.execCommand('copy');
+        document.body.removeChild(textArea);
+      } catch (err) {
+        console.error('Failed to copy text: ', err);
+      }
+    }
+  }
+
+  displayFn(val: IDynamicModule['Key']) {
+    const encryptionOptions = this.#sysinfo.systemInfo()?.EncryptionModules ?? [];
+    const item = [NONE_OPTION, ...encryptionOptions].find((x) => x.Key === val);
+
+    if (!item) {
+      return '';
+    }
+    return `${item.DisplayName}`;
+  }
+
+  generatePassword() {
+    this.copiedPassword.set(false);
+
+    const newPass = this.#passwordGeneratorService.generate(16);
+    this.generalForm.controls.password.setValue(newPass);
+    this.generalForm.controls.repeatPassword.setValue(newPass);
+
+    this.showCopyPassword.set(true);
+  }
+
+  next() {
+    this.#router.navigate(['destination'], { relativeTo: this.#route.parent });
+  }
+}

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

@@ -0,0 +1,95 @@
+<form [formGroup]="optionsForm" #formRef (submit)="submit()">
+  <h3 class="title-30">Options</h3>
+
+  <div class="remote-volume-wrap">
+    <div class="row-inputs" formGroupName="remoteVolumeSize">
+      <spk-form-field>
+        <label for="size">Remote volume size</label>
+        <input type="number" id="size" formControlName="size" />
+      </spk-form-field>
+
+      <spk-select>
+        <input type="text" placeholder="Select an option..." formControlName="unit" />
+
+        <ng-container options>
+          @for (option of sizeOptions(); track $index) {
+            <option [value]="option">{{ option }}</option>
+          }
+        </ng-container>
+      </spk-select>
+    </div>
+
+    <p>
+      The backups will be split up into multiple files called volumes. Here you can set the maximum size of the
+      individual volume files.
+      <a href="#" class="spk-primary">Read more</a>
+    </p>
+  </div>
+
+  <spk-select>
+    <label for="size">Backup retention</label>
+    <input type="text" placeholder="Local folder or drive" formControlName="backupRetention" />
+
+    <ng-container options>
+      @for (option of rentationOptions(); track $index) {
+        <option [value]="option">{{ option }}</option>
+      }
+    </ng-container>
+  </spk-select>
+
+  <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 nonSelectedAdvancedOptions(); track $index) {
+            <button spk-menu-item type="button" (click)="addNewOption(option)">{{ option.Name }}</button>
+          }
+        </ng-container>
+      </spk-menu>
+    </ng-container>
+
+    <ng-container formArrayName="advancedOptions">
+      @for (optionCtrl of optionsForm.controls.advancedOptions.controls; track $index) {
+        <div class="advanced-option" [formGroup]="optionCtrl">
+          <spk-form-field>
+            @if ($index === 0) {
+              <label for="name">Name</label>
+            }
+            <input type="text" id="name" formControlName="name" />
+          </spk-form-field>
+
+          <spk-form-field>
+            @if ($index === 0) {
+              <label for="value">Value</label>
+            }
+            <input type="text" id="value" formControlName="value" />
+          </spk-form-field>
+
+          <button class="icon" spk-button type="button" (click)="optionsForm.controls.advancedOptions.removeAt($index)">
+            <spk-icon>x-circle</spk-icon>
+          </button>
+        </div>
+      }
+    </ng-container>
+  </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>
+  <!-- <pre>{{ optionsForm.value | json }}</pre> -->
+</form>

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

@@ -0,0 +1,42 @@
+@use '@sparkle-ui/core/styles/helpers' as *;
+
+:host {
+  display: block;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: p2r(24);
+}
+
+.remote-volume-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: p2r(4);
+}
+
+.row-inputs {
+  display: flex;
+  align-items: flex-end;
+  gap: p2r(8);
+
+  > * {
+    flex: 1 0;
+  }
+
+  p {
+  }
+}
+
+.advanced-option {
+  display: grid;
+  gap: p2r(8);
+  grid-template-columns: 1fr 1fr 40px;
+  align-items: flex-end;
+}
+
+.form-actions {
+  display: flex;
+  justify-content: space-between;
+}