Allow to change backup provider secrets pending error feedback

This commit is contained in:
Johannes Zellner
2025-10-08 20:40:37 +02:00
parent ab3a2911c3
commit a5224258c3
2 changed files with 82 additions and 7 deletions
@@ -245,8 +245,8 @@ onMounted(async () => {
</FormGroup>
<FormGroup v-if="s3like(provider)">
<label for="accessKeyInput">{{ $t('backups.configureBackupStorage.s3SecretAccessKey') }}</label>
<TextInput id="accessKeyInput" v-model="providerConfig.secretAccessKey" required />
<label for="secretAccessKeyInput">{{ $t('backups.configureBackupStorage.s3SecretAccessKey') }}</label>
<TextInput id="secretAccessKeyInput" v-model="providerConfig.secretAccessKey" required />
</FormGroup>
<FormGroup v-if="provider === 'gcs'">
@@ -1,7 +1,7 @@
<script setup>
import { ref, useTemplateRef } from 'vue';
import { Checkbox, Radiobutton, MultiSelect, Dialog, FormGroup, TextInput } from '@cloudron/pankow';
import { Checkbox, Radiobutton, MultiSelect, MaskedInput, Dialog, FormGroup, TextInput } from '@cloudron/pankow';
import { prettyBinarySize } from '@cloudron/pankow/utils';
import { s3like } from '../utils.js';
import AppsModel from '../models/AppsModel.js';
@@ -19,6 +19,7 @@ const maxMemoryLimit = ref(minMemoryLimit.value); // set later
const dialog = useTemplateRef('dialog');
const site = ref({});
const provider = ref('');
const formError = ref({});
const busy = ref(false);
const name = ref('');
@@ -33,9 +34,41 @@ const contentOptions = ref([]);
const contentInclude = ref([]);
const contentExclude = ref([]);
const accessKeyId = ref('');
const secretAccessKey = ref('');
const mountOptionUsername = ref('');
const mountOptionPassword = ref('');
const mountOptionUser = ref('');
const mountOptionPrivateKey = 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';
@@ -99,6 +132,7 @@ defineExpose({
formError.value = {};
busy.value = false;
site.value = t;
provider.value = t.provider;
name.value = t.name || '';
enableForUpdates.value = !!t.enableForUpdates;
@@ -108,6 +142,17 @@ defineExpose({
downloadConcurrency.value = t.limits.downloadConcurrency || 10;
copyConcurrency.value = t.limits.copyConcurrency || 10;
if (s3like(provider.value)) {
accessKeyId.value = t.config.accessKeyId;
secretAccessKey.value = null;
} else if (provider.value === 'cifs') {
mountOptionUsername.value = t.config.mountOptions.username;
mountOptionPassword.value = null;
} else if (provider.value === 'sshfs') {
mountOptionUser.value = t.config.mountOptions.user;
mountOptionPrivateKey.value = null;
}
await getMemory();
const [error, result] = await appsModel.list();
@@ -183,13 +228,43 @@ defineExpose({
<Checkbox v-model="enableForUpdates" :label="$t('backups.configureBackupStorage.useForUpdates')" />
</FormGroup>
<FormGroup v-if="provider === 'sshfs'">
<label for="mountOptionUserInput">{{ $t('backups.configureBackupStorage.user') }}</label>
<TextInput id="mountOptionUserInput" v-model="mountOptionUser" required />
</FormGroup>
<FormGroup v-if="provider === 'sshfs'">
<label for="mountOptionPrivateKeyInput">{{ $t('backups.configureBackupStorage.privateKey') }}</label>
<MaskedInput id="mountOptionPrivateKeyInput" :multiline="true" v-model="mountOptionPrivateKey" required/>
</FormGroup>
<FormGroup v-if="provider === 'cifs'">
<label for="mountOptionUsernameInput">{{ $t('backups.configureBackupStorage.username') }} ({{ provider }})</label>
<TextInput id="mountOptionUsernameInput" v-model="mountOptionUsername" required />
</FormGroup>
<FormGroup v-if="provider === 'cifs'">
<label for="mountOptionPasswordInput">{{ $t('backups.configureBackupStorage.password') }} ({{ provider }})</label>
<MaskedInput id="mountOptionPasswordInput" v-model="mountOptionPassword" required />
</FormGroup>
<FormGroup v-if="s3like(provider)">
<label for="accessKeyIdInput">{{ $t('backups.configureBackupStorage.s3AccessKeyId') }}</label>
<TextInput id="accessKeyIdInput" v-model="accessKeyId" required />
</FormGroup>
<FormGroup v-if="s3like(provider)">
<label for="secretAccessKeyInput">{{ $t('backups.configureBackupStorage.s3SecretAccessKey') }}</label>
<MaskedInput id="secretAccessKeyInput" v-model="secretAccessKey" required />
</FormGroup>
<FormGroup>
<label for="memoryLimitInput">{{ $t('backups.configureBackupStorage.memoryLimit') }}: <b>{{ prettyBinarySize(memoryLimit, '1024 MB') }}</b></label>
<div class="small">{{ $t('backups.configureBackupStorage.memoryLimitDescription') }}</div>
<input type="range" id="memoryLimitInput" v-model="memoryLimit" :step="256*1024*1024" :min="minMemoryLimit" :max="maxMemoryLimit" />
</FormGroup>
<FormGroup v-if="s3like(site.provider)">
<FormGroup v-if="s3like(provider)">
<label for="uploadPartSizeInput">{{ $t('backups.configureBackupStorage.uploadPartSize') }}: <b>{{ prettyBinarySize(uploadPartSize, 'Default (50 MiB)') }}</b></label>
<p class="small">{{ $t('backups.configureBackupStorage.uploadPartSizeDescription') }}</p>
<input type="range" id="uploadPartSizeInput" v-model="uploadPartSize" list="uploadPartSizeTicks" :step="1024*1024" :min="10*1024*1024" :max="1024*1024*1024" />
@@ -209,16 +284,16 @@ defineExpose({
<input type="range" id="syncConcurrencyInput" v-model="syncConcurrency" step="10" min="10" max="200" />
</FormGroup>
<FormGroup v-if="site.format === 'rsync' && (s3like(site.provider) || site.provider === 'gcs')">
<FormGroup v-if="site.format === 'rsync' && (s3like(provider) || provider === 'gcs')">
<label for="downloadConcurrencyInput">{{ $t('backups.configureBackupStorage.downloadConcurrency') }}: <b>{{ downloadConcurrency }}</b></label>
<div class="small">{{ $t('backups.configureBackupStorage.downloadConcurrencyDescription') }}</div>
<input type="range" id="downloadConcurrencyInput" v-model="downloadConcurrency" step="10" min="10" max="200" />
</FormGroup>
<FormGroup v-if="site.format === 'rsync' && (s3like(site.provider) || site.provider === 'gcs')">
<FormGroup v-if="site.format === 'rsync' && (s3like(provider) || provider === 'gcs')">
<label for="copyConcurrencyInput">{{ $t('backups.configureBackupStorage.copyConcurrency') }}: <b>{{ copyConcurrency }}</b></label>
<div class="small">{{ $t('backups.configureBackupStorage.copyConcurrencyDescription') }}
<span v-show="site.provider === 'digitalocean-spaces'">{{ $t('backups.configureBackupStorage.copyConcurrencyDigitalOceanNote') }}</span>
<span v-show="provider === 'digitalocean-spaces'">{{ $t('backups.configureBackupStorage.copyConcurrencyDigitalOceanNote') }}</span>
</div>
<input type="range" id="copyConcurrencyInput" v-model="copyConcurrency" step="10" min="10" max="500" />
</FormGroup>