User-Management improvements

packages/modules/web_themes/koala/source/src/components/ConnectionIndicator.vue

@@ -0,0 +1,67 @@
+<template>
+  <div
+    v-if="showIcon"
+    id="mqtt-connection-indicator"
+  >
+    <q-badge
+      rounded
+      align="middle"
+      :color="connected ? 'positive' : 'negative'"
+      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>
+    </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-card-section>
+      <q-card-section class="row">
+        Die Verbindung zur openWB ist unterbrochen.<br />
+        Es wird versucht, die Verbindung wieder herzustellen...
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed, watch, ref } from 'vue';
+import { useMqttStore } from 'src/stores/mqtt-store';
+
+const mqttStore = useMqttStore();
+
+const connected = computed(() => mqttStore.mqttClientConnected);
+
+const showIcon = ref(!connected.value);
+const iconTimeout = ref<ReturnType<typeof setTimeout> | null>(null);
+const showModal = computed(() => !connected.value);
+
+watch(connected, (newValue) => {
+  if (!newValue) {
+    console.warn('MQTT-Verbindung verloren!');
+    showIcon.value = true;
+    if (iconTimeout.value) {
+      clearTimeout(iconTimeout.value);
+    }
+  } else {
+    console.info('MQTT-Verbindung wiederhergestellt!');
+    if (iconTimeout.value) {
+      clearTimeout(iconTimeout.value);
+    }
+    iconTimeout.value = setTimeout(() => {
+      showIcon.value = false;
+    }, 5000);
+  }
+});
+</script>

packages/modules/web_themes/koala/source/src/components/UserIndicator.vue

@@ -1,10 +1,10 @@
 <template>
-  <div id="user-indicator" v-if="userManagementActive">
+  <div id="user-indicator" v-if="connected && userManagementActive">
     <q-dialog v-model="showLogoutDialog" persistent>
       <q-card>
         <q-card-section class="row items-center">
           <q-avatar icon="logout" color="negative" text-color="white" />
-          <span class="q-ml-sm">Willst Du Dich wirklich abmelden?</span>
+          <span class="text-h6 q-ml-sm">Willst Du Dich wirklich abmelden?</span>
         </q-card-section>
 
         <q-card-actions align="right">
@@ -23,7 +23,7 @@
       <q-card>
         <q-card-section class="row items-center">
           <q-avatar icon="login" color="positive" text-color="white" />
-          <span class="q-ml-sm">Gib Deine Anmeldedaten ein.</span>
+          <span class="text-h6 q-ml-sm">Gib Deine Anmeldedaten ein.</span>
         </q-card-section>
 
         <q-form @submit="login">
@@ -98,7 +98,7 @@
       <q-card>
         <q-card-section class="row items-center">
           <q-avatar icon="login" color="warning" text-color="white" />
-          <span class="q-ml-sm">Kennwort vergessen</span>
+          <span class="text-h6 q-ml-sm">Kennwort vergessen</span>
         </q-card-section>
 
         <q-form>
@@ -282,6 +282,8 @@ const resetPasswordDisabled = computed(() => {
   );
 });
 
+const connected = computed(() => mqttStore.mqttClientConnected);
+
 const stringIsEmpty = (myString: string) => {
   return !myString || myString.length === 0;
 };
@@ -386,6 +388,7 @@ watch(anonymousAccessAllowed, (newValue) => {
 
 onMounted(() => {
   if (
+    connected.value &&
     userManagementActive.value &&
     !anonymousAccessAllowed.value &&
     !loggedIn.value

packages/modules/web_themes/koala/source/src/layouts/MainLayout.vue

@@ -5,6 +5,7 @@
         <q-btn dense flat round icon="menu" @click="drawer = !drawer" />
         <q-toolbar-title>openWB</q-toolbar-title>
         <q-space />
+        <connection-indicator />
         <user-indicator />
       </q-toolbar>
     </q-header>
@@ -135,6 +136,7 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue';
 import UserIndicator from 'src/components/UserIndicator.vue';
+import ConnectionIndicator from 'src/components/ConnectionIndicator.vue';
 import { useMqttStore } from 'src/stores/mqtt-store';
 const mqttStore = useMqttStore();
 

packages/modules/web_themes/koala/source/src/stores/mqtt-store.ts

@@ -40,7 +40,7 @@ export const useMqttStore = defineStore('mqtt', () => {
   }
 
   // local variables
-  let mqttClient: mqtt.MqttClient | undefined = undefined;
+  let mqttClient: mqtt.MqttClient | null = null;
   const mqttConnectionOptions: IClientOptions = {
     protocol: location.protocol == 'https:' ? 'wss' : 'ws',
     protocolVersion: 5,
@@ -61,6 +61,7 @@ export const useMqttStore = defineStore('mqtt', () => {
   // State
   const subscriptions = ref<TopicCount>({});
   const topics = ref<TopicList>({});
+  const mqttClientConnected = ref(false);
 
   // General functions and methods for the store - BEGIN
   /**
@@ -78,6 +79,7 @@ export const useMqttStore = defineStore('mqtt', () => {
       mqttClient = mqtt.connect(connectUrl, options);
       mqttClient.on('connect', () => {
         console.debug('connected to broker');
+        mqttClientConnected.value = true;
         $q.notify({
           type: 'positive',
           message: `MQTT-Verbindung hergestellt.${mqttUser ? ` Angemeldet als ${mqttUser}.` : ''}`,
@@ -96,6 +98,7 @@ export const useMqttStore = defineStore('mqtt', () => {
       });
       mqttClient.on('error', (error) => {
         console.error('Client error', error);
+        mqttClientConnected.value = false;
         $q.notify({
           type: 'negative',
           message:
@@ -149,6 +152,25 @@ export const useMqttStore = defineStore('mqtt', () => {
           removeTopic(topic);
         }
       });
+      mqttClient.on('end', () => {
+        mqttClientConnected.value = false;
+        console.error('mqtt connection ended');
+      });
+      mqttClient.on('close', () => {
+        mqttClientConnected.value = false;
+        console.error('mqtt connection closed');
+      });
+      mqttClient.on('offline', () => {
+        mqttClientConnected.value = false;
+        console.error('mqtt connection offline');
+      });
+      mqttClient.on('disconnect', () => {
+        mqttClientConnected.value = false;
+        console.error('mqtt connection disconnected');
+      });
+      mqttClient.on('reconnect', () => {
+        console.error('mqtt connection reconnecting...');
+      });
     } catch (error) {
       console.error('error connecting to broker:', error);
       $q.notify({
@@ -3881,6 +3903,7 @@ export const useMqttStore = defineStore('mqtt', () => {
   return {
     topics,
     subscriptions,
+    mqttClientConnected,
     initialize,
     updateTopic,
     updateState: updateTopic, // alias for compatibility with older code