mirror of
https://github.com/vx3r/wg-gen-web.git
synced 2025-09-11 12:24:27 +00:00
Initial commit
This commit is contained in:
vx3r
2
ui/.browserslistrc
Normal file
2
ui/.browserslistrc
Normal file
@ -0,0 +1,2 @@
|
||||
> 1%
|
||||
last 2 versions
|
||||
19
ui/README.md
Normal file
19
ui/README.md
Normal file
@ -0,0 +1,19 @@
|
||||
# ui
|
||||
|
||||
## Project setup
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
9622
ui/package-lock.json
generated
Normal file
9622
ui/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
27
ui/package.json
Normal file
27
ui/package.json
Normal file
@ -0,0 +1,27 @@
|
||||
{
|
||||
"name": "ui",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.19.2",
|
||||
"moment": "^2.24.0",
|
||||
"vue": "^2.6.10",
|
||||
"vue-moment": "^4.1.0",
|
||||
"vue-plugin-axios": "^1.0.14",
|
||||
"vue-router": "^3.1.3",
|
||||
"vuetify": "^2.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-router": "^4.1.0",
|
||||
"@vue/cli-service": "^4.1.0",
|
||||
"sass": "^1.19.0",
|
||||
"sass-loader": "^8.0.0",
|
||||
"vue-cli-plugin-vuetify": "^2.0.3",
|
||||
"vue-template-compiler": "^2.6.10",
|
||||
"vuetify-loader": "^1.3.0"
|
||||
}
|
||||
}
|
||||
BIN
ui/public/favicon.ico
Normal file
BIN
ui/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
19
ui/public/index.html
Normal file
19
ui/public/index.html
Normal file
@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title>ui</title>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but ui doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
33
ui/src/App.vue
Normal file
33
ui/src/App.vue
Normal file
@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<v-app id="inspire">
|
||||
|
||||
<v-app-bar app>
|
||||
<v-toolbar-title>Wg Gen Web</v-toolbar-title>
|
||||
</v-app-bar>
|
||||
|
||||
<v-content>
|
||||
<v-container>
|
||||
<router-view />
|
||||
</v-container>
|
||||
</v-content>
|
||||
|
||||
<v-footer app>
|
||||
<span>Copyright <a class="pr-1 pl-1" href="http://www.wtfpl.net/" target="_blank">WTFPL</a> © {{ new Date().getFullYear() }} Created with</span><v-icon class="pr-1 pl-1">mdi-heart</v-icon><span>by</span><a class="pr-1 pl-1" href="mailto:vx3r@127-0-0-1.fr">vx3r</a>
|
||||
</v-footer>
|
||||
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'App',
|
||||
|
||||
data: () => ({
|
||||
//
|
||||
}),
|
||||
|
||||
created () {
|
||||
this.$vuetify.theme.dark = true
|
||||
},
|
||||
};
|
||||
</script>
|
||||
BIN
ui/src/assets/logo.png
Normal file
BIN
ui/src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
1
ui/src/assets/logo.svg
Normal file
1
ui/src/assets/logo.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
|
||||
|
After Width: | Height: | Size: 539 B |
14
ui/src/main.js
Normal file
14
ui/src/main.js
Normal file
@ -0,0 +1,14 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import vuetify from './plugins/vuetify';
|
||||
import './plugins/axios';
|
||||
import './plugins/moment';
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
vuetify,
|
||||
render: function (h) { return h(App) }
|
||||
}).$mount('#app')
|
||||
13
ui/src/plugins/axios.js
Normal file
13
ui/src/plugins/axios.js
Normal file
@ -0,0 +1,13 @@
|
||||
import Vue from 'vue'
|
||||
import VueAxios from 'vue-plugin-axios'
|
||||
import axios from 'axios'
|
||||
|
||||
export const myVar = 'This is my variable'
|
||||
|
||||
// https://www.npmjs.com/package/vue-cli-plugin-vuetify
|
||||
Vue.use(VueAxios, {
|
||||
axios,
|
||||
config: {
|
||||
baseURL: process.env.VUE_APP_API_BASE_URL || '/api/v1.0',
|
||||
},
|
||||
});
|
||||
15
ui/src/plugins/moment.js
Normal file
15
ui/src/plugins/moment.js
Normal file
@ -0,0 +1,15 @@
|
||||
import Vue from 'vue'
|
||||
import moment from 'moment';
|
||||
import VueMoment from 'vue-moment'
|
||||
|
||||
moment.locale('es');
|
||||
|
||||
Vue.use(VueMoment, {
|
||||
moment
|
||||
});
|
||||
// $moment() accessible in project
|
||||
|
||||
Vue.filter('formatDate', function (value) {
|
||||
if (!value) return '';
|
||||
return moment(String(value)).format('YYYY-MM-DD HH:mm')
|
||||
});
|
||||
7
ui/src/plugins/vuetify.js
Normal file
7
ui/src/plugins/vuetify.js
Normal file
@ -0,0 +1,7 @@
|
||||
import Vue from 'vue';
|
||||
import Vuetify from 'vuetify/lib';
|
||||
|
||||
Vue.use(Vuetify);
|
||||
|
||||
export default new Vuetify({
|
||||
});
|
||||
21
ui/src/router/index.js
Normal file
21
ui/src/router/index.js
Normal file
@ -0,0 +1,21 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import Home from '../views/Home.vue'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: Home
|
||||
}
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'history',
|
||||
base: process.env.BASE_URL,
|
||||
routes
|
||||
})
|
||||
|
||||
export default router
|
||||
434
ui/src/views/Home.vue
Normal file
434
ui/src/views/Home.vue
Normal file
@ -0,0 +1,434 @@
|
||||
<template>
|
||||
<v-content>
|
||||
<v-row v-if="server">
|
||||
<v-col cols="12">
|
||||
<v-card dark>
|
||||
<v-list-item>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title class="headline">Server configurations</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<div class="d-flex flex-no-wrap justify-space-between">
|
||||
<v-col cols="6">
|
||||
<v-text-field
|
||||
v-model="server.name"
|
||||
:rules="[
|
||||
v => !!v || 'Name is required',
|
||||
]"
|
||||
label="Friendly server name"
|
||||
required
|
||||
/>
|
||||
<v-text-field
|
||||
type="number"
|
||||
v-model="server.persistentKeepalive"
|
||||
label="Persistent keepalive for clients"
|
||||
:rules="[
|
||||
v => !!v || 'Persistent keepalive is required',
|
||||
]"
|
||||
required
|
||||
/>
|
||||
<v-text-field
|
||||
v-model="server.endpoint"
|
||||
label="Endpoint for clients to connect to"
|
||||
:rules="[
|
||||
v => !!v || 'Endpoint is required',
|
||||
]"
|
||||
required
|
||||
/>
|
||||
<v-text-field
|
||||
v-model="server.address"
|
||||
label="Server interface addresses"
|
||||
:rules="[
|
||||
v => !!v || 'Server interface address is required',
|
||||
]"
|
||||
required
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<v-text-field
|
||||
v-model="server.publicKey"
|
||||
label="Server public key"
|
||||
disabled
|
||||
/>
|
||||
<v-text-field
|
||||
v-model="server.presharedKey"
|
||||
label="Preshared Key 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"
|
||||
:rules="[
|
||||
v => !!v || 'Listen port is required',
|
||||
]"
|
||||
label="Server listen port"
|
||||
required
|
||||
/>
|
||||
</v-col>
|
||||
</div>
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer/>
|
||||
<v-btn
|
||||
color="warning"
|
||||
@click="updateServer"
|
||||
>
|
||||
Update server configuration
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-divider dark/>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-card dark>
|
||||
<v-list-item>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title class="headline">Clients</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
<v-btn
|
||||
color="success"
|
||||
@click.stop="dialogAddClient = true"
|
||||
>
|
||||
Add new client
|
||||
</v-btn>
|
||||
</v-list-item>
|
||||
<v-row>
|
||||
<v-col
|
||||
v-for="(client, i) in clients"
|
||||
:key="i"
|
||||
cols="6"
|
||||
>
|
||||
<v-card
|
||||
color="#1F7087"
|
||||
class="mx-auto"
|
||||
raised
|
||||
shaped
|
||||
>
|
||||
<v-list-item>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title class="headline">{{ client.name }}</v-list-item-title>
|
||||
<v-list-item-subtitle>{{ client.email }}</v-list-item-subtitle>
|
||||
<v-list-item-subtitle>Created: {{ client.created | formatDate }}</v-list-item-subtitle>
|
||||
<v-list-item-subtitle>Updated: {{ client.updated | formatDate }}</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
|
||||
<v-list-item-avatar
|
||||
tile
|
||||
size="150"
|
||||
>
|
||||
<v-img :src="getUrlToConfig(client.id, true)"/>
|
||||
</v-list-item-avatar>
|
||||
</v-list-item>
|
||||
|
||||
<v-card-text class="text--primary">
|
||||
<v-chip
|
||||
v-for="(ip, i) in client.address.split(',')"
|
||||
:key="i"
|
||||
color="indigo"
|
||||
text-color="white"
|
||||
>
|
||||
<v-icon left>mdi-ip-network</v-icon>
|
||||
{{ ip }}
|
||||
</v-chip>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn
|
||||
text
|
||||
:href="getUrlToConfig(client.id, false)"
|
||||
>
|
||||
Download configuration
|
||||
<v-icon right dark>mdi-cloud-download</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
text
|
||||
@click.stop="dialogEditClient = true; clientToEdit = client"
|
||||
>
|
||||
Edit
|
||||
<v-icon right dark>mdi-square-edit-outline</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
text
|
||||
@click="deleteClient(client.id)"
|
||||
>
|
||||
Delete
|
||||
<v-icon right dark>mdi-trash-can-outline</v-icon>
|
||||
</v-btn>
|
||||
<v-spacer/>
|
||||
<v-tooltip right>
|
||||
<template v-slot:activator="{ on }">
|
||||
<v-switch
|
||||
dark
|
||||
v-on="on"
|
||||
color="success"
|
||||
v-model="client.enable"
|
||||
/>
|
||||
</template>
|
||||
<span>Enable or disable this client</span>
|
||||
</v-tooltip>
|
||||
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-dialog
|
||||
v-model="dialogAddClient"
|
||||
max-width="550"
|
||||
>
|
||||
<v-card>
|
||||
<v-card-title class="headline">Add new client</v-card-title>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col
|
||||
cols="12"
|
||||
>
|
||||
<v-form
|
||||
ref="form"
|
||||
v-model="valid"
|
||||
>
|
||||
<v-text-field
|
||||
v-model="client.name"
|
||||
label="Client friendly name"
|
||||
:rules="[
|
||||
v => !!v || 'Client name is required',
|
||||
]"
|
||||
required
|
||||
/>
|
||||
<v-text-field
|
||||
v-model="client.email"
|
||||
label="Client email"
|
||||
:rules="[
|
||||
v => !!v || 'E-mail is required',
|
||||
v => /.+@.+\..+/.test(v) || 'E-mail must be valid',
|
||||
]"
|
||||
required
|
||||
/>
|
||||
<v-select
|
||||
v-model="clientAddress"
|
||||
:items="serverAddress"
|
||||
label="Client IP will be chosen from these networks"
|
||||
:rules="[
|
||||
v => !!v || 'Network is required',
|
||||
]"
|
||||
multiple
|
||||
chips
|
||||
persistent-hint
|
||||
required
|
||||
/>
|
||||
<v-switch
|
||||
v-model="client.enable"
|
||||
color="red"
|
||||
inset
|
||||
:label="client.enable ? 'Enable client after creation': 'Disable client after creation'"
|
||||
/>
|
||||
</v-form>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer/>
|
||||
<v-btn
|
||||
:disabled="!valid"
|
||||
color="success"
|
||||
@click="addClient()"
|
||||
>
|
||||
Submit
|
||||
</v-btn>
|
||||
<v-btn
|
||||
color="primary"
|
||||
@click="dialogAddClient = false"
|
||||
>
|
||||
Cancel
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
<v-dialog
|
||||
v-if="clientToEdit"
|
||||
v-model="dialogEditClient"
|
||||
max-width="550"
|
||||
>
|
||||
<v-card>
|
||||
<v-card-title class="headline">Edit client</v-card-title>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col
|
||||
cols="12"
|
||||
>
|
||||
<v-form
|
||||
ref="form"
|
||||
v-model="valid"
|
||||
>
|
||||
<v-text-field
|
||||
v-model="clientToEdit.name"
|
||||
label="Client friendly name"
|
||||
:rules="[
|
||||
v => !!v || 'Client name is required',
|
||||
]"
|
||||
required
|
||||
/>
|
||||
<v-text-field
|
||||
v-model="clientToEdit.email"
|
||||
label="Client email"
|
||||
:rules="[
|
||||
v => !!v || 'E-mail is required',
|
||||
v => /.+@.+\..+/.test(v) || 'E-mail must be valid',
|
||||
]"
|
||||
required
|
||||
/>
|
||||
</v-form>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer/>
|
||||
<v-btn
|
||||
:disabled="!valid"
|
||||
color="success"
|
||||
@click="updateClient()"
|
||||
>
|
||||
Submit
|
||||
</v-btn>
|
||||
<v-btn
|
||||
color="primary"
|
||||
@click="dialogEditClient = false"
|
||||
>
|
||||
Cancel
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
<v-snackbar
|
||||
v-model="notification.show"
|
||||
:right="true"
|
||||
:top="true"
|
||||
:color="notification.color"
|
||||
>
|
||||
{{ notification.text }}
|
||||
<v-btn
|
||||
dark
|
||||
text
|
||||
@click="notification.show = false"
|
||||
>
|
||||
Close
|
||||
</v-btn>
|
||||
</v-snackbar>
|
||||
</v-content>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'home',
|
||||
mounted () {
|
||||
this.getData()
|
||||
},
|
||||
data: () => ({
|
||||
notification: {
|
||||
show: false,
|
||||
color: '',
|
||||
text: '',
|
||||
},
|
||||
valid: true,
|
||||
checkbox: false,
|
||||
server: null,
|
||||
clients: [],
|
||||
ipDns: "",
|
||||
ipAddress: "",
|
||||
clientAddress: [],
|
||||
serverAddress: [],
|
||||
dialogAddClient: false,
|
||||
dialogEditClient: false,
|
||||
clientToEdit: null,
|
||||
client: {
|
||||
name: "",
|
||||
email: "",
|
||||
enable: true,
|
||||
allowedIPs: "0.0.0.0/0,::/0",
|
||||
address: "",
|
||||
}
|
||||
}),
|
||||
|
||||
methods: {
|
||||
getData() {
|
||||
this.$get('/server').then((res) => {
|
||||
this.server = res;
|
||||
this.clientAddress = this.serverAddress = this.server.address.split(',')
|
||||
}).catch((e) => {
|
||||
this.notify('error', e.response.status + ' ' + e.response.statusText);
|
||||
});
|
||||
|
||||
this.$get('/client').then((res) => {
|
||||
this.clients = res
|
||||
}).catch((e) => {
|
||||
this.notify('error', e.response.status + ' ' + e.response.statusText);
|
||||
});
|
||||
},
|
||||
updateServer () {
|
||||
this.$patch('/server', this.server).then((res) => {
|
||||
this.notify('success', "Server successfully updated");
|
||||
this.getData()
|
||||
}).catch((e) => {
|
||||
this.notify('error', e.response.status + ' ' + e.response.statusText);
|
||||
});
|
||||
},
|
||||
addClient () {
|
||||
this.dialogAddClient = false;
|
||||
this.client.address = this.clientAddress.join(',');
|
||||
this.$post('/client', this.client).then((res) => {
|
||||
this.notify('success', "Client successfully added");
|
||||
this.getData()
|
||||
}).catch((e) => {
|
||||
this.notify('error', e.response.status + ' ' + e.response.statusText);
|
||||
});
|
||||
},
|
||||
deleteClient(id) {
|
||||
if(confirm("Do you really want to delete?")){
|
||||
this.$delete(`/client/${id}`).then((res) => {
|
||||
this.notify('success', "Client successfully deleted");
|
||||
this.getData()
|
||||
}).catch((e) => {
|
||||
this.notify('error', e.response.status + ' ' + e.response.statusText);
|
||||
});
|
||||
}
|
||||
},
|
||||
getUrlToConfig(id, qrcode){
|
||||
let base = "/api/v1.0";
|
||||
if (process.env.NODE_ENV === "development"){
|
||||
base = process.env.VUE_APP_API_BASE_URL
|
||||
}
|
||||
if (qrcode){
|
||||
return `${base}/client/${id}/config?qrcode=true`
|
||||
} else {
|
||||
return `${base}/client/${id}/config`
|
||||
}
|
||||
},
|
||||
updateClient() {
|
||||
this.dialogEditClient = false;
|
||||
this.$patch(`/client/${this.clientToEdit.id}`, this.clientToEdit).then((res) => {
|
||||
this.notify('success', "Client successfully updated");
|
||||
this.getData()
|
||||
}).catch((e) => {
|
||||
this.notify('error', e.response.status + ' ' + e.response.statusText);
|
||||
});
|
||||
},
|
||||
notify(color, msg) {
|
||||
this.notification.show = true;
|
||||
this.notification.color = color;
|
||||
this.notification.text = msg;
|
||||
},
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
9
ui/vue.config.js
Normal file
9
ui/vue.config.js
Normal file
@ -0,0 +1,9 @@
|
||||
module.exports = {
|
||||
devServer: {
|
||||
port: 8081,
|
||||
disableHostCheck: true,
|
||||
},
|
||||
"transpileDependencies": [
|
||||
"vuetify"
|
||||
]
|
||||
};
|
||||
Reference in New Issue
Block a user