Fix FieldError components not reacting when an error occurs

resources/js_vue3/views/Start.vue

@@ -78,7 +78,7 @@
                     <button v-else class="button is-link is-medium is-rounded is-main" @click="capture()">
                         {{ $t('twofaccounts.forms.scan_qrcode') }}
                     </button>
-                    <FieldError v-if="form.hasAny" :error="form.errors.get('qrcode')" :field="'qrcode'" />
+                    <FieldError v-if="form.errors.hasAny('qrcode')" :error="form.errors.get('qrcode')" :field="'qrcode'" />
                 </div>
             </div>
             <!-- alternative methods -->

resources/js_vue3/views/twofaccounts/CreateUpdate.vue

@@ -28,7 +28,12 @@
         counter: null,
         period: null,
         image: '',
-        qrcode: null,
+    }))
+    const qrcodeForm = reactive(new Form({
+        qrcode: null
+    }))
+    const iconForm = reactive(new Form({
+        icon: null
     }))
     const otp_types = [
         { text: 'TOTP', value: 'totp' },
@@ -215,17 +220,19 @@
     function uploadIcon() {
         // clean possible already uploaded temp icon
         deleteIcon()
-
+        iconForm.icon = iconInput.value.files[0]
-        const iconForm = new Form({
-            icon: iconInput.value.files[0]
-        })
 
         iconForm.upload('/api/v1/icons', { returnError: true })
         .then(response => {
-            tempIcon.value = response.data.filename;
+            tempIcon.value = response.data.filename
+            if (showQuickForm.value) {
+                form.icon = tempIcon.value
+            }
         })
         .catch(error => {
-            notify.alert({ text: trans(error.response.data.message) })
+            if (error.response.status !== 422) {
+                notify.alert({ text: error.response.data.message})
+            }
         })
     }
 
@@ -267,9 +274,7 @@
      * Sends a QR code to backend for decoding and prefill the form with the qr data
      */
     function uploadQrcode() {
-        const qrcodeForm = new Form({
+        qrcodeForm.qrcode = qrcodeInput.value.files[0]
-            qrcode: qrcodeInput.value.files[0]
-        })
 
         // First we get the uri encoded in the qrcode
         qrcodeForm.upload('/api/v1/qrcode/decode', { returnError: true })
@@ -293,8 +298,9 @@
             })
         })
         .catch(error => {
-            notify.alert({ text: trans(error.response.data.message) })
+            if (error.response.status !== 422) {
-            return false
+                notify.alert({ text: error.response.data.message})
+            }
         })
     }
 
@@ -375,6 +381,7 @@
             <div class="container preview has-text-centered">
                 <div class="columns is-mobile">
                     <div class="column">
+                        <FieldError v-if="iconForm.errors.hasAny('icon')" :error="iconForm.errors.get('icon')" :field="'icon'" class="help-for-file" />
                         <label class="add-icon-button" v-if="!tempIcon">
                             <input class="file-input" type="file" accept="image/*" v-on:change="uploadIcon" ref="iconInput">
                             <FontAwesomeIcon :icon="['fas', 'image']" size="2x" />
@@ -429,7 +436,7 @@
                         </div>
                     </div>
                 </div>
-                <FieldError v-if="!isEditMode && form.errors.hasAny('qrcode')" :error="form.errors.get('qrcode')" :field="'qrcode'" class="help-for-file" />
+                <FieldError v-if="qrcodeForm.errors.hasAny('qrcode')" :error="qrcodeForm.errors.get('qrcode')" :field="'qrcode'" class="help-for-file" />
                 <!-- service -->
                 <FormField v-model="form.service" fieldName="service" :fieldError="form.errors.get('email')" :isDisabled="form.otp_type === 'steamtotp'" label="twofaccounts.service" :placeholder="$t('twofaccounts.forms.service.placeholder')" autofocus />
                 <!-- account -->
@@ -470,7 +477,7 @@
                     </div>
                 </div>
                 <div class="field">
-                    <FieldError v-if="form.errors.hasAny('icon')" :error="form.errors.get('icon')" :field="'icon'" class="help-for-file" />
+                    <FieldError v-if="iconForm.errors.hasAny('icon')" :error="iconForm.errors.get('icon')" :field="'icon'" class="help-for-file" />
                     <p v-if="user.preferences.getOfficialIcons" class="help" v-html="$t('twofaccounts.forms.i_m_lucky_legend')"></p>
                 </div>
                 <!-- otp type -->

resources/js_vue3/views/twofaccounts/Import.vue

@@ -29,14 +29,14 @@
         counter: null,
         period: null,
     }))
-    const fileForm = new Form({
+    const fileForm = reactive(new Form({
         file: null,
         withSecret: true
-    })
+    }))
-    const qrcodeForm = new Form({
+    const qrcodeForm = reactive(new Form({
         qrcode: null,
         withSecret: true
-    })
+    }))
     const showTwofaccountInModal = ref(false)
     const supportedSources = [
         {app: '2FAuth', format: 'JSON'},
@@ -173,6 +173,7 @@
      * Uploads the submitted file to the backend for parsing
      */
     function submitFile() {
+        fileForm.clear()
         isFetching.value = true
         fileForm.file = fileInput.value.files[0]
 
@@ -199,6 +200,7 @@
      * Uploads the submitted QR code file to the backend for decoding
      */
     function submitQrCode() {
+        qrcodeForm.clear()
         isFetching.value = true
         qrcodeForm.qrcode = qrcodeInput.value.files[0]
 
@@ -208,7 +210,7 @@
         .catch(error => {
             if( error.response.status === 422 ) {
                 if (error.response.data.errors.qrcode == undefined) {
-                    notify.alert({ text: this.$t('errors.invalid_2fa_data') })
+                    notify.alert({ text: trans('errors.invalid_2fa_data') })
                 }
             }
             else notify.alert({ text: error.response.data.message})
@@ -251,7 +253,7 @@
                             <input aria-hidden="true" tabindex="-1" class="file-input" type="file" accept="image/*" v-on:change="submitQrCode" ref="qrcodeInput">
                         </label>
                     </div>
-                    <FieldError v-if="qrcodeForm.errors.get('qrcode') != undefined" :error="qrcodeForm.errors.get('qrcode')" :field="qrcodeForm.qrcode" />
+                    <FieldError v-if="qrcodeForm.errors.hasAny('qrcode')" :error="qrcodeForm.errors.get('qrcode')" :field="'qrcode'" />
                     <p class="help">{{ $t('twofaccounts.import.supported_formats_for_qrcode_upload') }}</p>
                 </div>
                 <h5 class="title is-5 mb-3 has-text-grey">{{ $t('commons.file') }}</h5>
@@ -261,7 +263,7 @@
                         <input aria-hidden="true" tabindex="-1" class="file-input" type="file" accept="text/plain,application/json,text/csv,.2fas" v-on:change="submitFile" ref="fileInput">
                         {{ $t('twofaccounts.import.upload') }}
                     </label>
-                    <FieldError v-if="fileForm.errors.get('file') != undefined" :error="fileForm.errors.get('file')" :field="fileForm.file" />
+                    <FieldError v-if="fileForm.errors.hasAny('file')" :error="fileForm.errors.get('file')" :field="'file'" />
                     <p class="help">{{ $t('twofaccounts.import.supported_formats_for_file_upload') }}</p>
                 </div>
                 <!-- Supported migration resources -->