@duplicati/ngclient 0.0.1

package/src/app/home/backup.const.ts

@@ -0,0 +1,167 @@
+export type BackupTemp = {
+  id: string;
+  organizationId: string;
+  machineId: string;
+  machineName: string;
+  endTime: string;
+  duration: string | null;
+  source: number | null;
+  destination: number | null;
+  version: string | null;
+  machineTags: string[];
+  latestBackupReports: {
+    backupReportId: string;
+    endTime: string;
+    status: string | null;
+  }[];
+};
+
+export const BACKUPS: BackupTemp[] = [
+  {
+    id: '08eca0fb-8f4d-408d-a5db-7408d7ad5922-1234test',
+    organizationId: '08eca0fb-8f4d-408d-a5db-7408d7ad5922',
+    machineId: '1234test',
+    machineName: '1234test2',
+    endTime: '2024-07-08T05:00:02.176194+00:00',
+    duration: '00:00:01.8431440',
+    source: 73193356,
+    destination: 69703215,
+    version: '1.0.0.0 (Current)',
+    machineTags: [],
+    latestBackupReports: [
+      {
+        backupReportId: '76199ce1-b9e8-47d2-9a66-606ff9983b35',
+        endTime: '2024-07-04T20:26:19.361749+00:00',
+        status: 'Success',
+      },
+      {
+        backupReportId: '954cefb9-aaeb-41ed-92a0-0759d533e1ae',
+        endTime: '2024-07-04T20:28:30.435824+00:00',
+        status: 'Success',
+      },
+      {
+        backupReportId: '035ac9ea-44a1-4747-bf7d-d23daf556a50',
+        endTime: '2024-07-04T20:35:53.290829+00:00',
+        status: 'Success',
+      },
+      {
+        backupReportId: 'e9597e50-882b-40ff-8f0d-d52639028665',
+        endTime: '2024-07-04T20:37:13.605541+00:00',
+        status: 'Success',
+      },
+      {
+        backupReportId: '22f18ac8-9ee4-4454-876f-e2b43a9cd6f4',
+        endTime: '2024-07-06T09:06:11.920107+00:00',
+        status: 'Success',
+      },
+      {
+        backupReportId: '560d42e3-fa66-4fbc-9fbb-5941ec26bdf2',
+        endTime: '2024-07-06T10:10:33.107455+00:00',
+        status: 'Success',
+      },
+      {
+        backupReportId: '9bf75628-1d72-4dfd-a777-6a4ef4fad4a4',
+        endTime: '2024-07-06T10:19:33.706844+00:00',
+        status: 'Success',
+      },
+      {
+        backupReportId: 'f35647c7-8bf9-4b45-b103-a285f247ac8a',
+        endTime: '2024-07-06T19:58:50.284511+00:00',
+        status: 'Error',
+      },
+      {
+        backupReportId: '3bb116c5-7046-4820-adaf-5f8ef461643f',
+        endTime: '2024-07-07T08:32:55.142756+00:00',
+        status: 'Error',
+      },
+      {
+        backupReportId: '4da96a66-cf6e-461f-abd1-efa300b3e071',
+        endTime: '2024-07-08T05:00:03.069452+00:00',
+        status: 'Success',
+      },
+    ],
+  },
+  {
+    id: '08eca0fb-8f4d-408d-a5db-7408d7ad5922-UNKNOWN',
+    organizationId: '08eca0fb-8f4d-408d-a5db-7408d7ad5922',
+    machineId: 'UNKNOWN',
+    machineName: 'UNKNOWN',
+    endTime: '2024-07-04T13:53:55.989892+00:00',
+    duration: null,
+    source: null,
+    destination: null,
+    version: null,
+    machineTags: [],
+    latestBackupReports: [
+      {
+        backupReportId: 'db8870da-a979-4eb5-b880-0213a6c0c6dd',
+        endTime: '2024-06-19T13:29:46.249283+00:00',
+        status: null,
+      },
+      {
+        backupReportId: '89e85445-860b-4f9a-b2bd-756682955993',
+        endTime: '2024-06-19T13:29:46.42688+00:00',
+        status: 'Success',
+      },
+      {
+        backupReportId: '578c6b63-2e32-4116-a639-f5b9a7cb0c5b',
+        endTime: '2024-06-19T13:29:46.580843+00:00',
+        status: null,
+      },
+      {
+        backupReportId: '4c3d7796-a08e-4916-969a-c7b0721749b3',
+        endTime: '2024-06-19T13:29:46.750381+00:00',
+        status: null,
+      },
+      {
+        backupReportId: '50d8a246-36eb-46f2-bcf6-602ace2421ee',
+        endTime: '2024-06-19T13:29:47.015853+00:00',
+        status: 'Success',
+      },
+      {
+        backupReportId: '247ba9f4-4a03-4b6e-9dcd-8b76182c326b',
+        endTime: '2024-07-04T13:53:53.921397+00:00',
+        status: null,
+      },
+      {
+        backupReportId: '94ba04e5-dce3-48ee-b41e-4ce1a0222df1',
+        endTime: '2024-07-04T13:53:55.538234+00:00',
+        status: 'Success',
+      },
+      {
+        backupReportId: '3115d9e3-952c-4472-be45-6b246ce8d5a6',
+        endTime: '2024-07-04T13:53:55.729932+00:00',
+        status: null,
+      },
+      {
+        backupReportId: 'de62f4a0-091e-416c-88b3-37f4c481efbd',
+        endTime: '2024-07-04T13:53:55.989892+00:00',
+        status: null,
+      },
+      {
+        backupReportId: '0172ccab-e2c5-43d5-acd2-67266b9ce9e6',
+        endTime: '2024-07-04T13:53:56.279706+00:00',
+        status: 'Success',
+      },
+    ],
+  },
+  {
+    id: '08eca0fb-8f4d-408d-a5db-7408d7ad5922-b3c774b874914bc98bc6964727e7e7c4',
+    organizationId: '08eca0fb-8f4d-408d-a5db-7408d7ad5922',
+    machineId: 'b3c774b874914bc98bc6964727e7e7c4',
+    machineName: 'hello world',
+    endTime: '2024-05-29T13:37:44.775107+00:00',
+    duration: '00:00:01.0571230',
+    source: 70109345,
+    destination: 67349385,
+    version: '1.0.0.0 (Current)',
+    machineTags: [],
+    latestBackupReports: [
+      {
+        backupReportId: '0d02b3e4-384e-4aec-9d16-a4bac601e05e',
+        endTime: '2024-05-29T13:37:45.62437+00:00',
+        status: 'Success',
+      },
+    ],
+  },
+];

package/src/app/home/home.component.html

@@ -0,0 +1,98 @@
+<app-status-bar />
+
+<section>
+  <header>
+    <spk-card class="type-a" [routerLink]="['/add-backup']">
+      <img src="/assets/images/backup.png" alt="" width="48px" />
+      <div class="text">
+        <h3>Backups</h3>
+        <p>Backups are stored in the cloud and can be restored at any time.</p>
+      </div>
+      <button spk-button>
+        Add
+        <spk-icon>plus</spk-icon>
+      </button>
+    </spk-card>
+
+    <spk-card class="type-a" [routerLink]="['/restore']">
+      <img src="/assets/images/restore.png" alt="" width="48px" />
+      <div class="text">
+        <h3>Restores</h3>
+        <p>Restores are stored in the cloud and can be restored at any time.</p>
+      </div>
+      <button spk-button>
+        Start
+        <spk-icon>arrow-right</spk-icon>
+      </button>
+    </spk-card>
+  </header>
+
+  <div class="content">
+    <h2>My backups</h2>
+    <div class="backups">
+      @if (backups().length) {
+        @for (backup of backups(); track $index) {
+          <div class="backup">
+            <div class="text">
+              <h3>
+                {{ backup.Backup?.Name ?? 'Backup name missing' }}
+                <spk-icon>database</spk-icon>
+              </h3>
+
+              <p>
+                <span>Last successful backup:</span>
+                {{ backup.Backup?.Metadata?.['LastBackupDate'] | date: 'short' }}
+                @if (backup.Backup?.Metadata?.['LastBackupDuration']) {
+                  - (took {{ backup.Backup?.Metadata?.['LastBackupDuration'] | durationFormat }})
+                } @else {
+                  N/A
+                }
+              </p>
+
+              <p>
+                <span>Source:</span>
+                @if (backup.Backup?.Metadata?.['SourceSizeString']) {
+                  {{ backup.Backup?.Metadata?.['SourceSizeString'] }}
+                } @else {
+                  N/A
+                }
+              </p>
+
+              <p>
+                <span>Destination:</span>
+                @if (backup.Backup?.Metadata?.['TargetSizeString']) {
+                  {{ backup.Backup?.Metadata?.['TargetSizeString'] }}
+                } @else {
+                  N/A
+                }
+              </p>
+            </div>
+
+            @if (backup.Backup?.Metadata?.['BackupListCount']) {
+              <spk-chip class="simple success">{{ backup.Backup?.Metadata?.['BackupListCount'] }} Version</spk-chip>
+            } @else {
+              <spk-chip class="simple">No version yet</spk-chip>
+            }
+
+            <div class="actions">
+              <button spk-button (click)="startBackup($any(backup.Backup?.ID))">
+                <spk-icon>play-circle</spk-icon>
+                Start
+              </button>
+              <button spk-button [routerLink]="['/backup', backup.Backup?.ID]">
+                <spk-icon>pencil-circle</spk-icon>
+                Edit
+              </button>
+              <button spk-button (click)="deleteBackup(backup.Backup?.ID)">
+                <spk-icon>x-circle</spk-icon>
+                Delete
+              </button>
+            </div>
+          </div>
+        }
+      } @else {
+        No backups founds
+      }
+    </div>
+  </div>
+</section>

package/src/app/home/home.component.scss

@@ -0,0 +1,88 @@
+@use '@sparkle-ui/core/styles/helpers' as *;
+
+:host {
+  display: block;
+}
+
+section {
+  display: flex;
+  flex-direction: column;
+  gap: p2r(32);
+  padding: p2r(32 0);
+}
+
+header {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  padding: p2r(0 32);
+  gap: p2r(16);
+}
+
+spk-card {
+  display: flex;
+  align-items: center;
+  gap: p2r(16);
+
+  .text {
+    flex: 1 0;
+    display: flex;
+    flex-direction: column;
+    gap: p2r(4);
+  }
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  padding: 0 p2r(32);
+  gap: p2r(16);
+}
+
+.backups {
+  display: flex;
+  flex-direction: column;
+  gap: p2r(8);
+}
+
+.backup {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: p2r(32);
+  gap: p2r(16);
+  border: 1px solid var(--base-level-40);
+  border-radius: var(--shape-3);
+  box-shadow: var(--shadow-1);
+
+  .text {
+    display: flex;
+    flex-direction: column;
+    gap: p2r(8);
+    width: 100%;
+    max-width: 40%;
+
+    h3 {
+      display: flex;
+      align-items: center;
+      gap: p2r(8);
+
+      spk-icon {
+        color: var(--base-level-60);
+      }
+    }
+
+    p {
+      font: var(--paragraph-30);
+      color: var(--base-level-60);
+
+      span {
+        color: var(--base-level-70);
+      }
+    }
+  }
+}
+
+.actions {
+  display: flex;
+  gap: p2r(8);
+}

package/src/app/home/home.component.ts

@@ -0,0 +1,54 @@
+import { DatePipe, JsonPipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import {
+  SparkleButtonComponent,
+  SparkleCardComponent,
+  SparkleChipComponent,
+  SparkleIconComponent,
+} from '@sparkle-ui/core';
+import StatusBarComponent from '../core/components/status-bar/status-bar.component';
+import { DurationFormatPipe } from '../core/pipes/duration.pipe';
+import { BackupsState } from '../core/states/backups.state';
+
+@Component({
+  selector: 'app-home',
+  standalone: true,
+  imports: [
+    RouterLink,
+
+    StatusBarComponent,
+
+    SparkleCardComponent,
+    SparkleButtonComponent,
+    SparkleIconComponent,
+    SparkleChipComponent,
+
+    JsonPipe,
+    DatePipe,
+    DurationFormatPipe,
+  ],
+  templateUrl: './home.component.html',
+  styleUrl: './home.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export default class HomeComponent {
+  #backupsState = inject(BackupsState);
+
+  backups = this.#backupsState.backups;
+  backupsLoading = this.#backupsState.backupsLoading;
+
+  ngOnInit() {
+    this.#backupsState.getBackups(true);
+  }
+
+  startBackup(id: string) {
+    this.#backupsState.startBackup(id);
+  }
+
+  deleteBackup(id: string | null | undefined) {
+    if (!id) return;
+
+    this.#backupsState.deleteBackup(id);
+  }
+}

package/src/app/layout/layout.component.html

@@ -0,0 +1,64 @@
+<spk-sidenav>
+  <div sidenav>
+    <header>
+      <app-logo />
+
+      <button spk-button class="icon small" (click)="toggleBodyClass()">
+        @if (isDarkMode()) {
+          <spk-icon>sun</spk-icon>
+        } @else {
+          <spk-icon>moon</spk-icon>
+        }
+      </button>
+    </header>
+
+    <spk-list class="base-level-20 primary">
+      <button spk-action-item routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
+        <spk-icon>house</spk-icon>
+        Home
+      </button>
+
+      <button spk-action-item routerLink="/add-backup" routerLinkActive="active">
+        <spk-icon>database</spk-icon>
+        Add backup
+      </button>
+
+      <button spk-action-item routerLink="/restore" routerLinkActive="active">
+        <spk-icon>clock-clockwise</spk-icon>
+        Restore
+      </button>
+
+      <button spk-action-item routerLink="/settings" routerLinkActive="active">
+        <spk-icon>gear</spk-icon>
+        Settings
+      </button>
+    </spk-list>
+
+    <div class="spacer"></div>
+
+    <spk-list class="base-level-20 primary">
+      <!-- <button spk-action-item (click)="">Refresh login</button> -->
+
+      <button spk-action-item routerLink="/about" routerLinkActive="active">
+        <spk-icon>info</spk-icon>
+        About duplicati
+      </button>
+
+      <button spk-action-item>
+        <spk-icon>files</spk-icon>
+        Documentation
+
+        <spk-icon suffix>arrow-square-out</spk-icon>
+      </button>
+
+      <button spk-action-item>
+        <spk-icon>chats-circle</spk-icon>
+        Visit forum
+
+        <spk-icon suffix>arrow-square-out</spk-icon>
+      </button>
+    </spk-list>
+  </div>
+
+  <router-outlet />
+</spk-sidenav>

package/src/app/layout/layout.component.scss

@@ -0,0 +1,24 @@
+:host {
+  height: 100vh;
+  width: 100%;
+}
+
+header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px;
+  gap: 12px;
+}
+
+h3[title] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+div[sidenav] {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}

package/src/app/layout/layout.component.ts

@@ -0,0 +1,51 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import {
+  SparkleButtonComponent,
+  SparkleIconComponent,
+  SparkleListComponent,
+  SparkleSidenavComponent,
+} from '@sparkle-ui/core';
+import LogoComponent from '../core/components/logo/logo.component';
+import { BackupsState } from '../core/states/backups.state';
+import { SysinfoState } from '../core/states/sysinfo.state';
+import { TasksState } from '../core/states/tasks.state';
+import { LayoutState } from './layout.state';
+
+@Component({
+  selector: 'app-layout',
+  standalone: true,
+  imports: [
+    RouterOutlet,
+    RouterLink,
+    RouterLinkActive,
+
+    SparkleSidenavComponent,
+    SparkleIconComponent,
+    SparkleListComponent,
+    SparkleButtonComponent,
+
+    LogoComponent,
+  ],
+  templateUrl: './layout.component.html',
+  styleUrl: './layout.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export default class LayoutComponent {
+  #layoutState = inject(LayoutState);
+  #backupsState = inject(BackupsState);
+  #taskState = inject(TasksState);
+  #sysinfoState = inject(SysinfoState);
+
+  isDarkMode = this.#layoutState.isDarkMode;
+
+  ngOnInit() {
+    this.#backupsState.getBackups();
+    this.#sysinfoState.preloadSystemInfo();
+    // this.#taskState.getTasks();
+  }
+
+  toggleBodyClass() {
+    this.#layoutState.toggleBodyClass();
+  }
+}

package/src/app/layout/layout.state.ts

@@ -0,0 +1,70 @@
+import { Injectable, effect, inject, signal } from '@angular/core';
+import { LOCALSTORAGE } from '../core/services/localstorage.token';
+
+declare global {
+  interface Window {
+    customData: string;
+  }
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class LayoutState {
+  #ls = inject(LOCALSTORAGE);
+  #storedDarkMode = this.#ls.getItemParsed<boolean>('darkTheme', true);
+  #isDarkMode = signal(false);
+  #isMobile = signal(window?.innerWidth <= 768);
+  #isNavOpen = signal(false);
+
+  isDarkMode = this.#isDarkMode.asReadonly();
+  isMobile = this.#isMobile.asReadonly();
+  isNavOpen = this.#isNavOpen.asReadonly();
+
+  constructor() {
+    const prefersDarkMode = window.matchMedia('(prefers-color-scheme:dark)').matches;
+
+    if (prefersDarkMode && this.#storedDarkMode) {
+      this.setDarkMode();
+    }
+
+    effect(() => {
+      if (this.#isDarkMode()) {
+        document.body.classList.add('dark');
+      } else {
+        document.body.classList.remove('dark');
+      }
+    });
+  }
+
+  ngOnInit() {
+    window.addEventListener('resize', this.#resizeHandler);
+  }
+
+  toggleNav() {
+    this.#isNavOpen.set(!this.isNavOpen());
+  }
+
+  toggleBodyClass() {
+    this.#ls.setItemParsed('darkTheme', !this.isDarkMode(), true);
+    this.#isDarkMode.set(!this.isDarkMode());
+  }
+
+  setDarkMode() {
+    this.#ls.setItemParsed('darkTheme', true, true);
+    this.#isDarkMode.set(true);
+  }
+
+  setLightMode() {
+    this.#ls.setItemParsed('darkTheme', false, true);
+    this.#isDarkMode.set(false);
+  }
+
+  #resizeHandler() {
+    this.#isMobile.set(window.innerWidth <= 768);
+  }
+
+  ngOnDestroy() {
+    window.removeEventListener('resize', this.#resizeHandler);
+  }
+}

package/src/app/login/login.component.html

@@ -0,0 +1,12 @@
+<form [formGroup]="loginForm" (submit)="submit()">
+  <div class="login-row">
+    <spk-form-field>
+      <input placeholder="Enter your password" tabindex="1" formControlName="pass" />
+    </spk-form-field>
+
+    <button spk-button class="raised primary" type="submit">
+      Login
+      <spk-icon>arrow-right</spk-icon>
+    </button>
+  </div>
+</form>

package/src/app/login/login.component.scss

@@ -0,0 +1,25 @@
+@use '@sparkle-ui/core/styles/helpers' as *;
+
+:host {
+  display: block;
+}
+
+form {
+  width: 100vw;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: p2r(24);
+}
+
+h3 {
+  font: var(--title-30);
+}
+
+.login-row {
+  display: flex;
+  align-items: flex-end;
+  gap: p2r(8);
+}

package/src/app/login/login.component.ts

@@ -0,0 +1,34 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { SparkleButtonComponent, SparkleFormFieldComponent, SparkleIconComponent } from '@sparkle-ui/core';
+import { AppAuthState } from '../core/states/app-auth.state';
+
+const fb = new FormBuilder();
+
+@Component({
+  selector: 'app-login',
+  standalone: true,
+  imports: [ReactiveFormsModule, SparkleFormFieldComponent, SparkleIconComponent, SparkleButtonComponent],
+  templateUrl: './login.component.html',
+  styleUrl: './login.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export default class LoginComponent {
+  #router = inject(Router);
+  #auth = inject(AppAuthState);
+
+  loginForm = fb.group({
+    pass: fb.control<string>('', Validators.required),
+  });
+
+  submit() {
+    if (!this.loginForm.value.pass) {
+      return;
+    }
+
+    this.#auth.login(this.loginForm.value.pass!).subscribe({
+      next: () => this.#router.navigate(['/']),
+    });
+  }
+}

package/src/app/logout/logout.component.html

@@ -0,0 +1 @@
+<p>logout works!</p>,

package/src/app/logout/logout.component.scss

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}