apppassword: display error

dashboard/src/components/AppPasswords.vue

@@ -54,6 +54,8 @@ const addedPassword = ref('');
 const passwordName = ref('');
 const identifiers = ref([]);
 const identifier = ref('');
+const addError = ref('');
+const busy = ref(false);
 
 const appsById = {};
 async function refresh() {
@@ -85,6 +87,8 @@ function onReset() {
     passwordName.value = '';
     identifier.value = '';
     addedPassword.value = '';
+    addError.value = '';
+    busy.value = false;
     setTimeout(checkValidity, 100); // update state of the confirm button
   }, 500);
 }
@@ -92,16 +96,24 @@ function onReset() {
 async function onSubmit() {
   if (!form.value.reportValidity()) return;
 
+  busy.value = true;
+  addError.value = '';
   addedPassword.value = '';
 
   const [error, result] = await appPasswordsModel.add(identifier.value, passwordName.value);
-  if (error) return console.error(error);
+  if (error) {
+    busy.value = false;
+    addError.value = error.body ? error.body.message : 'Internal error';
+    return;
+  }
 
   addedPassword.value = result.password;
   passwordName.value = '';
   identifier.value = '';
 
   await refresh();
+
+  busy.value = false;
 }
 
 async function onRemove(appPassword) {
@@ -160,7 +172,8 @@ onMounted(async () => {
 
     <Dialog ref="newDialog"
       :title="$t('profile.createAppPassword.title')"
-      :confirm-active="addedPassword || isFormValid"
+      :confirm-busy="busy"
+      :confirm-active="addedPassword || (!busy && isFormValid)"
       :confirm-label="addedPassword ? '' : $t('main.action.add')"
        confirm-style="primary"
       :reject-label="addedPassword ? $t('main.dialog.close') : $t('main.dialog.cancel')"
@@ -169,19 +182,22 @@ onMounted(async () => {
       @close="onReset()"
     >
       <div>
+        <div class="error-label" v-show="addError">{{ addError }}</div>
         <Transition name="slide-left" mode="out-in">
           <div v-if="!addedPassword">
             <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/>
-              </FormGroup>
+              <fieldset :disabled="busy">
+                <input style="display: none" type="submit"/>
+                <FormGroup>
+                  <label for="passwordName">{{ $t('profile.createAppPassword.name') }}</label>
+                  <TextInput id="passwordName" v-model="passwordName" required/>
+                </FormGroup>
 
-              <FormGroup>
-                <label>{{ $t('profile.createAppPassword.app') }}</label>
-                <SingleSelect outline v-model="identifier" :options="identifiers" option-label="label" option-key="id" required/>
-              </FormGroup>
+                <FormGroup>
+                  <label>{{ $t('profile.createAppPassword.app') }}</label>
+                  <SingleSelect outline v-model="identifier" :options="identifiers" option-label="label" option-key="id" required/>
+                </FormGroup>
+              </fieldset>
             </form>
           </div>
           <div v-else>