jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Setup backup encryption in extra step

Browse Source
This commit is contained in:
Johannes Zellner
2025-08-06 12:52:49 +02:00
parent 7883839871
commit 98ea5a7b70
12 changed files with 243 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/components/BackupProviderForm.vue
+1 -10
View File
@@ -10,8 +10,6 @@ import { mountlike, s3like } from '../utils.js';
const provider = defineModel('provider');
const providerConfig = defineModel('providerConfig');
const format = defineModel('format');
const encryptionPassword = defineModel('encryptionPassword');
const encryptedFilenames = defineModel('encryptedFilenames');
const props = defineProps({
formError: {},
@@ -197,7 +195,7 @@ onMounted(async () => {
</FormGroup>
<!-- Filesystem/SSHFS/CIFS/NFS/EXT4/mountpoint -->
<Checkbox v-if="(provider === 'filesystem' || mountlike(provider)) && !importOnly" v-model="providerConfig.useHardlinks" :label="$t('backups.configureBackupStorage.hardlinksLabel')"/>
<Checkbox v-if="(provider === 'filesystem' || mountlike(provider)) && !importOnly && format === 'rsync'" v-model="providerConfig.useHardlinks" :label="$t('backups.configureBackupStorage.hardlinksLabel')"/>
<!-- CIFS/mountpoint -->
<Checkbox v-if="(provider === 'mountpoint' || provider === 'cifs') && !importOnly" v-model="providerConfig.preserveAttributes" :label="$t('backups.configureBackupStorage.preserveAttributesLabel')"/>
@@ -282,12 +280,5 @@ onMounted(async () => {
<SingleSelect id="formatInput" v-model="format" :options="BACKUP_FORMATS" option-label="name" option-key="value" required />
<div class="warning-label" v-show="format === 'rsync' && (s3like(provider) || provider === 'gcs') && !importOnly">{{ $t('backups.configureBackupStorage.s3LikeNote') }} <sup><a href="https://docs.cloudron.io/backups/#amazon-s3" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></div>
</FormGroup>
<FormGroup v-if="provider !== 'noop'">
<label for="encryptionPassswordInput">{{ $t('backups.configureBackupStorage.encryptionPassword') }} <sup><a href="https://docs.cloudron.io/backups/#encryption" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
<TextInput id="encryptionPassswordInput" v-model="encryptionPassword" :placeholder="$t('backups.configureBackupStorage.encryptionPasswordPlaceholder')" />
</FormGroup>
<div class="warning-label" v-show="encryptionPassword && !importOnly">{{ $t('backups.configureBackupStorage.encryptionDescription') }}</div>
<Checkbox v-if="format === 'rsync' && encryptionPassword" v-model="encryptedFilenames" :label="$t(importOnly ? 'backups.configureBackupStorage.encryptedFilenames' : 'backups.configureBackupStorage.encryptFilenames')"/>
</div>
</template>
dashboard/src/components/BackupTargetDialog.vue
+146 -63
View File
@@ -1,7 +1,7 @@
<script setup>
import { ref, useTemplateRef } from 'vue';
import { Dialog, FormGroup, TextInput } from '@cloudron/pankow';
import { ref, useTemplateRef, watch } from 'vue';
import { Dialog, FormGroup, TextInput, PasswordInput, Button, Checkbox } from '@cloudron/pankow';
import { prettyBinarySize } from '@cloudron/pankow/utils';
import { REGIONS_CONTABO, REGIONS_VULTR, REGIONS_IONOS, REGIONS_OVH, REGIONS_LINODE, REGIONS_SCALEWAY, REGIONS_WASABI } from '../constants.js';
import { mountlike, s3like } from '../utils.js';
@@ -16,10 +16,15 @@ const systemModel = SystemModel.create();
const dialog = useTemplateRef('dialog');
const form = useTemplateRef('form');
const step = ref('storage');
const target = ref({});
const newTargetId = ref('');
const name = ref('');
const encrypted = ref(false);
const useEncryption = ref(false);
const encryptionPassword = ref('');
const encryptionPasswordRepeat = ref('');
const encryptedFilenames = ref(false);
const encryptionPasswordHint = ref('');
const formError = ref({});
const busy = ref(false);
const provider = ref('');
@@ -140,22 +145,60 @@ async function onSubmitAdd() {
// deleteConcurrency: parseInt(providerConfig.value.limits.deleteConcurrency),
};
const encryptionPassword = providerConfig.value.encryptionPassword || null;
const encryptedFilenames = providerConfig.value.encryptionPassword ? providerConfig.value.encryptedFilenames : null;
formError.value = {};
busy.value = true;
const [error, targetId] = await backupTargetsModel.add(name.value, format.value, provider.value, data, schedulePattern, retention, limitsConfig, encryptionPassword, encryptedFilenames);
const [error, result] = await backupTargetsModel.add(name.value, format.value, provider.value, data, schedulePattern, retention, limitsConfig);
if (error) {
formError.value.generic = error.body ? error.body.message : 'Internal error';
busy.value = false;
return console.error(error);
}
// stash for encryption password step
newTargetId.value = result;
busy.value = false;
formError.value = {};
// signal to refresh the list already
emit('success');
if (useEncryption.value) {
step.value = 'encryption';
} else {
dialog.value.close();
}
}
function isSetupEncryptionFormValid() {
return encryptionPassword.value && encryptionPassword.value === encryptionPasswordRepeat.value;
}
async function onSetupEncryption() {
if (!isSetupEncryptionFormValid()) return;
busy.value = true;
const [error] = await backupTargetsModel.setEncryption(newTargetId.value, encryptionPassword.value, encryptedFilenames.value, encryptionPasswordHint.value);
if (error) {
if (error.body && error.body.message.indexOf('password') === 0) {
formError.value.password = error.body.message;
} else {
formError.value.generic = error.body ? error.body.message : 'Internal error';
}
busy.value = false;
return console.error(error);
}
emit('success');
dialog.value.close();
busy.value = false;
}
watch(encryptionPassword, () => {
formError.value.password = null;
});
async function onSubmitEdit() {
// TODO set config (eg. provider config passwords)
@@ -194,7 +237,6 @@ async function onSubmit() {
await onSubmitAdd();
}
async function getMemory() {
// TODO what is this exactly?
// if (props.provisioning) {
@@ -210,6 +252,8 @@ async function getMemory() {
defineExpose({
async open(t = null) {
step.value = 'storage';
target.value = t;
formError.value = {};
@@ -218,7 +262,10 @@ defineExpose({
provider.value = t?.provider || '';
format.value = t?.format || '';
providerConfig.value = t?.config || {};
encrypted.value = t?.encrypted || false;
useEncryption.value = t?.encrypted || false;
encryptionPassword.value = '';
encryptionPasswordRepeat.value = '';
encryptionPasswordHint.value = t?.encryptionPasswordHint || '';
encryptedFilenames.value = t?.encryptedFilenames || false;
limits.value = t?.limits || {};
@@ -245,69 +292,105 @@ defineExpose({
</script>
<template>
<Dialog ref="dialog"
:title="$t('backups.configureBackupStorage.title')"
:confirm-label="$t('main.dialog.save')"
:confirm-busy="busy"
:reject-label="busy ? null :$t('main.dialog.cancel')"
reject-style="secondary"
@confirm="onSubmit()"
>
<Dialog ref="dialog" :title="$t('backups.configureBackupStorage.title')">
<div>
<form @submit.prevent="onSubmit()" autocomplete="off" ref="form">
<fieldset :disabled="busy">
<input style="display: none;" type="submit"/>
<!-- TODO <div class="warning-label" v-show="oldProvider !== provider || oldFormat !== providerConfig.format">{{ $t('backups.configureBackupStorage.formatChangeNote') }}</div> -->
<div v-if="step === 'storage'">
<form @submit.prevent="onSubmit()" autocomplete="off" ref="form">
<fieldset :disabled="busy">
<input style="display: none;" type="submit"/>
<!-- TODO <div class="warning-label" v-show="oldProvider !== provider || oldFormat !== providerConfig.format">{{ $t('backups.configureBackupStorage.formatChangeNote') }}</div> -->
<FormGroup>
<!-- TODO translate -->
<label for="nameInput">Name</label>
<TextInput id="nameInput" v-model="name" required/>
</FormGroup>
<FormGroup>
<!-- TODO translate -->
<label for="nameInput">Name</label>
<TextInput id="nameInput" v-model="name" required/>
</FormGroup>
<BackupProviderForm v-model:provider="provider" v-model:format="format" v-model:provider-config="providerConfig" :form-error="formError"/>
<BackupProviderForm v-model:provider="provider" v-model:format="format" v-model:provider-config="providerConfig" :form-error="formError"/>
<FormGroup>
<label for="memoryLimitInput">{{ $t('backups.configureBackupStorage.memoryLimit') }}: <b>{{ prettyBinarySize(limits.memoryLimit, '1024 MB') }}</b></label>
<div class="small">{{ $t('backups.configureBackupStorage.memoryLimitDescription') }}</div>
<input type="range" id="memoryLimitInput" v-model="limits.memoryLimit" :step="256*1024*1024" :min="minMemoryLimit" :max="maxMemoryLimit" />
</FormGroup>
<FormGroup>
<label for="memoryLimitInput">{{ $t('backups.configureBackupStorage.memoryLimit') }}: <b>{{ prettyBinarySize(limits.memoryLimit, '1024 MB') }}</b></label>
<div class="small">{{ $t('backups.configureBackupStorage.memoryLimitDescription') }}</div>
<input type="range" id="memoryLimitInput" v-model="limits.memoryLimit" :step="256*1024*1024" :min="minMemoryLimit" :max="maxMemoryLimit" />
</FormGroup>
<FormGroup v-if="s3like(provider)">
<label for="uploadPartSizeInput">{{ $t('backups.configureBackupStorage.uploadPartSize') }}: <b>{{ prettyBinarySize(limits.uploadPartSize, 'Default (50 MiB)') }}</b></label>
<p class="small">{{ $t('backups.configureBackupStorage.uploadPartSizeDescription') }}</p>
<input type="range" id="uploadPartSizeInput" v-model="limits.uploadPartSize" list="uploadPartSizeTicks" :step="1024*1024" :min="10*1024*1024" :max="1024*1024*1024" />
<datalist id="uploadPartSizeTicks">
<option :value="1024*1024*10"></option>
<option :value="1024*1024*64"></option>
<option :value="1024*1024*128"></option>
<option :value="1024*1024*256"></option>
<option :value="1024*1024*512"></option>
<option :value="1024*1024*1024"></option>
</datalist>
</FormGroup>
<FormGroup v-if="s3like(provider)">
<label for="uploadPartSizeInput">{{ $t('backups.configureBackupStorage.uploadPartSize') }}: <b>{{ prettyBinarySize(limits.uploadPartSize, 'Default (50 MiB)') }}</b></label>
<p class="small">{{ $t('backups.configureBackupStorage.uploadPartSizeDescription') }}</p>
<input type="range" id="uploadPartSizeInput" v-model="limits.uploadPartSize" list="uploadPartSizeTicks" :step="1024*1024" :min="10*1024*1024" :max="1024*1024*1024" />
<datalist id="uploadPartSizeTicks">
<option :value="1024*1024*10"></option>
<option :value="1024*1024*64"></option>
<option :value="1024*1024*128"></option>
<option :value="1024*1024*256"></option>
<option :value="1024*1024*512"></option>
<option :value="1024*1024*1024"></option>
</datalist>
</FormGroup>
<FormGroup v-if="format === 'rsync' && provider !== 'noop'">
<label for="syncConcurrencyInput">{{ $t('backups.configureBackupStorage.uploadConcurrency') }}: <b>{{ limits.syncConcurrency }}</b></label>
<div class="small">{{ $t('backups.configureBackupStorage.uploadConcurrencyDescription') }}</div>
<input type="range" id="syncConcurrencyInput" v-model="limits.syncConcurrency" step="10" min="10" max="200" />
</FormGroup>
<FormGroup v-if="format === 'rsync' && provider !== 'noop'">
<label for="syncConcurrencyInput">{{ $t('backups.configureBackupStorage.uploadConcurrency') }}: <b>{{ limits.syncConcurrency }}</b></label>
<div class="small">{{ $t('backups.configureBackupStorage.uploadConcurrencyDescription') }}</div>
<input type="range" id="syncConcurrencyInput" v-model="limits.syncConcurrency" step="10" min="10" max="200" />
</FormGroup>
<FormGroup v-if="format === 'rsync' && (s3like(provider) || provider === 'gcs')">
<label for="downloadConcurrencyInput">{{ $t('backups.configureBackupStorage.downloadConcurrency') }}: <b>{{ limits.downloadConcurrency }}</b></label>
<div class="small">{{ $t('backups.configureBackupStorage.downloadConcurrencyDescription') }}</div>
<input type="range" id="downloadConcurrencyInput" v-model="limits.downloadConcurrency" step="10" min="10" max="200" />
</FormGroup>
<FormGroup v-if="format === 'rsync' && (s3like(provider) || provider === 'gcs')">
<label for="downloadConcurrencyInput">{{ $t('backups.configureBackupStorage.downloadConcurrency') }}: <b>{{ limits.downloadConcurrency }}</b></label>
<div class="small">{{ $t('backups.configureBackupStorage.downloadConcurrencyDescription') }}</div>
<input type="range" id="downloadConcurrencyInput" v-model="limits.downloadConcurrency" step="10" min="10" max="200" />
</FormGroup>
<FormGroup v-if="format === 'rsync' && (s3like(provider) || provider === 'gcs')">
<label for="copyConcurrencyInput">{{ $t('backups.configureBackupStorage.copyConcurrency') }}: <b>{{ limits.copyConcurrency }}</b></label>
<div class="small">{{ $t('backups.configureBackupStorage.copyConcurrencyDescription') }}
<span v-show="provider === 'digitalocean-spaces'">{{ $t('backups.configureBackupStorage.copyConcurrencyDigitalOceanNote') }}</span>
<FormGroup v-if="format === 'rsync' && (s3like(provider) || provider === 'gcs')">
<label for="copyConcurrencyInput">{{ $t('backups.configureBackupStorage.copyConcurrency') }}: <b>{{ limits.copyConcurrency }}</b></label>
<div class="small">{{ $t('backups.configureBackupStorage.copyConcurrencyDescription') }}
<span v-show="provider === 'digitalocean-spaces'">{{ $t('backups.configureBackupStorage.copyConcurrencyDigitalOceanNote') }}</span>
</div>
<input type="range" id="copyConcurrencyInput" v-model="limits.copyConcurrency" step="10" min="10" max="500" />
</FormGroup>
<div style="display: flex; justify-content: space-between; align-items: end; margin-top: 10px">
<Checkbox v-if="provider !== 'noop'" v-model="useEncryption" label="Use backup encryption"/>
<div style="display: flex; gap: 6px; align-items: end;">
<Button secondary :disabled="busy">{{ $t('main.dialog.cancel') }}</Button>
<!-- TODO translation -->
<Button primary :disabled="busy" :loading="busy" @click="onSubmit()">{{ useEncryption ? 'Next' : $t('main.dialog.save') }}</Button>
</div>
</div>
<input type="range" id="copyConcurrencyInput" v-model="limits.copyConcurrency" step="10" min="10" max="500" />
</FormGroup>
</fieldset>
</form>
</fieldset>
</form>
</div>
<div v-else>
<form @submit.prevent="onSetupEncryption()" autocomplete="off" ref="encryptionForm">
<fieldset :disabled="busy">
<input style="display: none;" type="submit"/>
<div class="warning-label">{{ $t('backups.configureBackupStorage.encryptionDescription') }}</div>
<div class="error-label" v-if="formError.generic">{{ formError.generic }}</div>
<FormGroup>
<label for="encryptionPassswordInput">{{ $t('backups.configureBackupStorage.encryptionPassword') }} <sup><a href="https://docs.cloudron.io/backups/#encryption" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
<PasswordInput id="encryptionPassswordInput" v-model="encryptionPassword" :placeholder="$t('backups.configureBackupStorage.encryptionPasswordPlaceholder')" required />
<div class="error-label" v-if="formError.password">{{ formError.password }}</div>
</FormGroup>
<FormGroup>
<label for="encryptionPassswordRepeatInput">{{ $t('backups.configureBackupStorage.encryptionPasswordRepeat') }}</label>
<PasswordInput id="encryptionPassswordRepeatInput" v-model="encryptionPasswordRepeat" required />
<div class="error-label" v-if="encryptionPasswordRepeat && encryptionPassword !== encryptionPasswordRepeat">{{ $t('profile.changePassword.errorPasswordsDontMatch') }}</div>
</FormGroup>
<FormGroup>
<!-- TODO translate -->
<label for="encryptionPassswordHintInput">Password Hint</label>
<TextInput id="encryptionPassswordHintInput" v-model="encryptionPasswordHint" />
</FormGroup>
<Checkbox v-if="format === 'rsync'" v-model="encryptedFilenames" :label="$t('backups.configureBackupStorage.encryptFilenames')"/>
<div style="display: flex; gap: 6px; align-items: end; justify-content: end; margin-top: 10px;">
<Button secondary :disabled="busy">{{ $t('main.dialog.cancel') }}</Button>
<Button primary :disabled="busy || !isSetupEncryptionFormValid()" :loading="busy" @click="onSetupEncryption()">{{ $t('main.dialog.save') }}</Button>
</div>
</fieldset>
</form>
</div>
</div>
</Dialog>
</template>
dashboard/src/models/BackupTargetsModel.js
+12 -3
View File
@@ -20,12 +20,10 @@ function create() {
if (error || result.status !== 200) return [error || result];
return [null, result.body.backupTargets];
},
async add(name, format, provider, config, schedule, retention, limits = null, encryptionPassword = null, encryptedFilenames = null) {
async add(name, format, provider, config, schedule, retention, limits = null) {
const data = { name, format, provider, config, schedule, retention };
if (limits !== null) data.limits = limits;
if (encryptionPassword !== null) data.encryptionPassword = encryptionPassword;
if (encryptedFilenames !== null) data.encryptedFilenames = encryptedFilenames;
let error, result;
try {
@@ -126,6 +124,17 @@ function create() {
if (error || result.status !== 200) return [error || result];
return [null];
},
async setEncryption(id, encryptionPassword, encryptedFilenames, encryptionPasswordHint = '') {
let error, result;
try {
result = await fetcher.post(`${API_ORIGIN}/api/v1/backup_targets/${id}/configure/encryption`, { encryptionPassword, encryptedFilenames, encryptionPasswordHint }, { access_token: accessToken });
} catch (e) {
error = e;
}
if (error || result.status !== 200) return [error || result];
return [null];
},
async setConfig(id, config) {
let error, result;
try {
dashboard/src/views/BackupTargetsView.vue
+1 -20
View File
@@ -23,9 +23,6 @@ const targets = ref([]);
const busy = ref(false);
const columns = {
primary: {
width: '30px',
},
status: {
width: '30px',
},
@@ -194,11 +191,6 @@ onMounted(async () => {
<p>TODO Explain what backup targets are and what primary/secondary is</p>
<TableView :columns="columns" :model="targets" :busy="busy">
<template #primary="target">
<!-- TODO translate -->
<i class="fa-solid fa-crown" v-if="target.primary" v-tooltip="'Primary'"></i>
</template>
<template #status="target">
<div style="text-align: center;" :title="target.status.message">
<StateLED :busy="target.status.busy" :state="target.status.state"/>
@@ -213,25 +205,14 @@ onMounted(async () => {
{{ target.provider }}
</template>
<template #format="target">
{{ target.format }}
{{ target.format }} <i v-if="target.encrypted" class="fa-solid fa-lock"></i>
</template>
<template #actions="target">
<div style="text-align: right;">
<Button tool plain secondary @click.capture="onActionMenu(target, $event)" icon="fa-solid fa-ellipsis" />
</div>
<!-- <div class="table-actions">
<ButtonGroup>
<Button tool secondary small icon="fa-solid fa-sync-alt" v-if="target.provider === 'sshfs' || target.provider === 'cifs' || target.provider === 'nfs' || target.provider === 'ext4' || target.provider === 'xfs'" v-tooltip="$t('backups.location.remount')" @click.stop="onRemount(target)"></Button>
<Button tool secondary small icon="fa-solid fa-clock" @click.stop="onEditSchedule(target)"></Button>
<Button tool secondary small :disabled="target.primary" icon="fa-solid fa-crown" @click.stop="onMakePrimaryTarget(target)"></Button>
<Button tool secondary small icon="fa-solid fa-pencil-alt" @click.stop="onAddOrEdit(target)"></Button>
<Button small tool danger :disabled="target.primary" @click.stop="onRemoveTarget(target)" icon="far fa-trash-alt" />
</ButtonGroup>
</div>
-->
</template>
</TableView>
</Section>