From eaacce7483adc3e6b81b10c44ba8c0235e7cb277 Mon Sep 17 00:00:00 2001
From: Thomas Basler <thomas@familie-basler.net>
Date: Sat, 22 Jul 2023 15:51:16 +0200
Subject: [PATCH] Feature: Show error in webapp if pin_mapping.json contains
 syntax errors

---
 webapp/src/locales/de.json           |  1 +
 webapp/src/locales/en.json           |  1 +
 webapp/src/locales/fr.json           |  1 +
 webapp/src/utils/authentication.ts   |  4 ++--
 webapp/src/views/DeviceAdminView.vue | 13 +++++++++----
 5 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/webapp/src/locales/de.json b/webapp/src/locales/de.json
index a014f09d..568dd2f9 100644
--- a/webapp/src/locales/de.json
+++ b/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)",
diff --git a/webapp/src/locales/en.json b/webapp/src/locales/en.json
index 4532861b..b8eb2083 100644
--- a/webapp/src/locales/en.json
+++ b/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)",
diff --git a/webapp/src/locales/fr.json b/webapp/src/locales/fr.json
index 9e3807e9..5aa083cc 100644
--- a/webapp/src/locales/fr.json
+++ b/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)",
diff --git a/webapp/src/utils/authentication.ts b/webapp/src/utils/authentication.ts
index c9937531..d1f87e3d 100644
--- a/webapp/src/utils/authentication.ts
+++ b/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);
         }
 
diff --git a/webapp/src/views/DeviceAdminView.vue b/webapp/src/views/DeviceAdminView.vue
index 090bcfb7..2af0e50e 100644
--- a/webapp/src/views/DeviceAdminView.vue
+++ b/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')
-                                }) }}</label>
+                                            'percent')
+                                    }) }}</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(() => {