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

Add Header component 

+ some component updates
pull/937/head
Sergei Birukov 2 years ago
parent
dc7540f4a1
commit
e33cba1803
8 changed files with 170 additions and 151 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. 112
      webui/src/App.vue
  2. 26
      webui/src/components/ClientAddress.vue
  3. 29
      webui/src/components/ClientControls.vue
  4. 40
      webui/src/components/ClientNewButton.vue
  5. 31
      webui/src/components/Header.vue
  6. 10
      webui/src/components/LoadingSpinner.vue
  7. 5
      webui/src/services/api.js
  8. 68
      webui/src/store/store.js

112
webui/src/App.vue
View File

@ -2,24 +2,18 @@
<main> <main>
<div v-cloak class="container mx-auto max-w-3xl px-5 md:px-0"> <div v-cloak class="container mx-auto max-w-3xl px-5 md:px-0">
<div v-if="authenticated === true"> <div v-if="authenticated === true">
<span <Header />
v-if="requiresPassword"
class="text-sm text-gray-400 dark:text-neutral-400 mb-10 mr-2 mt-3 cursor-pointer hover:underline float-right"
@click="logout"
>
Logout
<IconLogout />
</span>
<h1 class="text-4xl dark:text-neutral-200 font-medium mt-2 mb-2">
<img src="./assets/img/logo.png" width="32" class="inline align-middle dark:bg" />
<span class="align-middle">WireGuard</span>
</h1>
<h2 class="text-sm text-gray-400 dark:text-neutral-400 mb-10"></h2>
<UpdateNotification :latest-release="latestRelease" :current-release="currentRelease" /> <UpdateNotification :latest-release="latestRelease" :current-release="currentRelease" />
<div class="shadow-md rounded-lg bg-white dark:bg-neutral-700 overflow-hidden"> <div class="shadow-md rounded-lg bg-white dark:bg-neutral-700 overflow-hidden">
<ClientNewButton @create-new-client="handleNewClient" /> <div class="flex flex-row flex-auto items-center p-3 px-5 border-b-2 border-gray-100 dark:border-neutral-600">
<div class="flex-grow">
<p class="text-2xl font-medium dark:text-neutral-200">Clients</p>
</div>
<div class="flex-shrink-0">
<ClientNewButton />
</div>
</div>
<div v-if="clients && clients.length > 0"> <div v-if="clients && clients.length > 0">
<!-- Client --> <!-- Client -->
@ -30,13 +24,7 @@
<div v-if="clients && clients.length === 0"> <div v-if="clients && clients.length === 0">
<p class="text-center m-10 text-gray-400 dark:text-neutral-400 text-sm"> <p class="text-center m-10 text-gray-400 dark:text-neutral-400 text-sm">
There are no clients yet.<br /><br /> There are no clients yet.<br /><br />
<button <ClientNewButton />
class="bg-red-800 hover:bg-red-700 text-white border-2 border-none py-2 px-4 rounded inline-flex items-center transition"
@click="handleNewClient()"
>
<IconNew class="w-4 mr-2" />
<span class="text-sm">New Client</span>
</button>
</p> </p>
</div> </div>
<div v-if="clients === null" class="text-gray-200 dark:text-red-300 p-5"> <div v-if="clients === null" class="text-gray-200 dark:text-red-300 p-5">
@ -64,7 +52,7 @@
<Auth /> <Auth />
</div> </div>
<div v-if="authenticated === null" class="text-gray-300 dark:text-red-300 pt-24 pb-12"> <div v-if="authenticated === null">
<LoadingSpinner /> <LoadingSpinner />
</div> </div>
</div> </div>
@ -74,19 +62,17 @@
</template> </template>
<script setup> <script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'; import { ref, onBeforeUnmount, onBeforeMount } from 'vue';
import sha256 from 'crypto-js/sha256';
import Auth from '@/components/Auth.vue'; import Auth from '@/components/Auth.vue';
import UpdateNotification from '@/components/UpdateNotification.vue'; import UpdateNotification from '@/components/UpdateNotification.vue';
import ClientNewButton from '@/components/ClientNewButton.vue'; import ClientNewButton from '@/components/ClientNewButton.vue';
import IconLogout from '@/components/icons/IconLogout.vue';
import IconNew from '@/components/icons/IconNew.vue';
import LoadingSpinner from '@/components/LoadingSpinner.vue'; import LoadingSpinner from '@/components/LoadingSpinner.vue';
import Footer from '@/components/Footer.vue'; import Footer from '@/components/Footer.vue';
import ModalQRCode from '@/components/ModalQRCode.vue'; import ModalQRCode from '@/components/ModalQRCode.vue';
import ModalCreateClient from '@/components/ModalCreateClient.vue'; import ModalCreateClient from '@/components/ModalCreateClient.vue';
import ModalDeleteClient from '@/components/ModalDeleteClient.vue'; import ModalDeleteClient from '@/components/ModalDeleteClient.vue';
import Header from '@/components/Header.vue';
import API from '@/services/api'; import API from '@/services/api';
import Client from '@/components/Client.vue'; import Client from '@/components/Client.vue';
@ -97,9 +83,7 @@ import { storeToRefs } from 'pinia';
const store = useStore(); const store = useStore();
const { authenticated, requiresPassword } = storeToRefs(store); const { authenticated, requiresPassword } = storeToRefs(store);
const { clients, clientsPersist, clientCreateShowModal, clientToDelete, clientCreateName, qrcode } = storeToRefs(store); const { clients, clientCreateShowModal, clientToDelete, clientCreateName, qrcode } = storeToRefs(store);
const logout = store.logout;
const currentRelease = ref(null); const currentRelease = ref(null);
const latestRelease = ref(null); const latestRelease = ref(null);
@ -108,32 +92,28 @@ const refreshInterval = ref(null);
const api = new API(); const api = new API();
onMounted(() => { const refresh = store.refresh;
onBeforeMount(() => {
api api
.getSession() .getSession()
.then((session) => { .then((session) => {
authenticated.value = session.authenticated; authenticated.value = session.authenticated;
// authenticated.value = false; //debug // authenticated.value = false; //debug
requiresPassword.value = session.requiresPassword; requiresPassword.value = session.requiresPassword;
refresh();
refreshInterval.value = setInterval(refresh, 1000); refreshInterval.value = setInterval(refresh, 1000);
}) })
.catch((err) => { .catch((err) => {
console.log(err.message || err.toString()); console.log(err.message || err.toString());
}); });
getRelease();
}); });
onBeforeUnmount(() => { onBeforeUnmount(() => {
clearInterval(refreshInterval.value); clearInterval(refreshInterval.value);
}); });
getRelease();
function handleNewClient() {
clientCreateShowModal.value = true;
clientCreateName.value = '';
}
async function getRelease() { async function getRelease() {
try { try {
const currentReleaseData = await api.getRelease(); const currentReleaseData = await api.getRelease();
@ -162,58 +142,4 @@ async function getRelease() {
console.log('Something went wrong', error); console.log('Something went wrong', error);
} }
} }
async function refresh({ updateCharts = false } = {}) {
if (!authenticated.value) return;
try {
const clientsData = await api.getClients();
clients.value = clientsData.map((client) => {
if (client.name.includes('@') && client.name.includes('.')) {
client.avatar = `https://www.gravatar.com/avatar/${sha256(client.name)}?d=blank`;
}
if (!clientsPersist[client.id]) {
clientsPersist[client.id] = {};
clientsPersist[client.id].transferRxHistory = Array(50).fill(0);
clientsPersist[client.id].transferRxPrevious = client.transferRx;
clientsPersist[client.id].transferTxHistory = Array(50).fill(0);
clientsPersist[client.id].transferTxPrevious = client.transferTx;
}
// Debug
client.transferRx = clientsPersist[client.id].transferRxPrevious + Math.random() * 1000;
client.transferTx = clientsPersist[client.id].transferTxPrevious + Math.random() * 1000;
client.latestHandshakeAt = new Date('2024-03-20');
updateCharts = true; // DEV TODO: Update. Get from settings
if (updateCharts) {
clientsPersist[client.id].transferRxCurrent = client.transferRx - clientsPersist[client.id].transferRxPrevious;
clientsPersist[client.id].transferRxPrevious = client.transferRx;
clientsPersist[client.id].transferTxCurrent = client.transferTx - clientsPersist[client.id].transferTxPrevious;
clientsPersist[client.id].transferTxPrevious = client.transferTx;
clientsPersist[client.id].transferRxHistory.push(clientsPersist[client.id].transferRxCurrent);
clientsPersist[client.id].transferRxHistory.shift();
clientsPersist[client.id].transferTxHistory.push(clientsPersist[client.id].transferTxCurrent);
clientsPersist[client.id].transferTxHistory.shift();
}
client.transferTxCurrent = clientsPersist[client.id].transferTxCurrent;
client.transferRxCurrent = clientsPersist[client.id].transferRxCurrent;
client.transferTxHistory = clientsPersist[client.id].transferTxHistory;
client.transferRxHistory = clientsPersist[client.id].transferRxHistory;
client.transferMax = Math.max(...client.transferTxHistory, ...client.transferRxHistory);
client.hoverTx = clientsPersist[client.id].hoverTx;
client.hoverRx = clientsPersist[client.id].hoverRx;
return client;
});
} catch (error) {
console.log('Something went wrong', error);
}
}
</script> </script>

26
webui/src/components/ClientAddress.vue
View File

@ -2,11 +2,25 @@
<template> <template>
<span class="group block md:inline-block pb-1 md:pb-0"> <span class="group block md:inline-block pb-1 md:pb-0">
<!-- Show --> <!-- Show -->
<input v-show="editAddressId === client.id" v-model="editAddress" @keyup.enter="updateAddress" @keyup.escape="cancelEdit" :test="'client-' + client.id + '-address'" :ref="'client-' + client.id + '-address'" class="rounded border-2 dark:bg-neutral-700 border-gray-100 dark:border-neutral-600 focus:border-gray-200 dark:focus:border-neutral-500 outline-none w-20 text-black dark:text-neutral-300 dark:placeholder:text-neutral-500" /> <input
<span v-show="editAddressId !== client.id" class="inline-block border-t-2 border-b-2 border-transparent">{{ client.address }}</span> v-show="editAddressId === client.id"
:ref="'client-' + client.id + '-address'"
v-model="editAddress"
:test="'client-' + client.id + '-address'"
class="rounded border-2 dark:bg-neutral-700 border-gray-100 dark:border-neutral-600 focus:border-gray-200 dark:focus:border-neutral-500 outline-none w-20 text-black dark:text-neutral-300 dark:placeholder:text-neutral-500"
@keyup.enter="updateAddress"
@keyup.escape="cancelEdit"
/>
<span v-show="editAddressId !== client.id" class="inline-block border-t-2 border-b-2 border-transparent">{{
client.address
}}</span>
<!-- Edit --> <!-- Edit -->
<span v-show="editAddressId !== client.id" @click="edit" class="cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity"> <span
v-show="editAddressId !== client.id"
class="cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity"
@click="edit"
>
<IconEdit /> <IconEdit />
</span> </span>
</span> </span>
@ -16,9 +30,6 @@
import { ref, nextTick } from 'vue'; import { ref, nextTick } from 'vue';
import IconEdit from './icons/IconEdit.vue'; import IconEdit from './icons/IconEdit.vue';
const clientEditAddress = ref(null);
const clientEditAddressId = ref(null);
const props = defineProps(['client']); const props = defineProps(['client']);
const editAddress = ref(null); const editAddress = ref(null);
const editAddressId = ref(null); const editAddressId = ref(null);
@ -26,7 +37,7 @@ const editAddressId = ref(null);
const emit = defineEmits(['inFocus', 'submit', 'update-address']); const emit = defineEmits(['inFocus', 'submit', 'update-address']);
const updateAddress = () => { const updateAddress = () => {
console.log('emit') console.log('emit');
emit('update-address', props.client, editAddress.value); emit('update-address', props.client, editAddress.value);
editAddress.value = null; editAddress.value = null;
@ -48,5 +59,4 @@ const edit = () => {
} }
}); });
}; };
</script> </script>

29
webui/src/components/ClientControls.vue
View File

@ -5,7 +5,7 @@
v-if="client.enabled === true" v-if="client.enabled === true"
title="Disable Client" title="Disable Client"
class="inline-block align-middle rounded-full w-10 h-6 mr-1 bg-red-800 cursor-pointer hover:bg-red-700 transition-all" class="inline-block align-middle rounded-full w-10 h-6 mr-1 bg-red-800 cursor-pointer hover:bg-red-700 transition-all"
@click="disableClient(client)" @click="disableClient"
> >
<div class="rounded-full w-4 h-4 m-1 ml-5 bg-white"></div> <div class="rounded-full w-4 h-4 m-1 ml-5 bg-white"></div>
</div> </div>
@ -13,7 +13,7 @@
v-if="client.enabled === false" v-if="client.enabled === false"
title="Enable Client" title="Enable Client"
class="inline-block align-middle rounded-full w-10 h-6 mr-1 bg-gray-200 dark:bg-neutral-400 cursor-pointer hover:bg-gray-300 dark:hover:bg-neutral-500 transition-all" class="inline-block align-middle rounded-full w-10 h-6 mr-1 bg-gray-200 dark:bg-neutral-400 cursor-pointer hover:bg-gray-300 dark:hover:bg-neutral-500 transition-all"
@click="enableClient(client)" @click="enableClient"
> >
<div class="rounded-full w-4 h-4 m-1 bg-white"></div> <div class="rounded-full w-4 h-4 m-1 bg-white"></div>
</div> </div>
@ -22,7 +22,7 @@
<button <button
class="align-middle bg-gray-100 dark:bg-neutral-600 dark:text-neutral-300 hover:bg-red-800 dark:hover:bg-red-800 hover:text-white dark:hover:text-white p-2 rounded transition" class="align-middle bg-gray-100 dark:bg-neutral-600 dark:text-neutral-300 hover:bg-red-800 dark:hover:bg-red-800 hover:text-white dark:hover:text-white p-2 rounded transition"
title="Show QR Code" title="Show QR Code"
@click="getQrCode(client)" @click="getQrCode"
> >
<IconQRCode /> <IconQRCode />
</button> </button>
@ -41,7 +41,7 @@
<button <button
class="align-middle bg-gray-100 dark:bg-neutral-600 dark:text-neutral-300 hover:bg-red-800 dark:hover:bg-red-800 hover:text-white dark:hover:text-white p-2 rounded transition" class="align-middle bg-gray-100 dark:bg-neutral-600 dark:text-neutral-300 hover:bg-red-800 dark:hover:bg-red-800 hover:text-white dark:hover:text-white p-2 rounded transition"
title="Delete Client" title="Delete Client"
@click="handleDeleteClick()" @click="handleDeleteClick"
> >
<IconDelete /> <IconDelete />
</button> </button>
@ -65,19 +65,24 @@ const { qrcode, clientToDelete } = storeToRefs(store);
const props = defineProps({ const props = defineProps({
client: {}, client: {},
}); });
const refresh = store.refresh;
function enableClient(client) { function enableClient() {
api.enableClient({ clientId: client.id }).catch((err) => alert(err.message || err.toString())); api
// .finally(() => refresh().catch(console.error)); .enableClient({ clientId: props.client.id })
.catch((err) => alert(err.message || err.toString()))
.finally(() => refresh().catch(console.error));
} }
function disableClient(client) { function disableClient() {
api.disableClient({ clientId: client.id }).catch((err) => alert(err.message || err.toString())); api
// .finally(() => refresh().catch(console.error)); .disableClient({ clientId: props.client.id })
.catch((err) => alert(err.message || err.toString()))
.finally(() => refresh().catch(console.error));
} }
async function getQrCode(client) { async function getQrCode() {
qrcode.value = `${api.SERVER}/api/wireguard/client/${client.id}/qrcode.svg`; qrcode.value = await api.getQrCode({ clientId: props.client.id });
} }
function handleDeleteClick() { function handleDeleteClick() {
clientToDelete.value = props.client; clientToDelete.value = props.client;

40
webui/src/components/ClientNewButton.vue
View File

@ -1,32 +1,26 @@
<!-- ClientNewButton.vue --> <!-- ClientNewButton.vue -->
<template> <template>
<div <div>
class="flex flex-row flex-auto items-center p-3 px-5 border-b-2 border-gray-100 dark:border-neutral-600" <button
> class="hover:bg-red-800 hover:border-red-800 hover:text-white text-gray-700 dark:text-neutral-200 border-2 border-gray-100 dark:border-neutral-600 py-2 px-4 rounded inline-flex items-center transition"
<div class="flex-grow"> @click="handleNewClient()"
<p class="text-2xl font-medium dark:text-neutral-200">Clients</p> >
</div> <IconNew class="w-4 mr-2" />
<div class="flex-shrink-0"> <span class="text-sm">New</span>
<button </button>
@click="createNewClient"
class="hover:bg-red-800 hover:border-red-800 hover:text-white text-gray-700 dark:text-neutral-200 border-2 border-gray-100 dark:border-neutral-600 py-2 px-4 rounded inline-flex items-center transition"
>
<IconNew class="w-4 mr-2" />
<span class="text-sm">New</span>
</button>
</div>
</div> </div>
</template> </template>
<script> <script setup>
import { storeToRefs } from 'pinia';
import { useStore } from '@/store/store';
import IconNew from './icons/IconNew.vue'; import IconNew from './icons/IconNew.vue';
export default { const store = useStore();
methods: { const { clientCreateShowModal, clientCreateName } = storeToRefs(store);
createNewClient() {
this.$emit('create-new-client'); const handleNewClient = () => {
}, clientCreateShowModal.value = true;
}, clientCreateName.value = '';
components: { IconNew },
}; };
</script> </script>

31
webui/src/components/Header.vue
View File

@ -0,0 +1,31 @@
<template>
<div>
<span
v-if="requiresPassword"
class="text-sm text-gray-400 dark:text-neutral-400 mb-10 mr-2 mt-3 cursor-pointer hover:underline float-right"
@click="logout"
>
Logout
<IconLogout />
</span>
<h1 class="text-4xl dark:text-neutral-200 font-medium mt-2 mb-2">
<img src="@/assets/img/logo.png" width="32" class="inline align-middle dark:bg" />
<span class="align-middle">WireGuard</span>
</h1>
<h2 class="text-sm text-gray-400 dark:text-neutral-400 mb-10"></h2>
</div>
</template>
<script setup>
import IconLogout from './icons/IconLogout.vue';
import { useStore } from '@/store/store';
import { storeToRefs } from 'pinia';
const store = useStore();
const { requiresPassword } = storeToRefs(store);
const logout = store.logout;
</script>
<style lang="scss" scoped></style>

10
webui/src/components/LoadingSpinner.vue
View File

@ -1,3 +1,9 @@
<template>
<div class="text-gray-300 dark:text-red-300 pt-24 pb-12">
<IconSpinnerVue class="w-5 animate-spin mx-auto" />
</div>
</template>
<script> <script>
import IconSpinnerVue from './icons/IconSpinner.vue'; import IconSpinnerVue from './icons/IconSpinner.vue';
@ -5,7 +11,3 @@ export default {
components: { IconSpinnerVue }, components: { IconSpinnerVue },
}; };
</script> </script>
<template>
<IconSpinnerVue class="w-5 animate-spin mx-auto" />
</template>

5
webui/src/services/api.js
View File

@ -114,9 +114,6 @@ export default class API {
} }
async getQrCode({ clientId }) { async getQrCode({ clientId }) {
return this.call({ return `${this.SERVER}/api/wireguard/client/${clientId}/qrcode.svg`;
method: 'get',
path: `/wireguard/client/${clientId}/qrcode.svg`,
});
} }
} }

68
webui/src/store/store.js
View File

@ -1,5 +1,6 @@
import API from '@/services/api'; import API from '@/services/api';
import { ref, reactive } from 'vue'; import { ref, reactive } from 'vue';
import sha256 from 'crypto-js/sha256';
import { defineStore } from 'pinia'; import { defineStore } from 'pinia';
@ -33,7 +34,7 @@ export const useStore = defineStore('store', () => {
const session = await api.getSession(); const session = await api.getSession();
authenticated.value = session.authenticated; authenticated.value = session.authenticated;
requiresPassword.value = session.requiresPassword; requiresPassword.value = session.requiresPassword;
// return this.refresh(); return this.refresh();
}) })
.catch((err) => { .catch((err) => {
console.log(err.message || err.toString()); console.log(err.message || err.toString());
@ -64,9 +65,7 @@ export const useStore = defineStore('store', () => {
api api
.createClient({ name: clientCreateName.value }) .createClient({ name: clientCreateName.value })
.catch((err) => alert(err.message || err.toString())) .catch((err) => alert(err.message || err.toString()))
.finally .finally(() => refresh().catch(console.error));
// () => refresh().catch(console.error)
();
clientCreateShowModal.value = null; clientCreateShowModal.value = null;
} }
@ -75,13 +74,67 @@ export const useStore = defineStore('store', () => {
api api
.deleteClient({ clientId: client.id }) .deleteClient({ clientId: client.id })
.catch((err) => alert(err.message || err.toString())) .catch((err) => alert(err.message || err.toString()))
.finally .finally(() => refresh().catch(console.error));
// () => refresh().catch(console.error)
();
clientToDelete.value = null; clientToDelete.value = null;
} }
async function refresh({ updateCharts = false } = {}) {
if (!authenticated.value) return;
try {
const clientsData = await api.getClients();
clients.value = clientsData.map((client) => {
if (client.name.includes('@') && client.name.includes('.')) {
client.avatar = `https://www.gravatar.com/avatar/${sha256(client.name)}?d=blank`;
}
if (!clientsPersist[client.id]) {
clientsPersist[client.id] = {};
clientsPersist[client.id].transferRxHistory = Array(50).fill(0);
clientsPersist[client.id].transferRxPrevious = client.transferRx;
clientsPersist[client.id].transferTxHistory = Array(50).fill(0);
clientsPersist[client.id].transferTxPrevious = client.transferTx;
}
// Debug
client.transferRx = clientsPersist[client.id].transferRxPrevious + Math.random() * 1000;
client.transferTx = clientsPersist[client.id].transferTxPrevious + Math.random() * 1000;
client.latestHandshakeAt = new Date('2024-03-20');
updateCharts = true; // DEV TODO: Update. Get from settings
if (updateCharts) {
clientsPersist[client.id].transferRxCurrent =
client.transferRx - clientsPersist[client.id].transferRxPrevious;
clientsPersist[client.id].transferRxPrevious = client.transferRx;
clientsPersist[client.id].transferTxCurrent =
client.transferTx - clientsPersist[client.id].transferTxPrevious;
clientsPersist[client.id].transferTxPrevious = client.transferTx;
clientsPersist[client.id].transferRxHistory.push(clientsPersist[client.id].transferRxCurrent);
clientsPersist[client.id].transferRxHistory.shift();
clientsPersist[client.id].transferTxHistory.push(clientsPersist[client.id].transferTxCurrent);
clientsPersist[client.id].transferTxHistory.shift();
}
client.transferTxCurrent = clientsPersist[client.id].transferTxCurrent;
client.transferRxCurrent = clientsPersist[client.id].transferRxCurrent;
client.transferTxHistory = clientsPersist[client.id].transferTxHistory;
client.transferRxHistory = clientsPersist[client.id].transferRxHistory;
client.transferMax = Math.max(...client.transferTxHistory, ...client.transferRxHistory);
client.hoverTx = clientsPersist[client.id].hoverTx;
client.hoverRx = clientsPersist[client.id].hoverRx;
return client;
});
} catch (error) {
console.log('Something went wrong', error);
}
}
return { return {
authenticated, authenticated,
authenticating, authenticating,
@ -97,5 +150,6 @@ export const useStore = defineStore('store', () => {
logout, logout,
createClient, createClient,
deleteClient, deleteClient,
refresh,
}; };
}); });

Write Preview
Loading…
Cancel
Save