feat: test omnect-device-service version on visit

Cargo.toml

@@ -7,7 +7,7 @@ license = "MIT OR Apache-2.0"
 name = "omnect-ui"
 readme = "README.md"
 repository = "git@github.com:omnect/omnect-ui.git"
-version = "0.14.0"
+version = "0.14.1"
 build = "src/build.rs"
 
 [dependencies]

README.md

@@ -9,19 +9,21 @@ This module implements a web frontend and backend to provide omnect specific fea
 Since omnect-os is designed as generic OS, all specific or optional applications must be provided as docker images via azure iotedge deployment:
 
 - deployment of omnect-ui docker image via omnect-portal to a device in field
-- device must be online (at least once) in order to receive the deployment
+- device must be online (at least once) in order to receive the deployment and to set initial password
 - after a factory reset omnect-ui must be deployed again what requires a connection to azure cloud
 
 ## Access omnect-ui
 
 omnect-ui can be reached at <https://DeviceIp:1977><br>
 
-Login with the configured credentials<br>
+Login with the configured password<br>
 ![login](docu/login.png)<br>
 Watch device status<br>
 ![login](docu/main.png)<br>
 Reset device and choose options to keep<br>
-![factory-reset](docu/factory-reset.png)
+![factory-reset](docu/factory-reset.png)<br>
+Update your device<br>
+![update](docu/update.png)
 
 # License
 

vue/package.json

@@ -18,15 +18,15 @@
 		"@mdi/font": "^7.4.47",
 		"@vueuse/core": "^12.8.2",
 		"axios": "^1.9.0",
-		"centrifuge": "^5.3.4",
+		"centrifuge": "^5.3.5",
 		"oidc-client-ts": "^3.2.1",
-		"vue": "^3.5.13",
-		"vuetify": "^3.8.4"
+		"vue": "^3.5.14",
+		"vuetify": "^3.8.5"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "1.9.4",
-		"@types/bun": "^1.2.12",
-		"@vitejs/plugin-vue": "^5.2.3",
+		"@types/bun": "^1.2.13",
+		"@vitejs/plugin-vue": "^5.2.4",
 		"@vue/tsconfig": "^0.7.0",
 		"typescript": "~5.7.3",
 		"unocss": "^65.5.0",

vue/src/App.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import axios from "axios"
-import { type Ref, computed, onMounted, ref } from "vue"
+import { type Ref, onMounted, ref } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useDisplay } from "vuetify"
 import BaseSideBar from "./components/BaseSideBar.vue"
+import DialogContent from "./components/DialogContent.vue"
 import OmnectLogo from "./components/OmnectLogo.vue"
 import OverlaySpinner from "./components/OverlaySpinner.vue"
 import UserMenu from "./components/UserMenu.vue"
@@ -22,43 +23,64 @@ const { lgAndUp } = useDisplay()
 const router = useRouter()
 const route = useRoute()
 const showSideBar: Ref<boolean> = ref(lgAndUp.value)
+const overlay: Ref<boolean> = ref(false)
+const errorTitle = ref("")
+const errorMsg = ref("")
 
 onConnected(() => {
-	reset()
-	router.push("/login")
+  reset()
+  router.push("/login")
 })
 
 const toggleSideBar = () => {
-	showSideBar.value = !showSideBar.value
+  showSideBar.value = !showSideBar.value
 }
 
 const updateSidebarVisibility = (visible: boolean) => {
-	showSideBar.value = visible
+  showSideBar.value = visible
 }
 
 onMounted(async () => {
-	initializeCentrifuge()
-})
-
-const showBars = computed(() => {
-	return route.path !== "/login" && route.path !== "/set-password" && route.path !== "/auth-callback"
+  initializeCentrifuge()
+
+  const res = await fetch("healthcheck", {
+    headers: {
+      "Cache-Control": "no-cache, no-store, must-revalidate",
+      Pragma: "no-cache",
+      Expires: "0"
+    }
+  })
+  const data = await res.json()
+  if (!res.ok) {
+    overlay.value = true
+    errorTitle.value = "omnect-device-service version mismatch"
+    errorMsg.value = `Current version: ${data.cur_ods_version}. Required version ${data.req_ods_version}. Please consider to update omnect Secure OS.`
+  }
 })
 </script>
 
 <template>
   <v-app>
+    <v-dialog v-model="overlay" max-width="50vw" :no-click-animation="true" persistent fullscreen>
+      <DialogContent :title="errorTitle" dialog-type="Error" :show-close="false">
+        <div class="flex flex-col gap-2 mb-8">
+          {{ errorMsg }}
+        </div>
+      </DialogContent>
+    </v-dialog>
     <v-app-bar flat :style="{ borderBottomWidth: '1px', borderColor: '#677680' }">
       <template #prepend>
         <v-icon class="hidden-lg-and-up mr-4 cursor-pointer text-primary" @click.stop="toggleSideBar">mdi-menu</v-icon>
         <OmnectLogo class="h-12"></OmnectLogo>
       </template>
-      <template v-if="showBars" #append>
+      <template v-if="route.meta.showMenu" #append>
         <div class="flex gap-x-4 mr-4 items-center">
           <UserMenu />
         </div>
       </template>
     </v-app-bar>
-    <BaseSideBar v-if="showBars" :showSideBar="showSideBar" @drawerVisibiltyChanged="updateSidebarVisibility">
+    <BaseSideBar v-if="route.meta.showMenu" :showSideBar="showSideBar"
+      @drawerVisibiltyChanged="updateSidebarVisibility">
     </BaseSideBar>
     <v-main>
       <RouterView></RouterView>

vue/src/components/BaseSideBar.vue

@@ -36,6 +36,11 @@ onGotResponse(async (res) => {
 				color="white" active-class="text-white bg-white/10" :to="route.path">
 				<v-list-item-title :style="{ fontWeight: 700 }"> {{ (route.meta!.text as string) }}</v-list-item-title>
 			</v-list-item>
+			<v-list-item active-class="text-white bg-white/10" target="_blank" rel="noopener noreferrer"
+				href="https://documentation.omnect.conplement.cloud/omnect-Secure-OS/omnect-ui"
+				class="text-white hover:bg-white/10">
+				<v-list-item-title :style="{ fontWeight: 700 }">Documentation</v-list-item-title>
+			</v-list-item>
 		</v-list>
 		<template v-slot:append>
 			<div class="flex flex-col items-center mb-4">

vue/src/plugins/router.ts

@@ -8,12 +8,12 @@ import SetPassword from "../pages/SetPassword.vue"
 import UpdatePassword from "../pages/UpdatePassword.vue"
 
 const routes = [
-	{ path: "/", component: DeviceOverview, meta: { text: "Device", requiresAuth: true } },
-	{ path: "/update", component: DeviceUpdate, meta: { text: "Update", requiresAuth: true } },
-	{ path: "/login", component: Login },
-	{ path: "/set-password", component: SetPassword, meta: { requiresPortalAuth: true } },
-	{ path: "/update-password", component: UpdatePassword, meta: { requiresAuth: true } },
-	{ path: "/auth-callback", component: Callback }
+	{ path: "/", component: DeviceOverview, meta: { text: "Device", requiresAuth: true, showMenu: true } },
+	{ path: "/update", component: DeviceUpdate, meta: { text: "Update", requiresAuth: true, showMenu: true } },
+	{ path: "/login", component: Login, meta: { showMenu: false } },
+	{ path: "/set-password", component: SetPassword, meta: { requiresPortalAuth: true, showMenu: false } },
+	{ path: "/update-password", component: UpdatePassword, meta: { requiresAuth: true, showMenu: true } },
+	{ path: "/auth-callback", component: Callback, meta: { showMenu: false } }
 ]
 
 const router = createRouter({