6543
/
wg-gen-web
mirror of https://github.com/vx3r/wg-gen-web.git
0
0
Fork 0
Code Issues Releases Wiki Activity

refactor backend and frontend, migrate structs, organize front view, add mtu

This commit is contained in:
vx3r 2020-02-19 16:19:16 +09:00
parent 6cafb97e31
commit 0aad10cb63
19 changed files with 1085 additions and 735 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
.gitlab-ci.yml
View File

@ -1,7 +1,29 @@
stages:
- build artifacts
- build docker image
- push docker hub

build-back:
stage: build artifacts
image: golang:latest
script:
- GOOS=linux GOARCH=amd64 go build -o ${CI_PROJECT_NAME}-linux-amd64
artifacts:
paths:
- ${CI_PROJECT_NAME}-linux-amd64

build-front:
stage: build artifacts
image: node:10-alpine
script:
- cd ./ui
- npm install
- npm run build
- cd ..
artifacts:
paths:
- ui/dist

build:
stage: build docker image
image: docker:latest

1
README.md
View File

@ -27,6 +27,7 @@ The goal is to run Wg Gen Web in a container and WireGuard on host system.
* Self-hosted and web based
* Automatically select IP from the netowrk pool assigned to client
* QR-Code for convenient mobile client configuration
* Sent email to client with QR-code and client config
* Enable / Disable client
* Generation of `wg0.conf` after any modification
* Dockerized

7
core/client.go
View File

@ -16,7 +16,6 @@ import (
"path/filepath"
"sort"
"strconv"
"strings"
"time"
)

@ -49,8 +48,8 @@ func CreateClient(client *model.Client) (*model.Client, error) {
}

ips := make([]string, 0)
for _, network := range strings.Split(client.Address, ",") {
ip, err := util.GetAvailableIp(strings.TrimSpace(network), reserverIps)
for _, network := range client.Address {
ip, err := util.GetAvailableIp(network, reserverIps)
if err != nil {
return nil, err
}
@ -61,7 +60,7 @@ func CreateClient(client *model.Client) (*model.Client, error) {
}
ips = append(ips, ip)
}
client.Address = strings.Join(ips, ",")
client.Address = ips
client.Created = time.Now().UTC()
client.Updated = client.Created


189
core/migrate.go Normal file
View File

@ -0,0 +1,189 @@
package core

import (
"encoding/json"
uuid "github.com/satori/go.uuid"
log "github.com/sirupsen/logrus"
"gitlab.127-0-0-1.fr/vx3r/wg-gen-web/model"
"gitlab.127-0-0-1.fr/vx3r/wg-gen-web/storage"
"gitlab.127-0-0-1.fr/vx3r/wg-gen-web/util"
"io/ioutil"
"os"
"path/filepath"
"strings"
"time"
)

// Migrate all changes, current struct fields change
func Migrate() error {
clients, err := readClients()
if err != nil {
return err
}

s, err := deserialize("server.json")
if err != nil {
return err
}

for _, client := range clients {
switch v := client["allowedIPs"].(type) {
case []interface{}:
log.Infof("client %s has been already migrated", client["id"])
continue
default:
log.Infof("unexpected type %T, mus be migrated", v)
}

c := &model.Client{}
c.Id = client["id"].(string)
c.Name = client["name"].(string)
c.Email = client["email"].(string)
c.Enable = client["enable"].(bool)
c.AllowedIPs = make([]string, 0)
for _, address := range strings.Split(client["allowedIPs"].(string), ",") {
if util.IsValidCidr(strings.TrimSpace(address)) {
c.AllowedIPs = append(c.AllowedIPs, strings.TrimSpace(address))
}
}
c.Address = make([]string, 0)
for _, address := range strings.Split(client["address"].(string), ",") {
if util.IsValidCidr(strings.TrimSpace(address)) {
c.Address = append(c.Address, strings.TrimSpace(address))
}
}
c.PrivateKey = client["privateKey"].(string)
c.PublicKey = client["publicKey"].(string)
created, err := time.Parse(time.RFC3339, client["created"].(string))
if err != nil {
log.WithFields(log.Fields{
"err": err,
}).Errorf("failed to parse time")
continue
}
c.Created = created
updated, err := time.Parse(time.RFC3339, client["updated"].(string))
if err != nil {
log.WithFields(log.Fields{
"err": err,
}).Errorf("failed to parse time")
continue
}
c.Updated = updated

err = storage.Serialize(c.Id, c)
if err != nil {
log.WithFields(log.Fields{
"err": err,
}).Errorf("failed to Serialize client")
}
}

switch v := s["address"].(type) {
case []interface{}:
log.Info("server has been already migrated")
return nil
default:
log.Infof("unexpected type %T, mus be migrated", v)
}

server := &model.Server{}

server.Address = make([]string, 0)
for _, address := range strings.Split(s["address"].(string), ",") {
if util.IsValidCidr(strings.TrimSpace(address)) {
server.Address = append(server.Address, strings.TrimSpace(address))
}
}
server.ListenPort = int(s["listenPort"].(float64))
server.PrivateKey = s["privateKey"].(string)
server.PublicKey = s["publicKey"].(string)
server.PresharedKey = s["presharedKey"].(string)
server.Endpoint = s["endpoint"].(string)
server.PersistentKeepalive = int(s["persistentKeepalive"].(float64))
server.Dns = make([]string, 0)
for _, address := range strings.Split(s["dns"].(string), ",") {
if util.IsValidIp(strings.TrimSpace(address)) {
server.Dns = append(server.Dns, strings.TrimSpace(address))
}
}
if val, ok := s["preUp"]; ok {
server.PreUp = val.(string)
}
if val, ok := s["postUp"]; ok {
server.PostUp = val.(string)
}
if val, ok := s["preDown"]; ok {
server.PreDown = val.(string)
}
if val, ok := s["postDown"]; ok {
server.PostDown = val.(string)
}
created, err := time.Parse(time.RFC3339, s["created"].(string))
if err != nil {
log.WithFields(log.Fields{
"err": err,
}).Errorf("failed to parse time")
}
server.Created = created
updated, err := time.Parse(time.RFC3339, s["updated"].(string))
if err != nil {
log.WithFields(log.Fields{
"err": err,
}).Errorf("failed to parse time")
}
server.Updated = updated

err = storage.Serialize("server.json", server)
if err != nil {
log.WithFields(log.Fields{
"err": err,
}).Errorf("failed to Serialize server")
}

return nil
}

func readClients() ([]map[string]interface{}, error) {
clients := make([]map[string]interface{}, 0)

files, err := ioutil.ReadDir(filepath.Join(os.Getenv("WG_CONF_DIR")))
if err != nil {
return nil, err
}

for _, f := range files {
// clients file name is an uuid
_, err := uuid.FromString(f.Name())
if err == nil {
c, err := deserialize(f.Name())
if err != nil {
log.WithFields(log.Fields{
"err": err,
"path": f.Name(),
}).Error("failed to deserialize client")
} else {
clients = append(clients, c)
}
}
}

return clients, nil
}

func deserialize(id string) (map[string]interface{}, error) {
path := filepath.Join(os.Getenv("WG_CONF_DIR"), id)

data, err := util.ReadFile(path)
if err != nil {
return nil, err
}

var d map[string]interface{}
err = json.Unmarshal(data, &d)
if err != nil {
return nil, err
}

return d, nil
}

24
core/server.go
View File

@ -10,7 +10,6 @@ import (
"golang.zx2c4.com/wireguard/wgctrl/wgtypes"
"os"
"path/filepath"
"strings"
"time"
)

@ -32,12 +31,19 @@ func ReadServer() (*model.Server, error) {
}
server.PresharedKey = presharedKey.String()

server.Name = "Created with default values"
server.Endpoint = "wireguard.example.com:123"
server.ListenPort = 51820
server.Address = "fd9f:6666::10:6:6:1/112, 10.6.6.1/24"
server.Dns = "fd9f::10:0:0:2, 10.0.0.2"

server.Address = make([]string, 0)
server.Address = append(server.Address, "fd9f:6666::10:6:6:1/64")
server.Address = append(server.Address, "10.6.6.1/24")

server.Dns = make([]string, 0)
server.Dns = append(server.Dns, "fd9f::10:0:0:2")
server.Dns = append(server.Dns, "10.0.0.2")

server.PersistentKeepalive = 16
server.Mtu = 0
server.PreUp = "echo WireGuard PreUp"
server.PostUp = "echo WireGuard PostUp"
server.PreDown = "echo WireGuard PreDown"
@ -131,12 +137,12 @@ func GetAllReservedIps() ([]string, error) {
reserverIps := make([]string, 0)

for _, client := range clients {
for _, cidr := range strings.Split(client.Address, ",") {
ip, err := util.GetIpFromCidr(strings.TrimSpace(cidr))
for _, cidr := range client.Address {
ip, err := util.GetIpFromCidr(cidr)
if err != nil {
log.WithFields(log.Fields{
"err": err,
"cidr": err,
"cidr": cidr,
}).Error("failed to ip from cidr")
} else {
reserverIps = append(reserverIps, ip)
@ -144,8 +150,8 @@ func GetAllReservedIps() ([]string, error) {
}
}

for _, cidr := range strings.Split(server.Address, ",") {
ip, err := util.GetIpFromCidr(strings.TrimSpace(cidr))
for _, cidr := range server.Address {
ip, err := util.GetIpFromCidr(cidr)
if err != nil {
log.WithFields(log.Fields{
"err": err,

17
main.go
View File

@ -9,6 +9,7 @@ import (
"github.com/joho/godotenv"
log "github.com/sirupsen/logrus"
"gitlab.127-0-0-1.fr/vx3r/wg-gen-web/api"
"gitlab.127-0-0-1.fr/vx3r/wg-gen-web/core"
"gitlab.127-0-0-1.fr/vx3r/wg-gen-web/util"
"os"
"path/filepath"
@ -40,6 +41,14 @@ func main() {
}
}

// check server.json or create it
_, err = core.ReadServer()
if err != nil {
log.WithFields(log.Fields{
"err": err,
}).Fatal("failed to ensure server.json exists")
}

if os.Getenv("GIN_MODE") == "debug" {
// set gin release debug
gin.SetMode(gin.DebugMode)
@ -50,6 +59,14 @@ func main() {
gin.DisableConsoleColor()
}

// migrate
err = core.Migrate()
if err != nil {
log.WithFields(log.Fields{
"err": err,
}).Fatal("failed to migrate")
}

// creates a gin router with default middleware: logger and recovery (crash-free) middleware
app := gin.Default()


17
model/client.go
View File

@ -3,7 +3,6 @@ package model
import (
"fmt"
"gitlab.127-0-0-1.fr/vx3r/wg-gen-web/util"
"strings"
"time"
)

@ -13,8 +12,8 @@ type Client struct {
Name string `json:"name"`
Email string `json:"email"`
Enable bool `json:"enable"`
AllowedIPs string `json:"allowedIPs"`
Address string `json:"address"`
AllowedIPs []string `json:"allowedIPs"`
Address []string `json:"address"`
PrivateKey string `json:"privateKey"`
PublicKey string `json:"publicKey"`
Created time.Time `json:"created"`
@ -41,22 +40,22 @@ func (a Client) IsValid() []error {
errs = append(errs, fmt.Errorf("email %s is invalid", a.Email))
}
// check if the allowedIPs empty
if a.AllowedIPs == "" {
if len(a.AllowedIPs) == 0 {
errs = append(errs, fmt.Errorf("allowedIPs field is required"))
}
// check if the allowedIPs are valid
for _, allowedIP := range strings.Split(a.AllowedIPs, ",") {
if !util.IsValidCidr(strings.TrimSpace(allowedIP)) {
for _, allowedIP := range a.AllowedIPs {
if !util.IsValidCidr(allowedIP) {
errs = append(errs, fmt.Errorf("allowedIP %s is invalid", allowedIP))
}
}
// check if the address empty
if a.Address == "" {
if len(a.Address) == 0 {
errs = append(errs, fmt.Errorf("address field is required"))
}
// check if the address are valid
for _, address := range strings.Split(a.Address, ",") {
if !util.IsValidCidr(strings.TrimSpace(address)) {
for _, address := range a.Address {
if !util.IsValidCidr(address) {
errs = append(errs, fmt.Errorf("address %s is invalid", address))
}
}

31
model/server.go
View File

@ -3,21 +3,20 @@ package model
import (
"fmt"
"gitlab.127-0-0-1.fr/vx3r/wg-gen-web/util"
"strings"
"time"
)

// Server structure
type Server struct {
Name string `json:"name"`
Address string `json:"address"`
Address []string `json:"address"`
ListenPort int `json:"listenPort"`
Mtu int `json:"mtu"`
PrivateKey string `json:"privateKey"`
PublicKey string `json:"publicKey"`
PresharedKey string `json:"presharedKey"`
Endpoint string `json:"endpoint"`
PersistentKeepalive int `json:"persistentKeepalive"`
Dns string `json:"dns"`
Dns []string `json:"dns"`
PreUp string `json:"preUp"`
PostUp string `json:"postUp"`
PreDown string `json:"preDown"`
@ -29,21 +28,13 @@ type Server struct {
func (a Server) IsValid() []error {
errs := make([]error, 0)

// check if the name empty
if a.Name == "" {
errs = append(errs, fmt.Errorf("name is required"))
}
// check the name field is between 3 to 40 chars
if len(a.Name) < 2 || len(a.Name) > 40 {
errs = append(errs, fmt.Errorf("name must be between 2-40 chars"))
}
// check if the address empty
if a.Address == "" {
if len(a.Address) == 0 {
errs = append(errs, fmt.Errorf("address is required"))
}
// check if the address are valid
for _, address := range strings.Split(a.Address, ",") {
if !util.IsValidCidr(strings.TrimSpace(address)) {
for _, address := range a.Address {
if !util.IsValidCidr(address) {
errs = append(errs, fmt.Errorf("address %s is invalid", address))
}
}
@ -59,13 +50,13 @@ func (a Server) IsValid() []error {
if a.PersistentKeepalive < 0 {
errs = append(errs, fmt.Errorf("persistentKeepalive %d is invalid", a.PersistentKeepalive))
}
// check if the dns empty
if a.Dns == "" {
errs = append(errs, fmt.Errorf("dns is required"))
// check if the mtu is valid
if a.Mtu < 0 {
errs = append(errs, fmt.Errorf("MTU %d is invalid", a.PersistentKeepalive))
}
// check if the address are valid
for _, dns := range strings.Split(a.Dns, ",") {
if !util.IsValidIp(strings.TrimSpace(dns)) {
for _, dns := range a.Dns {
if !util.IsValidIp(dns) {
errs = append(errs, fmt.Errorf("dns %s is invalid", dns))
}
}

81
template/template.go
View File

@ -197,45 +197,54 @@ var (
</html>
`

clientTpl = `
[Interface]
Address = {{.Client.Address}}
PrivateKey = {{.Client.PrivateKey}}
DNS = {{.Server.Dns}}
clientTpl = `[Interface]
Address = {{ StringsJoin .Client.Address ", " }}
PrivateKey = {{ .Client.PrivateKey }}
{{ if ne (len .Server.Dns) 0 -}}
DNS = {{ StringsJoin .Server.Dns ", " }}
{{- end }}
{{ if ne .Server.Mtu 0 -}}
MTU = {{.Server.Mtu}}
{{- end}}
[Peer]
PublicKey = {{.Server.PublicKey}}
PresharedKey = {{.Server.PresharedKey}}
AllowedIPs = {{.Client.AllowedIPs}}
Endpoint = {{.Server.Endpoint}}
PersistentKeepalive = {{.Server.PersistentKeepalive}}`
PublicKey = {{ .Server.PublicKey }}
PresharedKey = {{ .Server.PresharedKey }}
AllowedIPs = {{ StringsJoin .Client.AllowedIPs ", " }}
Endpoint = {{ .Server.Endpoint }}
{{ if ne .Server.PersistentKeepalive 0 -}}
PersistentKeepalive = {{.Server.PersistentKeepalive}}
{{- end}}
`

wgTpl = `
# {{.Server.Name}} / Updated: {{.Server.Updated}} / Created: {{.Server.Created}}
wgTpl = `# Updated: {{ .Server.Updated }} / Created: {{ .Server.Created }}
[Interface]
{{range .ServerAdresses}}
Address = {{.}}
{{end}}
ListenPort = {{.Server.ListenPort}}
PrivateKey = {{.Server.PrivateKey}}
PreUp = {{.Server.PreUp}}
PostUp = {{.Server.PostUp}}
PreDown = {{.Server.PreDown}}
PostDown = {{.Server.PostDown}}
{{$server := .Server}}
{{range .Clients}}
{{if .Enable}}
{{- range .Server.Address }}
Address = {{ . }}
{{- end }}
ListenPort = {{ .Server.ListenPort }}
PrivateKey = {{ .Server.PrivateKey }}
{{ if ne .Server.Mtu 0 -}}
MTU = {{.Server.Mtu}}
{{- end}}
PreUp = {{ .Server.PreUp }}
PostUp = {{ .Server.PostUp }}
PreDown = {{ .Server.PreDown }}
PostDown = {{ .Server.PostDown }}
{{ $server := .Server }}
{{- range .Clients }}
{{ if .Enable -}}
# {{.Name}} / {{.Email}} / Updated: {{.Updated}} / Created: {{.Created}}
[Peer]
PublicKey = {{.PublicKey}}
PresharedKey = {{$server.PresharedKey}}
AllowedIPs = {{.Address}}
{{end}}
{{end}}`
PublicKey = {{ .PublicKey }}
PresharedKey = {{ $server.PresharedKey }}
AllowedIPs = {{ StringsJoin .Address ", " }}
{{- end }}
{{ end }}`
)

// DumpClientWg dump client wg config with go template
func DumpClientWg(client *model.Client, server *model.Server) ([]byte, error) {
t, err := template.New("client").Parse(clientTpl)
t, err := template.New("client").Funcs(template.FuncMap{"StringsJoin": strings.Join}).Parse(clientTpl)
if err != nil {
return nil, err
}
@ -251,19 +260,17 @@ func DumpClientWg(client *model.Client, server *model.Server) ([]byte, error) {

// DumpServerWg dump server wg config with go template, write it to file and return bytes
func DumpServerWg(clients []*model.Client, server *model.Server) ([]byte, error) {
t, err := template.New("server").Parse(wgTpl)
t, err := template.New("server").Funcs(template.FuncMap{"StringsJoin": strings.Join}).Parse(wgTpl)
if err != nil {
return nil, err
}

configDataWg, err := dump(t, struct {
Clients []*model.Client
Server *model.Server
ServerAdresses []string
Clients []*model.Client
Server *model.Server
}{
ServerAdresses: strings.Split(server.Address, ","),
Clients: clients,
Server: server,
Clients: clients,
Server: server,
})
if err != nil {
return nil, err

33
ui/package-lock.json generated
View File

@ -3561,12 +3561,14 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@ -3581,17 +3583,20 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"core-util-is": {
"version": "1.0.2",
@ -3708,7 +3713,8 @@
"inherits": {
"version": "2.0.4",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"ini": {
"version": "1.3.5",
@ -3720,6 +3726,7 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@ -3734,6 +3741,7 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@ -3741,12 +3749,14 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"minipass": {
"version": "2.9.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@ -3765,6 +3775,7 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@ -3854,7 +3865,8 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"object-assign": {
"version": "4.1.1",
@ -3866,6 +3878,7 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@ -3987,6 +4000,7 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@ -8920,11 +8934,6 @@
"moment": "^2.19.2"
}
},
"vue-plugin-axios": {
"version": "1.0.14",
"resolved": "https://registry.npmjs.org/vue-plugin-axios/-/vue-plugin-axios-1.0.14.tgz",
"integrity": "sha512-hpFdi17XsSdYQnrlHrml4BnmH9ceJSkpCoMGbPCz5vfDoY7okWuzKgeKK44NgRlZzlUCrq7ug3fGLZ2nv/qNNA=="
},
"vue-router": {
"version": "3.1.5",
"resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.1.5.tgz",

1
ui/package.json
View File

@ -12,7 +12,6 @@
"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"
},

449
ui/src/components/Clients.vue Normal file
View File

@ -0,0 +1,449 @@
<template>
<v-container>
<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="startAddClient"
>
Add new client
<v-icon right dark>mdi-account-multiple-plus-outline</v-icon>
</v-btn>
</v-list-item>
<v-row>
<v-col
v-for="(client, i) in clients"
:key="i"
cols="6"
>
<v-card
:color="client.enable ? '#1F7087' : 'warning'"
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="`${apiBaseUrl}/client/${client.id}/config?qrcode=true`"/>
</v-list-item-avatar>
</v-list-item>

<v-card-text class="text--primary">
<v-chip
v-for="(ip, i) in client.address"
: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="`${apiBaseUrl}/client/${client.id}/config?qrcode=false`"
>
Download
<v-icon right dark>mdi-cloud-download-outline</v-icon>
</v-btn>
<v-btn
text
@click.stop="startUpdateClient(client)"
>
Edit
<v-icon right dark>mdi-square-edit-outline</v-icon>
</v-btn>
<v-btn
text
@click="deleteClient(client)"
>
Delete
<v-icon right dark>mdi-trash-can-outline</v-icon>
</v-btn>
<v-btn
text
@click="sendEmailClient(client.id)"
>
Send email
<v-icon right dark>mdi-email-send-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"
v-on:change="updateClient(client)"
/>
</template>
<span> {{client.enable ? 'Disable' : 'Enable'}} this client</span>
</v-tooltip>

</v-card-actions>
</v-card>
</v-col>
</v-row>
</v-card>
</v-col>
</v-row>
<v-dialog
v-if="client"
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="client.address"
:items="server.address"
label="Client IP will be chosen from these networks"
:rules="[
v => !!v || 'Network is required',
]"
multiple
chips
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>&nbsp;
</v-chip>
</template>
</v-combobox>

<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(client)"
>
Submit
<v-icon right dark>mdi-check-outline</v-icon>
</v-btn>
<v-btn
color="primary"
@click="dialogAddClient = false"
>
Cancel
<v-icon right dark>mdi-close-circle-outline</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-dialog
v-if="client"
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="client.name"
label="Friendly name"
:rules="[
v => !!v || 'Client name is required',
]"
required
/>
<v-text-field
v-model="client.email"
label="Email"
:rules="[
v => !!v || 'Email is required',
v => /.+@.+\..+/.test(v) || 'Email must be valid',
]"
required
/>
<v-combobox
v-model="client.address"
chips
hint="Write IPv4 or IPv6 CIDR and hit enter"
label="Addresses"
multiple
dark
>
<template v-slot:selection="{ attrs, item, select, selected }">
<v-chip
v-bind="attrs"
:input-value="selected"
close
@click="select"
@click:close="client.address.splice(client.address.indexOf(item), 1)"
>
<strong>{{ item }}</strong>&nbsp;
</v-chip>
</template>
</v-combobox>
<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>&nbsp;
</v-chip>
</template>
</v-combobox>
</v-form>
</v-col>
</v-row>
</v-card-text>
<v-card-actions>
<v-spacer/>
<v-btn
:disabled="!valid"
color="success"
@click="updateClient(client)"
>
Submit
<v-icon right dark>mdi-check-outline</v-icon>
</v-btn>
<v-btn
color="primary"
@click="dialogEditClient = false"
>
Cancel
<v-icon right dark>mdi-close-circle-outline</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<Notification v-bind:notification="notification"/>
</v-container>
</template>
<script>
import {ApiService, API_BASE_URL} from '../services/ApiService'
import Notification from '../components/Notification'

export default {
name: 'Clients',

components: {
Notification
},

data: () => ({
api: null,
apiBaseUrl: API_BASE_URL,
clients: [],
notification: {
show: false,
color: '',
text: '',
},
dialogAddClient: false,
dialogEditClient: false,
client: null,
server: null,
valid: false,
}),

mounted () {
this.api = new ApiService();
this.getClients();
this.getServer()
},

methods: {
getClients() {
this.api.get('/client').then((res) => {
this.clients = res
}).catch((e) => {
this.notify('error', e.response.status + ' ' + e.response.statusText);
});
},

getServer() {
this.api.get('/server').then((res) => {
this.server = res;
}).catch((e) => {
this.notify('error', e.response.status + ' ' + e.response.statusText);
});
},

startAddClient() {
this.dialogAddClient = true;
this.client = {
name: "",
email: "",
enable: true,
allowedIPs: ["0.0.0.0/0", "::/0"],
address: this.server.address,
}
},
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.api.post('/client', client).then((res) => {
this.notify('success', `Client ${res.name} successfully added`);
this.getClients()
}).catch((e) => {
this.notify('error', e.response.status + ' ' + e.response.statusText);
});
},

deleteClient(client) {
if(confirm(`Do you really want to delete ${client.name} ?`)){
this.api.delete(`/client/${client.id}`).then((res) => {
this.notify('success', "Client successfully deleted");
this.getClients()
}).catch((e) => {
this.notify('error', e.response.status + ' ' + e.response.statusText);
});
}
},

sendEmailClient(id) {
this.api.get(`/client/${id}/email`).then((res) => {
this.notify('success', "Email successfully sent");
this.getClients()
}).catch((e) => {
this.notify('error', e.response.status + ' ' + e.response.statusText);
});
},

startUpdateClient(client) {
this.client = client;
this.dialogEditClient = true;
},
updateClient(client) {
// check allowed IPs
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
}
}
// check address
if (client.address.length < 1) {
this.notify('error', 'Please provide at least one valid CIDR address for client');
return;
}
for (let i = 0; i < client.address.length; i++){
if (this.$isCidr(client.address[i]) === 0) {
this.notify('error', 'Invalid CIDR detected, please correct before submitting');
return
}
}
// all good, submit
this.dialogEditClient = false;

this.api.patch(`/client/${client.id}`, client).then((res) => {
this.notify('success', `Client ${res.name} successfully updated`);
this.getClients()
}).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>

25
ui/src/components/Notification.vue Normal file
View File

@ -0,0 +1,25 @@
<template>
<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>
</template>
<script>
export default {
name: 'Notification',
props: ['notification'],
data: () => ({
}),
};
</script>

230
ui/src/components/Server.vue Normal file
View File

@ -0,0 +1,230 @@
<template>
<v-container v-if="server">
<v-row>
<v-col cols="6">
<v-card dark>
<v-list-item>
<v-list-item-content>
<v-list-item-title class="headline">Server's interface configuration</v-list-item-title>
</v-list-item-content>
</v-list-item>
<div class="d-flex flex-no-wrap justify-space-between">
<v-col cols="12">
<v-text-field
v-model="server.publicKey"
label="Public key"
disabled
/>
<v-text-field
v-model="server.presharedKey"
label="Preshared key"
disabled
/>
<v-text-field
v-model="server.listenPort"
type="number"
:rules="[
v => !!v || 'Listen port is required',
]"
label="Listen port"
required
/>
<v-combobox
v-model="server.address"
chips
hint="Write IPv4 or IPv6 CIDR and hit enter"
label="Server interface addresses"
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>&nbsp;
</v-chip>
</template>
</v-combobox>
</v-col>
</div>
</v-card>
</v-col>
<v-col cols="6">
<v-card dark>
<v-list-item>
<v-list-item-content>
<v-list-item-title class="headline">Client's global configuration</v-list-item-title>
</v-list-item-content>
</v-list-item>
<div class="d-flex flex-no-wrap justify-space-between">
<v-col cols="12">
<v-text-field
v-model="server.endpoint"
label="Public endpoint for clients to connect to"
:rules="[
v => !!v || 'Public endpoint for clients to connect to is required',
]"
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>&nbsp;
</v-chip>
</template>
</v-combobox>
<v-text-field
type="number"
v-model="server.mtu"
label="Define global MTU"
hint="Leave at 0 and let wg-quick take care of MTU"
/>
<v-text-field
type="number"
v-model="server.persistentKeepalive"
label="Persistent keepalive"
hint="Leave at 0 if you dont want to specify persistent keepalive"
/>
</v-col>
</div>
</v-card>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-card dark>
<v-list-item>
<v-list-item-content>
<v-list-item-title class="headline">Interface configuration hooks</v-list-item-title>
</v-list-item-content>
</v-list-item>
<div class="d-flex flex-no-wrap justify-space-between">
<v-col cols="12">
<v-text-field
v-model="server.preUp"
label="PreUp: script snippets which will be executed by bash before setting up the interface"
/>
<v-text-field
v-model="server.postUp"
label="PostUp: script snippets which will be executed by bash after setting up the interface"
/>
<v-text-field
v-model="server.preDown"
label="PreDown: script snippets which will be executed by bash before setting down the interface"
/>
<v-text-field
v-model="server.postDown "
label="PostDown : script snippets which will be executed by bash after setting down the interface"
/>
</v-col>
</div>
</v-card>
</v-col>
</v-row>
<v-divider dark/>
<v-divider dark/>
<v-row justify="center">
<v-btn
class="ma-2"
color="warning"
@click="updateServer"
>
Update server configuration
<v-icon right dark>mdi-update</v-icon>
</v-btn>
</v-row>
<Notification v-bind:notification="notification"/>
</v-container>
</template>
<script>
import {ApiService} from "../services/ApiService";
import Notification from '../components/Notification'

export default {
name: 'Server',

components: {
Notification
},

data: () => ({
api: null,
server: null,
notification: {
show: false,
color: '',
text: '',
},
}),

mounted () {
this.api = new ApiService();
this.getServer()
},

methods: {
getServer() {
this.api.get('/server').then((res) => {
this.server = res;
}).catch((e) => {
this.notify('error', e.response.status + ' ' + e.response.statusText);
});
},
updateServer () {
// convert int values
this.server.listenPort = parseInt(this.server.listenPort, 10);
this.server.persistentKeepalive = parseInt(this.server.persistentKeepalive, 10);
this.server.mtu = parseInt(this.server.mtu, 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 ${this.server.address[i]} before submitting`);
return
}
}

// check DNS correct
for (let i = 0; i < this.server.dns.length; i++){
if (this.$isCidr(this.server.dns[i] + '/32') === 0) {
this.notify('error', `Invalid IP detected, please correct ${this.server.dns[i]} before submitting`);
return
}
}

this.api.patch('/server', this.server).then((res) => {
this.notify('success', "Server successfully updated");
this.server = res;
}).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>

1
ui/src/main.js
View File

@ -2,7 +2,6 @@ import Vue from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify';
import './plugins/axios';
import './plugins/moment';
import './plugins/cidr'


13
ui/src/plugins/axios.js
View File

@ -1,13 +0,0 @@
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',
},
});

2
ui/src/plugins/moment.js
View File

@ -2,7 +2,7 @@ import Vue from 'vue'
import moment from 'moment';
import VueMoment from 'vue-moment'

moment.locale('es');
moment.locale('en');

Vue.use(VueMoment, {
moment

40
ui/src/services/ApiService.js Normal file
View File

@ -0,0 +1,40 @@
import axios from 'axios'

let baseUrl = "/api/v1.0";
if (process.env.NODE_ENV === "development"){
baseUrl = process.env.VUE_APP_API_BASE_URL
}

export const API_BASE_URL = baseUrl;

export class ApiService {
get(resource) {
return axios
.get(`${API_BASE_URL}${resource}`)
.then(response => response.data)
};

post(resource, data) {
return axios
.post(`${API_BASE_URL}${resource}`, data)
.then(response => response.data)
};

put(resource, data) {
return axios
.put(`${API_BASE_URL}${resource}`, data)
.then(response => response.data)
};

patch(resource, data) {
return axios
.patch(`${API_BASE_URL}${resource}`, data)
.then(response => response.data)
};

delete(resource) {
return axios
.delete(`${API_BASE_URL}${resource}`)
.then(response => response.data)
};
}

637
ui/src/views/Home.vue
View File

@ -1,638 +1,19 @@
<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 || 'Friendly name is required',
]"
label="Friendly name"
required
/>
<v-text-field
type="number"
v-model="server.persistentKeepalive"
label="Persistent keepalive"
:rules="[
v => !!v || 'Persistent keepalive is required',
]"
required
/>
<v-text-field
v-model="server.endpoint"
label="Public endpoint for clients to connect to"
:rules="[
v => !!v || 'Public endpoint for clients to connect to is required',
]"
required
/>
<v-combobox
v-model="server.address"
chips
hint="Write IPv4 or IPv6 CIDR and hit enter"
label="Server interface addresses"
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>&nbsp;
</v-chip>
</template>
</v-combobox>
<v-text-field
v-model="server.preUp"
label="PreUp: script snippets which will be executed by bash before setting up the interface"
/>
<v-text-field
v-model="server.postUp"
label="PostUp: script snippets which will be executed by bash after setting up the interface"
/>
</v-col>
<v-col cols="6">
<v-text-field
v-model="server.publicKey"
label="Public key"
disabled
/>
<v-text-field
v-model="server.presharedKey"
label="Preshared key"
disabled
/>
<v-text-field
v-model="server.listenPort"
type="number"
:rules="[
v => !!v || 'Listen port is required',
]"
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>&nbsp;
</v-chip>
</template>
</v-combobox>
<v-text-field
v-model="server.preDown"
label="PreDown: script snippets which will be executed by bash before setting down the interface"
/>
<v-text-field
v-model="server.postDown "
label="PostDown : script snippets which will be executed by bash after setting down the interface"
/>
</v-col>
</div>

<v-card-actions>
<v-spacer/>
<v-btn
class="ma-2"
color="warning"
@click="updateServer"
>
Update server configuration
<v-icon right dark>mdi-update</v-icon>
</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="startAddClient"
>
Add new client
<v-icon right dark>mdi-account-multiple-plus-outline</v-icon>
</v-btn>
</v-list-item>
<v-row>
<v-col
v-for="(client, i) in clients"
:key="i"
cols="6"
>
<v-card
:color="client.enable ? '#1F7087' : 'warning'"
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
<v-icon right dark>mdi-cloud-download-outline</v-icon>
</v-btn>
<v-btn
text
@click.stop="editClient(client.id)"
>
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-btn
text
@click="sendEmailClient(client.id)"
>
Send email
<v-icon right dark>mdi-email-send-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"
v-on:change="disableClient(client)"
/>
</template>
<span> {{client.enable ? 'Disable' : 'Enable'}} this client</span>
</v-tooltip>

</v-card-actions>
</v-card>
</v-col>
</v-row>
</v-card>
</v-col>
</v-row>
<v-dialog
v-if="client"
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-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>&nbsp;
</v-chip>
</template>
</v-combobox>

<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(client)"
>
Submit
<v-icon right dark>mdi-check-outline</v-icon>
</v-btn>
<v-btn
color="primary"
@click="dialogAddClient = false"
>
Cancel
<v-icon right dark>mdi-close-circle-outline</v-icon>
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-dialog
v-if="client"
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="client.name"
label="Friendly name"
:rules="[
v => !!v || 'Client name is required',
]"
required
/>
<v-text-field
v-model="client.email"
label="Email"
:rules="[
v => !!v || 'Email is required',
v => /.+@.+\..+/.test(v) || 'Email must be valid',
]"
required
/>
<v-combobox
v-model="client.address"
chips
hint="Write IPv4 or IPv6 CIDR and hit enter"
label="Addresses"
multiple
dark
>
<template v-slot:selection="{ attrs, item, select, selected }">
<v-chip
v-bind="attrs"
:input-value="selected"
close
@click="select"
@click:close="client.address.splice(client.address.indexOf(item), 1)"
>
<strong>{{ item }}</strong>&nbsp;
</v-chip>
</template>
</v-combobox>
<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>&nbsp;
</v-chip>
</template>
</v-combobox>
</v-form>
</v-col>
</v-row>
</v-card-text>
<v-card-actions>
<v-spacer/>
<v-btn
:disabled="!valid"
color="success"
@click="updateClient(client)"
>
Submit
<v-icon right dark>mdi-check-outline</v-icon>
</v-btn>
<v-btn
color="primary"
@click="dialogEditClient = false"
>
Cancel
<v-icon right dark>mdi-close-circle-outline</v-icon>
</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>
<Server/>
<Clients/>
</v-content>
</template>

<script>
import Server from '../components/Server'
import Clients from '../components/Clients'

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,
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(',');
res.address = res.address.split(',');
this.client = res
}).catch((e) => {
this.notify('error', e.response.status + ' ' + e.response.statusText);
});
},
disableClient(client) {
if(!Array.isArray(client.allowedIPs)){
client.allowedIPs = client.allowedIPs.split(',');
}
if(!Array.isArray(client.address)){
client.address = client.address.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
}).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 () {
// 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()
}).catch((e) => {
this.notify('error', e.response.status + ' ' + e.response.statusText);
});
},
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;
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) => {
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);
});
}
},
sendEmailClient(id) {
this.$get(`/client/${id}/email`).then((res) => {
this.notify('success', "Email successfully sent");
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(client) {
// check allowed IPs
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
}
}
// check address
if (client.address.length < 1) {
this.notify('error', 'Please provide at least one valid CIDR address for client');
return;
}
for (let i = 0; i < client.address.length; i++){
if (this.$isCidr(client.address[i]) === 0) {
this.notify('error', 'Invalid CIDR detected, please correct before submitting');
return
}
}
// all good, submit
this.dialogEditClient = false;
client.allowedIPs = client.allowedIPs.join(',');
client.address = client.address.join(',');

this.$patch(`/client/${client.id}`, client).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;
},

},
components: {
Server,
Clients
}
}
</script>