Show combined file fields' invalid feedback properly

src/auth/RestorePage.vue

@@ -24,28 +24,29 @@
                     </div>
                 </div>
 
-                <div style="border: 2px solid #000;">
-                    <div class="form-group">
+                <div class="form-group">
+                    <div style="border: 2px solid #000;">
                         <label htmlFor="restoreLongNetworkKeyFile">{{ messages.field_label_restore_long_key }}</label>
                         <input type="file" ref="restoreLongNetworkKeyFile" @change="readUploadedKeyFile"
                             class="form-control" :class="{ 'is-invalid': fileFieldsConstaintFailed }" />
                         <div v-if="submitted && errors.has('restoreLongNetworkKey')" class="invalid-feedback d-block">
                             {{ errors.first('restoreLongNetworkKey') }}
                         </div>
-                    </div>
-                    <p style="text-align: center">{{ messages.label_or }}</p>
-                    <div class="form-group">
+
+                        <div style="text-align: center">{{ messages.label_or }}</div>
+
                         <label htmlFor="restoreBackupPackageFile">
                             {{ messages.field_label_restore_backup_package }}
                         </label>
                         <input type="file" ref="restoreBackupPackageFile" @change="setBackupFileForUpload"
                             class="form-control" :class="{ 'is-invalid': fileFieldsConstaintFailed }" />
-                        <div v-if="submitted && errors.has('restoreLongNetworkKey')" class="invalid-feedback d-block">
-                            {{ errors.first('restoreLongNetworkKey') }}
+                        <div v-if="submitted && errors.has('restoreBackupPackageFileRef')"
+                                class="invalid-feedback d-block">
+                            {{ errors.first('restoreBackupPackageFileRef') }}
                         </div>
                     </div>
 
-                    <div v-show="fileFieldsConstaintFailed" class="invalid-feedback">
+                    <div class="invalid-feedback" :class="{ 'd-block': fileFieldsConstaintFailed }">
                         {{ messages.err_restoreFile_constraint }}
                     </div>
                 </div>