WIP: Update to device components

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>