From b3a29126a48db88382992fcd30d9123e31502b3a Mon Sep 17 00:00:00 2001
From: Jesse Malotaux <jemx@mboutrecht.nl>
Date: Fri, 11 Apr 2025 14:06:45 +0200
Subject: [PATCH] Devices update

---
 fe/src/components/devices/RemoteView.vue | 28 +++-----
 fe/src/components/devices/ServerView.vue | 91 ++++++++++++------------
 fe/src/stores/device.js                  |  9 ++-
 fe/src/views/DevicesView.vue             |  4 +-
 4 files changed, 62 insertions(+), 70 deletions(-)

diff --git a/fe/src/components/devices/RemoteView.vue b/fe/src/components/devices/RemoteView.vue
index f70b40f..0ae2059 100644
--- a/fe/src/components/devices/RemoteView.vue
+++ b/fe/src/components/devices/RemoteView.vue
@@ -1,14 +1,12 @@
 <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 variant="info">
+      <strong>This is a remote device.</strong>
+      <em>UUID: {{ device.uuid() }} </em>
     </AlertComp>
 
-    <div class="mcrm-block block__light grid gap-4">
-      <h4 class="text-lg flex gap-4 items-center justify-between">
+    <div class="grid gap-4 mcrm-block block__light">
+      <h4 class="flex items-center justify-between gap-4 text-lg">
         <span class="flex gap-4"><IconServer />Server</span>
         <ButtonComp variant="primary" @click="checkServerStatus()"><IconReload /></ButtonComp>
       </h4>
@@ -18,9 +16,9 @@
       </p>
 
       <!-- Alerts -->
-      <AlertComp v-if="server.status === 'authorized'" type="success">Authorized</AlertComp>
-      <AlertComp v-if="server.status === 'unlinked'" type="warning">Not linked</AlertComp>
-      <AlertComp v-if="server.status === 'unauthorized'" type="info">
+      <AlertComp v-if="server.status === 'authorized'" variant="success">Authorized</AlertComp>
+      <AlertComp v-if="server.status === 'unlinked'" variant="warning">Not linked</AlertComp>
+      <AlertComp v-if="server.status === 'unauthorized'" variant="info">
         <div class="grid gap-2">
           <strong>Access requested</strong>
           <p>
@@ -40,14 +38,6 @@
           </template>
         </div>
       </AlertComp>
-      <ButtonComp
-        v-if="server.status === 'unauthorized'"
-        variant="primary"
-        @click="requestAccess()"
-      >
-        <IconKey />
-        Request access
-      </ButtonComp>
       <ButtonComp
         variant="danger"
         v-if="server.status === 'authorized'"
@@ -59,7 +49,7 @@
     </div>
     <DialogComp ref="linkPinDialog">
       <template #content>
-        <div class="grid gap-4 w-64">
+        <div class="grid w-64 gap-4">
           <h3>Server link pin:</h3>
           <form class="grid gap-4" @submit.prevent="decryptKey()">
             <input
diff --git a/fe/src/components/devices/ServerView.vue b/fe/src/components/devices/ServerView.vue
index ec56f18..39defe5 100644
--- a/fe/src/components/devices/ServerView.vue
+++ b/fe/src/components/devices/ServerView.vue
@@ -1,63 +1,67 @@
 <template>
   <div class="device-overview">
-    <AlertComp type="info">
-      <div class="grid">
-        <strong>This is a server!</strong>
-        <em>UUID: {{ device.uuid() }} </em>
-      </div>
+    <AlertComp variant="info">
+      <strong>This is a server!</strong>
+      <em>UUID: {{ device.uuid() }} </em>
     </AlertComp>
 
-    <div class="mcrm-block block__light flex flex-wrap items-start gap-4">
-      <h4 class="w-full flex gap-4 items-center justify-between mb-4">
+    <div class="flex flex-wrap items-start gap-4 mcrm-block block__light">
+      <h4 class="flex items-center justify-between w-full gap-4 mb-4">
         <span class="flex gap-4"> <IconDevices />Remote devices </span>
         <ButtonComp variant="primary" @click="device.serverGetRemotes()"><IconReload /></ButtonComp>
       </h4>
       <!-- {{ 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>
+        <template v-for="(remoteDevice, id) in remote.devices" :key="id">
+          <div
+            v-if="id !== device.uuid()"
+            class="mcrm-block block__dark block-size__sm w-64 grid !gap-4 content-start"
+          >
+            <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 variant="success">Authorized</AlertComp>
+              <ButtonComp variant="danger" @click="unlinkDevice(id)">
+                <IconLinkOff />Unlink device
+              </ButtonComp>
+            </template>
+
+            <template v-else>
+              <AlertComp variant="warning">Unauthorized</AlertComp>
+              <ButtonComp variant="primary" @click="startLink(id)">
+                <IconLink />Link device
+              </ButtonComp>
+            </template>
+
+            <template v-if="remote.pinlink.uuid == id">
+              <AlertComp variant="info">One time pin: {{ remote.pinlink.pin }}</AlertComp>
+            </template>
           </div>
-          <template v-if="remoteDevice.key">
-            <AlertComp type="success">Authorized</AlertComp>
-            <ButtonComp variant="danger" @click="unlinkDevice(id)">
-              <IconLinkOff />Unlink device
-            </ButtonComp>
-          </template>
-          <template v-else>
-            <AlertComp type="warning">Unauthorized</AlertComp>
-            <ButtonComp variant="primary" @click="startLink(id)">
-              <IconLink />Link device
-            </ButtonComp>
-          </template>
-          <template v-if="remote.pinlink.uuid == id">
-            <AlertComp type="info">One time pin: {{ remote.pinlink.pin }}</AlertComp>
-          </template>
-        </div>
+        </template>
       </template>
+
       <template v-else>
         <div class="grid w-full gap-4">
           <em class="text-slate-300">No remote devices</em>
         </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.pin }}</span>
+            <span class="font-mono text-4xl tracking-wide">{{ remote.pinlink.pin }}</span>
           </div>
         </template>
       </DialogComp>
@@ -66,11 +70,6 @@
 </template>
 
 <script setup>
-// TODO
-// - startLink -> responsePin also in device block
-// - startLink -> poll removal of pin file, if removed close dialog, update device list
-// - Make unlink work
-
 import { onMounted, reactive, ref } from 'vue'
 import AlertComp from '../base/AlertComp.vue'
 import { useDeviceStore } from '@/stores/device'
@@ -99,7 +98,7 @@ onMounted(() => {
   device.serverGetRemotes()
 
   device.$subscribe((mutation, state) => {
-    if (Object.keys(state.remote).length) remote.devices = device.remote
+    if (state.remote !== remote.devices) remote.devices = device.remote
   })
 })
 
diff --git a/fe/src/stores/device.js b/fe/src/stores/device.js
index 863cbad..2db50c2 100644
--- a/fe/src/stores/device.js
+++ b/fe/src/stores/device.js
@@ -90,12 +90,15 @@ export const useDeviceStore = defineStore('device', () => {
     }, 1000)
   }
 
-  const remoteHandshake = async (key) => {
+  const remoteHandshake = async (keyStr = false) => {
+    if (!keyStr) keyStr = key()
+
+    if (!keyStr) return false
+
     const handshake = await axios.post(appUrl() + '/device/handshake', {
       uuid: uuid(),
-      shake: encryptAES(key, getDateStr()),
+      shake: encryptAES(keyStr, getDateStr()),
     })
-    console.log(handshake)
 
     return handshake.data
   }
diff --git a/fe/src/views/DevicesView.vue b/fe/src/views/DevicesView.vue
index f262cc6..4d4c312 100644
--- a/fe/src/views/DevicesView.vue
+++ b/fe/src/views/DevicesView.vue
@@ -1,9 +1,9 @@
 <template>
   <div id="devices-view" class="panel">
     <h1 class="panel__title">
-      Devices <span class="text-sm">{{ isLocal() ? 'remote' : 'servers' }}</span>
+      {{ isLocal() ? 'Remote devices' : 'Server' }}
     </h1>
-    <div class="panel__content grid gap-8">
+    <div class="grid gap-8 pr-2 panel__content">
       <ServerView v-if="isLocal()" />
       <RemoteView v-else />
     </div>