Support creating folders if failed test path

package.json

@@ -29,7 +29,7 @@
     "@angular/platform-browser": "^18.2.0",
     "@angular/platform-browser-dynamic": "^18.2.0",
     "@angular/router": "^18.2.0",
-    "@sparkle-ui/core": "^0.4.18",
+    "@sparkle-ui/core": "^0.4.21",
     "dayjs": "^1.11.13",
     "ngxtension": "^4.0.0",
     "rxjs": "~7.8.0",

src/app/backup/destination/destination.component.html

@@ -5,11 +5,17 @@ <h3 class="title-30">
         Backup destination
 
         @if (destinationCount() > 0) {
-          <button spk-button type="button" class="small" (click)="testDestination()">Test destination</button>
+          <button spk-button type="button" class="small" [class.success]="successfulTest()" (click)="testDestination()">
+            @if (successfulTest()) {
+              Connected
+              <spk-icon>check</spk-icon>
+            } @else {
+              Test destination
+            }
+          </button>
         }
       </h3>
 
-      <!-- <p>{{ targetUrl() }}</p> -->
       @if (destinationCount() > 0) {
         <p (click)="removeDestinationFormGroup(destinationCount() - 1)">
           Want to select another destination?

src/app/backup/destination/destination.component.ts

@@ -6,6 +6,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import {
   SparkleButtonGroupComponent,
   SparkleCheckboxComponent,
+  SparkleDialogService,
   SparkleDividerComponent,
   SparkleFormFieldComponent,
   SparkleIconComponent,
@@ -16,6 +17,7 @@ import {
   SparkleTooltipComponent,
 } from '@sparkle-ui/core';
 import { finalize } from 'rxjs';
+import { ConfirmDialogComponent } from '../../core/components/confirm-dialog/confirm-dialog.component';
 import FileTreeComponent from '../../core/components/file-tree/file-tree.component';
 import ToggleCardComponent from '../../core/components/toggle-card/toggle-card.component';
 import { DuplicatiServerService, IDynamicModule } from '../../core/openapi';
@@ -94,6 +96,7 @@ export default class DestinationComponent {
   #httpClient = inject(HttpClient);
   #dupServer = inject(DuplicatiServerService);
   #backupState = inject(BackupState);
+  #dialog = inject(SparkleDialogService);
 
   formRef = viewChild.required<ElementRef<HTMLFormElement>>('formRef');
 
@@ -107,6 +110,7 @@ export default class DestinationComponent {
   destinationFormSignal = this.#backupState.destinationFormSignal;
   destinationCount = computed(() => this.destinationFormSignal()?.destinations?.length ?? 0);
   sizeOptions = signal(SIZE_OPTIONS);
+  successfulTest = signal(false);
 
   getFormFieldValue(
     destinationIndex: number,
@@ -153,33 +157,51 @@ export default class DestinationComponent {
 
     if (!targetUrl) return;
 
-    let request = null;
-
-    // if (targetUrl.startsWith('s3://')) {
-    //   // Use the right API
-    //   request = this.#dupServer.postApiV1RemoteoperationCreate({
-    //     requestBody: {
-    //       path: targetUrl,
-    //     },
-    //   });
-    // } else {
-    request = this.#dupServer.postApiV1RemoteoperationTest({
-      requestBody: {
-        path: targetUrl,
-      },
-    });
-    // }
-
-    if (request) {
-      request.subscribe({
-        next: (res) => {
-          console.log('res', res);
+    this.#dupServer
+      .postApiV1RemoteoperationTest({
+        requestBody: {
+          path: targetUrl,
+        },
+      })
+      .subscribe({
+        next: () => {
+          this.successfulTest.set(true);
+
+          setTimeout(() => {
+            this.successfulTest.set(false);
+          }, 3000);
         },
         error: (err) => {
           console.error('err', err);
+
+          if (err.message === 'missing-folder') {
+            this.#dialog.open(ConfirmDialogComponent, {
+              data: {
+                title: 'Create folder',
+                message: 'The remote destination folder does not exist, do you want to create it?',
+              },
+              closed: (res) => {
+                if (!res) return;
+
+                this.#dupServer
+                  .postApiV1RemoteoperationCreate({
+                    requestBody: {
+                      path: targetUrl,
+                    },
+                  })
+                  .subscribe({
+                    next: (res) => {
+                      console.log('create folder res', res);
+                    },
+                    error: (err) => {
+                      console.error('create folder err', err);
+                    },
+                  });
+              },
+            });
+          }
         },
       });
-    }
   }
 
   mapToTargetUrl(destinationGroup: DestinationFormGroup) {

src/app/core/components/confirm-dialog/confirm-dialog.component.html

@@ -0,0 +1,14 @@
+<header header>
+  <h3>{{ _data().title }}</h3>
+</header>
+
+<div content>
+  @if (_data().message) {
+    <p>{{ _data().message }}</p>
+  }
+</div>
+
+<footer footer>
+  <button spk-button class="" (click)="close('cancel')">{{ _data().cancelText }}</button>
+  <button spk-button class="raised primary" (click)="close('confirm')">{{ _data().confirmText }}</button>
+</footer>

src/app/core/components/confirm-dialog/confirm-dialog.component.scss

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

src/app/core/components/confirm-dialog/confirm-dialog.component.ts

@@ -0,0 +1,39 @@
+import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
+
+export type ConfirmDialogData = {
+  title: string;
+  message?: string;
+  confirmText?: string;
+  cancelText?: string;
+};
+
+const DEFAULT_DATA: ConfirmDialogData = {
+  title: 'Are you sure?',
+  confirmText: 'Confirm',
+  cancelText: 'Cancel',
+};
+
+@Component({
+  selector: 'app-confirm-dialog',
+  standalone: true,
+  imports: [],
+  templateUrl: './confirm-dialog.component.html',
+  styleUrl: './confirm-dialog.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ConfirmDialogComponent {
+  data = input<ConfirmDialogData>();
+
+  _data = computed(() => {
+    return {
+      ...DEFAULT_DATA,
+      ...this.data(),
+    };
+  });
+
+  closed = output<boolean>();
+
+  close(type: 'confirm' | 'cancel' = 'confirm') {
+    this.closed.emit(type === 'confirm');
+  }
+}