mirror
/
wg-easy
mirror of https://github.com/wg-easy/wg-easy
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

reduce errors, improve typing

pull/1244/head
Bernd Storath 10 months ago
parent
6d0a45b968
commit
e2facd447e
2 changed files with 94 additions and 89 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 152
      src/app.vue
  2. 1
      src/server/utils/WireGuard.ts

152
src/app.vue
View File

@ -2,7 +2,7 @@
<div v-cloak class="container mx-auto max-w-3xl px-3 md:px-0 mt-4 xs:mt-6"> <div v-cloak class="container mx-auto max-w-3xl px-3 md:px-0 mt-4 xs:mt-6">
<div v-if="authenticated === true"> <div v-if="authenticated === true">
<div <div
class="flex flex-col-reverse xxs:flex-row flex-auto items-center items-end gap-3" class="flex flex-col-reverse xxs:flex-row flex-auto items-center gap-3"
> >
<h1 <h1
class="text-4xl dark:text-neutral-200 font-medium flex-grow self-start mb-4" class="text-4xl dark:text-neutral-200 font-medium flex-grow self-start mb-4"
@ -13,9 +13,7 @@
class="inline align-middle dark:bg mr-2" class="inline align-middle dark:bg mr-2"
/><span class="align-middle">WireGuard</span> /><span class="align-middle">WireGuard</span>
</h1> </h1>
<div <div class="flex items-center grow-0 gap-3 self-end xxs:self-center">
class="flex items-center grow-0 gap-3 items-end self-end xxs:self-center"
>
<!-- Dark / light theme --> <!-- Dark / light theme -->
<button <button
class="flex items-center justify-center w-8 h-8 rounded-full bg-gray-200 hover:bg-gray-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 transition" class="flex items-center justify-center w-8 h-8 rounded-full bg-gray-200 hover:bg-gray-300 dark:bg-neutral-700 dark:hover:bg-neutral-600 transition"
@ -246,17 +244,20 @@
v-if="uiChartType" v-if="uiChartType"
:class="`absolute z-0 bottom-0 left-0 right-0 h-6 ${uiChartType === 1 && 'line-chart'}`" :class="`absolute z-0 bottom-0 left-0 right-0 h-6 ${uiChartType === 1 && 'line-chart'}`"
> >
<ClientOnly>
<apexchart <apexchart
width="100%" width="100%"
height="100%" height="100%"
:options="chartOptionsTX" :options="chartOptionsTX"
:series="client.transferTxSeries" :series="client.transferTxSeries"
/> />
</ClientOnly>
</div> </div>
<div <div
v-if="uiChartType" v-if="uiChartType"
:class="`absolute z-0 top-0 left-0 right-0 h-6 ${uiChartType === 1 && 'line-chart'}`" :class="`absolute z-0 top-0 left-0 right-0 h-6 ${uiChartType === 1 && 'line-chart'}`"
> >
<ClientOnly>
<apexchart <apexchart
width="100%" width="100%"
height="100%" height="100%"
@ -264,8 +265,8 @@
:series="client.transferRxSeries" :series="client.transferRxSeries"
style="transform: scaleY(-1)" style="transform: scaleY(-1)"
/> />
</ClientOnly>
</div> </div>
<div <div
class="relative py-3 md:py-5 px-3 z-10 flex flex-col sm:flex-row justify-between gap-3" class="relative py-3 md:py-5 px-3 z-10 flex flex-col sm:flex-row justify-between gap-3"
> >
@ -348,12 +349,8 @@
@click=" @click="
clientEditName = client.name; clientEditName = client.name;
clientEditNameId = client.id; clientEditNameId = client.id;
setTimeout( nextTick(() =>
() => $refs['client-' + client.id + '-name'][0].select()
$refs[
'client-' + client.id + '-name'
][0].select(),
1
); );
" "
> >
@ -407,12 +404,10 @@
@click=" @click="
clientEditAddress = client.address; clientEditAddress = client.address;
clientEditAddressId = client.id; clientEditAddressId = client.id;
setTimeout( nextTick(() =>
() =>
$refs[ $refs[
'client-' + client.id + '-address' 'client-' + client.id + '-address'
][0].select(), ][0].select()
1
); );
" "
> >
@ -1202,22 +1197,27 @@ const authenticating = ref(false);
const password = ref<null | string>(null); const password = ref<null | string>(null);
const requiresPassword = ref<null | boolean>(null); const requiresPassword = ref<null | boolean>(null);
type LocalClient = WGClient & {
avatar?: string;
transferMax?: number;
} & Omit<ClientPersist, 'transferRxPrevious' | 'transferTxPrevious'>;
type ClientPersist = { type ClientPersist = {
transferRxHistory: number[]; transferRxHistory: number[];
transferRxPrevious: number; transferRxPrevious: number;
transferRxCurrent: number; transferRxCurrent: number;
transferRxSeries: { name: string; data: number[] }[]; transferRxSeries: { name: string; data: number[] }[];
hoverRx: unknown; hoverRx?: unknown;
transferTxHistory: number[]; transferTxHistory: number[];
transferTxPrevious: number; transferTxPrevious: number;
transferTxCurrent: number; transferTxCurrent: number;
transferTxSeries: { name: string; data: number[] }[]; transferTxSeries: { name: string; data: number[] }[];
hoverTx: unknown; hoverTx?: unknown;
}; };
const clients = ref<null | WGClient[]>(null); const clients = ref<null | LocalClient[]>(null);
const clientsPersist = ref<Record<string, ClientPersist>>({}); const clientsPersist = ref<Record<string, ClientPersist>>({});
const clientDelete = ref<null | Client>(null); const clientDelete = ref<null | WGClient>(null);
const clientCreate = ref<null | boolean>(null); const clientCreate = ref<null | boolean>(null);
const clientCreateName = ref<string>(''); const clientCreateName = ref<string>('');
const clientEditName = ref<null | string>(null); const clientEditName = ref<null | string>(null);
@ -1238,6 +1238,7 @@ const theme = useTheme();
const chartOptions = { const chartOptions = {
chart: { chart: {
type: false as string | boolean,
background: 'transparent', background: 'transparent',
stacked: false, stacked: false,
toolbar: { toolbar: {
@ -1254,6 +1255,7 @@ const chartOptions = {
colors: [], colors: [],
stroke: { stroke: {
curve: 'smooth', curve: 'smooth',
width: 0,
}, },
fill: { fill: {
type: 'gradient', type: 'gradient',
@ -1331,80 +1333,84 @@ async function refresh({ updateCharts = false } = {}) {
const _clients = await api.getClients(); const _clients = await api.getClients();
clients.value = _clients.map((client) => { clients.value = _clients.map((client) => {
let avatar = undefined;
if (client.name.includes('@') && client.name.includes('.')) { 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]) { if (!clientsPersist.value[client.id]) {
clientsPersist.value[client.id] = {}; clientsPersist.value[client.id] = {
clientsPersist.value[client.id].transferRxHistory = Array(50).fill(0); transferRxHistory: Array(50).fill(0),
clientsPersist.value[client.id].transferRxPrevious = client.transferRx; transferRxPrevious: client.transferRx ?? 0,
clientsPersist.value[client.id].transferTxHistory = Array(50).fill(0); transferTxHistory: Array(50).fill(0),
clientsPersist.value[client.id].transferTxPrevious = client.transferTx; transferTxPrevious: client.transferTx ?? 0,
transferRxCurrent: 0,
transferTxCurrent: 0,
transferRxSeries: [],
transferTxSeries: [],
};
} }
const clientPersist = clientsPersist.value[client.id];
// Debug // Debug
// client.transferRx = this.clientsPersist[client.id].transferRxPrevious + Math.random() * 1000; // client.transferRx = this.clientsPersist[client.id].transferRxPrevious + Math.random() * 1000;
// client.transferTx = this.clientsPersist[client.id].transferTxPrevious + Math.random() * 1000; // client.transferTx = this.clientsPersist[client.id].transferTxPrevious + Math.random() * 1000;
// client.latestHandshakeAt = new Date(); // client.latestHandshakeAt = new Date();
// this.requiresPassword = true; // this.requiresPassword = true;
clientsPersist.value[client.id].transferRxCurrent = clientPersist.transferRxCurrent =
client.transferRx - clientsPersist.value[client.id].transferRxPrevious; (client.transferRx ?? 0) - clientPersist.transferRxPrevious;
clientsPersist.value[client.id].transferRxPrevious = client.transferRx;
clientsPersist.value[client.id].transferTxCurrent = clientPersist.transferRxPrevious = client.transferRx ?? 0;
client.transferTx - clientsPersist.value[client.id].transferTxPrevious;
clientsPersist.value[client.id].transferTxPrevious = client.transferTx; clientPersist.transferTxCurrent =
(client.transferTx ?? 0) - clientPersist.transferTxPrevious;
clientPersist.transferTxPrevious = client.transferTx ?? 0;
let transferMax = undefined;
if (updateCharts) { if (updateCharts) {
clientsPersist.value[client.id].transferRxHistory.push( clientPersist.transferRxHistory.push(clientPersist.transferRxCurrent);
clientsPersist.value[client.id].transferRxCurrent clientPersist.transferRxHistory.shift();
);
clientsPersist.value[client.id].transferRxHistory.shift();
clientsPersist.value[client.id].transferTxHistory.push( clientPersist.transferTxHistory.push(clientPersist.transferTxCurrent);
clientsPersist.value[client.id].transferTxCurrent clientPersist.transferTxHistory.shift();
);
clientsPersist.value[client.id].transferTxHistory.shift();
clientsPersist.value[client.id].transferTxSeries = [ clientPersist.transferTxSeries = [
{ {
name: 'Tx', name: 'Tx',
data: clientsPersist.value[client.id].transferTxHistory, data: clientPersist.transferTxHistory,
}, },
]; ];
clientsPersist.value[client.id].transferRxSeries = [ clientPersist.transferRxSeries = [
{ {
name: 'Rx', name: 'Rx',
data: clientsPersist.value[client.id].transferRxHistory, data: clientPersist.transferRxHistory,
}, },
]; ];
client.transferTxHistory = transferMax = Math.max(
clientsPersist.value[client.id].transferTxHistory; ...clientPersist.transferTxHistory,
client.transferRxHistory = ...clientPersist.transferRxHistory
clientsPersist.value[client.id].transferRxHistory;
client.transferMax = Math.max(
...client.transferTxHistory,
...client.transferRxHistory
); );
client.transferTxSeries =
clientsPersist.value[client.id].transferTxSeries;
client.transferRxSeries =
clientsPersist.value[client.id].transferRxSeries;
} }
client.transferTxCurrent = return {
clientsPersist.value[client.id].transferTxCurrent; ...client,
client.transferRxCurrent = avatar,
clientsPersist.value[client.id].transferRxCurrent; transferTxHistory: clientPersist.transferTxHistory,
transferRxHistory: clientPersist.transferRxHistory,
client.hoverTx = clientsPersist.value[client.id].hoverTx; transferMax,
client.hoverRx = clientsPersist.value[client.id].hoverRx; transferTxSeries: clientPersist.transferTxSeries,
transferRxSeries: clientPersist.transferRxSeries,
return client; transferTxCurrent: clientPersist.transferTxCurrent,
transferRxCurrent: clientPersist.transferRxCurrent,
hoverTx: clientPersist.hoverTx,
hoverRx: clientPersist.hoverRx,
};
}); });
} }
@ -1427,7 +1433,6 @@ function login(e: Event) {
}) })
.catch((err) => { .catch((err) => {
// TODO: replace alert with actual ui error message // TODO: replace alert with actual ui error message
console.log(err);
alert(err.message || err.toString()); alert(err.message || err.toString());
}) })
.finally(() => { .finally(() => {
@ -1458,7 +1463,7 @@ function createClient() {
.catch((err) => alert(err.message || err.toString())) .catch((err) => alert(err.message || err.toString()))
.finally(() => refresh().catch(console.error)); .finally(() => refresh().catch(console.error));
} }
function deleteClient(client: Client | null) { function deleteClient(client: WGClient | null) {
if (client === null) { if (client === null) {
return; return;
} }
@ -1467,19 +1472,19 @@ function deleteClient(client: Client | null) {
.catch((err) => alert(err.message || err.toString())) .catch((err) => alert(err.message || err.toString()))
.finally(() => refresh().catch(console.error)); .finally(() => refresh().catch(console.error));
} }
function enableClient(client: Client) { function enableClient(client: WGClient) {
api api
.enableClient({ clientId: client.id }) .enableClient({ clientId: client.id })
.catch((err) => alert(err.message || err.toString())) .catch((err) => alert(err.message || err.toString()))
.finally(() => refresh().catch(console.error)); .finally(() => refresh().catch(console.error));
} }
function disableClient(client: Client) { function disableClient(client: WGClient) {
api api
.disableClient({ clientId: client.id }) .disableClient({ clientId: client.id })
.catch((err) => alert(err.message || err.toString())) .catch((err) => alert(err.message || err.toString()))
.finally(() => refresh().catch(console.error)); .finally(() => refresh().catch(console.error));
} }
function updateClientName(client: Client, name: string) { function updateClientName(client: WGClient, name: string | null) {
if (name === null) { if (name === null) {
return; return;
} }
@ -1488,7 +1493,7 @@ function updateClientName(client: Client, name: string) {
.catch((err) => alert(err.message || err.toString())) .catch((err) => alert(err.message || err.toString()))
.finally(() => refresh().catch(console.error)); .finally(() => refresh().catch(console.error));
} }
function updateClientAddress(client: Client, address: string | null) { function updateClientAddress(client: WGClient, address: string | null) {
if (address === null) { if (address === null) {
return; return;
} }
@ -1497,17 +1502,16 @@ function updateClientAddress(client: Client, address: string | null) {
.catch((err) => alert(err.message || err.toString())) .catch((err) => alert(err.message || err.toString()))
.finally(() => refresh().catch(console.error)); .finally(() => refresh().catch(console.error));
} }
function restoreConfig(e) { function restoreConfig(e: Event) {
e.preventDefault(); e.preventDefault();
console.log(e.currentTarget); const file = (e.currentTarget as HTMLInputElement).files?.item(0);
const file = e.currentTarget.files.item(0);
if (file) { if (file) {
file file
.text() .text()
.then((content) => { .then((content) => {
api api
.restoreConfiguration(content) .restoreConfiguration(content)
.then((_result) => alert('The configuration was updated.')) .then(() => alert('The configuration was updated.'))
.catch((err) => alert(err.message || err.toString())) .catch((err) => alert(err.message || err.toString()))
.finally(() => refresh().catch(console.error)); .finally(() => refresh().catch(console.error));
}) })

1
src/server/utils/WireGuard.ts
View File

@ -370,6 +370,7 @@ Endpoint = ${WG_HOST}:${WG_CONFIG_PORT}`;
async restoreConfiguration(config: string) { async restoreConfiguration(config: string) {
debug('Starting configuration restore process.'); debug('Starting configuration restore process.');
// TODO: sanitize config
const _config = JSON.parse(config); const _config = JSON.parse(config);
await this.__saveConfig(_config); await this.__saveConfig(_config);
await this.__reloadConfig(); await this.__reloadConfig();

Write Preview
Loading…
Cancel
Save