From 6955536d72fc33fe5c8d872763ebbfd34fccfcce Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Fri, 25 Sep 2026 11:11:37 +0200
Subject: [PATCH 1/4] add connection information before disconnected warning

---
 .../src/components/ConnectionIndicator.vue    | 114 ++++++++++++++++--
 1 file changed, 105 insertions(+), 9 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ConnectionIndicator.vue b/packages/modules/web_themes/koala/source/src/components/ConnectionIndicator.vue
index 38aeed4f9c..6c04ba8c23 100644
--- a/packages/modules/web_themes/koala/source/src/components/ConnectionIndicator.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ConnectionIndicator.vue
@@ -3,22 +3,32 @@
     <q-badge
       rounded
       align="middle"
-      :color="connected ? 'positive' : 'negative'"
+      :color="stateDisplay.color"
       class="non-selectable"
     >
-      <q-icon :name="connected ? 'link' : 'link_off'" size="sm">
-        <q-tooltip v-if="connected">Verbindung hergestellt</q-tooltip>
-        <q-tooltip v-else>Verbindung getrennt</q-tooltip>
+      <q-icon :name="stateDisplay.icon" size="sm">
+        <q-tooltip>{{ stateDisplay.tooltip }}</q-tooltip>
       </q-icon>
     </q-badge>
   </div>
   <q-dialog v-model="showModal" persistent>
     <q-card>
       <q-card-section class="row items-center">
-        <q-avatar icon="link_off" color="negative" text-color="white" />
-        <span class="text-h6 q-ml-sm">Verbindung getrennt!</span>
+        <q-avatar
+          :icon="stateDisplay.icon"
+          :color="stateDisplay.color"
+          text-color="white"
+        />
+        <span class="text-h6 q-ml-sm">{{ stateDisplay.title }}</span>
       </q-card-section>
-      <q-card-section class="row">
+      <q-card-section v-if="connectionState === 'connecting'" class="row">
+        Die Verbindung zur openWB wird hergestellt.<br />
+        Bitte warten...
+      </q-card-section>
+      <q-card-section
+        v-else-if="connectionState === 'disconnected'"
+        class="row"
+      >
         Die Verbindung zur openWB ist unterbrochen.<br />
         Es wird versucht, die Verbindung wieder herzustellen...
       </q-card-section>
@@ -27,16 +37,91 @@
 </template>
 
 <script setup lang="ts">
-import { computed, watch, ref } from 'vue';
+import { computed, watch, ref, onBeforeUnmount } from 'vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
 
+// delay before showing the connecting dialog, prevents flickering on fast connects
+const CONNECTING_DIALOG_DELAY = 1000;
+// time to wait for a connection before showing the disconnected warning
+const CONNECTING_GRACE_PERIOD = 10000;
+
 const mqttStore = useMqttStore();
 
 const connected = computed(() => mqttStore.mqttClientConnected);
+const connectingDialogDelayPassed = ref(false);
+const connectingTimedOut = ref(false);
+
+const connectionState = computed(() => {
+  if (connected.value) {
+    return 'connected';
+  }
+  return connectingTimedOut.value ? 'disconnected' : 'connecting';
+});
+
+const stateDisplay = computed(() => {
+  switch (connectionState.value) {
+    case 'connected':
+      return {
+        color: 'positive',
+        icon: 'link',
+        tooltip: 'Verbindung hergestellt',
+        title: 'Verbindung hergestellt',
+      };
+    case 'connecting':
+      return {
+        color: 'grey',
+        icon: 'hourglass_empty',
+        tooltip: 'Verbindung wird aufgebaut',
+        title: 'Verbindung wird aufgebaut',
+      };
+    default:
+      return {
+        color: 'negative',
+        icon: 'link_off',
+        tooltip: 'Verbindung getrennt',
+        title: 'Verbindung getrennt!',
+      };
+  }
+});
 
 const showIcon = ref(!connected.value);
 const iconTimeout = ref<ReturnType<typeof setTimeout> | null>(null);
-const showModal = computed(() => !connected.value);
+const connectingDialogTimeout = ref<ReturnType<typeof setTimeout> | null>(null);
+const connectingTimeout = ref<ReturnType<typeof setTimeout> | null>(null);
+const showModal = computed(
+  () =>
+    connectionState.value === 'disconnected' ||
+    (connectionState.value === 'connecting' &&
+      connectingDialogDelayPassed.value),
+);
+
+const clearConnectingTimeouts = () => {
+  if (connectingDialogTimeout.value) {
+    clearTimeout(connectingDialogTimeout.value);
+    connectingDialogTimeout.value = null;
+  }
+  if (connectingTimeout.value) {
+    clearTimeout(connectingTimeout.value);
+    connectingTimeout.value = null;
+  }
+};
+
+const startConnectingTimeouts = () => {
+  clearConnectingTimeouts();
+  connectingDialogDelayPassed.value = false;
+  connectingTimedOut.value = false;
+  connectingDialogTimeout.value = setTimeout(() => {
+    connectingDialogDelayPassed.value = true;
+  }, CONNECTING_DIALOG_DELAY);
+  connectingTimeout.value = setTimeout(() => {
+    console.warn('MQTT-Verbindung konnte nicht hergestellt werden!');
+    connectingTimedOut.value = true;
+  }, CONNECTING_GRACE_PERIOD);
+};
+
+if (!connected.value) {
+  startConnectingTimeouts();
+}
 
 watch(connected, (newValue) => {
   if (!newValue) {
@@ -45,8 +130,12 @@ watch(connected, (newValue) => {
     if (iconTimeout.value) {
       clearTimeout(iconTimeout.value);
     }
+    startConnectingTimeouts();
   } else {
     console.info('MQTT-Verbindung wiederhergestellt!');
+    clearConnectingTimeouts();
+    connectingDialogDelayPassed.value = false;
+    connectingTimedOut.value = false;
     if (iconTimeout.value) {
       clearTimeout(iconTimeout.value);
     }
@@ -55,4 +144,11 @@ watch(connected, (newValue) => {
     }, 5000);
   }
 });
+
+onBeforeUnmount(() => {
+  clearConnectingTimeouts();
+  if (iconTimeout.value) {
+    clearTimeout(iconTimeout.value);
+  }
+});
 </script>

From 3566aeff7272f3bdf0d5d84d0ced71e95ea26faa Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Fri, 25 Sep 2026 13:59:20 +0200
Subject: [PATCH 2/4] fix watcher

---
 .../src/components/ConnectionIndicator.vue    | 52 ++++++++++---------
 1 file changed, 27 insertions(+), 25 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ConnectionIndicator.vue b/packages/modules/web_themes/koala/source/src/components/ConnectionIndicator.vue
index 6c04ba8c23..aefd103cf7 100644
--- a/packages/modules/web_themes/koala/source/src/components/ConnectionIndicator.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ConnectionIndicator.vue
@@ -84,7 +84,7 @@ const stateDisplay = computed(() => {
   }
 });
 
-const showIcon = ref(!connected.value);
+const showIcon = ref(false);
 const iconTimeout = ref<ReturnType<typeof setTimeout> | null>(null);
 const connectingDialogTimeout = ref<ReturnType<typeof setTimeout> | null>(null);
 const connectingTimeout = ref<ReturnType<typeof setTimeout> | null>(null);
@@ -119,31 +119,33 @@ const startConnectingTimeouts = () => {
   }, CONNECTING_GRACE_PERIOD);
 };
 
-if (!connected.value) {
-  startConnectingTimeouts();
-}
-
-watch(connected, (newValue) => {
-  if (!newValue) {
-    console.warn('MQTT-Verbindung verloren!');
-    showIcon.value = true;
-    if (iconTimeout.value) {
-      clearTimeout(iconTimeout.value);
-    }
-    startConnectingTimeouts();
-  } else {
-    console.info('MQTT-Verbindung wiederhergestellt!');
-    clearConnectingTimeouts();
-    connectingDialogDelayPassed.value = false;
-    connectingTimedOut.value = false;
-    if (iconTimeout.value) {
-      clearTimeout(iconTimeout.value);
+watch(
+  connected,
+  (newValue, oldValue) => {
+    if (!newValue) {
+      if (oldValue !== undefined) {
+        console.warn('MQTT-Verbindung verloren!');
+      }
+      showIcon.value = true;
+      if (iconTimeout.value) {
+        clearTimeout(iconTimeout.value);
+      }
+      startConnectingTimeouts();
+    } else if (oldValue !== undefined) {
+      console.info('MQTT-Verbindung wiederhergestellt!');
+      clearConnectingTimeouts();
+      connectingDialogDelayPassed.value = false;
+      connectingTimedOut.value = false;
+      if (iconTimeout.value) {
+        clearTimeout(iconTimeout.value);
+      }
+      iconTimeout.value = setTimeout(() => {
+        showIcon.value = false;
+      }, 5000);
     }
-    iconTimeout.value = setTimeout(() => {
-      showIcon.value = false;
-    }, 5000);
-  }
-});
+  },
+  { immediate: true },
+);
 
 onBeforeUnmount(() => {
   clearConnectingTimeouts();

From 84a164022406f23f8abfde390367ef52ff991b2b Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Fri, 25 Sep 2026 19:18:52 +0200
Subject: [PATCH 3/4] renaming

---
 .../src/components/ConnectionIndicator.vue    | 69 +++++++++----------
 1 file changed, 34 insertions(+), 35 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/ConnectionIndicator.vue b/packages/modules/web_themes/koala/source/src/components/ConnectionIndicator.vue
index aefd103cf7..da8007a44d 100644
--- a/packages/modules/web_themes/koala/source/src/components/ConnectionIndicator.vue
+++ b/packages/modules/web_themes/koala/source/src/components/ConnectionIndicator.vue
@@ -48,14 +48,14 @@ const CONNECTING_GRACE_PERIOD = 10000;
 const mqttStore = useMqttStore();
 
 const connected = computed(() => mqttStore.mqttClientConnected);
-const connectingDialogDelayPassed = ref(false);
-const connectingTimedOut = ref(false);
+const dialogDelayPassed = ref(false);
+const gracePeriodExpired = ref(false);
 
 const connectionState = computed(() => {
   if (connected.value) {
     return 'connected';
   }
-  return connectingTimedOut.value ? 'disconnected' : 'connecting';
+  return gracePeriodExpired.value ? 'disconnected' : 'connecting';
 });
 
 const stateDisplay = computed(() => {
@@ -85,37 +85,36 @@ const stateDisplay = computed(() => {
 });
 
 const showIcon = ref(false);
-const iconTimeout = ref<ReturnType<typeof setTimeout> | null>(null);
-const connectingDialogTimeout = ref<ReturnType<typeof setTimeout> | null>(null);
-const connectingTimeout = ref<ReturnType<typeof setTimeout> | null>(null);
+const iconHideTimer = ref<ReturnType<typeof setTimeout> | null>(null);
+const dialogDelayTimer = ref<ReturnType<typeof setTimeout> | null>(null);
+const gracePeriodTimer = ref<ReturnType<typeof setTimeout> | null>(null);
 const showModal = computed(
   () =>
     connectionState.value === 'disconnected' ||
-    (connectionState.value === 'connecting' &&
-      connectingDialogDelayPassed.value),
+    (connectionState.value === 'connecting' && dialogDelayPassed.value),
 );
 
-const clearConnectingTimeouts = () => {
-  if (connectingDialogTimeout.value) {
-    clearTimeout(connectingDialogTimeout.value);
-    connectingDialogTimeout.value = null;
+const clearConnectingTimers = () => {
+  if (dialogDelayTimer.value) {
+    clearTimeout(dialogDelayTimer.value);
+    dialogDelayTimer.value = null;
   }
-  if (connectingTimeout.value) {
-    clearTimeout(connectingTimeout.value);
-    connectingTimeout.value = null;
+  if (gracePeriodTimer.value) {
+    clearTimeout(gracePeriodTimer.value);
+    gracePeriodTimer.value = null;
   }
 };
 
-const startConnectingTimeouts = () => {
-  clearConnectingTimeouts();
-  connectingDialogDelayPassed.value = false;
-  connectingTimedOut.value = false;
-  connectingDialogTimeout.value = setTimeout(() => {
-    connectingDialogDelayPassed.value = true;
+const startConnectingTimers = () => {
+  clearConnectingTimers();
+  dialogDelayPassed.value = false;
+  gracePeriodExpired.value = false;
+  dialogDelayTimer.value = setTimeout(() => {
+    dialogDelayPassed.value = true;
   }, CONNECTING_DIALOG_DELAY);
-  connectingTimeout.value = setTimeout(() => {
+  gracePeriodTimer.value = setTimeout(() => {
     console.warn('MQTT-Verbindung konnte nicht hergestellt werden!');
-    connectingTimedOut.value = true;
+    gracePeriodExpired.value = true;
   }, CONNECTING_GRACE_PERIOD);
 };
 
@@ -127,19 +126,19 @@ watch(
         console.warn('MQTT-Verbindung verloren!');
       }
       showIcon.value = true;
-      if (iconTimeout.value) {
-        clearTimeout(iconTimeout.value);
+      if (iconHideTimer.value) {
+        clearTimeout(iconHideTimer.value);
       }
-      startConnectingTimeouts();
+      startConnectingTimers();
     } else if (oldValue !== undefined) {
       console.info('MQTT-Verbindung wiederhergestellt!');
-      clearConnectingTimeouts();
-      connectingDialogDelayPassed.value = false;
-      connectingTimedOut.value = false;
-      if (iconTimeout.value) {
-        clearTimeout(iconTimeout.value);
+      clearConnectingTimers();
+      dialogDelayPassed.value = false;
+      gracePeriodExpired.value = false;
+      if (iconHideTimer.value) {
+        clearTimeout(iconHideTimer.value);
       }
-      iconTimeout.value = setTimeout(() => {
+      iconHideTimer.value = setTimeout(() => {
         showIcon.value = false;
       }, 5000);
     }
@@ -148,9 +147,9 @@ watch(
 );
 
 onBeforeUnmount(() => {
-  clearConnectingTimeouts();
-  if (iconTimeout.value) {
-    clearTimeout(iconTimeout.value);
+  clearConnectingTimers();
+  if (iconHideTimer.value) {
+    clearTimeout(iconHideTimer.value);
   }
 });
 </script>

From 21d57d83dd3327f88fb1ee0fa7de3443a884872a Mon Sep 17 00:00:00 2001
From: Brett-S-OWB <brett.scott@openwb.de>
Date: Mon, 28 Sep 2026 11:17:37 +0200
Subject: [PATCH 4/4] prevent login dialog momentary display (BV off)

---
 .../source/src/components/UserIndicator.vue   | 31 +++++++------------
 .../koala/source/src/stores/mqtt-store.ts     |  8 ++---
 2 files changed, 14 insertions(+), 25 deletions(-)

diff --git a/packages/modules/web_themes/koala/source/src/components/UserIndicator.vue b/packages/modules/web_themes/koala/source/src/components/UserIndicator.vue
index 5ffe0a73b5..8ffe56a942 100644
--- a/packages/modules/web_themes/koala/source/src/components/UserIndicator.vue
+++ b/packages/modules/web_themes/koala/source/src/components/UserIndicator.vue
@@ -219,7 +219,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, watch } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { useQuasar, QInput } from 'quasar';
 import { useMqttStore } from 'src/stores/mqtt-store';
 
@@ -378,22 +378,15 @@ const resetPassword = () => {
   });
 };
 
-watch(anonymousAccessAllowed, (newValue) => {
-  if (userManagementActive.value && !newValue && !loggedIn.value) {
-    showLoginDialog.value = true;
-  } else {
-    showLoginDialog.value = false;
-  }
-});
-
-onMounted(() => {
-  if (
-    connected.value &&
-    userManagementActive.value &&
-    !anonymousAccessAllowed.value &&
-    !loggedIn.value
-  ) {
-    showLoginDialog.value = true;
-  }
-});
+// security topics are received after connecting, re-check whenever one of them arrives
+watch(
+  [userManagementActive, anonymousAccessAllowed],
+  () => {
+    showLoginDialog.value =
+      userManagementActive.value &&
+      !anonymousAccessAllowed.value &&
+      !loggedIn.value;
+  },
+  { immediate: true },
+);
 </script>
diff --git a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
index c17f63f544..eaf4375c18 100644
--- a/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
+++ b/packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts
@@ -783,16 +783,12 @@ export const useMqttStore = defineStore('mqtt', () => {
 
   /**
    * Check if user management is active
-   * Defaults to true if the value is not set as this may be due to insufficient permissions
+   * Returns false until the retained value is received, the topic is readable for all clients (including anonymous)
    * @returns boolean
    */
   const userManagementActive: ComputedRef<boolean> = computed(() => {
     return (
-      getValue.value(
-        'openWB/system/security/user_management_active',
-        undefined,
-        true,
-      ) === true
+      getValue.value('openWB/system/security/user_management_active') === true
     );
   });