Use same pattern for form validation

dashboard/src/views/ActivationView.vue

@@ -1,6 +1,6 @@
 <script setup>
 
-import { ref, computed, onMounted } from 'vue';
+import { ref, useTemplateRef, onMounted } from 'vue';
 import { Button, Checkbox, FormGroup, TextInput, PasswordInput, EmailInput } from '@cloudron/pankow';
 import ProvisionModel from '../models/ProvisionModel.js';
 import { redirectIfNeeded } from '../utils.js';
@@ -16,18 +16,14 @@ const password = ref('');
 const setupToken = ref('');
 const acceptLicense = ref(false);
 
-const isValid = computed(() => {
-  if (!displayName.value) return false;
-  if (!email.value) return false;
-  if (!username.value) return false;
-  if (!password.value) return false;
-  if (!acceptLicense.value) return false;
-
-  return true;
-});
+const form = useTemplateRef('form');
+const isFormValid = ref(false);
+function checkValidity() {
+  isFormValid.value = form.value ? form.value.checkValidity() : false;
+}
 
 async function onOwnerSubmit() {
-  if (!isValid.value) return;
+  if (!form.value.reportValidity()) return;
 
   busy.value = true;
   formError.value = {};
@@ -85,9 +81,9 @@ onMounted(async () => {
 
       <div class="has-error" v-if="formError.generic">{{ formError.generic }}</div>
 
-      <form @submit.prevent="onOwnerSubmit()" autocomplete="off">
+      <form @submit.prevent="onOwnerSubmit()" autocomplete="off" ref="form" @input="checkValidity()">
         <fieldset :disabled="busy">
-          <input type="submit" style="display: none;" :disabled="busy || !isValid"/>
+          <input type="submit" style="display: none;"/>
 
           <FormGroup :has-error="formError.displayName">
             <label for="displayNameInput">Full name</label>
@@ -118,7 +114,7 @@ onMounted(async () => {
         </fieldset>
 
         <div class="actions">
-          <Button :disabled="busy || !isValid" :loading="busy" @click="onOwnerSubmit()">Create admin</Button>
+          <Button :disabled="busy || !isFormValid" :loading="busy" @click="onOwnerSubmit()">Create admin</Button>
         </div>
       </form>
     </div>

dashboard/src/views/OpenIdView.vue

@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 const i18n = useI18n();
 const t = i18n.t;
 
-import { ref, onMounted, useTemplateRef, computed } from 'vue';
+import { ref, onMounted, useTemplateRef } from 'vue';
 import { Button, ClipboardButton, SingleSelect, Menu, Dialog, TableView, FormGroup, TextInput, InputGroup, InputDialog } from '@cloudron/pankow';
 import Section from '../components/Section.vue';
 import DashboardModel from '../models/DashboardModel.js';
@@ -59,13 +59,11 @@ const signatureAlgorithms = [
   { name: 'EdDSA', value: 'EdDSA' },
 ];
 
-const isValid = computed(() => {
-  if (!clientName.value) return false;
-  if (!clientLoginRedirectUri.value) return false;
-  if (!clientTokenSignatureAlgorithm.value) return false;
-
-  return true;
-});
+const form = useTemplateRef('form');
+const isFormValid = ref(false);
+function checkValidity() {
+  isFormValid.value = form.value ? form.value.checkValidity() : false;
+}
 
 async function onAdd() {
   submitBusy.value = false;
@@ -76,6 +74,7 @@ async function onAdd() {
   clientTokenSignatureAlgorithm.value = 'RS256';
 
   editDialog.value.open();
+  setTimeout(checkValidity, 100); // update state of the confirm button
 }
 
 async function onEdit(client) {
@@ -87,10 +86,11 @@ async function onEdit(client) {
   clientTokenSignatureAlgorithm.value = client.tokenSignatureAlgorithm;
 
   editDialog.value.open();
+  setTimeout(checkValidity, 100); // update state of the confirm button
 }
 
 async function onSubmit() {
-  if (!isValid.value) return;
+  if (!form.value.reportValidity()) return;
 
   submitBusy.value = true;
   let error, client;
@@ -185,15 +185,15 @@ onMounted(async () => {
 
     <Dialog ref="editDialog"
       :title="clientId ? $t('oidc.editClientDialog.title') : $t('oidc.newClientDialog.title')"
-      :confirm-active="isValid"
+      :confirm-active="!submitBusy && isFormValid"
       :confirm-busy="submitBusy"
       :confirm-label="clientId ? $t('main.dialog.save') : $t('oidc.newClientDialog.createAction')"
       :reject-label="$t('main.dialog.cancel')"
        reject-style="secondary"
        @confirm="onSubmit()"
     >
-      <form novalidate @submit.prevent="onSubmit()" autocomplete="off">
-        <input style="display: none" type="submit" :disabled="!isValid"/>
+      <form @submit.prevent="onSubmit()" autocomplete="off" ref="form" @input="checkValidity()">
+        <input style="display: none" type="submit" />
 
         <div class="error-label" v-if="submitError">{{ submitError }}</div>
 
@@ -226,7 +226,7 @@ onMounted(async () => {
 
         <FormGroup>
           <label class="control-label">{{ $t('oidc.client.signingAlgorithm') }}</label>
-          <SingleSelect v-model="clientTokenSignatureAlgorithm" :options="signatureAlgorithms" option-key="value" option-label="name" />
+          <SingleSelect v-model="clientTokenSignatureAlgorithm" :options="signatureAlgorithms" option-key="value" option-label="name" required />
         </FormGroup>
       </form>
     </Dialog>