157 lines
4.1 KiB
JavaScript
157 lines
4.1 KiB
JavaScript
import Vue from 'vue';
|
|
import axios from 'axios';
|
|
import VueClipboard from 'vue-clipboard2'
|
|
|
|
Vue.use(VueClipboard)
|
|
|
|
var axios_cfg = function(url, data='', type='form') {
|
|
if (data == '') {
|
|
return {
|
|
method: 'get',
|
|
url: url
|
|
};
|
|
} else if (type == 'form') {
|
|
return {
|
|
method: 'post',
|
|
url: url,
|
|
data: data,
|
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
|
|
};
|
|
} else if (type == 'file') {
|
|
return {
|
|
method: 'post',
|
|
url: url,
|
|
data: data,
|
|
headers: { 'Content-Type': 'multipart/form-data' }
|
|
};
|
|
}
|
|
};
|
|
|
|
new Vue({
|
|
el: '#app',
|
|
data: {
|
|
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: '',
|
|
modalNewUserVisible: false,
|
|
modalShowConfigVisible: false,
|
|
openvpnConfig: ''
|
|
}
|
|
},
|
|
watch: {
|
|
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) {
|
|
var data = new URLSearchParams();
|
|
data.append('username', _this.u.name);
|
|
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 () {
|
|
var data = new URLSearchParams();
|
|
data.append('username', _this.u.name);
|
|
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;
|
|
var data = new URLSearchParams();
|
|
data.append('username', _this.u.name);
|
|
axios.request(axios_cfg('api/user/showconfig', data, 'form'))
|
|
.then(function(response) {
|
|
_this.u.openvpnConfig = response.data;
|
|
});
|
|
})
|
|
this.$root.$on('u-edit-ccd', function () {
|
|
this.u.modalShowCcdVisible = true;
|
|
var data = new URLSearchParams();
|
|
data.append('username', _this.u.name);
|
|
axios.request(axios_cfg('api/user/ccd/list', data, 'form'))
|
|
.then(function(response) {
|
|
_this.u.ccds = 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);
|
|
},
|
|
u_ctx_click: function (e) {
|
|
this.$root.$emit(e.target.dataset.name)
|
|
this.u_ctx_hide()
|
|
},
|
|
u_ctx_hide: function () {
|
|
this.u.ctxVisible = false
|
|
},
|
|
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
|
|
},
|
|
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
|
|
});
|
|
},
|
|
create_user: function() {
|
|
var _this = this;
|
|
var data = new URLSearchParams();
|
|
data.append('username', this.u.newUserName);
|
|
axios.request(axios_cfg('api/user/create', data, 'form'))
|
|
.then(function(response) {
|
|
console.log(response.data);
|
|
_this.u_get_data();
|
|
_this.u.newUserName = '';
|
|
});
|
|
},
|
|
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'))
|
|
.then(function(response) {
|
|
console.log(response.data);
|
|
_this.u_get_data();
|
|
_this.u.newUserName = '';
|
|
});
|
|
}
|
|
}
|
|
})
|