Use same pattern for form validation

dashboard/src/components/AppPasswords.vue

@@ -5,7 +5,7 @@ const i18n = useI18n();
 const t = i18n.t;
 
 import moment from 'moment-timezone';
-import { ref, onMounted, useTemplateRef, computed } from 'vue';
+import { ref, onMounted, useTemplateRef } from 'vue';
 import { Button, Menu, ClipboardButton, Dialog, SingleSelect, FormGroup, TextInput, TableView, InputDialog, InputGroup } from '@cloudron/pankow';
 import { prettyLongDate } from '@cloudron/pankow/utils';
 import Section from './Section.vue';
@@ -77,22 +77,23 @@ async function refresh() {
   passwords.value = result;
 }
 
+const form = useTemplateRef('form');
+const isFormValid = ref(false);
+function checkValidity() {
+  isFormValid.value = form.value ? form.value.checkValidity() : false;
+}
+
 function onReset() {
   setTimeout(() => {
     passwordName.value = '';
     identifier.value = '';
     addedPassword.value = '';
+    setTimeout(checkValidity, 100); // update state of the confirm button
   }, 500);
 }
 
-const isValid = computed(() => {
-  if (!passwordName.value) return false;
-  if (!identifier.value) return false;
-  return true;
-});
-
 async function onSubmit() {
-  if (!isValid.value) return;
+  if (!form.value.reportValidity()) return;
 
   addedPassword.value = '';
 
@@ -163,7 +164,7 @@ onMounted(async () => {
 
     <Dialog ref="newDialog"
       :title="$t('profile.createAppPassword.title')"
-      :confirm-active="addedPassword || isValid"
+      :confirm-active="addedPassword || isFormValid"
       :confirm-label="addedPassword ? '' : $t('main.action.add')"
        confirm-style="primary"
       :reject-label="addedPassword ? $t('main.dialog.close') : $t('main.dialog.cancel')"
@@ -174,8 +175,8 @@ onMounted(async () => {
       <div>
         <Transition name="slide-left" mode="out-in">
           <div v-if="!addedPassword">
-            <form @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"/>
               <FormGroup>
                 <label for="passwordName">{{ $t('profile.createAppPassword.name') }}</label>
                 <TextInput id="passwordName" v-model="passwordName" required/>
@@ -183,7 +184,7 @@ onMounted(async () => {
 
               <FormGroup>
                 <label>{{ $t('profile.createAppPassword.app') }}</label>
-                <SingleSelect outline v-model="identifier" :options="identifiers" option-label="label" option-key="id" />
+                <SingleSelect outline v-model="identifier" :options="identifiers" option-label="label" option-key="id" required/>
               </FormGroup>
             </form>
           </div>