Setup backup encryption in extra step
This commit is contained in:
Johannes Zellner
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user