From 67f0801453f0a0b75b69f8f29ac4cf06aa65b4ef Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Wed, 13 Aug 2025 20:11:29 +0200
Subject: [PATCH] Add optional encryption settings to app import dialog

---
 dashboard/src/components/AppImportDialog.vue | 29 +++++++++++++++-----
 dashboard/src/components/app/Backups.vue     |  4 +--
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/dashboard/src/components/AppImportDialog.vue b/dashboard/src/components/AppImportDialog.vue
index 0f639660d..76fc3c731 100644
--- a/dashboard/src/components/AppImportDialog.vue
+++ b/dashboard/src/components/AppImportDialog.vue
@@ -1,7 +1,7 @@
 <script setup>
 
 import { ref, useTemplateRef } from 'vue';
-import { Dialog, FormGroup, TextInput } from '@cloudron/pankow';
+import { Dialog, FormGroup, TextInput, PasswordInput, Checkbox } from '@cloudron/pankow';
 import { s3like } from  '../utils.js';
 import BackupProviderForm from './BackupProviderForm.vue';
 import AppsModel from '../models/AppsModel.js';
@@ -20,6 +20,8 @@ const providerConfig = ref({});
 const provider = ref('');
 const remotePath = ref('');
 const format = ref('');
+const encrypted = ref(false);
+const encryptionPasswordHint = ref('');
 const encryptionPassword = ref('');
 const encryptedFilenames = ref(false);
 
@@ -107,9 +109,9 @@ async function onSubmit() {
     remotePath: backupPath
   };
 
-  if (providerConfig.value.encryptionPassword) {
-    data.encryptionPassword = providerConfig.value.encryptionPassword;
-    data.encryptedFilenames = providerConfig.value.encryptedFilenames;
+  if (encrypted.value) {
+    data.encryptionPassword = encryptionPassword.value;
+    data.encryptedFilenames = encryptedFilenames.value;
   }
 
   const [error] = await appsModel.import(appId.value, data);
@@ -177,7 +179,9 @@ function onBackupConfigChanged(event) {
     remotePath.value = data.remotePath;
     providerConfig.value = data.config;
     format.value = data.format;
-    encryptionPassword.value = data.encrypted ? SECRET_PLACEHOLDER : '';
+    encrypted.value = !!data.encrypted;
+    encryptionPasswordHint.value = data.encryptionPasswordHint || '';
+    encryptionPassword.value = '';
     encryptedFilenames.value = data.encryptedFilenames;
   };
 
@@ -196,6 +200,10 @@ defineExpose({
     provider.value = '';
     providerConfig.value = {};
     remotePath.value = '';
+    encrypted.value = false;
+    encryptionPassword.value = '';
+    encryptedFilenames.value = false;
+    encryptionPasswordHint.value = '';
 
     dialog.value.open();
   }
@@ -234,10 +242,17 @@ defineExpose({
               v-model:provider="provider"
               v-model:provider-config="providerConfig"
               v-model:format="format"
-              v-model:encryptionPassword="encryptionPassword"
-              v-model:encryptedFilenames="encryptedFilenames"
               :form-error="formError"
               :import-only="true" />
+
+            <!-- TODO translate -->
+            <Checkbox style="padding-top: 12px" v-model="encrypted" label="Backup uses encryption"/>
+            <FormGroup v-if="encrypted">
+              <label for="encryptionPassswordInput">{{ $t('backups.configureBackupStorage.encryptionPassword') }}</label>
+              <PasswordInput id="encryptionPassswordInput" v-model="encryptionPassword" :placeholder="$t('backups.configureBackupStorage.encryptionPasswordPlaceholder')" required/>
+              <div class="warning-label">{{ $t('backups.configureBackupStorage.encryptionHint') }}: {{ encryptionPasswordHint }}</div>
+            </FormGroup>
+            <Checkbox v-if="encrypted && format === 'rsync'" v-model="encryptedFilenames" :label="$t('backups.configureBackupStorage.encryptFilenames')"/>
           </fieldset>
         </form>
       </div>
diff --git a/dashboard/src/components/app/Backups.vue b/dashboard/src/components/app/Backups.vue
index a20a22c63..5001cb5ca 100644
--- a/dashboard/src/components/app/Backups.vue
+++ b/dashboard/src/components/app/Backups.vue
@@ -295,7 +295,7 @@ onMounted(async () => {
         <div>{{ $t('app.backups.import.description') }}</div>
       </FormGroup>
       <div style="display: flex; align-items: center">
-        <Button @click="onImport()" :loading="importBusy" :disabled="importBusy || app.taskId || app.runState === 'stopped'" v-tooltip="app.taskId ? 'App is not running' : ''">{{ $t('app.backups.backups.importAction') }}</Button>
+        <Button @click="onImport()" :loading="importBusy" :disabled="importBusy || !!app.taskId || app.runState === 'stopped'" v-tooltip="app.taskId ? 'App is not running' : ''">{{ $t('app.backups.backups.importAction') }}</Button>
       </div>
     </SettingsItem>
 
@@ -327,7 +327,7 @@ onMounted(async () => {
             <Button secondary tool small icon="fa-solid fa-download" v-if="backup.format === 'tgz' && app.accessLevel === 'admin'" v-tooltip="$t('app.backups.backups.downloadBackupTooltip')" :href="getDownloadLink(backup)"></Button>
             <Button secondary tool small icon="fa-solid fa-file-alt" v-if="app.accessLevel === 'admin'" v-tooltip="$t('app.backups.backups.downloadConfigTooltip')" @click="onDownloadConfig(backup)"></Button>
             <Button secondary tool small icon="fa-solid fa-clone" v-if="app.accessLevel === 'admin'" v-tooltip="$t('app.backups.backups.cloneTooltip')" @click="onClone(backup)"></Button>
-            <Button secondary tool small icon="fa-solid fa-history" :disabled="app.taskId || app.runState === 'stopped'" v-tooltip="$t('app.backups.backups.restoreTooltip')" @click="onRestore(backup)"></Button>
+            <Button secondary tool small icon="fa-solid fa-history" :disabled="!!app.taskId || app.runState === 'stopped'" v-tooltip="$t('app.backups.backups.restoreTooltip')" @click="onRestore(backup)"></Button>
           </ButtonGroup>
         </div>
       </template>