mirror of
https://github.com/Macrame-App/Macrame
synced 2025-12-29 15:29:26 +00:00
Major update, devices view and components
The view for devices is functional now. It is possible to view, link and unlink devices and possible to gain access to authenticated endpoints with a key encrypted by a one time pin.
This commit is contained in:
Jesse Malotaux
parent
b598a090bc
commit
a01e026aa1
12 changed files with 1282 additions and 673 deletions
|
|
@ -8,13 +8,19 @@
|
|||
</AlertComp>
|
||||
|
||||
<div class="mcrm-block block__light grid gap-4">
|
||||
<h4 class="text-lg flex gap-4 items-center"><IconServer />Server</h4>
|
||||
<h4 class="text-lg flex gap-4 items-center justify-between">
|
||||
<span class="flex gap-4"><IconServer />Server</span>
|
||||
<ButtonComp variant="primary" @click="checkServerStatus()"><IconReload /></ButtonComp>
|
||||
</h4>
|
||||
|
||||
<p>
|
||||
Connected to: <strong>{{ server.host }}</strong>
|
||||
</p>
|
||||
<AlertComp v-if="server.status === 'unauthorized'" type="warning">Not authorized</AlertComp>
|
||||
|
||||
<!-- Alerts -->
|
||||
<AlertComp v-if="server.status === 'authorized'" type="success">Authorized</AlertComp>
|
||||
<AlertComp v-if="server.status === 'requested'" type="info">
|
||||
<AlertComp v-if="server.status === 'unlinked'" type="warning">Not linked</AlertComp>
|
||||
<AlertComp v-if="server.status === 'unauthorized'" type="info">
|
||||
<div class="grid gap-2">
|
||||
<strong>Access requested</strong>
|
||||
<p>
|
||||
|
|
@ -34,7 +40,6 @@
|
|||
</template>
|
||||
</div>
|
||||
</AlertComp>
|
||||
|
||||
<ButtonComp
|
||||
v-if="server.status === 'unauthorized'"
|
||||
variant="primary"
|
||||
|
|
@ -43,17 +48,29 @@
|
|||
<IconKey />
|
||||
Request access
|
||||
</ButtonComp>
|
||||
<ButtonComp variant="danger" v-if="server.status === 'authorized'">
|
||||
<ButtonComp
|
||||
variant="danger"
|
||||
v-if="server.status === 'authorized'"
|
||||
@click="disonnectFromServer()"
|
||||
>
|
||||
<IconPlugConnectedX />
|
||||
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 class="grid gap-4 w-64">
|
||||
<h3>Server link pin:</h3>
|
||||
<form class="grid gap-4" @submit.prevent="decryptKey()">
|
||||
<input
|
||||
class="input"
|
||||
id="input-pin"
|
||||
type="text"
|
||||
pattern="[0-9]{4}"
|
||||
v-model="server.inputPin"
|
||||
/>
|
||||
<ButtonComp variant="primary">Enter</ButtonComp>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
</DialogComp>
|
||||
|
|
@ -61,13 +78,23 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
// TODO
|
||||
// - [Delete local key button]
|
||||
// - if not local key
|
||||
// - - if !checkAccess -> requestAccess -> put settings.json (go)
|
||||
// - - if checkAccess -> pingLink -> check for device.tmp (go)
|
||||
// - - if [devicePin] -> handshake -> save key local, close dialog, update server status
|
||||
|
||||
import { IconKey, IconPlugConnectedX, IconReload, IconServer } from '@tabler/icons-vue'
|
||||
import AlertComp from '../base/AlertComp.vue'
|
||||
import ButtonComp from '../base/ButtonComp.vue'
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import { onMounted, onUpdated, reactive, ref } from 'vue'
|
||||
import { useDeviceStore } from '@/stores/device'
|
||||
import { deviceType, deviceModel, deviceVendor } from '@basitcodeenv/vue3-device-detect'
|
||||
import DialogComp from '../base/DialogComp.vue'
|
||||
import { AuthCall, decryptAES } from '@/services/EncryptService'
|
||||
import axios from 'axios'
|
||||
import { appUrl } from '@/services/ApiService'
|
||||
|
||||
const device = useDeviceStore()
|
||||
|
||||
|
|
@ -76,41 +103,82 @@ const linkPinDialog = ref()
|
|||
const server = reactive({
|
||||
host: '',
|
||||
status: false,
|
||||
access: false,
|
||||
link: false,
|
||||
linkPin: '',
|
||||
inputPin: '',
|
||||
encryptedKey: '',
|
||||
key: '',
|
||||
})
|
||||
|
||||
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.remoteCheckServerAccess()
|
||||
server.status = status
|
||||
})
|
||||
|
||||
onUpdated(() => {
|
||||
if (!server.status) checkServerStatus()
|
||||
})
|
||||
|
||||
async function checkServerStatus(request = true) {
|
||||
const status = await device.remoteCheckServerAccess()
|
||||
|
||||
server.status = status
|
||||
|
||||
if (status === 'unlinked' || status === 'unauthorized') {
|
||||
if (request) requestAccess()
|
||||
return true
|
||||
}
|
||||
|
||||
if (!device.key()) {
|
||||
server.status = 'unauthorized'
|
||||
return true
|
||||
}
|
||||
|
||||
const handshake = await device.remoteHandshake(device.key())
|
||||
|
||||
if (handshake) server.key = device.key()
|
||||
else {
|
||||
device.removeDeviceKey()
|
||||
server.status = 'unlinked'
|
||||
if (request) requestAccess()
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
function requestAccess() {
|
||||
let deviceName = `${deviceVendor() ? deviceVendor() : 'Unknown'} ${deviceVendor() ? deviceModel() : deviceType()}`
|
||||
|
||||
device.remoteRequestServerAccess(deviceName, deviceType()).then((data) => {
|
||||
if (data.data) pingLink()
|
||||
if (data.data) (server.status = data.data), pingLink()
|
||||
})
|
||||
}
|
||||
|
||||
function pingLink() {
|
||||
server.link = 'checking'
|
||||
device.remotePingLink((link) => {
|
||||
|
||||
device.remotePingLink((encryptedKey) => {
|
||||
server.link = true
|
||||
server.encryptedKey = encryptedKey
|
||||
|
||||
linkPinDialog.value.toggleDialog(true)
|
||||
console.log(link, 'opendialog')
|
||||
})
|
||||
}
|
||||
|
||||
function getDeviceKey() {
|
||||
device.remoteHandshake(server.linkPin)
|
||||
async function decryptKey() {
|
||||
const decryptedKey = decryptAES(server.inputPin, server.encryptedKey)
|
||||
const handshake = await device.remoteHandshake(decryptedKey)
|
||||
|
||||
if (handshake) {
|
||||
device.setDeviceKey(decryptedKey)
|
||||
server.key = decryptedKey
|
||||
linkPinDialog.value.toggleDialog(false)
|
||||
server.status = 'authorized'
|
||||
}
|
||||
}
|
||||
|
||||
function disonnectFromServer() {
|
||||
axios.post(appUrl() + '/device/link/remove', AuthCall({ uuid: device.uuid() })).then((data) => {
|
||||
if (data.data) checkServerStatus(false)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -122,4 +190,7 @@ function getDeviceKey() {
|
|||
gap-4
|
||||
content-start;
|
||||
}
|
||||
|
||||
#input-pin {
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,11 @@
|
|||
</div>
|
||||
</AlertComp>
|
||||
|
||||
<div class="mcrm-block block__light flex flex-wrap items-start">
|
||||
<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">
|
||||
<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
|
||||
|
|
@ -28,32 +32,32 @@
|
|||
<em>{{ id }}</em>
|
||||
</div>
|
||||
<template v-if="remoteDevice.key">
|
||||
<AlertComp type="success">Linked</AlertComp>
|
||||
<ButtonComp variant="danger"> <IconLinkOff />Unlink device </ButtonComp>
|
||||
<AlertComp type="success">Authorized</AlertComp>
|
||||
<ButtonComp variant="danger" @click="unlinkDevice(id)">
|
||||
<IconLinkOff />Unlink device
|
||||
</ButtonComp>
|
||||
</template>
|
||||
<template v-else>
|
||||
<AlertComp type="warning">Not linked</AlertComp>
|
||||
<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 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>
|
||||
<span class="text-4xl font-mono tracking-wide">{{ remote.pinlink.pin }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</DialogComp>
|
||||
|
|
@ -62,14 +66,18 @@
|
|||
</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'
|
||||
import {
|
||||
IconDevices,
|
||||
IconDeviceDesktop,
|
||||
IconDeviceMobile,
|
||||
IconDevicesMinus,
|
||||
IconDevicesPlus,
|
||||
IconDeviceTablet,
|
||||
IconDeviceUnknown,
|
||||
IconLink,
|
||||
|
|
@ -78,12 +86,14 @@ import {
|
|||
} from '@tabler/icons-vue'
|
||||
import ButtonComp from '../base/ButtonComp.vue'
|
||||
import DialogComp from '../base/DialogComp.vue'
|
||||
import axios from 'axios'
|
||||
import { appUrl } from '@/services/ApiService'
|
||||
|
||||
const device = useDeviceStore()
|
||||
|
||||
const pinDialog = ref()
|
||||
|
||||
const remote = reactive({ devices: [], pinlink: '' })
|
||||
const remote = reactive({ devices: [], pinlink: false })
|
||||
|
||||
onMounted(() => {
|
||||
device.serverGetRemotes()
|
||||
|
|
@ -96,8 +106,37 @@ onMounted(() => {
|
|||
async function startLink(deviceUuid) {
|
||||
const pin = await device.serverStartLink(deviceUuid)
|
||||
|
||||
remote.pinlink = pin
|
||||
remote.pinlink = { uuid: deviceUuid, pin: pin }
|
||||
pinDialog.value.toggleDialog(true)
|
||||
|
||||
pollLink()
|
||||
|
||||
setTimeout(() => {
|
||||
resetPinLink()
|
||||
}, 60000)
|
||||
}
|
||||
|
||||
function pollLink() {
|
||||
const pollInterval = setInterval(() => {
|
||||
axios.post(appUrl() + '/device/link/poll', { uuid: remote.pinlink.uuid }).then((data) => {
|
||||
if (!data.data) {
|
||||
clearInterval(pollInterval)
|
||||
resetPinLink()
|
||||
device.serverGetRemotes()
|
||||
}
|
||||
})
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
function resetPinLink() {
|
||||
remote.pinlink = false
|
||||
if (pinDialog.value) pinDialog.value.toggleDialog(false)
|
||||
}
|
||||
|
||||
function unlinkDevice(id) {
|
||||
axios.post(appUrl() + '/device/link/remove', { uuid: id }).then((data) => {
|
||||
if (data.data) device.serverGetRemotes()
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue