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

Use same pattern for form validation

Browse Source
This commit is contained in:
Girish Ramakrishnan
2025-12-05 18:06:03 +01:00
parent 35d0227862
commit dfafbdd882
15 changed files with 189 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
dashboard/src/components/Ipv6Config.vue
View File

@@ -1,6 +1,6 @@
<script setup>
import { ref, onMounted, useTemplateRef, computed } from 'vue';
import { ref, onMounted, useTemplateRef } from 'vue';
import { Button, Dialog, SingleSelect, FormGroup, TextInput, ClipboardAction } from '@cloudron/pankow';
import Section from '../components/Section.vue';
import NetworkModel from '../models/NetworkModel.js';
@@ -36,12 +36,16 @@ const editProvider = ref('');
const editAddress = ref('');
const editInterfaceName = ref('');
const isValid = computed(() => {
if (editProvider.value === 'fixed' && !editAddress.value) return false;
if (editProvider.value === 'network-interface' && !editInterfaceName.value) return false;
const form = useTemplateRef('form');
const isFormValid = ref(false);
function checkValidity() {
isFormValid.value = form.value ? form.value.checkValidity() : false;
return true;
});
if (isFormValid.value) {
if (editProvider.value === 'fixed' && !editAddress.value) isFormValid.value = false;
if (editProvider.value === 'network-interface' && !editInterfaceName.value) isFormValid.value = false;
}
}
async function refresh() {
let [error, result] = await networkModel.getIpv6Config();
@@ -65,10 +69,11 @@ function onConfigure() {
editInterfaceName.value = interfaceName.value || '';
dialog.value.open();
setTimeout(checkValidity, 100); // update state of the confirm button
}
async function onSubmit() {
if (!isValid.value) return;
if (!form.value.reportValidity()) return;
editBusy.value = true;
editError.value = {};
@@ -100,19 +105,19 @@ onMounted(async () => {
:title="$t('network.configureIpv6.title')"
:confirm-label="$t('main.dialog.save')"
:confirm-busy="editBusy"
:confirm-active="isValid"
:confirm-active="!editBusy && isFormValid"
:reject-label="$t('main.dialog.cancel')"
reject-style="secondary"
@confirm="onSubmit()"
>
<div>
<form novalidate @submit.prevent="onSubmit()" autocomplete="off">
<form novalidate @submit.prevent="onSubmit()" autocomplete="off" ref="form" @input="checkValidity()">
<fieldset :disabled="editBusy">
<input style="display: none" type="submit" :disabled="editBusy || !isValid"/>
<input style="display: none" type="submit" />
<FormGroup>
<label for="providerInput">{{ $t('network.ip.provider') }} <sup><a href="https://docs.cloudron.io/networking/#ipv4" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
<SingleSelect id="providerInput" v-model="editProvider" :options="providers" option-key="value" option-label="name"/>
<SingleSelect id="providerInput" v-model="editProvider" :options="providers" option-key="value" option-label="name" required/>
<div class="error-label" v-show="editError.generic">{{ editError.generic }}</div>
</FormGroup>