From dfe5b6b1f28ca6b0dcced4bee2fe569af6b2e43c Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Thu, 9 Oct 2025 11:58:16 +0200
Subject: [PATCH] Fixup backup site config dialog to handle S3

---
 .../src/components/BackupProviderForm.vue     |   6 +-
 .../src/components/BackupSiteConfigDialog.vue | 142 ++++++++++++------
 .../components/BackupSiteContentDialog.vue    |   2 +
 dashboard/src/views/BackupSitesView.vue       |   2 +-
 4 files changed, 104 insertions(+), 48 deletions(-)

diff --git a/dashboard/src/components/BackupProviderForm.vue b/dashboard/src/components/BackupProviderForm.vue
index 26da4a859..cb6288b45 100644
--- a/dashboard/src/components/BackupProviderForm.vue
+++ b/dashboard/src/components/BackupProviderForm.vue
@@ -129,15 +129,15 @@ onMounted(async () => {
       <TextInput id="mountOptionHostInput" v-model="providerConfig.mountOptionHost" placeholder="Server IP or hostname" required />
     </FormGroup>
 
-    <!-- CIFS -->
-    <Checkbox v-if="provider === 'cifs'" v-model="providerConfig.mountOptionSeal" :label="$t('backups.configureBackupStorage.cifsSealSupport')" />
-
     <!-- CIFS/NFS/SSHFS -->
     <FormGroup v-if="provider === 'cifs' || provider === 'nfs' || provider === 'sshfs'">
       <label for="mountOptionRemoteDirInput">{{ $t('backups.configureBackupStorage.remoteDirectory') }} ({{ provider }})</label>
       <TextInput id="mountOptionRemoteDirInput" v-model="providerConfig.mountOptionRemoteDir" placeholder="/share" required />
     </FormGroup>
 
+    <!-- CIFS -->
+    <Checkbox v-if="provider === 'cifs'" v-model="providerConfig.mountOptionSeal" :label="$t('backups.configureBackupStorage.cifsSealSupport')" />
+
     <!-- CIFS -->
     <FormGroup v-if="provider === 'cifs'">
       <label for="mountOptionUsernameInput">{{ $t('backups.configureBackupStorage.username') }} ({{ provider }})</label>
diff --git a/dashboard/src/components/BackupSiteConfigDialog.vue b/dashboard/src/components/BackupSiteConfigDialog.vue
index 74879553d..a07563026 100644
--- a/dashboard/src/components/BackupSiteConfigDialog.vue
+++ b/dashboard/src/components/BackupSiteConfigDialog.vue
@@ -1,9 +1,9 @@
 <script setup>
 
 import { ref, useTemplateRef } from 'vue';
-import { MaskedInput, Dialog, FormGroup, TextInput } from '@cloudron/pankow';
+import { MaskedInput, Dialog, FormGroup, TextInput, Checkbox } from '@cloudron/pankow';
 import { prettyBinarySize } from '@cloudron/pankow/utils';
-import { s3like } from  '../utils.js';
+import { s3like, regionName } from  '../utils.js';
 import BackupSitesModel from '../models/BackupSitesModel.js';
 import SystemModel from '../models/SystemModel.js';
 
@@ -30,39 +30,21 @@ const copyConcurrency = ref(0);
 
 const accessKeyId = ref('');
 const secretAccessKey = ref('');
-const mountOptionUsername = ref('');
-const mountOptionPassword = ref('');
-const mountOptionUser = ref('');
-const mountOptionPrivateKey = ref('');
+const bucket = ref('');
+const region = ref('');
+const prefix = ref('');
+const mountOptionsHost = ref('');
+const mountOptionsPort = ref(0);
+const mountOptionsRemoteDir = ref('');
+const mountOptionsSeal = ref(false);
+const mountOptionsUsername = ref('');
+const mountOptionsPassword = ref('');
+const mountOptionsUser = ref('');
+const mountOptionsPrivateKey = ref('');
 
 async function onSubmit() {
   busy.value = true;
 
-  // TODO maybe deal with gcs??
-  if (s3like(provider.value) && (accessKeyId.value !== site.value.config.accessKeyId || secretAccessKey.value)) {
-    const [error] = await backupSitesModel.setConfig(site.value.id, {
-      accessKeyId: accessKeyId.value,
-      secretAccessKey: secretAccessKey.value,
-    });
-    if (error) return console.error(error);
-  } else if (provider.value === 'cifs' && (mountOptionUsername.value !== site.value.config.mountOptions.username || mountOptionPassword.value)) {
-    const [error] = await backupSitesModel.setConfig(site.value.id, {
-      mountOptions: {
-        username: mountOptionUsername.value,
-        password: mountOptionPassword.value,
-      }
-    });
-    if (error) return console.error(error);
-  } else if (provider.value === 'sshfs' && (mountOptionUser.value !== site.value.config.mountOptions.user || mountOptionPrivateKey.value)) {
-    const [error] = await backupSitesModel.setConfig(site.value.id, {
-      mountOptions: {
-        user: mountOptionUser.value,
-        privateKey: mountOptionPrivateKey.value,
-      }
-    });
-    if (error) return console.error(error);
-  }
-
   let [error] = await backupSitesModel.setName(site.value.id, name.value);
   if (error) {
     formError.value.generic = error.body ? error.body.message : 'Internal error';
@@ -70,6 +52,52 @@ async function onSubmit() {
     return console.error(error);
   }
 
+  const data = {};
+
+  // TODO maybe deal with gcs??
+  if (s3like(provider.value) && (accessKeyId.value !== site.value.config.accessKeyId || secretAccessKey.value)) {
+    data.bucket = bucket.value;
+    data.region = region.value;
+    data.prefix = prefix.value;
+    data.accessKeyId = accessKeyId.value;
+    data.secretAccessKey = secretAccessKey.value || 'unset';
+  }
+
+  if (provider.value === 'cifs') {
+    data.mountOptions = {};
+    data.mountOptions.host = mountOptionsHost.value;
+    data.mountOptions.remoteDir = mountOptionsRemoteDir.value;
+    data.mountOptions.seal = mountOptionsSeal.value;
+    data.mountOptions.username = mountOptionsUsername.value;
+    if (mountOptionsPassword.value) data.mountOptions.password = mountOptionsPassword.value;
+  }
+
+  if (provider.value === 'sshfs') {
+    data.mountOptions = {};
+    data.mountOptions.host = mountOptionsHost.value;
+    data.mountOptions.port = mountOptionsPort.value;
+    data.mountOptions.remoteDir = mountOptionsRemoteDir.value;
+    data.mountOptions.user = mountOptionsUser.value;
+    if (mountOptionsPrivateKey.value) data.mountOptions.privateKey = mountOptionsPrivateKey.value;
+  }
+
+  // only call if anything has changed
+  if (Object.keys(data).length) {
+    const [error] = await backupSitesModel.setConfig(site.value.id, data);
+    if (error) {
+      if (error.status === 400) {
+        // if (error.body.message.indexOf('password') === 0) formError.value.generic = 'Username or password is wrong';
+        formError.value.generic = error.body ? error.body.message : 'Internal error';
+      } else {
+        formError.value.generic = error.body ? error.body.message : 'Internal error';
+        console.error(error);
+      }
+
+      busy.value = false;
+      return;
+    }
+  }
+
   const limits = {
     memoryLimit: parseInt(memoryLimit.value),
     uploadPartSize: parseInt(uploadPartSize.value),
@@ -116,12 +144,21 @@ defineExpose({
     if (s3like(provider.value)) {
       accessKeyId.value = t.config.accessKeyId;
       secretAccessKey.value = null;
+      bucket.value = t.config.bucket;
+      region.value = t.config.region;
+      prefix.value = t.config.prefix;
     } else if (provider.value === 'cifs') {
-      mountOptionUsername.value = t.config.mountOptions.username;
-      mountOptionPassword.value = null;
+      mountOptionsUsername.value = t.config.mountOptions.username;
+      mountOptionsHost.value = t.config.mountOptions.host;
+      mountOptionsRemoteDir.value = t.config.mountOptions.remoteDir;
+      mountOptionsSeal.value = t.config.mountOptions.seal;
+      mountOptionsPassword.value = null;
     } else if (provider.value === 'sshfs') {
-      mountOptionUser.value = t.config.mountOptions.user;
-      mountOptionPrivateKey.value = null;
+      mountOptionsUser.value = t.config.mountOptions.user;
+      mountOptionsHost.value = t.config.mountOptions.host;
+      mountOptionsPort.value = t.config.mountOptions.port;
+      mountOptionsRemoteDir.value = t.config.mountOptions.remoteDir;
+      mountOptionsPrivateKey.value = null;
     }
 
     await getMemory();
@@ -149,31 +186,48 @@ defineExpose({
           <fieldset :disabled="busy">
             <input style="display: none;" type="submit"/>
 
+            <div class="error-label" v-if="formError.generic">{{ formError.generic }}</div>
+
             <FormGroup>
               <label for="backupSiteNameInput">{{ $t('backups.configureBackupStorage.name') }}</label>
               <TextInput id="backupSiteNameInput" v-model="name" required/>
             </FormGroup>
 
-            <FormGroup v-if="provider === 'sshfs'">
-              <label for="mountOptionUserInput">{{ $t('backups.configureBackupStorage.user') }}</label>
-              <TextInput id="mountOptionUserInput" v-model="mountOptionUser" required />
+            <FormGroup v-if="site.provider && site.config">
+              <label><i v-if="site.encrypted" class="fa-solid fa-lock"></i> Storage: <b>{{ site.provider }} ({{ site.format }}) </b></label>
+              <div>
+                <span v-if="site.provider === 'filesystem'">{{ site.config.backupDir }}{{ (site.config.prefix ? `/${site.config.prefix}` : '') }}</span>
+                <span v-else-if="site.provider === 'disk' || site.provider === 'ext4' || site.provider === 'xfs' || site.provider === 'mountpoint'">{{ site.config.mountOptions.diskPath || site.config.mountPoint }}{{ (site.config.prefix ? `/${site.config.prefix}` : '') }}</span>
+                <span v-else-if="site.provider === 'cifs' || site.provider === 'nfs' || site.provider === 'sshfs'">{{ site.config.mountOptions.host }}:{{ site.config.mountOptions.remoteDir }}{{ (site.config.prefix ? `/${site.config.prefix}` : '') }}</span>
+                <span v-else-if="site.provider === 's3'">{{ site.config.region + '   ' + site.config.bucket + (site.config.prefix ? `/${site.config.prefix}` : '') }}</span>
+                <span v-else-if="site.provider === 'minio'">{{ site.config.endpoint + '   ' + site.config.bucket + (site.config.prefix ? `/${site.config.prefix}` : '') }}</span>
+                <span v-else-if="site.provider === 'gcs'">{{ site.config.endpoint + '   ' + site.config.bucket + (site.config.prefix ? `/${site.config.prefix}` : '') }}</span>
+                <span v-else>{{ regionName(site.provider, site.config.endpoint) + ' ' + site.config.bucket + (site.config.prefix ? `/${site.config.prefix}` : '') }}</span>
+              </div>
             </FormGroup>
 
             <FormGroup v-if="provider === 'sshfs'">
-              <label for="mountOptionPrivateKeyInput">{{ $t('backups.configureBackupStorage.privateKey') }}</label>
-              <MaskedInput id="mountOptionPrivateKeyInput" :multiline="true" v-model="mountOptionPrivateKey" required/>
+              <label for="mountOptionsUserInput">{{ $t('backups.configureBackupStorage.user') }}</label>
+              <TextInput id="mountOptionsUserInput" v-model="mountOptionsUser" required />
+            </FormGroup>
+
+            <FormGroup v-if="provider === 'sshfs'">
+              <label for="mountOptionsPrivateKeyInput">{{ $t('backups.configureBackupStorage.privateKey') }}</label>
+              <MaskedInput id="mountOptionsPrivateKeyInput" :multiline="true" v-model="mountOptionsPrivateKey" required/>
             </FormGroup>
 
             <FormGroup v-if="provider === 'cifs'">
-              <label for="mountOptionUsernameInput">{{ $t('backups.configureBackupStorage.username') }} ({{ provider }})</label>
-              <TextInput id="mountOptionUsernameInput" v-model="mountOptionUsername" required />
+              <label for="mountOptionsUsernameInput">{{ $t('backups.configureBackupStorage.username') }} ({{ provider }})</label>
+              <TextInput id="mountOptionsUsernameInput" v-model="mountOptionsUsername" required />
             </FormGroup>
 
             <FormGroup v-if="provider === 'cifs'">
-              <label for="mountOptionPasswordInput">{{ $t('backups.configureBackupStorage.password') }} ({{ provider }})</label>
-              <MaskedInput id="mountOptionPasswordInput" v-model="mountOptionPassword" required />
+              <label for="mountOptionsPasswordInput">{{ $t('backups.configureBackupStorage.password') }} ({{ provider }})</label>
+              <MaskedInput id="mountOptionsPasswordInput" v-model="mountOptionsPassword" required />
             </FormGroup>
 
+            <Checkbox v-if="provider === 'cifs'" v-model="mountOptionsSeal" :label="$t('backups.configureBackupStorage.cifsSealSupport')" />
+
             <FormGroup v-if="s3like(provider)">
               <label for="accessKeyIdInput">{{ $t('backups.configureBackupStorage.s3AccessKeyId') }}</label>
               <TextInput id="accessKeyIdInput" v-model="accessKeyId" required />
diff --git a/dashboard/src/components/BackupSiteContentDialog.vue b/dashboard/src/components/BackupSiteContentDialog.vue
index 331a5e194..e0c924340 100644
--- a/dashboard/src/components/BackupSiteContentDialog.vue
+++ b/dashboard/src/components/BackupSiteContentDialog.vue
@@ -113,6 +113,8 @@ defineExpose({
           <fieldset :disabled="busy">
             <input style="display: none;" type="submit"/>
 
+            <div class="error-label" v-if="formError.generic">{{ formError.generic }}</div>
+
             <FormGroup>
               <label>{{  $t('backups.configureBackupStorage.backupContents.title') }}</label>
               <div>{{ $t('backups.configureBackupStorage.backupContents.description') }}</div>
diff --git a/dashboard/src/views/BackupSitesView.vue b/dashboard/src/views/BackupSitesView.vue
index c6aec5102..68faa6e2e 100644
--- a/dashboard/src/views/BackupSitesView.vue
+++ b/dashboard/src/views/BackupSitesView.vue
@@ -162,7 +162,7 @@ function onActionMenu(site, event) {
     label: t('backups.schedule.title'),
     action: onEditSchedule.bind(null, site),
   }, {
-    icon: 'fa-solid fa-pencil-alt',
+    icon: 'fa-solid fa-screwdriver-wrench',
     label: t('backups.configAction'),
     action: onEditConfig.bind(null, site),
   }, {