zoeynoort/Macrame
1
0
Fork 0
mirror of https://github.com/Macrame-App/Macrame synced 2025-12-29 07:19:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Devices update

Browse source
This commit is contained in:
Jesse Malotaux 2025-04-11 14:06:45 +02:00
parent d38f999b27
commit b3a29126a4
4 changed files with 62 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

24
fe/src/components/devices/RemoteView.vue
View file

@ -1,14 +1,12 @@
<template>
<div class="server-overview">
<AlertComp type="info">
<div class="grid">
<AlertComp variant="info">
<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 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

33
fe/src/components/devices/ServerView.vue
View file

@ -1,23 +1,21 @@
<template>
<div class="device-overview">
<AlertComp type="info">
<div class="grid">
<AlertComp variant="info">
<strong>This is a server!</strong>
<em>UUID: {{ device.uuid() }} </em>
</div>
</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">
<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"
v-for="(remoteDevice, id) in remote.devices"
:key="id"
>
<div class="grid gap-2">
<h5 class="grid grid-cols-[auto_1fr] gap-2">
@ -31,33 +29,39 @@
</h5>
<em>{{ id }}</em>
</div>
<template v-if="remoteDevice.key">
<AlertComp type="success">Authorized</AlertComp>
<AlertComp variant="success">Authorized</AlertComp>
<ButtonComp variant="danger" @click="unlinkDevice(id)">
<IconLinkOff />Unlink device
</ButtonComp>
</template>
<template v-else>
<AlertComp type="warning">Unauthorized</AlertComp>
<AlertComp variant="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>
<AlertComp variant="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
})
})

9
fe/src/stores/device.js
View file

@ -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
}

4
fe/src/views/DevicesView.vue
View file

@ -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>