@duplicati/ngclient 0.0.1

package/src/app/about/system-info/system-info.component.ts

@@ -0,0 +1,17 @@
+import { JsonPipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { SysinfoState } from '../../core/states/sysinfo.state';
+
+@Component({
+  selector: 'app-system-info',
+  standalone: true,
+  imports: [JsonPipe],
+  templateUrl: './system-info.component.html',
+  styleUrl: './system-info.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export default class SystemInfoComponent {
+  #sysInfo = inject(SysinfoState);
+
+  systemInfo = this.#sysInfo.systemInfo;
+}

package/src/app/add-backup/add-backup.component.html

@@ -0,0 +1,29 @@
+<app-status-bar />
+
+<section>
+  <h2>Add a new backup</h2>
+
+  <div class="backup-types">
+    <spk-card class="type-a">
+      <img src="/assets/images/new-backup.png" />
+      <h3>New backup</h3>
+
+      <p>Configure a new backup. Choose your destination, source data and schedule.</p>
+
+      <button spk-button class="raised primary" [routerLink]="['/backup/new']">
+        Add a new backup
+        <spk-icon>plus</spk-icon>
+      </button>
+    </spk-card>
+
+    <!-- <spk-card class="type-a">
+      <img src="/assets/images/new-backup.png" />
+      <h3>Import from file</h3>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
+      <button spk-button class="raised primary">
+        Import from file
+        <spk-icon>upload-simple</spk-icon>
+      </button>
+    </spk-card> -->
+  </div>
+</section>

package/src/app/add-backup/add-backup.component.scss

@@ -0,0 +1,38 @@
+@use '@sparkle-ui/core/styles/helpers' as *;
+
+:host {
+  display: block;
+}
+
+section {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: p2r(32);
+  padding: p2r(32 0);
+}
+
+div.backup-types {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: p2r(16);
+  max-width: 700px;
+}
+
+spk-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: p2r(16);
+  padding-bottom: p2r(48);
+
+  img {
+    max-width: 300px;
+  }
+
+  p {
+    text-wrap: balance;
+    text-align: center;
+    width: 75%;
+  }
+}

package/src/app/add-backup/add-backup.component.ts

@@ -0,0 +1,14 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { SparkleButtonComponent, SparkleCardComponent, SparkleIconComponent } from '@sparkle-ui/core';
+import StatusBarComponent from '../core/components/status-bar/status-bar.component';
+
+@Component({
+  selector: 'app-add-backup',
+  standalone: true,
+  imports: [StatusBarComponent, SparkleButtonComponent, SparkleCardComponent, SparkleIconComponent, RouterLink],
+  templateUrl: './add-backup.component.html',
+  styleUrl: './add-backup.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export default class AddBackupComponent {}

package/src/app/app.component.ts

@@ -0,0 +1,35 @@
+import { Component, inject } from '@angular/core';
+import { ActivatedRoute, RouterOutlet } from '@angular/router';
+import { Subscription } from 'rxjs';
+import { LOCALSTORAGE } from './core/services/localstorage.token';
+import { RelayconfigState } from './core/states/relayconfig.state';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [RouterOutlet],
+  template: `
+    <router-outlet />
+  `,
+  styles: [],
+})
+export class AppComponent {
+  #ls = inject(LOCALSTORAGE);
+  #route = inject(ActivatedRoute);
+  #relayConfigState = inject(RelayconfigState);
+
+  sub: Subscription | null = null;
+
+  ngOnInit() {
+    this.sub = this.#route.queryParams.subscribe(({ accessToken, clientId }: { [key: string]: string }) => {
+      if (accessToken?.length && clientId?.length) {
+        this.#relayConfigState.setConfig({ accessToken, clientId });
+      }
+    });
+    this.#ls.clearAllNotCurrentVersion();
+  }
+
+  ngOnDestroy() {
+    this.sub?.unsubscribe();
+  }
+}

package/src/app/app.config.ts

@@ -0,0 +1,23 @@
+import { ApplicationConfig, provideExperimentalZonelessChangeDetection } from '@angular/core';
+import { provideRouter, withComponentInputBinding } from '@angular/router';
+
+import { provideHttpClient, withFetch, withInterceptors } from '@angular/common/http';
+import { environment } from '../environments/environment';
+import { ENVIRONMENT_TOKEN } from '../environments/environment-token';
+import { routes } from './app.routes';
+import { httpInterceptor } from './core/interceptors/http.interceptor';
+import { httpInterceptorWebsocketRelay } from './core/interceptors/websocket.interceptor';
+import { DayJsProvider } from './core/providers/dayjs';
+import { LOCALSTORAGE } from './core/services/localstorage.token';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideExperimentalZonelessChangeDetection(),
+    provideRouter(routes, withComponentInputBinding()),
+    provideHttpClient(withFetch(), withInterceptors([httpInterceptorWebsocketRelay, httpInterceptor])),
+    LOCALSTORAGE,
+
+    { provide: ENVIRONMENT_TOKEN, useValue: environment },
+    DayJsProvider,
+  ],
+};

package/src/app/app.routes.ts

@@ -0,0 +1,121 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [
+  {
+    path: '',
+    // canActivate: [() => socketConnection],
+    children: [
+      {
+        path: 'login',
+        loadComponent: () => import('./login/login.component'),
+      },
+      {
+        path: 'logout',
+        loadComponent: () => import('./logout/logout.component'),
+      },
+      {
+        path: '',
+        loadComponent: () => import('./layout/layout.component'),
+        children: [
+          {
+            path: '',
+            loadComponent: () => import('./home/home.component'),
+          },
+          {
+            path: 'add-backup',
+            loadComponent: () => import('./add-backup/add-backup.component'),
+          },
+          {
+            path: 'backup/:id',
+            loadComponent: () => import('./create-edit-backup/create-edit-backup.component'),
+            children: [
+              {
+                path: '',
+                redirectTo: 'general',
+                pathMatch: 'full',
+              },
+              {
+                path: 'general',
+                loadComponent: () => import('./create-edit-backup/general/general.component'),
+              },
+              {
+                path: 'destination',
+                loadComponent: () => import('./create-edit-backup/destination/destination.component'),
+              },
+              {
+                path: 'source-data',
+                loadComponent: () => import('./create-edit-backup/source-data/source-data.component'),
+              },
+              {
+                path: 'schedule',
+                loadComponent: () => import('./create-edit-backup/schedule/schedule.component'),
+              },
+              {
+                path: 'options',
+                loadComponent: () => import('./create-edit-backup/options/options.component'),
+              },
+            ],
+          },
+          {
+            path: 'restore',
+            loadComponent: () => import('./restore/restore.component'),
+          },
+          {
+            path: 'restore-flow/:id',
+            loadComponent: () => import('./restore-flow/restore-flow.component'),
+            children: [
+              {
+                path: '',
+                redirectTo: 'select-files',
+                pathMatch: 'full',
+              },
+              {
+                path: 'select-files',
+                loadComponent: () => import('./restore-flow/select-files/select-files.component'),
+              },
+              {
+                path: 'options',
+                loadComponent: () => import('./restore-flow/options/options.component'),
+              },
+            ],
+          },
+          {
+            path: 'settings',
+            loadComponent: () => import('./settings/settings.component'),
+          },
+          {
+            path: 'about',
+            loadComponent: () => import('./about/about.component'),
+            children: [
+              {
+                path: '',
+                redirectTo: 'general',
+                pathMatch: 'full',
+              },
+              {
+                path: 'general',
+                loadComponent: () => import('./about/general/general.component'),
+              },
+              {
+                path: 'changelog',
+                loadComponent: () => import('./about/changelog/changelog.component'),
+              },
+              {
+                path: 'libraries',
+                loadComponent: () => import('./about/libraries/libraries.component'),
+              },
+              {
+                path: 'system-info',
+                loadComponent: () => import('./about/system-info/system-info.component'),
+              },
+              {
+                path: 'logs',
+                loadComponent: () => import('./about/logs/logs.component'),
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];

package/src/app/core/components/file-tree/file-tree.component.html

@@ -0,0 +1,87 @@
+@if (!multiSelect()) {
+  <spk-button-group>
+    <button
+      type="button"
+      [class.active]="pathDiscoveryMethod() === 'browse'"
+      (click)="pathDiscoveryMethod.set('browse')">
+      Browser path
+    </button>
+
+    <button type="button" [class.active]="pathDiscoveryMethod() === 'path'" (click)="pathDiscoveryMethod.set('path')">
+      Manually type path
+    </button>
+  </spk-button-group>
+}
+
+<!-- <spk-form-field>
+  <label for="search">Search</label>
+  <input type="text" id="search" [(ngModel)]="treeSearchQuery" />
+</spk-form-field> -->
+
+<div class="section" [class.hidden]="pathDiscoveryMethod() !== 'browse'">
+  <ng-content select="label" ngProjectAs="label"></ng-content>
+
+  <div class="browse-files" #treeContainer>
+    <ng-template #recursiveTree let-data>
+      <spk-list [style.padding-left.rem]="data.level * 0.5">
+        @for (node of data.children; track node.id) {
+          @if ((node.hidden && showHiddenFiles()) || !node.hidden) {
+            <div
+              spk-action-item
+              #treeNode
+              [class.active]="node.isSelected"
+              [class.open]="node.children.length"
+              [class.usually-hidden]="node.hidden"
+              (click)="node.id !== '/' && toggleNode($event, node.id, node)">
+              <div class="icon">
+                @if (node.id !== '/') {
+                  @if (node.children.length) {
+                    <spk-icon class="spk-primary">folder-open</spk-icon>
+                  } @else if (node.cls === 'file') {
+                    <spk-icon>file</spk-icon>
+                  } @else {
+                    <spk-icon class="spk-primary">folder</spk-icon>
+                  }
+                } @else {
+                  <spk-icon class="spk-primary">desktop-tower</spk-icon>
+                }
+              </div>
+
+              <div class="text" (click)="node.id !== '/' && toggleSelectedNode($event, node)">
+                {{ node.text }}
+              </div>
+            </div>
+
+            @if (node.children.length > 0) {
+              <ng-container
+                *ngTemplateOutlet="
+                  recursiveTree;
+                  context: { $implicit: { children: node.children, level: data.level + 1 } }
+                "></ng-container>
+            }
+          }
+        }
+      </spk-list>
+    </ng-template>
+
+    <ng-container
+      *ngTemplateOutlet="recursiveTree; context: { $implicit: { children: treeStructure(), level: 0 } }"></ng-container>
+  </div>
+
+  <spk-toggle
+    [class.active]="showHiddenFiles()"
+    class="primary raised browse-files-toggle"
+    (click)="showHiddenFiles.set(!showHiddenFiles())">
+    Show hidden {{ showFiles() ? 'files' : 'folders' }}
+  </spk-toggle>
+</div>
+
+<div #formRef>
+  <spk-form-field [class.hidden]="pathDiscoveryMethod() !== 'path'">
+    <ng-content select="label" ngProjectAs="label"></ng-content>
+    <ng-content select="input" ngProjectAs="input"></ng-content>
+  </spk-form-field>
+
+  <!-- <pre>{{ selectedPaths() | json }}</pre> -->
+  <!-- <pre>{{ currentPath() }}</pre> -->
+</div>

package/src/app/core/components/file-tree/file-tree.component.scss

@@ -0,0 +1,80 @@
+@use '@sparkle-ui/core/styles/helpers' as *;
+
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: p2r(16);
+
+  &.disabled {
+    opacity: 0.5;
+    user-select: none;
+    pointer-events: none;
+    position: relative;
+
+    &:before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: transparent;
+    }
+  }
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: p2r(8);
+}
+
+.browse-files {
+  display: flex;
+  gap: p2r(8);
+  padding: p2r(8 16);
+  height: p2r(200);
+  border: 1px solid var(--base-level-40);
+  border-radius: var(--shape-3);
+  overflow: auto;
+  resize: vertical;
+
+  spk-list {
+    --list-active-bg: var(--base-level-30);
+    gap: 0;
+    padding: 0;
+    height: min-content;
+    min-width: min-content;
+
+    [spk-action-item] {
+      padding: 0;
+      gap: p2r(4);
+
+      &.usually-hidden {
+        opacity: 0.6;
+      }
+
+      .text {
+        flex: 1 0;
+        height: 100%;
+        width: max-content;
+        display: flex;
+        align-items: center;
+      }
+
+      .icon {
+        width: p2r(24);
+        height: p2r(24);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.browse-files-toggle {
+  color: var(--base-level-60R);
+}
+
+.hidden {
+  display: none;
+}