Update to generate UUID on startup and store in or get from localstorage.

fe/package-lock.json

@@ -24,6 +24,7 @@
         "prettier": "^3.5.1",
         "sass-embedded": "^1.85.1",
         "tailwindcss": "^4.0.9",
+        "uuid": "^11.1.0",
         "vite": "^6.1.0",
         "vite-plugin-vue-devtools": "^7.7.2"
       }
@@ -4661,6 +4662,19 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
+    "node_modules/uuid": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.1.0.tgz",
+      "integrity": "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "bin": {
+        "uuid": "dist/esm/bin/uuid"
+      }
+    },
     "node_modules/varint": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/varint/-/varint-6.0.0.tgz",

fe/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "vite build --emptyOutDir",
     "preview": "vite preview",
     "lint": "eslint . --fix",
     "format": "prettier --write src/"
@@ -27,6 +27,7 @@
     "prettier": "^3.5.1",
     "sass-embedded": "^1.85.1",
     "tailwindcss": "^4.0.9",
+    "uuid": "^11.1.0",
     "vite": "^6.1.0",
     "vite-plugin-vue-devtools": "^7.7.2"
   }

fe/src/App.vue

@@ -9,7 +9,17 @@
 
 <script setup>
 import MainMenu from '@/components/base/MainMenu.vue'
+import { onMounted } from 'vue'
 import { RouterView } from 'vue-router'
+import { useDeviceStore } from './stores/device'
+
+const device = useDeviceStore()
+
+onMounted(() => {
+  // Setting device uuid from localstorage
+  // If not present in LocalStorage a new uuidV4 will be generated
+  device.uuid()
+})
 </script>
 
 <style scoped>

fe/src/stores/device.js

@@ -0,0 +1,57 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import axios from 'axios'
+import { appUrl } from '@/services/ApiService'
+import { v4 as uuidv4 } from 'uuid'
+
+export const useDeviceStore = defineStore('device', () => {
+  // Properties - State values
+  const list = ref({
+    remote: [],
+    local: [],
+  })
+  const current = ref({
+    uuid: false,
+  })
+  const remote = ref([])
+  const server = ref([])
+
+  const uuid = () => {
+    if (!current.value.uuid && localStorage.getItem('deviceId')) {
+      current.value.uuid = localStorage.getItem('deviceId')
+    } else if (!current.value.uuid) {
+      current.value.uuid = setDeviceId()
+    }
+    return current.value.uuid
+  }
+
+  const setDeviceId = () => {
+    const uuid = uuidv4()
+    localStorage.setItem('deviceId', uuid)
+    return uuid
+  }
+
+  const getRemoteDevices = async () => {
+    axios.post(appUrl() + '/device/list').then((data) => {
+      if (data.data.devices) remote.value = data.data.devices
+    })
+  }
+
+  const checkServerAccess = () => {
+    axios.post(appUrl() + '/device/access/check', { uuid: uuid() }).then((data) => {
+      console.log(data)
+
+      // if (data.data.access) server.value = data.data
+    })
+  }
+
+  return {
+    list,
+    remote,
+    server,
+    uuid,
+    setDeviceId,
+    getRemoteDevices,
+    checkServerAccess,
+  }
+})