speatzle/nfsense
1
0
Fork 0
mirror of https://github.com/speatzle/nfsense.git synced 2025-09-13 15:19:08 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add Wireguard UI

Browse source
This commit is contained in:
Samuel Lorch 2023-05-06 21:15:03 +02:00
parent c43c95c51c
commit e2aad5ec97
5 changed files with 249 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

71
client/src/pages/vpn/WireguardInterfaces.vue Normal file
View file

@ -0,0 +1,71 @@
<script setup lang="ts">
import { apiCall } from "../../api";
import getPlugins from '../../plugins';
const p = getPlugins();
let interfaces = $ref({});
let loading = $ref(false);
let selection = $ref([] as number[]);
const columns = [
{heading: 'Name', path: 'name'},
{heading: 'Listen Port', path: 'listen_port'},
{heading: 'Peers', path: 'peers'},
{heading: 'Comment', path: 'comment'},
];
const displayData = $computed(() => {
let data: any;
data = [];
for (const name in interfaces) {
data.push({
name,
listen_port: interfaces[name].listen_port,
peers: interfaces[name].peers,
comment: interfaces[name].comment,
});
}
return data;
});
async function load(){
loading = true;
let res = await apiCall("VPN.GetWireguardInterfaces", {});
if (res.Error === null) {
console.debug("interfaces", res.Data.Interfaces);
interfaces = res.Data.Interfaces;
} else {
console.debug("error", res);
}
loading = false;
}
async function deleteInterface(){
let res = await apiCall("VPN.DeleteWireguardInterface", {name: displayData[selection[0]].name});
if (res.Error === null) {
console.debug("deleted interface");
} else {
console.debug("error", res);
}
load();
}
async function editInterface() {
p.router.push("/vpn/wireguardinterfaces/edit/" + displayData[selection[0]].name);
}
onMounted(async() => {
load();
});
</script>
<template>
<TableView title="Wireguard Interfaces" :columns="columns" :loading="loading" v-model:selection="selection" v-model:data="displayData" :table-props="{sort:true, sortSelf: true}">
<button @click="load">Refresh</button>
<router-link class="button" to="/vpn/wireguardinterfaces/edit">Create</router-link>
<button @click="editInterface" :disabled="selection.length != 1">Edit</button>
<button @click="deleteInterface" :disabled="selection.length != 1">Delete</button>
</TableView>
</template>

72
client/src/pages/vpn/WireguardPeers.vue Normal file
View file

@ -0,0 +1,72 @@
<script setup lang="ts">
import { apiCall } from "../../api";
import getPlugins from '../../plugins';
const p = getPlugins();
let peers = $ref({});
let loading = $ref(false);
let selection = $ref([] as number[]);
const columns = [
{heading: 'Name', path: 'name'},
{heading: 'Allowed IPs', path: 'allowed_ips'},
{heading: 'Endpoint', path: 'endpoint'},
{heading: 'Persistent Keepalive', path: 'persistent_keepalive'},
{heading: 'Comment', path: 'comment'},
];
const displayData = $computed(() => {
let data: any;
data = [];
for (const name in peers) {
data.push({
name,
allowed_ips: peers[name].allowed_ips,
endpoint: peers[name].endpoint,
persistent_keepalive: peers[name].persistent_keepalive,
comment: peers[name].comment,
});
}
return data;
});
async function load(){
loading = true;
let res = await apiCall("VPN.GetWireguardPeers", {});
if (res.Error === null) {
console.debug("peers", res.Data.WireguardPeers);
peers = res.Data.WireguardPeers;
} else {
console.debug("error", res);
}
loading = false;
}
async function deletePeer(){
let res = await apiCall("VPN.DeleteWireguardPeer", {name: displayData[selection[0]].name});
if (res.Error === null) {
console.debug("deleted peer");
} else {
console.debug("error", res);
}
load();
}
async function editPeer() {
p.router.push("/vpn/wireguardpeers/edit/" + displayData[selection[0]].name);
}
onMounted(async() => {
load();
});
</script>
<template>
<TableView title="Peers" :columns="columns" :loading="loading" v-model:selection="selection" v-model:data="displayData" :table-props="{sort:true, sortSelf: true}">
<button @click="load">Refresh</button>
<router-link class="button" to="/vpn/wireguardpeers/edit">Create</router-link>
<button @click="editPeer" :disabled="selection.length != 1">Edit</button>
<button @click="deletePeer" :disabled="selection.length != 1">Delete</button>
</TableView>
</template>

38
client/src/pages/vpn/WireguardStatus.vue Normal file
View file

@ -0,0 +1,38 @@
<script setup lang="ts">
import { apiCall } from "../../api";
let status = $ref("");
let loading = $ref(false);
async function load() {
loading = true;
let res = await apiCall("VPN.GetWireguardStatus", {});
if (res.Error === null) {
console.debug("status", res.Data.Status);
status = res.Data.Status;
} else {
console.debug("error", res);
}
loading = false;
}
onMounted(async () => {
load();
});
</script>
<template>
<div style="overflow-y: auto;">
<PageHeader title="Wireguard Status">
</PageHeader>
<div v-if="!loading" v-for="(line, index) in status.split('\n')" :key="index">
<p>{{ line }}</p>
</div>
<div v-else>
Loading...
</div>
</div>
</template>
<style scoped></style>