speatzle/nfsense
1
0
Fork 0
mirror of https://github.com/speatzle/nfsense.git synced 2025-05-10 18:38:22 +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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
client/src/App.vue
View file

@ -13,6 +13,7 @@ import IConfig from '~icons/grommet-icons/document-config';
import IStaticRoutes from '~icons/material-symbols/drive-folder-upload-outline-sharp';
import IDNSServer from '~icons/carbon/server-dns';
import ITimeServer from '~icons/carbon/server-time';
import IWireguard from '~icons/simple-icons/wireguard';
import IDHCPServer from '~icons/material-symbols/book-rounded';
enum NavState { Open, Reduced, Collapsed };
@ -30,6 +31,9 @@ const navRoutes = {
"/service/dhcpv4servers": { icon: IDHCPServer, caption: "DHCP v4" },
"/service/dnsservers": { icon: IDNSServer, caption: "DNS Server" },
"/service/ntpservers": { icon: ITimeServer, caption: "NTP Server" },
"/vpn/wireguardstatus": { icon: IWireguard, caption: "Wireguard Status" },
"/vpn/wireguardinterfaces": { icon: IWireguard, caption: "Wireguard Interfaces" },
"/vpn/wireguardpeers": { icon: IWireguard, caption: "Wireguard Peers" },
"/config/config": { icon: IConfig, caption: "Config" },
};

69
client/src/definitions.ts
View file

@ -19,7 +19,7 @@ const GetInterfaces: SearchProvider = async (o) => {
if (res.Error === null) {
console.debug("interfaces", res.Data.Interfaces);
let obj = {} as Options;
Object.keys(res.Data.Interfaces).forEach(function(key, index){
Object.keys(res.Data.Interfaces).forEach(function (key, index) {
obj[key] = {
display: key,
};
@ -36,7 +36,24 @@ const GetAddresses: SearchProvider = async (o) => {
if (res.Error === null) {
console.debug("addresses", res.Data.Addresses);
let obj = {} as Options;
Object.keys(res.Data.Addresses).forEach(function(key, index){
Object.keys(res.Data.Addresses).forEach(function (key, index) {
obj[key] = {
display: key,
};
});
return obj;
} else {
console.debug("error", res);
return {} as Options;
}
};
const GetPeers: SearchProvider = async (o) => {
let res = await apiCall("VPN.GetWireguardPeers", {});
if (res.Error === null) {
console.debug("peers", res.Data.WireguardPeers);
let obj = {} as Options;
Object.keys(res.Data.WireguardPeers).forEach(function (key, index) {
obj[key] = {
display: key,
};
@ -164,11 +181,11 @@ export const editTypes: { [key: string]: { [key: string]: any } } = {
fields: [
{ key: "interface", label: "Interface", as: "SingleSelect", props: { searchProvider: GetInterfaces } },
{ key: "pool", label: "Pool", as: "MultiSelect", props: { searchProvider: GetAddresses } },
{ key: "gateway_mode", label: "Gateway Mode", as: "PillBar", props: { options: { none: { display: 'None' }, interface: { display: 'Interface' }, specify: { display: 'Specify' }} } },
{ key: "gateway_mode", label: "Gateway Mode", as: "PillBar", props: { options: { none: { display: 'None' }, interface: { display: 'Interface' }, specify: { display: 'Specify' } } } },
{ key: "gateway", label: "Gateway", as: "SingleSelect", enabled: (values: any) => (values["gateway_mode"] == 'specify'), props: { searchProvider: GetAddresses } },
{ key: "dns_server_mode", label: "DNS Server Mode", as: "PillBar", props: { options: { none: { display: 'None' }, interface: { display: 'Interface' }, specify: { display: 'Specify' }} } },
{ key: "dns_server_mode", label: "DNS Server Mode", as: "PillBar", props: { options: { none: { display: 'None' }, interface: { display: 'Interface' }, specify: { display: 'Specify' } } } },
{ key: "dns_servers", label: "DNS Servers", as: "MultiSelect", enabled: (values: any) => (values["dns_server_mode"] == 'specify'), props: { searchProvider: GetAddresses } },
{ key: "ntp_server_mode", label: "NTP Server Mode", as: "PillBar", props: { options: { none: { display: 'None' }, interface: { display: 'Interface' }, specify: { display: 'Specify' }} } },
{ key: "ntp_server_mode", label: "NTP Server Mode", as: "PillBar", props: { options: { none: { display: 'None' }, interface: { display: 'Interface' }, specify: { display: 'Specify' } } } },
{ key: "ntp_servers", label: "NTP Servers", as: "MultiSelect", enabled: (values: any) => (values["ntp_server_mode"] == 'specify'), props: { searchProvider: GetAddresses } },
{ key: "default_lease_time", label: "Default Lease Time", as: "NumberBox" },
{ key: "max_lease_time", label: "Max Lease Time", as: "NumberBox" },
@ -208,4 +225,46 @@ export const editTypes: { [key: string]: { [key: string]: any } } = {
],
},
},
"vpn": {
name: "VPN",
"wireguardinterfaces": {
name: "WireguardInterface",
validationSchema: toFormValidator(
zod.object({
}),
),
sections: [
{
fields: [
{ key: "name", label: "Name", as: "TextBox", default: "placeholder" },
{ key: "public_key", label: "Public Key", as: "TextBox", default: "placeholder" },
{ key: "private_key", label: "Private Key", as: "TextBox", default: "placeholder" },
{ key: "listen_port", label: "Listen Port", as: "NumberBox" },
{ key: "peers", label: "Peers", as: "MultiSelect", props: { searchProvider: GetPeers } },
{ key: "comment", label: "Comment", as: "MultilineTextBox" },
],
},
],
},
"wireguardpeers": {
name: "WireguardPeer",
validationSchema: toFormValidator(
zod.object({
}),
),
sections: [
{
fields: [
{ key: "name", label: "Name", as: "TextBox", default: "placeholder" },
{ key: "public_key", label: "Public Key", as: "TextBox", default: "placeholder" },
{ key: "preshared_key", label: "Preshared Key", as: "TextBox", default: "placeholder" },
{ key: "allowed_ips", label: "Allowed IPs", as: "MultiSelect", props: { searchProvider: GetAddresses } },
{ key: "endpoint", label: "Endpoint", as: "TextBox", default: "placeholder" },
{ key: "persistent_keepalive", label: "Persistent Keepalive", as: "NumberBox" },
{ key: "comment", label: "Comment", as: "MultilineTextBox" },
],
},
],
},
},
};

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>