Add optional encryption settings to app import dialog

This commit is contained in:
Johannes Zellner
2025-08-13 20:11:29 +02:00
parent eebd36ccc8
commit 67f0801453
2 changed files with 24 additions and 9 deletions

View File

@@ -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>

View File

@@ -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>