From c0bf1ec04b2688f401c197fef74c6906dc6a21d2 Mon Sep 17 00:00:00 2001
From: Michael Geers <michael@geers.tv>
Date: Fri, 26 Apr 2024 22:22:49 +0200
Subject: [PATCH] UI: better handle api calls when offline (#13596)

---
 assets/js/app.js                           |  1 +
 assets/js/auth.js                          | 14 +++++++++++---
 assets/js/components/TelemetrySettings.vue |  9 ++++++---
 assets/js/router.js                        |  4 ++--
 assets/js/views/Config.vue                 | 16 +++++++++-------
 5 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/assets/js/app.js b/assets/js/app.js
index 38b3e95735..abbb32f1db 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -28,6 +28,7 @@ const app = createApp({
   },
   methods: {
     raise: function (msg) {
+      if (this.offline) return;
       if (!msg.level) msg.level = "error";
       const now = new Date();
       const latestMsg = this.notifications[0];
diff --git a/assets/js/auth.js b/assets/js/auth.js
index 054c0aa8b7..f2f94b56c6 100644
--- a/assets/js/auth.js
+++ b/assets/js/auth.js
@@ -4,14 +4,14 @@ import Modal from "bootstrap/js/dist/modal";
 
 const auth = reactive({
   configured: true,
-  loggedIn: false,
+  loggedIn: null, // true / false / null (unknown)
   nextUrl: null,
 });
 
 export async function updateAuthStatus() {
   try {
     const res = await api.get("/auth/status", {
-      validateStatus: (code) => [200, 501].includes(code),
+      validateStatus: (code) => [200, 501, 500].includes(code),
     });
     if (res.status === 501) {
       auth.configured = false;
@@ -20,6 +20,10 @@ export async function updateAuthStatus() {
       auth.configured = true;
       auth.loggedIn = res.data === true;
     }
+    if (res.status === 500) {
+      auth.loggedIn = null;
+      console.log("unable to fetch auth status", res);
+    }
   } catch (e) {
     console.log("unable to fetch auth status", e);
   }
@@ -36,7 +40,11 @@ export async function logout() {
 }
 
 export function isLoggedIn() {
-  return auth.loggedIn;
+  return auth.loggedIn === true;
+}
+
+export function statusUnknown() {
+  return auth.loggedIn === null;
 }
 
 export function isConfigured() {
diff --git a/assets/js/components/TelemetrySettings.vue b/assets/js/components/TelemetrySettings.vue
index 3201bd69c3..ea755d0c62 100644
--- a/assets/js/components/TelemetrySettings.vue
+++ b/assets/js/components/TelemetrySettings.vue
@@ -75,9 +75,12 @@ export default {
 				return;
 			}
 			try {
-				const response = await api.get("settings/telemetry");
-				console.log("update in settings", response.data.result);
-				settings.telemetry = response.data.result;
+				const response = await api.get("settings/telemetry", {
+					validateStatus: () => true,
+				});
+				if (response.status === 200) {
+					settings.telemetry = response.data.result;
+				}
 			} catch (err) {
 				console.error(err);
 			}
diff --git a/assets/js/router.js b/assets/js/router.js
index 4955b5d805..3a4af074cf 100644
--- a/assets/js/router.js
+++ b/assets/js/router.js
@@ -2,7 +2,7 @@ import { createRouter, createWebHashHistory } from "vue-router";
 import Modal from "bootstrap/js/dist/modal";
 import Main from "./views/Main.vue";
 import { ensureCurrentLocaleMessages } from "./i18n";
-import { openLoginModal, updateAuthStatus, isLoggedIn } from "./auth";
+import { openLoginModal, statusUnknown, updateAuthStatus, isLoggedIn } from "./auth";
 
 function hideAllModals() {
   [...document.querySelectorAll(".modal.show")].forEach((modal) => {
@@ -18,7 +18,7 @@ function hideAllModals() {
 
 async function ensureAuth(to) {
   await updateAuthStatus();
-  if (!isLoggedIn()) {
+  if (!isLoggedIn() && !statusUnknown()) {
     openLoginModal(to.path);
     return false;
   }
diff --git a/assets/js/views/Config.vue b/assets/js/views/Config.vue
index 7ad83fa9ee..5d3f2f7b45 100644
--- a/assets/js/views/Config.vue
+++ b/assets/js/views/Config.vue
@@ -466,14 +466,16 @@ export default {
 		},
 		async updateValues() {
 			clearTimeout(this.deviceValueTimeout);
+			if (!this.offline) {
+				const promises = [
+					...this.meters.map((meter) => this.updateDeviceValue("meter", meter.name)),
+					...this.vehicles.map((vehicle) =>
+						this.updateDeviceValue("vehicle", vehicle.name)
+					),
+				];
 
-			const promises = [
-				...this.meters.map((meter) => this.updateDeviceValue("meter", meter.name)),
-				...this.vehicles.map((vehicle) => this.updateDeviceValue("vehicle", vehicle.name)),
-			];
-
-			await Promise.all(promises);
-
+				await Promise.all(promises);
+			}
 			this.deviceValueTimeout = setTimeout(this.updateValues, 10000);
 		},
 		deviceTags(type, id) {