WIP: Device components, services and stores updated.

fe/package-lock.json

@@ -18,6 +18,7 @@
         "@vitejs/plugin-vue": "^5.2.1",
         "@vue/eslint-config-prettier": "^10.2.0",
         "axios": "^1.8.3",
+        "crypto-js": "^4.2.0",
         "eslint": "^9.20.1",
         "eslint-plugin-vue": "^9.32.0",
         "pinia": "^3.0.1",
@@ -2170,6 +2171,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/crypto-js": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz",
+      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==",
+      "dev": true
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",

fe/package.json

@@ -21,6 +21,7 @@
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/eslint-config-prettier": "^10.2.0",
     "axios": "^1.8.3",
+    "crypto-js": "^4.2.0",
     "eslint": "^9.20.1",
     "eslint-plugin-vue": "^9.32.0",
     "pinia": "^3.0.1",

fe/src/components/devices/RemoteView.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="server-overview">
+    <AlertComp type="info">
+      <div class="grid">
+        <strong>This is a remote device.</strong>
+        <em>UUID: {{ device.uuid() }} </em>
+      </div>
+    </AlertComp>
+
+    <div class="mcrm-block block__light grid gap-4">
+      <h4 class="text-lg flex gap-4 items-center"><IconServer />Server</h4>
+      <p>
+        Connected to: <strong>{{ server.host }}</strong>
+      </p>
+      <AlertComp v-if="server.status === 'unauthorized'" type="warning">Not authorized</AlertComp>
+      <AlertComp v-if="server.status === 'authorized'" type="success">Authorized</AlertComp>
+      <AlertComp v-if="server.status === 'requested'" type="info">
+        <div class="grid gap-2">
+          <strong>Access requested</strong>
+          <p>
+            Navigate to <em class="font-semibold">http://localhost:6970/devices</em> on your pc to
+            authorize.
+          </p>
+        </div>
+      </AlertComp>
+
+      <ButtonComp
+        v-if="server.status === 'unauthorized'"
+        variant="primary"
+        @click="requestAccess()"
+      >
+        <IconKey />
+        Request access
+      </ButtonComp>
+      <ButtonComp variant="danger" v-if="server.status === 'authorized'">
+        <IconPlugConnectedX />
+        Disconnect
+      </ButtonComp>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { IconKey, IconPlugConnectedX, IconServer } from '@tabler/icons-vue'
+import AlertComp from '../base/AlertComp.vue'
+import ButtonComp from '../base/ButtonComp.vue'
+import { onMounted, reactive } from 'vue'
+import { useDeviceStore } from '@/stores/device'
+
+const device = useDeviceStore()
+
+const server = reactive({
+  host: '',
+  status: false,
+  access: false,
+})
+
+onMounted(async () => {
+  server.host = window.location.host
+
+  device.$subscribe((mutation, state) => {
+    if (Object.keys(state.server).length) server.status = state.server.status
+  })
+
+  const status = await device.checkServerAccess()
+  server.status = status
+})
+
+function requestAccess() {
+  const request = device.requestServerAccess()
+
+  request
+    .then((data) => {
+      console.log('1', data)
+    })
+    .then((data) => {
+      console.log('2', data)
+    })
+}
+</script>
+
+<style scoped>
+@reference "@/assets/main.css";
+
+.server-overview {
+  @apply grid
+  gap-4
+  content-start;
+}
+</style>

fe/src/components/devices/ServerOverview.vue

@@ -1,44 +0,0 @@
-<template>
-  <div class="server-overview">
-    <AlertComp type="info"> This is a remote device. </AlertComp>
-
-    <div class="mcrm-block block__light grid gap-4">
-      <h4 class="text-lg flex gap-4 items-center"><IconServer />Server</h4>
-      <p>
-        Connected to: <strong>{{ server.host }}</strong>
-      </p>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { IconServer } from '@tabler/icons-vue'
-import AlertComp from '../base/AlertComp.vue'
-import { onMounted, reactive } from 'vue'
-import { useDeviceStore } from '@/stores/device'
-
-const device = useDeviceStore()
-
-const server = reactive({
-  host: '',
-  access: false,
-})
-
-onMounted(() => {
-  server.host = window.location.host
-
-  device.checkServerAccess()
-})
-
-// console.log(window.location.host)
-</script>
-
-<style scoped>
-@reference "@/assets/main.css";
-
-.server-overview {
-  @apply grid
-  gap-4
-  content-start;
-}
-</style>

fe/src/components/devices/ServerView.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="device-overview">
-    <AlertComp type="info"> This is the server. </AlertComp>
+    <AlertComp type="info">
+      <div class="grid">
+        <strong>This is a server.</strong>
+        <em>UUID: {{ device.uuid() }} </em>
+      </div>
+    </AlertComp>
 
     <div class="mcrm-block block__light flex flex-wrap items-start">
       <!-- {{ remote.devices }} -->
@@ -53,8 +58,8 @@ const remote = reactive({ devices: [] })
 onMounted(() => {
   device.getRemoteDevices()
 
-  device.$subscribe((mutation) => {
+  device.$subscribe((mutation, state) => {
-    if (mutation.events.key == 'remote') remote.devices = device.remote
+    if (Object.keys(state.remote).length) remote.devices = device.remote
   })
 })
 </script>

fe/src/services/ApiService.js

@@ -1,3 +1,5 @@
+import CryptoJS from 'crypto-js'
+
 export const appUrl = () => {
   return window.location.port !== 6970 ? `http://${window.location.hostname}:6970` : ''
 }
@@ -5,3 +7,13 @@ export const appUrl = () => {
 export const isLocal = () => {
   return window.location.hostname === '127.0.0.1' || window.location.hostname === 'localhost'
 }
+
+export const encrypt = (data, key = false) => {
+  const pk = !key ? localStorage.getItem('Macrame__pk') : key
+
+  if (pk) {
+    return CryptoJS.RSA.encrypt(JSON.stringify(data), pk).toString()
+  } else {
+    return false
+  }
+}

fe/src/stores/device.js

@@ -6,15 +6,14 @@ 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 server = ref({
+    status: false,
+  })
 
   const uuid = () => {
     if (!current.value.uuid && localStorage.getItem('deviceId')) {
@@ -32,26 +31,31 @@ export const useDeviceStore = defineStore('device', () => {
   }
 
   const getRemoteDevices = async () => {
+    // remote.value = { penis: 'penis' }
+    // return
     axios.post(appUrl() + '/device/list').then((data) => {
       if (data.data.devices) remote.value = data.data.devices
     })
   }
 
-  const checkServerAccess = () => {
+  const checkServerAccess = async () => {
-    axios.post(appUrl() + '/device/access/check', { uuid: uuid() }).then((data) => {
+    const check = await axios.post(appUrl() + '/device/access/check', { uuid: uuid() })
-      console.log(data)
+    server.value.access = check.data
+    return check.data
+  }
 
-      // if (data.data.access) server.value = data.data
+  const requestServerAccess = async () => {
-    })
+    const request = await axios.post(appUrl() + '/device/access/request', { uuid: uuid() })
+    return request
   }
 
   return {
-    list,
     remote,
     server,
     uuid,
     setDeviceId,
     getRemoteDevices,
     checkServerAccess,
+    requestServerAccess,
   }
 })

fe/src/views/DevicesView.vue

@@ -4,15 +4,15 @@
       Devices <span class="text-sm">{{ isLocal() ? 'remote' : 'servers' }}</span>
     </h1>
     <div class="panel__content">
-      <DeviceOverview v-if="!isLocal()" />
+      <ServerView v-if="!isLocal()" />
-      <ServerOverview v-else />
+      <RemoteView v-else />
     </div>
   </div>
 </template>
 
 <script setup>
-import DeviceOverview from '@/components/devices/DeviceOverview.vue'
+import ServerView from '@/components/devices/ServerView.vue'
-import ServerOverview from '@/components/devices/ServerOverview.vue'
+import RemoteView from '@/components/devices/RemoteView.vue'
 import { isLocal } from '@/services/ApiService'
 </script>