From 68722692661d2270fabd7a3effd8f910b21dcb0d Mon Sep 17 00:00:00 2001
From: Jesse Malotaux <jemx@mboutrecht.nl>
Date: Mon, 24 Mar 2025 20:22:49 +0100
Subject: [PATCH] WIP: Update to device components

---
 fe/package-lock.json                     | 37 ++++++++++
 fe/package.json                          |  1 +
 fe/src/assets/style/_panel.css           |  4 +-
 fe/src/components/base/AlertComp.vue     |  7 +-
 fe/src/components/devices/RemoteView.vue | 57 ++++++++++++---
 fe/src/components/devices/ServerView.vue | 91 +++++++++++++++++-------
 fe/src/stores/device.js                  | 56 ++++++++++++---
 fe/src/views/DevicesView.vue             |  6 +-
 8 files changed, 203 insertions(+), 56 deletions(-)

diff --git a/fe/package-lock.json b/fe/package-lock.json
index 9a945da..c5052c5 100644
--- a/fe/package-lock.json
+++ b/fe/package-lock.json
@@ -14,6 +14,7 @@
         "vue-router": "^4.5.0"
       },
       "devDependencies": {
+        "@basitcodeenv/vue3-device-detect": "^1.0.3",
         "@eslint/js": "^9.20.0",
         "@vitejs/plugin-vue": "^5.2.1",
         "@vue/eslint-config-prettier": "^10.2.0",
@@ -504,6 +505,16 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@basitcodeenv/vue3-device-detect": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@basitcodeenv/vue3-device-detect/-/vue3-device-detect-1.0.3.tgz",
+      "integrity": "sha512-BDHoM2KYJx/PrEyEzgYOLEVSTxQmvd1PR7UqRQSMClgnM7O1cGoagG/5K0CZy6LUHGifyU5qnrQdC3Sy9nt3zQ==",
+      "dev": true,
+      "dependencies": {
+        "ua-parser-js": "^1.0.37",
+        "vue": "^3.0.0-0"
+      }
+    },
     "node_modules/@bufbuild/protobuf": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/@bufbuild/protobuf/-/protobuf-2.2.3.tgz",
@@ -4603,6 +4614,32 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/ua-parser-js": {
+      "version": "1.0.40",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.40.tgz",
+      "integrity": "sha512-z6PJ8Lml+v3ichVojCiB8toQJBuwR42ySM4ezjXIqXK3M0HczmKQ3LF4rhU55PfD99KEEXQG6yb7iOMyvYuHew==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/ua-parser-js"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/faisalman"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/faisalman"
+        }
+      ],
+      "bin": {
+        "ua-parser-js": "script/cli.js"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/unicorn-magic": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.3.0.tgz",
diff --git a/fe/package.json b/fe/package.json
index 463581d..5849f31 100644
--- a/fe/package.json
+++ b/fe/package.json
@@ -17,6 +17,7 @@
     "vue-router": "^4.5.0"
   },
   "devDependencies": {
+    "@basitcodeenv/vue3-device-detect": "^1.0.3",
     "@eslint/js": "^9.20.0",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/eslint-config-prettier": "^10.2.0",
diff --git a/fe/src/assets/style/_panel.css b/fe/src/assets/style/_panel.css
index 7ab3f77..4e80541 100644
--- a/fe/src/assets/style/_panel.css
+++ b/fe/src/assets/style/_panel.css
@@ -34,7 +34,9 @@
 
   .panel__content {
     @apply grid
+    h-full
     pt-4 sm:pt-0
-    pl-0 sm:pl-4;
+    pl-0 sm:pl-4
+    overflow-auto;
   }
 }
diff --git a/fe/src/components/base/AlertComp.vue b/fe/src/components/base/AlertComp.vue
index 7fbae31..1070185 100644
--- a/fe/src/components/base/AlertComp.vue
+++ b/fe/src/components/base/AlertComp.vue
@@ -25,8 +25,9 @@ defineProps({
 @reference "@/assets/main.css";
 
 .alert {
-  @apply flex
-  items-center
+  @apply grid
+  grid-cols-[1rem_1fr]
+  items-start
   gap-4
   p-4
   border
@@ -36,7 +37,7 @@ defineProps({
   backdrop-blur-md;
 
   &.alert__info {
-    @apply text-sky-400 bg-sky-400/10;
+    @apply text-sky-100 bg-sky-400/40;
   }
 
   &.alert__success {
diff --git a/fe/src/components/devices/RemoteView.vue b/fe/src/components/devices/RemoteView.vue
index 54f5ed6..8ff6e8f 100644
--- a/fe/src/components/devices/RemoteView.vue
+++ b/fe/src/components/devices/RemoteView.vue
@@ -21,6 +21,17 @@
             Navigate to <em class="font-semibold">http://localhost:6970/devices</em> on your pc to
             authorize.
           </p>
+          <template v-if="server.link == 'checking'">
+            <div class="grid grid-cols-[2rem_1fr] gap-2">
+              <IconReload class="animate-spin" />
+              Checking server for link...
+            </div>
+          </template>
+          <template v-if="server.link === false">
+            <ButtonComp variant="subtle" @click="pingLink()" class="w-fit">
+              <IconReload />Check for server link
+            </ButtonComp>
+          </template>
         </div>
       </AlertComp>
 
@@ -37,22 +48,37 @@
         Disconnect
       </ButtonComp>
     </div>
+    <DialogComp ref="linkPinDialog">
+      <template #content>
+        <div class="grid gap-4">
+          <h3>Enter server link pin:</h3>
+          <input class="input" type="number" v-model="server.linkPin" />
+          <ButtonComp variant="primary" @click="getDeviceKey()">Enter</ButtonComp>
+        </div>
+      </template>
+    </DialogComp>
   </div>
 </template>
 
 <script setup>
-import { IconKey, IconPlugConnectedX, IconServer } from '@tabler/icons-vue'
+import { IconKey, IconPlugConnectedX, IconReload, IconServer } from '@tabler/icons-vue'
 import AlertComp from '../base/AlertComp.vue'
 import ButtonComp from '../base/ButtonComp.vue'
-import { onMounted, reactive } from 'vue'
+import { onMounted, reactive, ref } from 'vue'
 import { useDeviceStore } from '@/stores/device'
+import { deviceType, deviceModel, deviceVendor } from '@basitcodeenv/vue3-device-detect'
+import DialogComp from '../base/DialogComp.vue'
 
 const device = useDeviceStore()
 
+const linkPinDialog = ref()
+
 const server = reactive({
   host: '',
   status: false,
   access: false,
+  link: false,
+  linkPin: '',
 })
 
 onMounted(async () => {
@@ -62,20 +88,29 @@ onMounted(async () => {
     if (Object.keys(state.server).length) server.status = state.server.status
   })
 
-  const status = await device.checkServerAccess()
+  const status = await device.remoteCheckServerAccess()
   server.status = status
 })
 
 function requestAccess() {
-  const request = device.requestServerAccess()
+  let deviceName = `${deviceVendor() ? deviceVendor() : 'Unknown'} ${deviceVendor() ? deviceModel() : deviceType()}`
 
-  request
-    .then((data) => {
-      console.log('1', data)
-    })
-    .then((data) => {
-      console.log('2', data)
-    })
+  device.remoteRequestServerAccess(deviceName, deviceType()).then((data) => {
+    if (data.data) pingLink()
+  })
+}
+
+function pingLink() {
+  server.link = 'checking'
+  device.remotePingLink((link) => {
+    server.link = true
+    linkPinDialog.value.toggleDialog(true)
+    console.log(link, 'opendialog')
+  })
+}
+
+function getDeviceKey() {
+  device.remoteHandshake(server.linkPin)
 }
 </script>
 
diff --git a/fe/src/components/devices/ServerView.vue b/fe/src/components/devices/ServerView.vue
index 3806ee1..48219f9 100644
--- a/fe/src/components/devices/ServerView.vue
+++ b/fe/src/components/devices/ServerView.vue
@@ -8,60 +8,97 @@
     </AlertComp>
 
     <div class="mcrm-block block__light flex flex-wrap items-start">
-      <!-- {{ remote.devices }} -->
-      <div
-        class="mcrm-block block__dark block-size__sm w-64 grid !gap-4 content-start"
-        v-for="(device, id) in remote.devices"
-        :key="id"
-      >
-        <div class="grid gap-2">
-          <h5 class="grid grid-cols-[auto_1fr] gap-2">
-            <IconDeviceUnknown v-if="device.settings.type == 'unknown'" />
-            <IconDeviceMobile v-if="device.settings.type == 'phone'" />
-            <IconDeviceTablet v-if="device.settings.type == 'tablet'" />
-            <span class="w-full truncate">
-              {{ device.settings.name }}
-            </span>
-          </h5>
-          <em>{{ id }}</em>
+      <!-- {{ Object.keys(remote.devices).length }} -->
+      <template v-if="Object.keys(remote.devices).length > 0">
+        <div
+          class="mcrm-block block__dark block-size__sm w-64 grid !gap-4 content-start"
+          v-for="(remoteDevice, id) in remote.devices"
+          :key="id"
+        >
+          <div class="grid gap-2">
+            <h5 class="grid grid-cols-[auto_1fr] gap-2">
+              <IconDeviceUnknown v-if="remoteDevice.settings.type == 'unknown'" />
+              <IconDeviceMobile v-if="remoteDevice.settings.type == 'mobile'" />
+              <IconDeviceTablet v-if="remoteDevice.settings.type == 'tablet'" />
+              <IconDeviceDesktop v-if="remoteDevice.settings.type == 'desktop'" />
+              <span class="w-full truncate">
+                {{ remoteDevice.settings.name }}
+              </span>
+            </h5>
+            <em>{{ id }}</em>
+          </div>
+          <template v-if="remoteDevice.key">
+            <AlertComp type="success">Linked</AlertComp>
+            <ButtonComp variant="danger"> <IconLinkOff />Unlink device </ButtonComp>
+          </template>
+          <template v-else>
+            <AlertComp type="warning">Not linked</AlertComp>
+            <ButtonComp variant="primary" @click="startLink(id)">
+              <IconLink />Link device
+            </ButtonComp>
+          </template>
         </div>
-        <template v-if="device.key">
-          <AlertComp type="success">Registered</AlertComp>
-          <ButtonComp variant="danger"> <IconDevicesMinus />Unregister device </ButtonComp>
+      </template>
+      <template v-else>
+        <div class="grid w-full gap-4">
+          <em class="text-slate-300">No remote devices</em>
+          <div class="flex justify-end">
+            <ButtonComp variant="primary" @click="device.serverGetRemotes()">
+              <IconReload />Check for access requests
+            </ButtonComp>
+          </div>
+        </div>
+      </template>
+      <DialogComp ref="pinDialog">
+        <template #content>
+          <div class="grid gap-4">
+            <h3>Pin code</h3>
+            <span class="text-4xl font-mono tracking-wide">{{ remote.pinlink }}</span>
+          </div>
         </template>
-        <template v-else>
-          <AlertComp type="warning">Not registered</AlertComp>
-          <ButtonComp variant="primary"> <IconDevicesPlus />Register device </ButtonComp>
-        </template>
-      </div>
+      </DialogComp>
     </div>
   </div>
 </template>
 
 <script setup>
-import { onMounted, reactive } from 'vue'
+import { onMounted, reactive, ref } from 'vue'
 import AlertComp from '../base/AlertComp.vue'
 import { useDeviceStore } from '@/stores/device'
 import {
+  IconDeviceDesktop,
   IconDeviceMobile,
   IconDevicesMinus,
   IconDevicesPlus,
   IconDeviceTablet,
   IconDeviceUnknown,
+  IconLink,
+  IconLinkOff,
+  IconReload,
 } from '@tabler/icons-vue'
 import ButtonComp from '../base/ButtonComp.vue'
+import DialogComp from '../base/DialogComp.vue'
 
 const device = useDeviceStore()
 
-const remote = reactive({ devices: [] })
+const pinDialog = ref()
+
+const remote = reactive({ devices: [], pinlink: '' })
 
 onMounted(() => {
-  device.getRemoteDevices()
+  device.serverGetRemotes()
 
   device.$subscribe((mutation, state) => {
     if (Object.keys(state.remote).length) remote.devices = device.remote
   })
 })
+
+async function startLink(deviceUuid) {
+  const pin = await device.serverStartLink(deviceUuid)
+
+  remote.pinlink = pin
+  pinDialog.value.toggleDialog(true)
+}
 </script>
 
 <style scoped>
diff --git a/fe/src/stores/device.js b/fe/src/stores/device.js
index f82c553..1e3c892 100644
--- a/fe/src/stores/device.js
+++ b/fe/src/stores/device.js
@@ -1,7 +1,7 @@
 import { ref } from 'vue'
 import { defineStore } from 'pinia'
 import axios from 'axios'
-import { appUrl } from '@/services/ApiService'
+import { appUrl, encrypt } from '@/services/ApiService'
 import { v4 as uuidv4 } from 'uuid'
 
 export const useDeviceStore = defineStore('device', () => {
@@ -15,6 +15,7 @@ export const useDeviceStore = defineStore('device', () => {
     status: false,
   })
 
+  // Current device
   const uuid = () => {
     if (!current.value.uuid && localStorage.getItem('deviceId')) {
       current.value.uuid = localStorage.getItem('deviceId')
@@ -30,32 +31,65 @@ export const useDeviceStore = defineStore('device', () => {
     return uuid
   }
 
-  const getRemoteDevices = async () => {
-    // remote.value = { penis: 'penis' }
-    // return
-    axios.post(appUrl() + '/device/list').then((data) => {
+  // Server application
+  const serverGetRemotes = async (remoteUuid) => {
+    axios.post(appUrl() + '/device/list', { uuid: remoteUuid }).then((data) => {
       if (data.data.devices) remote.value = data.data.devices
     })
   }
 
-  const checkServerAccess = async () => {
+  const serverStartLink = async (deviceUuid) => {
+    const request = await axios.post(appUrl() + '/device/link/start', { uuid: deviceUuid })
+    return request.data
+  }
+
+  // Remote application
+  const remoteCheckServerAccess = async () => {
     const check = await axios.post(appUrl() + '/device/access/check', { uuid: uuid() })
     server.value.access = check.data
     return check.data
   }
 
-  const requestServerAccess = async () => {
-    const request = await axios.post(appUrl() + '/device/access/request', { uuid: uuid() })
+  const remoteRequestServerAccess = async (deviceName, deviceType) => {
+    const request = await axios.post(appUrl() + '/device/access/request', {
+      uuid: uuid(),
+      name: deviceName,
+      type: deviceType,
+    })
     return request
   }
+  const remotePingLink = async (cb) => {
+    // const linkRequest = await axios.post(appUrl() + '/device/link/ping', { uuid: deviceUuid })
+    // if (linkRequest.data)
+    const pingInterval = setInterval(() => {
+      axios.post(appUrl() + '/device/link/ping', { uuid: uuid() }).then((data) => {
+        if (data.data) {
+          clearInterval(pingInterval)
+          cb(data.data)
+        }
+      })
+    }, 1000)
+  }
+
+  const remoteHandshake = async (pin) => {
+    // send encrypt(uuid + pin)
+    // then decrypt data with pin = key
+
+    axios.post(appUrl() + '/device/handshake', { shake: pin }).then((data) => {
+      console.log(data)
+    })
+  }
 
   return {
     remote,
     server,
     uuid,
     setDeviceId,
-    getRemoteDevices,
-    checkServerAccess,
-    requestServerAccess,
+    serverGetRemotes,
+    serverStartLink,
+    remoteCheckServerAccess,
+    remoteRequestServerAccess,
+    remotePingLink,
+    remoteHandshake,
   }
 })
diff --git a/fe/src/views/DevicesView.vue b/fe/src/views/DevicesView.vue
index 148fea1..7fbf36e 100644
--- a/fe/src/views/DevicesView.vue
+++ b/fe/src/views/DevicesView.vue
@@ -3,9 +3,9 @@
     <h1 class="panel__title">
       Devices <span class="text-sm">{{ isLocal() ? 'remote' : 'servers' }}</span>
     </h1>
-    <div class="panel__content">
-      <ServerView v-if="!isLocal()" />
-      <RemoteView v-else />
+    <div class="panel__content grid sm:grid-cols-2 gap-8">
+      <ServerView />
+      <RemoteView />
     </div>
   </div>
 </template>