New design; New features

pull/1/head 1.0
Ilya Sosnovsky 2 years ago
parent 6ce657d587
commit 6e9a553884
  1. 7
      .dockerignore
  2. 4
      .gitignore
  3. 8
      .werffiles/configure.sh
  4. 25
      .werffiles/openvpn.conf
  5. 8
      Dockerfile
  6. 7
      Dockerfile.openvpn
  7. 2
      build.sh
  8. 6
      ccd.tpl
  9. 17
      docker-compose.yaml
  10. 14
      frontend/.babelrc
  11. 9925
      frontend/package-lock.json
  12. 44
      frontend/package.json
  13. 234
      frontend/src/main.js
  14. 23
      frontend/static/css/style.css
  15. 247
      frontend/static/index.html
  16. 8
      frontend/webpack.config.js
  17. 435
      main.go
  18. 21
      werf.yaml

@ -5,5 +5,10 @@ out
gen
./easyrsa
easyrsa
ccd
werf.yaml
frontend/node_modules
openvpn-web-ui
openvpn-ui
openvpn-admin

4
.gitignore vendored

@ -1,2 +1,6 @@
easyrsa
ccd
openvpn-web-ui
openvpn-ui
openvpn-admin
frontend/node_modules

@ -1,14 +1,14 @@
#!/bin/bash
set -x
EASY_RSA_LOC="/etc/openvpn/easyrsa"
SERVER_CERT="${EASY_RSA_LOC}/pki/issued/server.crt"
cd $EASY_RSA_LOC
if [ -e "$SERVER_CERT" ]; then
echo "found existing certs - reusing"
else
cp -R /usr/share/easy-rsa/* $EASY_RSA_LOC
easyrsa init-pki
echo "ca\n" | easyrsa build-ca nopass
cp -R /usr/share/easy-rsa/* $EASY_RSA_LOC/pki
echo "ca" | easyrsa build-ca nopass
easyrsa build-server-full server nopass
easyrsa gen-dh
openvpn --genkey --secret ./pki/ta.key
@ -27,5 +27,7 @@ cp -f /etc/openvpn/setup/openvpn.conf /etc/openvpn/openvpn.conf
[ -d /etc/openvpn/certs/pki ] && chmod 755 /etc/openvpn/certs/pki
[ -f /etc/openvpn/certs/pki/crl.pem ] && chmod 644 /etc/openvpn/certs/pki/crl.pem
mkdir -p /etc/openvpn/ccd
openvpn --config /etc/openvpn/openvpn.conf --client-config-dir /etc/openvpn/ccd

@ -0,0 +1,25 @@
server 172.16.100.0 255.255.255.0
verb 3
tls-server
ca /etc/openvpn/easyrsa/pki/ca.crt
key /etc/openvpn/easyrsa/pki/private/server.key
cert /etc/openvpn/easyrsa/pki/issued/server.crt
dh /etc/openvpn/easyrsa/pki/dh.pem
crl-verify /etc/openvpn/easyrsa/pki/crl.pem
tls-auth /etc/openvpn/easyrsa/pki/ta.key
key-direction 0
cipher AES-128-CBC
management 127.0.0.1 8989
keepalive 10 60
persist-key
persist-tun
topology subnet
proto tcp
port 1194
dev tun0
status /tmp/openvpn-status.log
user nobody
group nogroup
push "topology subnet"
push "route-metric 9999"
push "dhcp-option DNS 1.1.1.1"

@ -1,7 +1,7 @@
FROM golang:1.14.2-alpine3.11 AS backend-builder
COPY . /app
RUN apk --no-cache add build-base git gcc
RUN cd /app && env CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -ldflags='-extldflags "-static" -s -w' -o openvpn-ui
#RUN apk --no-cache add build-base git gcc
RUN cd /app && env CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -ldflags='-extldflags "-static" -s -w' -o openvpn-admin
FROM node:14.2-alpine3.11 AS frontend-builder
COPY frontend/ /app
@ -9,8 +9,10 @@ RUN cd /app && npm install && npm run build
FROM alpine:3.11
WORKDIR /app
COPY --from=backend-builder /app/openvpn-ui /app
COPY --from=backend-builder /app/openvpn-admin /app
COPY --from=frontend-builder /app/static /app/static
COPY client.conf.tpl /app/client.conf.tpl
COPY ccd.tpl /app/ccd.tpl
RUN echo "http://dl-cdn.alpinelinux.org/alpine/edge/testing/" >> /etc/apk/repositories && \
apk add --update bash easy-rsa && \
ln -s /usr/share/easy-rsa/easyrsa /usr/local/bin && \

@ -0,0 +1,7 @@
FROM alpine:3.11
RUN echo "http://dl-cdn.alpinelinux.org/alpine/edge/testing/" >> /etc/apk/repositories && \
apk add --update bash openvpn easy-rsa && \
ln -s /usr/share/easy-rsa/easyrsa /usr/local/bin && \
rm -rf /tmp/* /var/tmp/* /var/cache/apk/* /var/cache/distfiles/*
COPY .werffiles /etc/openvpn/setup
RUN chmod +x /etc/openvpn/setup/configure.sh

@ -1,3 +1,3 @@
#!/bin/bash
go build .
env CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -ldflags='-extldflags "-static" -s -w' -o openvpn-admin

@ -0,0 +1,6 @@
{{- if (ne .ClientAddress "dynamic") }}
ifconfig-push {{ .ClientAddress }} 255.255.255.255
{{- end }}
{{- range $route := .CustomRoutes }}
push "route {{ $route.Address }} {{ $route.Mask }}" # {{ $route.Description }}
{{- end }}

@ -1,23 +1,26 @@
version: '3'
volumes:
ovpn_data:
ovpn_config:
services:
openvpn:
build:
context: .
dockerfile: Dockerfile.openvpn
image: openvpn:local
command: /etc/openvpn/setup/configure.sh
cap_add:
- NET_ADMIN
ports:
- 1194:1194
volumes:
- ovpn_data:/etc/openvpn/easyrsa
- ./easyrsa:/etc/openvpn/easyrsa
- ./ccd:/etc/openvpn/ccd
openvpn-admin:
build:
context: .
image: openvpn-admin:local
command: /app/openvpn-ui
command: /app/openvpn-admin --debug --ovpn.network="172.16.100.0/22" --mgmt.host="openvpn"
ports:
- 8080:8080
volumes:
- ovpn_data:/mnt/easyrsa
- ./easyrsa:/mnt/easyrsa
- ./ccd:/mnt/ccd

@ -1,6 +1,16 @@
{
"presets": [
["env", { "modules": false }],
"stage-3"
[
"@babel/preset-env",
{
"modules": false
}
]
],
"plugins": [
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-syntax-import-meta",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-json-strings"
]
}

File diff suppressed because it is too large Load Diff

@ -1,7 +1,7 @@
{
"name": "openvpn-easyrsa-web-ui",
"description": "A Vue.js project",
"version": "1.0.0",
"name": "openvpn-admin",
"description": "Vue.js admin ui for openvpn and easyrsa",
"version": "1.0.1a",
"author": "vitaliy.snurnitsin@gmail.com",
"license": "MIT",
"private": true,
@ -10,9 +10,10 @@
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"axios": "^0.18.0",
"vue": "^2.5.17",
"vue-clipboard2": "^0.2.1"
"axios": "^0.19.2",
"vue": "^2.6.12",
"vue-clipboard2": "^0.2.1",
"vue-good-table": "^2.21.1"
},
"browserslist": [
"> 1%",
@ -20,18 +21,23 @@
"not ie <= 8"
],
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.2.0",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"node-sass": "^4.9.3",
"sass-loader": "^6.0.6",
"vue-loader": "^13.7.3",
"vue-template-compiler": "^2.5.17",
"webpack": "^3.12.0",
"webpack-dev-server": "^2.11.3"
"@babel/core": "^7.8.6",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/plugin-proposal-json-strings": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/plugin-syntax-import-meta": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"babel-loader": "^8.0.0",
"cross-env": "^7.0.0",
"css-loader": "^3.4.2",
"file-loader": "^5.1.0",
"node-sass": "^4.13.1",
"sass-loader": "^8.0.2",
"terser-webpack-plugin": "^2.3.5",
"vue-loader": "^15.9.0",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.42.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
}
}

@ -1,8 +1,12 @@
import Vue from 'vue';
import axios from 'axios';
import VueClipboard from 'vue-clipboard2'
import VueGoodTablePlugin from 'vue-good-table'
import 'vue-good-table/dist/vue-good-table.css'
Vue.use(VueClipboard)
Vue.use(VueGoodTablePlugin)
var axios_cfg = function(url, data='', type='form') {
if (data == '') {
@ -24,132 +28,238 @@ var axios_cfg = function(url, data='', type='form') {
data: data,
headers: { 'Content-Type': 'multipart/form-data' }
};
} else if (type == 'json') {
return {
method: 'post',
url: url,
data: data,
headers: { 'Content-Type': 'application/json' }
};
}
};
new Vue({
el: '#app',
data: {
columns: [
{
label: 'Name',
field: 'Identity',
// filterable: true,
},
{
label: 'Account Status',
field: 'AccountStatus',
filterable: true,
},
{
label: 'Expiration Date',
field: 'ExpirationDate',
type: 'date',
dateInputFormat: 'yyyy-MM-dd HH:mm:ss',
dateOutputFormat: 'yyyy-MM-dd HH:mm:ss',
formatFn: function (value) {
return value != "" ? value : ""
}
},
{
label: 'Revocation Date',
field: 'RevocationDate',
type: 'date',
dateInputFormat: 'yyyy-MM-dd HH:mm:ss',
dateOutputFormat: 'yyyy-MM-dd HH:mm:ss',
formatFn: function (value) {
return value != "" ? value : ""
}
},
{
label: 'Actions',
field: 'actions',
sortable: false,
tdClass: 'text-right',
globalSearchDisabled: true,
},
],
rows: [],
actions: [
{
name: 'u-revoke',
label: 'Revoke',
showWhenStatus: 'Active'
},
{
name: 'u-unrevoke',
label: 'Unrevoke',
showWhenStatus: 'Revoked'
},
{
name: 'u-show-config',
label: 'Show config',
showWhenStatus: 'Active'
},
{
name: 'u-download-config',
label: 'Download config',
showWhenStatus: 'Active'
},
{
name: 'u-edit-ccd',
label: 'Edit routes',
showWhenStatus: 'Active'
}
],
u: {
ctxTop: '0',
ctxLeft: '0',
ctxVisible: false,
ctxMenuItems: { 'u-revoke': 'Revoke', 'u-unrevoke': 'Unrevoke', 'u-show-config': 'Show config', 'u-edit-ccd': "Edit routes"},
columns: [],
data: {},
name: '',
newUserName: '',
// newUserPassword: 'nopass',
newUserCreateError: '',
modalNewUserVisible: false,
modalShowConfigVisible: false,
openvpnConfig: ''
modalShowCcdVisible: false,
openvpnConfig: '',
ccd: {
Name: '',
ClientAddress: '',
CustomRoutes: []
},
newRoute: {},
ccdApplyStatus: "",
ccdApplyStatusMessage: "",
}
},
watch: {
u: function () {
this.u.columns = Object.keys(this.u.data[0]) //.reverse()
}
// u: function () {
// this.u.columns = Object.keys(this.u.data[0]) //.reverse()
// }
},
mounted: function () {
this.u_get_data()
},
created() {
var _this = this
this.$root.$on('u-revoke', function (msg) {
_this.$root.$on('u-revoke', function (msg) {
var data = new URLSearchParams();
data.append('username', _this.u.name);
data.append('username', _this.username);
axios.request(axios_cfg('api/user/revoke', data, 'form'))
.then(function(response) {
console.log(response.data);
_this.u_get_data();
});
})
this.$root.$on('u-unrevoke', function () {
_this.$root.$on('u-unrevoke', function () {
var data = new URLSearchParams();
data.append('username', _this.u.name);
data.append('username', _this.username);
axios.request(axios_cfg('api/user/unrevoke', data, 'form'))
.then(function(response) {
console.log(response.data);
_this.u_get_data();
});
})
this.$root.$on('u-show-config', function () {
this.u.modalShowConfigVisible = true;
_this.$root.$on('u-show-config', function () {
_this.u.modalShowConfigVisible = true;
var data = new URLSearchParams();
data.append('username', _this.u.name);
axios.request(axios_cfg('api/user/showconfig', data, 'form'))
data.append('username', _this.username);
axios.request(axios_cfg('api/user/config/show', data, 'form'))
.then(function(response) {
_this.u.openvpnConfig = response.data;
});
})
this.$root.$on('u-edit-ccd', function () {
this.u.modalShowCcdVisible = true;
_this.$root.$on('u-download-config', function () {
var data = new URLSearchParams();
data.append('username', _this.u.name);
axios.request(axios_cfg('api/user/ccd/list', data, 'form'))
data.append('username', _this.username);
axios.request(axios_cfg('api/user/config/show', data, 'form'))
.then(function(response) {
_this.u.ccds = response.data;
const blob = new Blob([response.data], { type: 'text/plain' })
const link = document.createElement('a')
link.href = URL.createObjectURL(blob)
link.download = _this.username + ".ovpn"
link.click()
URL.revokeObjectURL(link.href)
}).catch(console.error);
})
_this.$root.$on('u-edit-ccd', function () {
_this.u.modalShowCcdVisible = true;
var data = new URLSearchParams();
data.append('username', _this.username);
axios.request(axios_cfg('api/user/ccd', data, 'form'))
.then(function(response) {
_this.u.ccd = response.data;
});
})
_this.$root.$on('u-disconnect-use', function () {
_this.u.modalShowCcdVisible = true;
var data = new URLSearchParams();
data.append('username', _this.username);
axios.request(axios_cfg('api/user/disconnect', data, 'form'))
.then(function(response) {
_this.u.ccd = response.data;
});
})
},
computed: {
uCtxStyle: function () {
return {
'top': this.u.ctxTop + 'px',
'left': this.u.ctxLeft + 'px'
}
}
},
methods: {
copyTextArea: function (e) {
e.clipboardData.setData("text/plain", this.u.openvpnConfig);
customAddressEnabled: function () {
return this.u.ccd.ClientAddress == "dynamic"
},
u_ctx_click: function (e) {
this.$root.$emit(e.target.dataset.name)
this.u_ctx_hide()
ccdApplyStatusCssClass: function () {
return this.u.ccdApplyStatus == 200 ? "alert-success" : "alert-danger"
},
u_ctx_hide: function () {
this.u.ctxVisible = false
modalNewUserDisplay: function () {
return this.u.modalNewUserVisible ? {display: 'flex'} : {}
},
u_ctx_show: function (e) {
this.u.name = e.target.parentElement.dataset.name
this.u.ctxTop = e.pageY
this.u.ctxLeft = e.pageX
this.u.ctxVisible = true
modalShowConfigDisplay: function () {
return this.u.modalShowConfigVisible ? {display: 'flex'} : {}
},
modalShowCcdDisplay: function () {
return this.u.modalShowCcdVisible ? {display: 'flex'} : {}
},
},
methods: {
rowStyleClassFn: function(row) {
return row.ConnectionStatus == '' ? '' : 'active-row';
},
rowActionFn: function(e) {
this.username = e.target.dataset.username;
this.$root.$emit(e.target.dataset.name);
},
u_get_data: function() {
var _this = this;
axios.request(axios_cfg('api/users/list'))
.then(function(response) {
_this.u.data = response.data
});
},
u_get_ccd: function() {
var _this = this;
axios.request(axios_cfg('api/user/ccd'))
.then(function(response) {
_this.u.data = response.data
_this.rows = response.data;
});
},
create_user: function() {
var _this = this;
_this.u.newUserCreateError = "";
var data = new URLSearchParams();
data.append('username', this.u.newUserName);
data.append('username', _this.u.newUserName);
// data.append('password', this.u.newUserPassword);
axios.request(axios_cfg('api/user/create', data, 'form'))
.then(function(response) {
console.log(response.data);
_this.u_get_data();
_this.u.modalNewUserVisible = false;
_this.u.newUserName = '';
// _this.u.newUserPassword = 'nopass';
})
.catch(function(error) {
_this.u.newUserCreateError = error.response.data;
});
},
ccd_apply: function() {
var _this = this;
var data = new URLSearchParams();
data.append('username', this.u.newUserName);
axios.request(axios_cfg('api/user/ccd/apply', data, 'form'))
_this.u.ccdApplyStatus = "";
_this.u.ccdApplyStatusMessage = "";
axios.request(axios_cfg('api/user/ccd/apply', JSON.stringify(_this.u.ccd), 'json'))
.then(function(response) {
console.log(response.data);
_this.u_get_data();
_this.u.newUserName = '';
_this.u.ccdApplyStatus = 200;
_this.u.ccdApplyStatusMessage = response.data;
})
.catch(function(error) {
_this.u.ccdApplyStatus = error.response.status;
_this.u.ccdApplyStatusMessage = error.response.data;
});
}
}

@ -22,7 +22,7 @@ body {
}
.modal-wrapper {
display: flex;
display: none;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
@ -36,25 +36,16 @@ body {
margin: auto 0;
}
.modal-new-user {
display: flex;
flex-direction: row;
background-color: #eaeaea;
padding: 2rem;
.static-address-label {
margin: 0.1em 1em 0.1em 0.1em;
}
.modal-new-user-el-margin {
margin-left: 0.1rem;
margin-right: 0.1rem;
margin-top: 0.1rem;
margin-bottom: 0.1rem;
.modal-el-margin {
margin: 0.1rem;
}
.modal-show-config {
display: flex;
flex-direction: column;
background-color: #eaeaea;
padding: 2rem;
.new-user-btn {
margin-right: 2rem;
}
.modal-show-config-txt-box {

@ -1,102 +1,179 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>openvpn-admin</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="app" @click.left.stop="u_ctx_hide">
<head>
<meta charset="utf-8">
<title>openvpn-admin</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="app">
<div>
<button type="button" class="btn btn-sm btn-success el-square" v-on:click.stop="u.modalNewUserVisible=true">Add user</button>
</div>
<!-- <div class="dropdown-menu dropdown-custom" :style="uCtxStyle" v-show="u.ctxVisible">-->
<!-- <button class="dropdown-item" type="button" :data-name="name" :data-text="text" @click.left.stop="u_ctx_click" v-for="text, name in u.ctxMenuItems">{{text}}</button>-->
<!-- </div>-->
<div class="dropdown-menu dropdown-custom" :style="uCtxStyle" v-show="u.ctxVisible">
<button class="dropdown-item" type="button" :data-name="name" :data-text="text" @click.left.stop="u_ctx_click" v-for="text, name in u.ctxMenuItems">{{text}}</button>
</div>
<!-- <table class="table table-bordered table-hover">-->
<!-- <thead class="thead-dark">-->
<!-- <tr>-->
<!-- <th scope="col">Name</th>-->
<!-- <th scope="col">Account status</th>-->
<!-- <th scope="col">Expiration date</th>-->
<!-- <th scope="col">Revocation date</th>-->
<!--&lt;!&ndash; <th scope="col">Connection status</th>&ndash;&gt;-->
<!-- </tr>-->
<!-- </thead>-->
<!-- <tbody>-->
<!-- <tr v-for="row in u.data" :data-name="row.Identity" v-bind:style="row.ConnectionStatus" @contextmenu.prevent="u_ctx_show">-->
<!-- <td>{{ row.Identity }}</td>-->
<!-- <td>{{ row.AccountStatus }}</td>-->
<!-- <td>{{ row.ExpirationDate }}</td>-->
<!-- <td>{{ row.RevocationDate }}</td>-->
<!--&lt;!&ndash; <td>{{ row.ConnectionStatus }}</td>&ndash;&gt;-->
<!-- </tr>-->
<!-- </tbody>-->
<!-- </table>-->
<vue-good-table
:columns="columns"
:rows="rows"
:line-numbers="true"
:row-style-class="rowStyleClassFn"
:search-options="{ enabled: true}" >
<div slot="table-actions">
<button type="button" class="btn btn-sm btn-success el-square" v-on:click.stop="u.modalNewUserVisible=true">Add user</button>
</div>
<div slot="emptystate">
This will show up when there are no rows
</div>
<template slot="table-row" slot-scope="props">
<span v-if="props.column.field == 'actions'">
<button
class="btn btn-sm btn-success el-square modal-el-margin"
type="button"
:title="action.label"
:data-username="props.row.Identity"
:data-name="action.name"
:data-text="action.label"
@click.left.stop="rowActionFn"
v-for="action in actions"
v-if="action.showWhenStatus == props.row.AccountStatus">
{{ action.label }}
</button>
</span>
</template>
</vue-good-table>
<!-- <div class="d-flex justify-content-md-end">-->
<!-- <button type="button" class="btn btn-sm btn-success el-square new-user-btn" v-on:click.stop="u.ctxVisible=false;u.modalNewUserVisible=true">Add user</button>-->
<!-- </div>-->
<table class="table table-bordered table-hover">
<thead class="thead-dark">
<tr>
<th scope="col">Name</th>
<th scope="col">Flag</th>
<th scope="col">Expiration date</th>
<th scope="col">Revocation date</th>
</tr>
</thead>
<tbody>
<tr v-for="row in u.data" :data-name="row.Identity" :style="row.connection_status" @contextmenu.prevent="u_ctx_show">
<td>{{ row.Identity }}</td>
<td>{{ row.Flag }}</td>
<td>{{ row.ExpirationDate }}</td>
<td>{{ row.RevocationDate }}</td>
</tr>
</tbody>
</table>
<div class="modal-wrapper" v-if="u.modalNewUserVisible" v-bind:style="modalNewUserDisplay">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4>Add new user </h4>
</div>
<div class="modal-body">
<input type="text" class="form-control el-square modal-el-margin" placeholder="Username [_a-zA-Z0-9\.-]" v-model="u.newUserName">
<!-- <input type="password" class="form-control el-square modal-el-margin" minlength="6" autocomplete="off" placeholder="Password [_a-zA-Z0-9\.-]" v-model="u.newUserPassword">-->
</div>
<div class="modal-wrapper" v-if="u.modalNewUserVisible">
<div class="modal-new-user">
<input type="text" class="form-control el-square modal-new-user-el-margin" placeholder="User name [_a-zA-Z0-9\.-]" v-model="u.newUserName">
<button type="button" class="btn btn-success el-square modal-new-user-el-margin" v-on:click.stop="create_user();u.modalNewUserVisible=false">Create</button>
<button type="button" class="btn btn-success el-square modal-new-user-el-margin" v-on:click.stop="u.newUserName='';u.modalNewUserVisible=false">Cancel</button>
<div class="modal-footer justify-content-center" v-if="u.newUserCreateError.length > 0">
<div class="alert alert-danger" role="alert" >
{{ u.newUserCreateError }}
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success el-square modal-el-margin" v-on:click.stop="create_user();">Create</button>
<button type="button" class="btn btn-primary el-square d-flex justify-content-sm-end modal-el-margin" v-on:click.stop="u.newUserName='';u.newUserPassword='nopass';u.modalNewUserVisible=false">Close</button>
</div>
</div>
</div>
</div>
<div class="modal-wrapper" v-if="u.modalShowConfigVisible">
<div class="modal-show-config">
<div class="row">
<button type="button" class="btn btn-success el-square modal-new-user-el-margin" v-clipboard:copy="u.openvpnConfig">Copy</button>
<button type="button" class="btn btn-success el-square modal-new-user-el-margin" v-on:click.stop="u.openvpnConfig='';u.modalShowConfigVisible=false">Cancel</button>
</div>
<div class="row">
<pre class="modal-show-config-txt-box modal-new-user-el-margin">{{ u.openvpnConfig }}</pre>
</div>
<div class="modal-wrapper" v-if="u.modalShowConfigVisible" v-bind:style="modalShowConfigDisplay">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4>ovpn config for {{ username }}</h4>
</div>
<div class="modal-body">
<div class="d-flex">
<pre class="modal-show-config-txt-box">{{ u.openvpnConfig }}</pre>
</div>
</div>
<div class="modal-footer">
<div class="d-flex">
<button type="button" class="btn btn-success el-square modal-el-margin" v-clipboard:copy="u.openvpnConfig">Copy </button>
<button type="button" class="btn btn-primary el-square modal-el-margin" v-on:click.stop="u.openvpnConfig='';u.modalShowConfigVisible=false">Cancel</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal-wrapper" v-if="u.modalShowCcdVisible">
<div class="modal-ccd-config">
<div class="row">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th scope="col">Address</th>
<th scope="col">Mask</th>
<th scope="col">Description</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr v-for="(route, index) in u.ccd">
<td>{{ route.addr }}</td>
<td>{{ route.mask }}</td>
<td>{{ route.desc }}</td>
<td>
<!-- button type="button" class="btn btn-primary btn-sm el-square" v-on:click.stop="ccd_edit()">Edit</button -->
<button type="button" class="btn btn-primary btn-sm el-square" v-on:click.stop="ccd.splice(index, 1)">Delete</button>
</td>
</tr>>
</tbody>
</table>
</div>
<div class="row">
<input type="text" v-model="route.addr" />
<input type="text" v-model="route.mask" />
<input type="text" v-model="route.desc" />
<button type="button" class="btn btn-success el-square" v-on:click.stop="ccd.push(route)">Add new route</button>
</div>
<div class="row">
<button type="button" class="btn btn-success el-square" v-on:click.stop="ccd_apply()">Save</button>
<button type="button" class="btn btn-danger el-square" v-on:click.stop="u.ccd=[];u.modalShowCcdVisible=false">Close</button>
<div class="modal-wrapper" v-if="u.modalShowCcdVisible" v-bind:style="modalShowCcdDisplay">
<div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<div class="input-group">
<h4 class="static-address-label ">Client "{{ username }}" static address</h4>
<div class="input-group-prepend">
<div class="input-group-text">
<input id="enable-static" type="checkbox" onchange="document.getElementById('staticAddress').disabled=!this.checked;" v-bind:checked="!customAddressEnabled">
</div>
</div>
<input id="staticAddress" type="text" class="form-control" v-model="u.ccd.ClientAddress" placeholder="127.0.0.1" v-bind:disabled="customAddressEnabled">
</div>
</div>
</div>
<div class="modal-body">
<div class="d-flex ">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th scope="col">Address</th>
<th scope="col">Mask</th>
<th scope="col">Description</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr v-for="(customRoute, index) in u.ccd.CustomRoutes">
<td>{{ customRoute.Address }}</td>
<td>{{ customRoute.Mask }}</td>
<td>{{ customRoute.Description }}</td>
<td>
<button type="button" class="btn btn-primary btn-sm el-square modal-el-margin" v-on:click.stop="u.ccd.CustomRoutes.splice(index, 1)">Delete</button>
</td>
</tr>
<tr>
<td><input type="text" v-model="u.newRoute.Address"/></td>
<td><input type="text" v-model="u.newRoute.Mask"/></td>
<td><input type="text" v-model="u.newRoute.Description"/></td>
<td>
<button type="button" class="btn btn-success el-square modal-el-margin" v-on:click.stop="u.ccd.CustomRoutes.push(u.newRoute);u.newRoute={};">Add</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal-footer justify-content-center" v-if="u.ccdApplyStatusMessage.length > 0">
<div class="alert" v-bind:class="ccdApplyStatusCssClass" role="alert">
{{ u.ccdApplyStatusMessage }}
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success el-square modal-el-margin" v-on:click.stop="ccd_apply()">Save</button>
<button type="button" class="btn btn-primary el-square modal-el-margin" v-on:click.stop="u.ccd={Name:'',ClientAddress:'',CustomRoutes:[]};u.ccdApplyStatusMessage='';u.ccdApplyStatus='';u.modalShowCcdVisible=false">Close</button>
</div>
</div>
</div>
<script src="dist/build.js"></script>
</body>
</div>
</div>
<script src="dist/build.js"></script>
</body>
</html>
<!-- n['flag'], n['expiration_date'], n['revocation_date'], n['serial_number'], n['filename'], n['distinguished_name'] -->

@ -1,5 +1,6 @@
var path = require('path')
var webpack = require('webpack')
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
entry: './src/main.js',
@ -95,11 +96,8 @@ if (process.env.NODE_ENV === 'production') {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
new TerserPlugin({
sourceMap: true
}),
new webpack.LoaderOptionsPlugin({
minimize: true

@ -8,34 +8,33 @@ import (
"os"
"os/exec"
"regexp"
"time"
"strings"
"text/template"
// "reflect"
"bufio"
"net"
// "io"
// "encoding/binary"
"encoding/json"
"net/http"
"gopkg.in/alecthomas/kingpin.v2"
)
var (
listenHost = kingpin.Flag("listen.host","host for openvpn-admin").Default("127.0.0.1").String()
listenPort = kingpin.Flag("listen.port","port for openvpn-admin").Default("8080").String()
easyrsaPath = kingpin.Flag("easyrsa.path", "path to easyrsa dir").Default("/etc/openvpn/easyrsa").String()
indexTxtPath = kingpin.Flag("easyrsa.index-path", "path to easyrsa index file.").Default("/etc/openvpn/easyrsa/pki/index.txt").String()
ccdCustom = kingpin.Flag("ccd.custom", "enable or disable custom routes").Default("false").Bool()
ccdDir = kingpin.Flag("ccd.path", "path to client-config-dir").Default("/etc/openvpn/ccd").String()
staticPath = kingpin.Flag("static.path", "path to static dir").Default("./static").String()
listenHost = kingpin.Flag("listen.host","host for openvpn-admin").Default("0.0.0.0").String()
listenPort = kingpin.Flag("listen.port","port for openvpn-admin").Default("8080").String()
openvpnServerHost = kingpin.Flag("ovpn.host","host for openvpn server").Default("127.0.0.1").String()
openvpnServerPort = kingpin.Flag("ovpn.port","port for openvpn server").Default("7777").String()
openvpnNetwork = kingpin.Flag("ovpn.network","network for openvpn server").Default("172.16.100.0/24").String()
mgmtListenHost = kingpin.Flag("mgmt.host","host for mgmt").Default("127.0.0.1").String()
mgmtListenPort = kingpin.Flag("mgmt.port","port for mgmt").Default("8989").String()
easyrsaDirPath = kingpin.Flag("easyrsa.path", "path to easyrsa dir").Default("/mnt/easyrsa").String()
indexTxtPath = kingpin.Flag("easyrsa.index-path", "path to easyrsa index file.").Default("/mnt/easyrsa/pki/index.txt").String()
ccdDir = kingpin.Flag("ccd.path", "path to client-config-dir").Default("/mnt/ccd").String()
staticPath = kingpin.Flag("static.path", "path to static dir").Default("./static").String()
debug = kingpin.Flag("debug", "Enable debug mode.").Default("false").Bool()
)
const (
usernameRegexp = `^([a-zA-Z0-9_.-])+$`
openvpnServerHost = "127.0.0.1"
openvpnServerPort = "7777"
mgmtListenHost = "127.0.0.1"
mgmtListenPort = "7788"
)
type openvpnClientConfig struct {
@ -47,14 +46,24 @@ type openvpnClientConfig struct {
TLS string
}
type ccdLine struct {
addr string `json:"addr"`
mask string `json:"mask"`
desc string `json:"desc"`
type openvpnClient struct {
Identity string `json:"Identity"`
AccountStatus string `json:"AccountStatus"`
ExpirationDate string `json:"ExpirationDate"`
RevocationDate string `json:"RevocationDate"`
ConnectionStatus string `json:"ConnectionStatus"`
}
type ccdFile struct {
lines []ccdLine
type ccdRoute struct {
Address string `json:"Address"`
Mask string `json:"Mask"`
Description string `json:"Description"`
}
type Ccd struct {
User string `json:"User"`
ClientAddress string `json:"ClientAddress"`
CustomRoutes []ccdRoute `json:"CustomRoutes"`
}
type indexTxtLine struct {
@ -80,13 +89,21 @@ type clientStatus struct {
}
func userListHandler(w http.ResponseWriter, r *http.Request) {
userList, _ := json.Marshal(indexTxtParser(fRead(*indexTxtPath)))
fmt.Fprintf(w, "%s", userList)
usersList, _ := json.Marshal(usersList())
fmt.Fprintf(w, "%s", usersList)
}
func userCreateHandler(w http.ResponseWriter, r *http.Request) {
r.ParseForm()
fmt.Fprintf(w, "%s", userCreate(r.FormValue("username")))
userCreated, userCreateStatus := userCreate(r.FormValue("username"))
if userCreated {
w.WriteHeader(http.StatusOK)
fmt.Fprintf(w, userCreateStatus)
return
} else {
http.Error(w, userCreateStatus, http.StatusUnprocessableEntity)
}
}
func userRevokeHandler(w http.ResponseWriter, r *http.Request) {
@ -101,20 +118,42 @@ func userUnrevokeHandler(w http.ResponseWriter, r *http.Request) {
func userShowConfigHandler(w http.ResponseWriter, r *http.Request) {
r.ParseForm()
fmt.Printf("username: %v\n%s\n", r.PostForm, r.FormValue("username"))
fmt.Fprintf(w, "%s", renderClientConfig(r.FormValue("username")))
}
func userDisconnectHandler(w http.ResponseWriter, r *http.Request) {
r.ParseForm()
// fmt.Fprintf(w, "%s", userDisconnect(r.FormValue("username")))
fmt.Fprintf(w, "%s", r.FormValue("username"))
}
func userShowCcdHandler(w http.ResponseWriter, r *http.Request) {
r.ParseForm()
fmt.Printf("username: %v\n%s\n", r.PostForm, r.FormValue("username"))
fmt.Fprintf(w, "%s", renderCcdConfig(r.FormValue("username")))
ccd, _ := json.Marshal(getCcd(r.FormValue("username")))
fmt.Fprintf(w, "%s", ccd)
}
func userApplyCcdHandler(w http.ResponseWriter, r *http.Request) {
r.ParseForm()
fmt.Printf("username: %v\n%s\n", r.PostForm, r.FormValue("username"))
fmt.Fprintf(w, "%s", ccdFileModify(r.FormValue("username"),ccdFileParser(r.FormValue("ccd"))))
var ccd Ccd
if r.Body == nil {
http.Error(w, "Please send a request body", 400)
return
}
err := json.NewDecoder(r.Body).Decode(&ccd)
if err != nil {
log.Println(err)
}
ccdApplied, applyStatus := modifyCcd(ccd)
if ccdApplied {
w.WriteHeader(http.StatusOK)
fmt.Fprintf(w, applyStatus)
return
} else {
http.Error(w, applyStatus, http.StatusUnprocessableEntity)
}
}
func main() {
@ -122,34 +161,26 @@ func main() {
fmt.Println("Bind: http://" + *listenHost + ":" + *listenPort)
fs := http.FileServer(http.Dir(*staticPath))
fs := CacheControlWrapper(http.FileServer(http.Dir(*staticPath)))
http.Handle("/", fs)
http.HandleFunc("/api/users/list", userListHandler)
http.HandleFunc("/api/user/create", userCreateHandler)
http.HandleFunc("/api/user/revoke", userRevokeHandler)
http.HandleFunc("/api/user/unrevoke", userUnrevokeHandler)
http.HandleFunc("/api/user/showconfig", userShowConfigHandler)
http.HandleFunc("/api/user/ccd/list", userShowCcdHandler)
http.HandleFunc("/api/user/config/show", userShowConfigHandler)
http.HandleFunc("/api/user/disconnect", userDisconnectHandler)
http.HandleFunc("/api/user/ccd", userShowCcdHandler)
http.HandleFunc("/api/user/ccd/apply", userApplyCcdHandler)
log.Fatal(http.ListenAndServe(*listenHost + ":" + *listenPort, nil))
}
func fRead(path string) string {
content, err := ioutil.ReadFile(path)
if err != nil {
log.Fatal(err)
}
return string(content)
}
func fWrite(path, content string) {
err := ioutil.WriteFile(path, []byte(content), 0644)
if err != nil {
log.Fatal(err)
}
func CacheControlWrapper(h http.Handler) http.Handler {
return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Cache-Control", "max-age=2592000") // 30 days
h.ServeHTTP(w, r)
})
}
func indexTxtParser(txt string) []indexTxtLine {
@ -163,13 +194,12 @@ func indexTxtParser(txt string) []indexTxtLine {
switch {
// case strings.HasPrefix(str[0], "E"):
case strings.HasPrefix(str[0], "V"):
indexTxt = append(indexTxt, indexTxtLine{Flag: str[0], ExpirationDate: str[1], SerialNumber: str[2], Filename: str[3], DistinguishedName: str[4], Identity: str[4][strings.Index(str[4], "=")+1:]})
indexTxt = append(indexTxt, indexTxtLine{Flag: str[0], ExpirationDate: str[1], SerialNumber: str[2], Filename: str[3], DistinguishedName: str[4], Identity: str[4][strings.Index(str[4], "=")+1:]})
case strings.HasPrefix(str[0], "R"):
indexTxt = append(indexTxt, indexTxtLine{Flag: str[0], ExpirationDate: str[1], RevocationDate: str[2], SerialNumber: str[3], Filename: str[4], DistinguishedName: str[5], Identity: str[5][strings.Index(str[5], "=")+1:]})
indexTxt = append(indexTxt, indexTxtLine{Flag: str[0], ExpirationDate: str[1], RevocationDate: str[2], SerialNumber: str[3], Filename: str[4], DistinguishedName: str[5], Identity: str[5][strings.Index(str[5], "=")+1:]})
}
}
}
return indexTxt
}
@ -178,159 +208,211 @@ func renderIndexTxt(data []indexTxtLine) string {
for _, line := range data {
switch {
case line.Flag == "V":
// if line.distinguishedName != "/CN=server" {
// fmt.Printf("%s\t%s\t\t%s\t%s\t%s\n", line.flag, line.expirationDate, line.serialNumber, line.filename, line.distinguishedName)
indexTxt += fmt.Sprintf("%s\t%s\t\t%s\t%s\t%s\n", line.Flag, line.ExpirationDate, line.SerialNumber, line.Filename, line.DistinguishedName)
// }
indexTxt += fmt.Sprintf("%s\t%s\t\t%s\t%s\t%s\n", line.Flag, line.ExpirationDate, line.SerialNumber, line.Filename, line.DistinguishedName)
case line.Flag == "R":
// if line.distinguishedName != "/CN=server" {
// fmt.Printf("%s\t%s\t%s\t%s\t%s\t%s\n", line.flag, line.expirationDate, line.revocationDate, line.serialNumber, line.filename, line.distinguishedName)
indexTxt += fmt.Sprintf("%s\t%s\t%s\t%s\t%s\t%s\n", line.Flag, line.ExpirationDate, line.RevocationDate, line.SerialNumber, line.Filename, line.DistinguishedName)
// }
// case line.flag == "E":
indexTxt += fmt.Sprintf("%s\t%s\t%s\t%s\t%s\t%s\n", line.Flag, line.ExpirationDate, line.RevocationDate, line.SerialNumber, line.Filename, line.DistinguishedName)
// case line.flag == "E":
}
}
return (indexTxt)
return indexTxt
}
func renderClientConfig(username string) string {
if checkUserExist(username) {
conf := openvpnClientConfig{}
conf.Host = openvpnServerHost
conf.Port = openvpnServerPort
conf.CA = fRead(*easyrsaPath + "/pki/ca.crt")
conf.Cert = fRead(*easyrsaPath + "/pki/issued/" + username + ".crt")
conf.Key = fRead(*easyrsaPath + "/pki/private/" + username + ".key")
conf.TLS = fRead(*easyrsaPath + "/pki/ta.key")
conf.Host = *openvpnServerHost
conf.Port = *openvpnServerPort
conf.CA = fRead(*easyrsaDirPath + "/pki/ca.crt")
conf.Cert = fRead(*easyrsaDirPath + "/pki/issued/" + username + ".crt")
conf.Key = fRead(*easyrsaDirPath + "/pki/private/" + username + ".key")
conf.TLS = fRead(*easyrsaDirPath + "/pki/ta.key")
t, _ := template.ParseFiles("client.conf.tpl")
var tmp bytes.Buffer
t.Execute(&tmp, conf)
// fmt.Printf("%+v\n", err)
fmt.Printf("%+v\n", tmp.String())
return (fmt.Sprintf("%+v\n", tmp.String()))
}
fmt.Printf("User \"%s\" not found", username)
return (fmt.Sprintf("User \"%s\" not found", username))
return fmt.Sprintf("User \"%s\" not found", username)
}
func ccdFileParser(txt string) ccdFile {
ccdFile := ccdFile{}
func parseCcd(username string) Ccd {
ccd := Ccd{}
ccd.User = username
ccd.ClientAddress = "dynamic"
ccd.CustomRoutes = []ccdRoute{}
txtLinesArray := strings.Split(txt, "\n")
txtLinesArray := strings.Split(fRead(*ccdDir + "/" + username), "\n")
for _, v := range txtLinesArray {
str := strings.Fields(v)
if len(str) > 0 {
switch {
case strings.HasPrefix(str[0], "ifconfig-push"):
ccdFile.lines = append(ccdFile.lines, ccdLine{addr: str[2], mask: str[3], desc: "Client Address"})
ccd.ClientAddress = str[1]
case strings.HasPrefix(str[0], "push"):
ccdFile.lines = append(ccdFile.lines, ccdLine{addr: str[2], mask: str[3], desc: strings.Join(str[4:], "")})
ccd.CustomRoutes = append(ccd.CustomRoutes, ccdRoute{Address: strings.Trim(str[2], "\""), Mask: strings.Trim(str[3], "\""), Description: strings.Trim(strings.Join(str[4:], ""), "#")})
}
}
}
return ccdFile
return ccd
}
func modifyCcd(ccd Ccd) (bool, string) {
if fCreate(*ccdDir + "/" + ccd.User) {
ccdValid, ccdErr := validateCcd(ccd)
if ccdErr != "" {
return false, ccdErr
}
func renderCcdConfig(username string) string {
if checkCcdExist(username) {
ccdFileParser(fRead(*ccdDir + "/" + username))
if ccdValid {
t, _ := template.ParseFiles("ccd.tpl")
var tmp bytes.Buffer
t.Execute(&tmp, ccd)
fWrite(*ccdDir + "/" + ccd.User, tmp.String())
return true, "ccd updated successfully"
}
}
fmt.Printf("ccd for user \"%s\" not found", username)
return (fmt.Sprintf("ccd for user \"%s\" not found", username))
return false, "something goes wrong"
}
func validateCcd(ccd Ccd) (bool, string) {
ccdErr := ""
func ccdFileModify(username string, ccdFile ccdFile) bool {
if checkCcdExist(username) {
if ccd.ClientAddress != "dynamic" {
_, ovpnNet, err := net.ParseCIDR(*openvpnNetwork)
if err != nil {
log.Println(err)
}
if ! checkStaticAddressIsFree(ccd.ClientAddress, ccd.User) {
ccdErr = fmt.Sprintf("ClientAddress \"%s\" already assigned to another user", ccd.ClientAddress)
if *debug {
log.Printf("ERROR: Modify ccd for user %s: %s", ccd.User, ccdErr)
}
return false, ccdErr
}
if net.ParseIP(ccd.ClientAddress) == nil {
ccdErr = fmt.Sprintf("ClientAddress \"%s\" not a valid IP address", ccd.ClientAddress)
if *debug {
log.Printf("ERROR: Modify ccd for user %s: %s", ccd.User, ccdErr)
}
return false, ccdErr
}
if ! ovpnNet.Contains(net.ParseIP(ccd.ClientAddress)) {
ccdErr = fmt.Sprintf("ClientAddress \"%s\" not belongs to openvpn server network", ccd.ClientAddress)
if *debug {
log.Printf("ERROR: Modify ccd for user %s: %s", ccdErr)
}
return false, ccdErr
}
}
return true
for _, route := range ccd.CustomRoutes {
if net.ParseIP(route.Address) == nil {
ccdErr = fmt.Sprintf("CustomRoute.Address \"%s\" must be a valid IP address", route.Address)
if *debug {
log.Printf("ERROR: Modify ccd for user %s: %s", ccdErr)
}
return false, ccdErr
}
if net.ParseIP(route.Mask) == nil {
ccdErr = fmt.Sprintf("CustomRoute.Mask \"%s\" must be a valid IP address", route.Mask)
if *debug {
log.Printf("ERROR: Modify ccd for user %s: %s", ccd.User, ccdErr)
}
return false, ccdErr
}
}
return true, ccdErr
}
// https://community.openvpn.net/openvpn/ticket/623
func crlFix() {
os.Chmod(*easyrsaPath + "/pki", 0755)
err := os.Chmod(*easyrsaPath + "/pki/crl.pem", 0640)
if err != nil {
log.Println(err)
}
func getCcd(username string) Ccd {
ccd := Ccd{}
ccd.User = username
ccd.ClientAddress = "dynamic"
ccd.CustomRoutes = []ccdRoute{}
if fCreate(*ccdDir + "/" + username) {
ccd = parseCcd(username)
}
return ccd
}
func runBash(script string) string {
fmt.Println(script)
cmd := exec.Command("bash", "-c", script)
stdout, err := cmd.CombinedOutput()
if err != nil {
return (fmt.Sprint(err) + " : " + string(stdout))
}
return (string(stdout))
func checkStaticAddressIsFree(staticAddress string, username string) bool {