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

Fix volume dialog form validation

Browse Source
This commit is contained in:
Johannes Zellner
2025-11-13 12:03:58 +01:00
parent f61e85c2d6
commit 3cdfbbac56
1 changed files with 54 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/src/views/VolumesView.vue
+54 -65
View File
@@ -73,47 +73,50 @@ const volumeDialogData = ref({
// dynamic extra props from openVolumeDialog
});
const volumeDialogValid = computed(() => {
const data = volumeDialogData.value;
const form = useTemplateRef('form');
const volumeDialogIsValid = ref(false);
function volumeDialogValid() {
function checkValidity() {
if (form.value && !form.value.checkValidity()) return false;
if (data.mode === 'new') {
if (!data.name) return false;
if (!data.mountType) return false;
const data = volumeDialogData.value;
switch (data.mountType) {
case 'filesystem':
case 'mountpoint':
if (!data.hostPath) return false;
if (!data.hostPath) return false;
break;
case 'ext4':
case 'xfs':
if (!data.diskPath) return false;
break;
case 'nfs':
if (!data.host) return false;
if (!data.remoteDir) return false;
break;
case 'sshfs':
if (!data.host) return false;
if (!data.remoteDir) return false;
if (!data.port) return false;
if (!data.user) return false;
if (!data.privateKey) return false;
break;
case 'cifs':
if (!data.host) return false;
if (!data.remoteDir) return false;
if (!data.username) return false;
if (!data.password) return false;
break;
default:
return false;
}
return true;
}
switch (data.mountType) {
case 'filesystem':
case 'mountpoint':
if (!data.hostPath) return false;
if (!data.hostPath) return false;
break;
case 'ext4':
case 'xfs':
if (!data.diskPath) return false;
break;
case 'nfs':
if (!data.host) return false;
if (!data.remoteDir) return false;
break;
case 'sshfs':
if (!data.host) return false;
if (!data.remoteDir) return false;
if (!data.port) return false;
if (!data.user) return false;
if (!data.privateKey) return false;
break;
case 'cifs':
if (!data.host) return false;
if (!data.remoteDir) return false;
if (!data.username) return false;
if (!data.password) return false;
break;
default:
return false;
}
return true;
});
volumeDialogIsValid.value = checkValidity();
}
async function refresh() {
busy.value = true;
@@ -141,11 +144,6 @@ async function refresh() {
const volumeDialog = useTemplateRef('volumeDialog');
const inputDialog = useTemplateRef('inputDialog');
const form = useTemplateRef('form');
const isFormValid = ref(false);
function checkValidity() {
isFormValid.value = form.value.checkValidity();
}
async function openVolumeDialog(volume) {
volumeDialogData.value.error = null;
@@ -179,8 +177,6 @@ async function openVolumeDialog(volume) {
volumeDialogData.value.xfsBlockDevices = xfsBlockDevices;
volumeDialog.value.open();
setTimeout(checkValidity, 100); // update state of the confirm button
}
async function onSubmit() {
@@ -275,25 +271,26 @@ onMounted(async () =>{
<Menu ref="actionMenuElement" :model="actionMenuModel" />
<InputDialog ref="inputDialog" />
<!-- width is to fix the 70 characters per line for ssh key -->
<Dialog ref="volumeDialog"
class="volume-dialog"
style="width: 78ch;"
:title="volumeDialogData.mode === 'edit' ? $t('volumes.editVolumeDialog.title') : $t('volumes.addVolumeDialog.title')"
:reject-label="$t('main.dialog.cancel')"
reject-style="secondary"
:confirm-label="volumeDialogData.mode === 'edit' ? $t('main.dialog.save') : $t('main.action.add')"
:confirm-active="!volumeDialogData.busy && isFormValid"
:confirm-active="!volumeDialogData.busy && volumeDialogIsValid"
:confirm-busy="volumeDialogData.busy"
@confirm="onSubmit()"
>
<form ref="form" @submit.prevent="onSubmit()" autocomplete="off" @input="checkValidity()">
<form ref="form" @submit.prevent="onSubmit()" autocomplete="off" @input="volumeDialogValid()">
<fieldset :disabled="volumeDialogData.busy">
<input style="display: none;" type="submit" :disabled="!volumeDialogValid" />
<input style="display: none;" type="submit" :disabled="!volumeDialogIsValid" />
<div class="error-label" v-show="volumeDialogData.error">{{ volumeDialogData.error }}</div>
<FormGroup>
<label for="volumeName">{{ $t('volumes.name') }}</label>
<TextInput id="volumeName" v-model="volumeDialogData.name" :readonly="volumeDialogData.mode === 'edit' ? true : undefined"/>
<TextInput id="volumeName" v-model="volumeDialogData.name" :readonly="volumeDialogData.mode === 'edit' ? true : undefined" required/>
</FormGroup>
<FormGroup>
@@ -303,7 +300,7 @@ onMounted(async () =>{
<FormGroup v-if="volumeDialogData.mountType === 'filesystem' || volumeDialogData.mountType === 'mountpoint'">
<label for="volumeHostPath">{{ $t('volumes.localDirectory') }}</label>
<TextInput id="volumeHostPath" v-model="volumeDialogData.hostPath" :placeholder="volumeDialogData.mountType === 'filesystem' ? '/srv/shared' : '/mnt/data'" />
<TextInput id="volumeHostPath" v-model="volumeDialogData.hostPath" :placeholder="volumeDialogData.mountType === 'filesystem' ? '/srv/shared' : '/mnt/data'" required/>
</FormGroup>
<FormGroup v-if="volumeDialogData.mountType === 'ext4' || volumeDialogData.mountType === 'xfs'">
@@ -314,7 +311,7 @@ onMounted(async () =>{
<FormGroup v-if="volumeDialogData.mountType === 'cifs' || volumeDialogData.mountType === 'nfs' || volumeDialogData.mountType === 'sshfs'">
<label for="volumeHost">{{ $t('volumes.addVolumeDialog.server') }}</label>
<TextInput v-model="volumeDialogData.host" id="volumeHost"/>
<TextInput v-model="volumeDialogData.host" id="volumeHost" required/>
</FormGroup>
<Checkbox v-if="volumeDialogData.mountType === 'cifs'" v-model="volumeDialogData.seal" :label="$t('backups.configureBackupStorage.cifsSealSupport')" />
@@ -326,27 +323,27 @@ onMounted(async () =>{
<FormGroup v-if="volumeDialogData.mountType === 'cifs' || volumeDialogData.mountType === 'nfs' || volumeDialogData.mountType === 'sshfs'">
<label for="volumeRemoteDir">{{ $t('volumes.addVolumeDialog.remoteDirectory') }}</label>
<TextInput v-model="volumeDialogData.remoteDir" id="volumeRemoteDir" placeholder="/share" />
<TextInput v-model="volumeDialogData.remoteDir" id="volumeRemoteDir" placeholder="/share"/>
</FormGroup>
<FormGroup v-if="volumeDialogData.mountType === 'cifs'">
<label for="volumeUsername">{{ $t('volumes.addVolumeDialog.username') }}</label>
<TextInput v-model="volumeDialogData.username" id="volumeUsername" />
<TextInput v-model="volumeDialogData.username" id="volumeUsername" required/>
</FormGroup>
<FormGroup v-if="volumeDialogData.mountType === 'cifs'">
<label for="volumePassword">{{ $t('volumes.addVolumeDialog.password') }}</label>
<MaskedInput v-model="volumeDialogData.password" id="volumePassword" />
<MaskedInput v-model="volumeDialogData.password" id="volumePassword" required/>
</FormGroup>
<FormGroup v-if="volumeDialogData.mountType === 'sshfs'">
<label for="volumeUser">{{ $t('volumes.addVolumeDialog.user') }}</label>
<TextInput v-model="volumeDialogData.user" id="volumeAddUser" />
<TextInput v-model="volumeDialogData.user" id="volumeAddUser" required/>
</FormGroup>
<FormGroup v-if="volumeDialogData.mountType === 'sshfs'">
<label for="volumePrivateKey">{{ $t('volumes.addVolumeDialog.privateKey') }}</label>
<MaskedInput multiline rows="7" style="white-space: nowrap;" v-model="volumeDialogData.privateKey" id="volumePrivateKey" />
<MaskedInput multiline rows="7" style="white-space: nowrap;" v-model="volumeDialogData.privateKey" id="volumePrivateKey" required/>
</FormGroup>
</fieldset>
@@ -378,11 +375,3 @@ onMounted(async () =>{
</Section>
</div>
</template>
<style>
div.volume-dialog {
width: 78ch;
}
</style>