mirror of
https://github.com/vx3r/wg-gen-web.git
synced 2025-09-11 12:24:27 +00:00
organise backend code / frontend combobox / edit allowed ips
This commit is contained in:
vx3r
47
ui/package-lock.json
generated
47
ui/package-lock.json
generated
@ -1453,6 +1453,14 @@
|
||||
"tslib": "^1.9.0"
|
||||
}
|
||||
},
|
||||
"cidr-regex": {
|
||||
"version": "2.0.10",
|
||||
"resolved": "https://registry.npmjs.org/cidr-regex/-/cidr-regex-2.0.10.tgz",
|
||||
"integrity": "sha512-sB3ogMQXWvreNPbJUZMRApxuRYd+KoIo4RGQ81VatjmMW6WJPo+IJZ2846FGItr9VzKo5w7DXzijPLGtSd0N3Q==",
|
||||
"requires": {
|
||||
"ip-regex": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"cipher-base": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npm.taobao.org/cipher-base/download/cipher-base-1.0.4.tgz",
|
||||
@ -3553,14 +3561,12 @@
|
||||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
@ -3575,20 +3581,17 @@
|
||||
"code-point-at": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
@ -3705,8 +3708,7 @@
|
||||
"inherits": {
|
||||
"version": "2.0.4",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
@ -3718,7 +3720,6 @@
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"number-is-nan": "^1.0.0"
|
||||
}
|
||||
@ -3733,7 +3734,6 @@
|
||||
"version": "3.0.4",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
@ -3741,14 +3741,12 @@
|
||||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"minipass": {
|
||||
"version": "2.9.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safe-buffer": "^5.1.2",
|
||||
"yallist": "^3.0.0"
|
||||
@ -3767,7 +3765,6 @@
|
||||
"version": "0.5.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
}
|
||||
@ -3857,8 +3854,7 @@
|
||||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
@ -3870,7 +3866,6 @@
|
||||
"version": "1.4.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"wrappy": "1"
|
||||
}
|
||||
@ -3992,7 +3987,6 @@
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"code-point-at": "^1.0.0",
|
||||
"is-fullwidth-code-point": "^1.0.0",
|
||||
@ -4762,8 +4756,7 @@
|
||||
"ip-regex": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npm.taobao.org/ip-regex/download/ip-regex-2.1.0.tgz",
|
||||
"integrity": "sha1-+ni/XS5pE8kRzp+BnuUUa7bYROk=",
|
||||
"dev": true
|
||||
"integrity": "sha1-+ni/XS5pE8kRzp+BnuUUa7bYROk="
|
||||
},
|
||||
"ipaddr.js": {
|
||||
"version": "1.9.0",
|
||||
@ -4830,6 +4823,14 @@
|
||||
"integrity": "sha1-9+RrWWiQRW23Tn9ul2yzJz0G+qs=",
|
||||
"dev": true
|
||||
},
|
||||
"is-cidr": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/is-cidr/-/is-cidr-3.1.0.tgz",
|
||||
"integrity": "sha512-3kxTForpuj8O4iHn0ocsn1jxRm5VYm60GDghK6HXmpn4IyZOoRy9/GmdjFA2yEMqw91TB1/K3bFTuI7FlFNR1g==",
|
||||
"requires": {
|
||||
"cidr-regex": "^2.0.10"
|
||||
}
|
||||
},
|
||||
"is-color-stop": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npm.taobao.org/is-color-stop/download/is-color-stop-1.1.0.tgz",
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.19.2",
|
||||
"is-cidr": "^3.1.0",
|
||||
"moment": "^2.24.0",
|
||||
"vue": "^2.6.10",
|
||||
"vue-moment": "^4.1.0",
|
||||
|
||||
@ -4,6 +4,7 @@ import router from './router'
|
||||
import vuetify from './plugins/vuetify';
|
||||
import './plugins/axios';
|
||||
import './plugins/moment';
|
||||
import './plugins/cidr'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
|
||||
11
ui/src/plugins/cidr.js
Normal file
11
ui/src/plugins/cidr.js
Normal file
@ -0,0 +1,11 @@
|
||||
import Vue from 'vue'
|
||||
const isCidr = require('is-cidr');
|
||||
|
||||
const plugin = {
|
||||
install () {
|
||||
Vue.isCidr = isCidr;
|
||||
Vue.prototype.$isCidr = isCidr
|
||||
}
|
||||
};
|
||||
|
||||
Vue.use(plugin);
|
||||
@ -35,14 +35,26 @@
|
||||
]"
|
||||
required
|
||||
/>
|
||||
<v-text-field
|
||||
<v-combobox
|
||||
v-model="server.address"
|
||||
chips
|
||||
hint="Write IPv4 or IPv6 CIDR and hit enter"
|
||||
label="Server interface addresses"
|
||||
:rules="[
|
||||
v => !!v || 'Server interface address is required',
|
||||
]"
|
||||
required
|
||||
/>
|
||||
multiple
|
||||
dark
|
||||
>
|
||||
<template v-slot:selection="{ attrs, item, select, selected }">
|
||||
<v-chip
|
||||
v-bind="attrs"
|
||||
:input-value="selected"
|
||||
close
|
||||
@click="select"
|
||||
@click:close="server.address.splice(server.address.indexOf(item), 1)"
|
||||
>
|
||||
<strong>{{ item }}</strong>
|
||||
</v-chip>
|
||||
</template>
|
||||
</v-combobox>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<v-text-field
|
||||
@ -55,14 +67,6 @@
|
||||
label="Preshared key"
|
||||
disabled
|
||||
/>
|
||||
<v-text-field
|
||||
v-model="server.dns"
|
||||
label="DNS servers for clients"
|
||||
:rules="[
|
||||
v => !!v || 'DNS server is required',
|
||||
]"
|
||||
required
|
||||
/>
|
||||
<v-text-field
|
||||
v-model="server.listenPort"
|
||||
type="number"
|
||||
@ -72,6 +76,26 @@
|
||||
label="Listen port"
|
||||
required
|
||||
/>
|
||||
<v-combobox
|
||||
v-model="server.dns"
|
||||
chips
|
||||
hint="Write IPv4 or IPv6 address and hit enter"
|
||||
label="DNS servers for clients"
|
||||
multiple
|
||||
dark
|
||||
>
|
||||
<template v-slot:selection="{ attrs, item, select, selected }">
|
||||
<v-chip
|
||||
v-bind="attrs"
|
||||
:input-value="selected"
|
||||
close
|
||||
@click="select"
|
||||
@click:close="server.dns.splice(server.dns.indexOf(item), 1)"
|
||||
>
|
||||
<strong>{{ item }}</strong>
|
||||
</v-chip>
|
||||
</template>
|
||||
</v-combobox>
|
||||
</v-col>
|
||||
</div>
|
||||
|
||||
@ -99,7 +123,7 @@
|
||||
</v-list-item-content>
|
||||
<v-btn
|
||||
color="success"
|
||||
@click.stop="dialogAddClient = true"
|
||||
@click.stop="startAddClient"
|
||||
>
|
||||
Add new client
|
||||
<v-icon right dark>mdi-account-multiple-plus-outline</v-icon>
|
||||
@ -112,7 +136,7 @@
|
||||
cols="6"
|
||||
>
|
||||
<v-card
|
||||
color="#1F7087"
|
||||
:color="client.enable ? '#1F7087' : 'warning'"
|
||||
class="mx-auto"
|
||||
raised
|
||||
shaped
|
||||
@ -154,7 +178,7 @@
|
||||
</v-btn>
|
||||
<v-btn
|
||||
text
|
||||
@click.stop="dialogEditClient = true; clientToEdit = client"
|
||||
@click.stop="editClient(client.id)"
|
||||
>
|
||||
Edit
|
||||
<v-icon right dark>mdi-square-edit-outline</v-icon>
|
||||
@ -181,7 +205,7 @@
|
||||
v-on="on"
|
||||
color="success"
|
||||
v-model="client.enable"
|
||||
v-on:change="updateClient(client)"
|
||||
v-on:change="disableClient(client)"
|
||||
/>
|
||||
</template>
|
||||
<span> {{client.enable ? 'Disable' : 'Enable'}} this client</span>
|
||||
@ -195,6 +219,7 @@
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-dialog
|
||||
v-if="client"
|
||||
v-model="dialogAddClient"
|
||||
max-width="550"
|
||||
>
|
||||
@ -238,6 +263,27 @@
|
||||
persistent-hint
|
||||
required
|
||||
/>
|
||||
<v-combobox
|
||||
v-model="client.allowedIPs"
|
||||
chips
|
||||
hint="Write IPv4 or IPv6 CIDR and hit enter"
|
||||
label="Allowed IPs"
|
||||
multiple
|
||||
dark
|
||||
>
|
||||
<template v-slot:selection="{ attrs, item, select, selected }">
|
||||
<v-chip
|
||||
v-bind="attrs"
|
||||
:input-value="selected"
|
||||
close
|
||||
@click="select"
|
||||
@click:close="client.allowedIPs.splice(client.allowedIPs.indexOf(item), 1)"
|
||||
>
|
||||
<strong>{{ item }}</strong>
|
||||
</v-chip>
|
||||
</template>
|
||||
</v-combobox>
|
||||
|
||||
<v-switch
|
||||
v-model="client.enable"
|
||||
color="red"
|
||||
@ -253,7 +299,7 @@
|
||||
<v-btn
|
||||
:disabled="!valid"
|
||||
color="success"
|
||||
@click="addClient()"
|
||||
@click="addClient(client)"
|
||||
>
|
||||
Submit
|
||||
</v-btn>
|
||||
@ -267,7 +313,7 @@
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
<v-dialog
|
||||
v-if="clientToEdit"
|
||||
v-if="client"
|
||||
v-model="dialogEditClient"
|
||||
max-width="550"
|
||||
>
|
||||
@ -283,22 +329,42 @@
|
||||
v-model="valid"
|
||||
>
|
||||
<v-text-field
|
||||
v-model="clientToEdit.name"
|
||||
label="Client friendly name"
|
||||
v-model="client.name"
|
||||
label="Friendly name"
|
||||
:rules="[
|
||||
v => !!v || 'Client name is required',
|
||||
]"
|
||||
required
|
||||
/>
|
||||
<v-text-field
|
||||
v-model="clientToEdit.email"
|
||||
label="Client email"
|
||||
v-model="client.email"
|
||||
label="Email"
|
||||
:rules="[
|
||||
v => !!v || 'E-mail is required',
|
||||
v => /.+@.+\..+/.test(v) || 'E-mail must be valid',
|
||||
]"
|
||||
v => !!v || 'Email is required',
|
||||
v => /.+@.+\..+/.test(v) || 'Email must be valid',
|
||||
]"
|
||||
required
|
||||
/>
|
||||
<v-combobox
|
||||
v-model="client.allowedIPs"
|
||||
chips
|
||||
hint="Write IPv4 or IPv6 CIDR and hit enter"
|
||||
label="Allowed IPs"
|
||||
multiple
|
||||
dark
|
||||
>
|
||||
<template v-slot:selection="{ attrs, item, select, selected }">
|
||||
<v-chip
|
||||
v-bind="attrs"
|
||||
:input-value="selected"
|
||||
close
|
||||
@click="select"
|
||||
@click:close="client.allowedIPs.splice(client.allowedIPs.indexOf(item), 1)"
|
||||
>
|
||||
<strong>{{ item }}</strong>
|
||||
</v-chip>
|
||||
</template>
|
||||
</v-combobox>
|
||||
</v-form>
|
||||
</v-col>
|
||||
</v-row>
|
||||
@ -308,7 +374,7 @@
|
||||
<v-btn
|
||||
:disabled="!valid"
|
||||
color="success"
|
||||
@click="updateClient(clientToEdit)"
|
||||
@click="updateClient(client)"
|
||||
>
|
||||
Submit
|
||||
</v-btn>
|
||||
@ -361,22 +427,40 @@
|
||||
serverAddress: [],
|
||||
dialogAddClient: false,
|
||||
dialogEditClient: false,
|
||||
clientToEdit: null,
|
||||
client: {
|
||||
name: "",
|
||||
email: "",
|
||||
enable: true,
|
||||
allowedIPs: "0.0.0.0/0,::/0",
|
||||
address: "",
|
||||
}
|
||||
client: null,
|
||||
}),
|
||||
|
||||
methods: {
|
||||
startAddClient() {
|
||||
this.dialogAddClient = true;
|
||||
this.client = {
|
||||
name: "",
|
||||
email: "",
|
||||
enable: true,
|
||||
allowedIPs: ["0.0.0.0/0", "::/0"],
|
||||
address: "",
|
||||
}
|
||||
},
|
||||
editClient(id) {
|
||||
this.$get(`/client/${id}`).then((res) => {
|
||||
this.dialogEditClient = true;
|
||||
res.allowedIPs = res.allowedIPs.split(',');
|
||||
this.client = res
|
||||
}).catch((e) => {
|
||||
this.notify('error', e.response.status + ' ' + e.response.statusText);
|
||||
});
|
||||
},
|
||||
disableClient(client) {
|
||||
client.allowedIPs = client.allowedIPs.split(',');
|
||||
this.updateClient(client)
|
||||
},
|
||||
getData() {
|
||||
this.$get('/server').then((res) => {
|
||||
res.address = res.address.split(',');
|
||||
res.dns = res.dns.split(',');
|
||||
this.server = res;
|
||||
this.clientAddress = this.serverAddress = this.server.address.split(',')
|
||||
this.clientAddress = this.serverAddress = this.server.address
|
||||
}).catch((e) => {
|
||||
console.log(e)
|
||||
this.notify('error', e.response.status + ' ' + e.response.statusText);
|
||||
});
|
||||
|
||||
@ -390,6 +474,20 @@
|
||||
// convert int values
|
||||
this.server.listenPort = parseInt(this.server.listenPort, 10);
|
||||
this.server.persistentKeepalive = parseInt(this.server.persistentKeepalive, 10);
|
||||
// check server addresses
|
||||
if (this.server.address.length < 1) {
|
||||
this.notify('error', 'Please provide at least one valid CIDR address for server interface');
|
||||
return;
|
||||
}
|
||||
for (let i = 0; i < this.server.address.length; i++){
|
||||
if (this.$isCidr(this.server.address[i]) === 0) {
|
||||
this.notify('error', 'Invalid CIDR detected, please correct before submitting');
|
||||
return
|
||||
}
|
||||
}
|
||||
this.server.address = this.server.address.join(',');
|
||||
this.server.dns = this.server.dns.join(',');
|
||||
|
||||
this.$patch('/server', this.server).then((res) => {
|
||||
this.notify('success', "Server successfully updated");
|
||||
this.getData()
|
||||
@ -397,10 +495,23 @@
|
||||
this.notify('error', e.response.status + ' ' + e.response.statusText);
|
||||
});
|
||||
},
|
||||
addClient () {
|
||||
addClient(client) {
|
||||
if (client.allowedIPs.length < 1) {
|
||||
this.notify('error', 'Please provide at least one valid CIDR address for client allowed IPs');
|
||||
return;
|
||||
}
|
||||
for (let i = 0; i < client.allowedIPs.length; i++){
|
||||
if (this.$isCidr(client.allowedIPs[i]) === 0) {
|
||||
this.notify('error', 'Invalid CIDR detected, please correct before submitting');
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
this.dialogAddClient = false;
|
||||
this.client.address = this.clientAddress.join(',');
|
||||
this.$post('/client', this.client).then((res) => {
|
||||
client.address = this.clientAddress.join(',');
|
||||
client.allowedIPs = this.client.allowedIPs.join(',');
|
||||
|
||||
this.$post('/client', client).then((res) => {
|
||||
this.notify('success', "Client successfully added");
|
||||
this.getData()
|
||||
}).catch((e) => {
|
||||
@ -437,7 +548,20 @@
|
||||
}
|
||||
},
|
||||
updateClient(client) {
|
||||
if (client.allowedIPs.length < 1) {
|
||||
this.notify('error', 'Please provide at least one valid CIDR address for client allowed IPs');
|
||||
return;
|
||||
}
|
||||
for (let i = 0; i < client.allowedIPs.length; i++){
|
||||
if (this.$isCidr(client.allowedIPs[i]) === 0) {
|
||||
this.notify('error', 'Invalid CIDR detected, please correct before submitting');
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
this.dialogEditClient = false;
|
||||
client.allowedIPs = client.allowedIPs.join(',');
|
||||
|
||||
this.$patch(`/client/${client.id}`, client).then((res) => {
|
||||
this.notify('success', "Client successfully updated");
|
||||
this.getData()
|
||||
|
||||
Reference in New Issue
Block a user