From e2facd447eab2ba7ea2b8ffc9059641ee2e43b61 Mon Sep 17 00:00:00 2001 From: Bernd Storath <999999bst@gmail.com> Date: Thu, 8 Aug 2024 12:08:35 +0200 Subject: [PATCH] reduce errors, improve typing --- src/app.vue | 182 +++++++++++++++++----------------- src/server/utils/WireGuard.ts | 1 + 2 files changed, 94 insertions(+), 89 deletions(-) diff --git a/src/app.vue b/src/app.vue index d1e956ea..20438751 100644 --- a/src/app.vue +++ b/src/app.vue @@ -2,7 +2,7 @@

WireGuard

-
+
- + + +
-
@@ -348,12 +349,8 @@ @click=" clientEditName = client.name; clientEditNameId = client.id; - setTimeout( - () => - $refs[ - 'client-' + client.id + '-name' - ][0].select(), - 1 + nextTick(() => + $refs['client-' + client.id + '-name'][0].select() ); " > @@ -407,12 +404,10 @@ @click=" clientEditAddress = client.address; clientEditAddressId = client.id; - setTimeout( - () => - $refs[ - 'client-' + client.id + '-address' - ][0].select(), - 1 + nextTick(() => + $refs[ + 'client-' + client.id + '-address' + ][0].select() ); " > @@ -1202,22 +1197,27 @@ const authenticating = ref(false); const password = ref(null); const requiresPassword = ref(null); +type LocalClient = WGClient & { + avatar?: string; + transferMax?: number; +} & Omit; + type ClientPersist = { transferRxHistory: number[]; transferRxPrevious: number; transferRxCurrent: number; transferRxSeries: { name: string; data: number[] }[]; - hoverRx: unknown; + hoverRx?: unknown; transferTxHistory: number[]; transferTxPrevious: number; transferTxCurrent: number; transferTxSeries: { name: string; data: number[] }[]; - hoverTx: unknown; + hoverTx?: unknown; }; -const clients = ref(null); +const clients = ref(null); const clientsPersist = ref>({}); -const clientDelete = ref(null); +const clientDelete = ref(null); const clientCreate = ref(null); const clientCreateName = ref(''); const clientEditName = ref(null); @@ -1238,6 +1238,7 @@ const theme = useTheme(); const chartOptions = { chart: { + type: false as string | boolean, background: 'transparent', stacked: false, toolbar: { @@ -1254,6 +1255,7 @@ const chartOptions = { colors: [], stroke: { curve: 'smooth', + width: 0, }, fill: { type: 'gradient', @@ -1331,80 +1333,84 @@ async function refresh({ updateCharts = false } = {}) { const _clients = await api.getClients(); clients.value = _clients.map((client) => { + let avatar = undefined; if (client.name.includes('@') && client.name.includes('.')) { - client.avatar = `https://gravatar.com/avatar/${sha256(client.name.toLowerCase().trim())}.jpg`; + avatar = `https://gravatar.com/avatar/${sha256(client.name.toLowerCase().trim())}.jpg`; } if (!clientsPersist.value[client.id]) { - clientsPersist.value[client.id] = {}; - clientsPersist.value[client.id].transferRxHistory = Array(50).fill(0); - clientsPersist.value[client.id].transferRxPrevious = client.transferRx; - clientsPersist.value[client.id].transferTxHistory = Array(50).fill(0); - clientsPersist.value[client.id].transferTxPrevious = client.transferTx; + clientsPersist.value[client.id] = { + transferRxHistory: Array(50).fill(0), + transferRxPrevious: client.transferRx ?? 0, + transferTxHistory: Array(50).fill(0), + transferTxPrevious: client.transferTx ?? 0, + transferRxCurrent: 0, + transferTxCurrent: 0, + transferRxSeries: [], + transferTxSeries: [], + }; } + const clientPersist = clientsPersist.value[client.id]; + // Debug // client.transferRx = this.clientsPersist[client.id].transferRxPrevious + Math.random() * 1000; // client.transferTx = this.clientsPersist[client.id].transferTxPrevious + Math.random() * 1000; // client.latestHandshakeAt = new Date(); // this.requiresPassword = true; - clientsPersist.value[client.id].transferRxCurrent = - client.transferRx - clientsPersist.value[client.id].transferRxPrevious; - clientsPersist.value[client.id].transferRxPrevious = client.transferRx; - clientsPersist.value[client.id].transferTxCurrent = - client.transferTx - clientsPersist.value[client.id].transferTxPrevious; - clientsPersist.value[client.id].transferTxPrevious = client.transferTx; + clientPersist.transferRxCurrent = + (client.transferRx ?? 0) - clientPersist.transferRxPrevious; + + clientPersist.transferRxPrevious = client.transferRx ?? 0; + + clientPersist.transferTxCurrent = + (client.transferTx ?? 0) - clientPersist.transferTxPrevious; + + clientPersist.transferTxPrevious = client.transferTx ?? 0; + + let transferMax = undefined; if (updateCharts) { - clientsPersist.value[client.id].transferRxHistory.push( - clientsPersist.value[client.id].transferRxCurrent - ); - clientsPersist.value[client.id].transferRxHistory.shift(); + clientPersist.transferRxHistory.push(clientPersist.transferRxCurrent); + clientPersist.transferRxHistory.shift(); - clientsPersist.value[client.id].transferTxHistory.push( - clientsPersist.value[client.id].transferTxCurrent - ); - clientsPersist.value[client.id].transferTxHistory.shift(); + clientPersist.transferTxHistory.push(clientPersist.transferTxCurrent); + clientPersist.transferTxHistory.shift(); - clientsPersist.value[client.id].transferTxSeries = [ + clientPersist.transferTxSeries = [ { name: 'Tx', - data: clientsPersist.value[client.id].transferTxHistory, + data: clientPersist.transferTxHistory, }, ]; - clientsPersist.value[client.id].transferRxSeries = [ + clientPersist.transferRxSeries = [ { name: 'Rx', - data: clientsPersist.value[client.id].transferRxHistory, + data: clientPersist.transferRxHistory, }, ]; - client.transferTxHistory = - clientsPersist.value[client.id].transferTxHistory; - client.transferRxHistory = - clientsPersist.value[client.id].transferRxHistory; - client.transferMax = Math.max( - ...client.transferTxHistory, - ...client.transferRxHistory + transferMax = Math.max( + ...clientPersist.transferTxHistory, + ...clientPersist.transferRxHistory ); - - client.transferTxSeries = - clientsPersist.value[client.id].transferTxSeries; - client.transferRxSeries = - clientsPersist.value[client.id].transferRxSeries; } - client.transferTxCurrent = - clientsPersist.value[client.id].transferTxCurrent; - client.transferRxCurrent = - clientsPersist.value[client.id].transferRxCurrent; - - client.hoverTx = clientsPersist.value[client.id].hoverTx; - client.hoverRx = clientsPersist.value[client.id].hoverRx; - - return client; + return { + ...client, + avatar, + transferTxHistory: clientPersist.transferTxHistory, + transferRxHistory: clientPersist.transferRxHistory, + transferMax, + transferTxSeries: clientPersist.transferTxSeries, + transferRxSeries: clientPersist.transferRxSeries, + transferTxCurrent: clientPersist.transferTxCurrent, + transferRxCurrent: clientPersist.transferRxCurrent, + hoverTx: clientPersist.hoverTx, + hoverRx: clientPersist.hoverRx, + }; }); } @@ -1427,7 +1433,6 @@ function login(e: Event) { }) .catch((err) => { // TODO: replace alert with actual ui error message - console.log(err); alert(err.message || err.toString()); }) .finally(() => { @@ -1458,7 +1463,7 @@ function createClient() { .catch((err) => alert(err.message || err.toString())) .finally(() => refresh().catch(console.error)); } -function deleteClient(client: Client | null) { +function deleteClient(client: WGClient | null) { if (client === null) { return; } @@ -1467,19 +1472,19 @@ function deleteClient(client: Client | null) { .catch((err) => alert(err.message || err.toString())) .finally(() => refresh().catch(console.error)); } -function enableClient(client: Client) { +function enableClient(client: WGClient) { api .enableClient({ clientId: client.id }) .catch((err) => alert(err.message || err.toString())) .finally(() => refresh().catch(console.error)); } -function disableClient(client: Client) { +function disableClient(client: WGClient) { api .disableClient({ clientId: client.id }) .catch((err) => alert(err.message || err.toString())) .finally(() => refresh().catch(console.error)); } -function updateClientName(client: Client, name: string) { +function updateClientName(client: WGClient, name: string | null) { if (name === null) { return; } @@ -1488,7 +1493,7 @@ function updateClientName(client: Client, name: string) { .catch((err) => alert(err.message || err.toString())) .finally(() => refresh().catch(console.error)); } -function updateClientAddress(client: Client, address: string | null) { +function updateClientAddress(client: WGClient, address: string | null) { if (address === null) { return; } @@ -1497,17 +1502,16 @@ function updateClientAddress(client: Client, address: string | null) { .catch((err) => alert(err.message || err.toString())) .finally(() => refresh().catch(console.error)); } -function restoreConfig(e) { +function restoreConfig(e: Event) { e.preventDefault(); - console.log(e.currentTarget); - const file = e.currentTarget.files.item(0); + const file = (e.currentTarget as HTMLInputElement).files?.item(0); if (file) { file .text() .then((content) => { api .restoreConfiguration(content) - .then((_result) => alert('The configuration was updated.')) + .then(() => alert('The configuration was updated.')) .catch((err) => alert(err.message || err.toString())) .finally(() => refresh().catch(console.error)); }) diff --git a/src/server/utils/WireGuard.ts b/src/server/utils/WireGuard.ts index 4f555d3f..54f37d24 100644 --- a/src/server/utils/WireGuard.ts +++ b/src/server/utils/WireGuard.ts @@ -370,6 +370,7 @@ Endpoint = ${WG_HOST}:${WG_CONFIG_PORT}`; async restoreConfiguration(config: string) { debug('Starting configuration restore process.'); + // TODO: sanitize config const _config = JSON.parse(config); await this.__saveConfig(_config); await this.__reloadConfig();