Feature: Show error in webapp if pin_mapping.json contains syntax errors

webapp/src/locales/de.json

@@ -527,6 +527,7 @@
     },
     "deviceadmin": {
         "DeviceManager": "Hardware-Einstellungen",
+        "ParseError": "Syntaxfehler in 'pin_mapping.json': {error}",
         "PinAssignment": "Anschlusseinstellungen",
         "SelectedProfile": "Ausgewähltes Profil:",
         "DefaultProfile": "(Standardeinstellungen)",

webapp/src/locales/en.json

@@ -527,6 +527,7 @@
     },
     "deviceadmin": {
         "DeviceManager": "Device-Manager",
+        "ParseError": "Parse error in 'pin_mapping.json': {error}",
         "PinAssignment": "Connection settings",
         "SelectedProfile": "Selected profile:",
         "DefaultProfile": "(Default settings)",

webapp/src/locales/fr.json

@@ -527,6 +527,7 @@
     },
     "deviceadmin": {
         "DeviceManager": "Gestionnaire de périphériques",
+        "ParseError": "Erreur d'analyse dans 'pin_mapping.json': {error}",
         "PinAssignment": "Paramètres de connexion",
         "SelectedProfile": "Profil sélectionné",
         "DefaultProfile": "(Réglages par défaut)",

webapp/src/utils/authentication.ts

@@ -73,10 +73,10 @@ export function handleResponse(response: Response, emitter: Emitter<Record<Event
                 // auto logout if 401 response returned from api
                 logout();
                 emitter.emit("logged-out");
-                router.push({path: "/login", query: { returnUrl: router.currentRoute.value.fullPath }});
+                router.push({ path: "/login", query: { returnUrl: router.currentRoute.value.fullPath } });
             }
 
-            const error = (data && data.message) || response.statusText;
+            const error = { message: (data && data.message) || response.statusText, status: response.status || 0 };
             return Promise.reject(error);
         }
 

webapp/src/views/DeviceAdminView.vue

@@ -85,8 +85,8 @@
                             <div class="row mb-3">
                                 <label for="inputDisplayContrast" class="col-sm-2 col-form-label">{{
                                     $t('deviceadmin.Contrast', { contrast: $n(deviceConfigList.display.contrast / 100,
-                                        'percent')
+                                            'percent')
-                                }) }}</label>
+                                    }) }}</label>
                                 <div class="col-sm-10">
                                     <input type="range" class="form-range" min="0" max="100" id="inputDisplayContrast"
                                         v-model="deviceConfigList.display.contrast" />
@@ -120,7 +120,7 @@ export default defineComponent({
         BootstrapAlert,
         InputElement,
         PinInfo,
-        },
+    },
     data() {
         return {
             dataLoading: true,
@@ -157,7 +157,12 @@ export default defineComponent({
                         this.pinMappingList = data;
                     }
                 )
-                .catch(() => {
+                .catch((error) => {
+                    if (error.status != 404) {
+                        this.alertMessage = this.$t('deviceadmin.ParseError', { error: error.message });
+                        this.alertType = 'danger';
+                        this.showAlert = true;
+                    }
                     this.pinMappingList = Array<Device>();
                 })
                 .finally(() => {