CLOUDSTACK-8961: Changes related to the UI of VPN Users management. (#2130)

The current VPN users are added in the VPN tab inside the public IP after the VPN is enabled. For each network(for which VPN is supported and enabled), the VPN users are shared. As the Cloudstack doc says “ The account owner can create and manage users for their VPN. CloudStack does not use its account database for this purpose but uses a separate table. The VPN user database is shared across all the VPNs created by the account owner. All VPN users get access to all VPNs created by the account owner.”

The current implementation of going inside each network and adding VPN users give the first feel as if the users are network based. To fix this, Shifted the VPN users to networks tab view.
This commit is contained in:
Nitin Kumar Maharana 2017-08-03 03:44:53 +05:30 committed by Rohit Yadav
parent 5ccbe04c0a
commit 1b898d610c
2 changed files with 303 additions and 93 deletions

View File

@ -1777,6 +1777,7 @@ var dictionary = {"ICMP.code":"ICMP Code",
"label.vpn":"VPN",
"label.vpn.customer.gateway":"VPN Customer Gateway",
"label.vpn.force.encapsulation":"Force UDP Encapsulation of ESP Packets",
"label.vpn.users":"VPN Users",
"label.vsmctrlvlanid":"Control VLAN ID",
"label.vsmpktvlanid":"Packet VLAN ID",
"label.vsmstoragevlanid":"Storage VLAN ID",
@ -1847,6 +1848,7 @@ var dictionary = {"ICMP.code":"ICMP Code",
"message.action.delete.template":"Please confirm that you want to delete this template.",
"message.action.delete.template.for.all.zones":"The template is used by all zones. Please confirm that you want to delete it from all zones.",
"message.action.delete.volume":"Please confirm that you want to delete this volume.",
"message.action.delete.vpn.user":"Please confirm that you want to delete the VPN user.",
"message.action.delete.zone":"Please confirm that you want to delete this zone.",
"message.action.destroy.instance":"Please confirm that you want to destroy this instance.",
"message.action.destroy.systemvm":"Please confirm that you want to destroy this System VM.",
@ -2077,6 +2079,7 @@ var dictionary = {"ICMP.code":"ICMP Code",
"message.enable.vpn.access":"VPN is currently disabled for this IP Address. Would you like to enable VPN access?",
"message.enabled.vpn":"Your Remote Access VPN is currently enabled and can be accessed via the IP",
"message.enabled.vpn.ip.sec":"Your IPSec pre-shared key is",
"message.enabled.vpn.note":"Note: VPN users are now accessed by changing views at the networks tab.",
"message.enabling.network.offering":"Enabling network offering",
"message.enabling.security.group.provider":"Enabling Security Group provider",
"message.enabling.vpc.offering":"Enabling VPC offering",

View File

@ -400,6 +400,23 @@
}
}
}
//Ajax call to check if VPN is enabled.
$.ajax({
url: createURL('listRemoteAccessVpns'),
data: {
account: g_account,
domainid: g_domainid,
listAll: true
},
async: false,
success: function(vpnResponse) {
var isVPNEnabled = vpnResponse.listremoteaccessvpnsresponse.count;
if (isVPNEnabled) {
sectionsToShow.push('vpnuser');
}
}
});
}
});
@ -4259,99 +4276,11 @@
$('<li>').addClass('psk').html(_l('message.enabled.vpn.ip.sec') + ' ')
.append($('<strong>').html(psk))
)
).multiEdit({
context: args.context,
noSelect: true,
fields: {
'username': {
edit: true,
label: 'label.username'
},
'password': {
edit: true,
isPassword: true,
label: 'label.password'
},
'add-user': {
addButton: true,
label: 'label.add.user'
}
},
add: {
label: 'label.add.user',
action: function(args) {
$.ajax({
url: createURL('addVpnUser'),
data: $.extend(args.data, {
domainid: args.context.ipAddresses[0].domainid,
account: args.context.ipAddresses[0].account
}),
dataType: 'json',
type: "POST",
success: function(data) {
args.response.success({
_custom: {
jobId: data.addvpnuserresponse.jobid
},
notification: {
label: 'label.add.vpn.user',
poll: pollAsyncJobResult
}
});
},
error: function(data) {
args.response.error(parseXMLHttpResponse(data));
}
});
}
},
actions: {
destroy: {
label: 'label.action.delete.user',
action: function(args) {
$.ajax({
url: createURL('removeVpnUser'),
data: {
domainid: args.context.multiRule[0].domainid,
account: args.context.multiRule[0].account,
username: args.context.multiRule[0].username
},
dataType: 'json',
async: true,
success: function(data) {
var jobID = data.removevpnuserresponse.jobid;
args.response.success({
_custom: {
jobId: jobID
},
notification: {
label: 'label.delete.vpn.user',
poll: pollAsyncJobResult
}
});
}
});
}
}
},
dataProvider: function(args) {
$.ajax({
url: createURL('listVpnUsers'),
data: {
domainid: args.context.ipAddresses[0].domainid,
account: args.context.ipAddresses[0].account
},
dataType: 'json',
async: true,
success: function(data) {
args.response.success({
data: data.listvpnusersresponse.vpnuser
});
}
});
}
});
.append(
//Note
$('<li>').html(_l('message.enabled.vpn.note'))
)
)
}
}
}
@ -6339,6 +6268,284 @@
item.perfectForwardSecrecy = a2[1];
}
args.response.success({
data: item
});
}
});
}
}
}
}
}
},
vpnuser: {
type: 'select',
title: 'label.vpn.users',
listView: {
id: 'vpnUsers',
label: 'label.vpn.users',
fields: {
username: {
label: 'label.name'
},
domain: {
label: 'label.domain'
},
state: {
label: 'label.state'
}
},
dataProvider: function(args) {
var data = {};
listViewDataProvider(args, data);
$.ajax({
url: createURL('listVpnUsers'),
data: data,
dataType: 'json',
success: function(json) {
var items = json.listvpnusersresponse.vpnuser;
args.response.success({
data: items
});
}
});
},
actions:{
destroy: {
label: 'label.action.delete.user',
messages: {
confirm: function(args) {
return 'message.action.delete.vpn.user'
},
notification: function(args) {
return 'label.delete.vpn.user'
}
},
action: function(args) {
console.log(args.context);
$.ajax({
url: createURL('removeVpnUser'),
data: {
domainid: args.context.vpnuser[0].domainid,
account: args.context.vpnuser[0].account,
username: args.context.vpnuser[0].username
},
dataType: 'json',
async: true,
success: function(json) {
var jobID = json.removevpnuserresponse.jobid;
args.response.success({
_custom: {
jobId: jobID
}
});
}
});
},
notification: {
poll: pollAsyncJobResult
}
},
add: {
label: 'label.add.user',
messages: {
notification: function(args) {
return 'label.add.vpn.user';
}
},
createForm:{
title: 'label.add.vpn.user',
fields: {
username: {
edit: true,
label: 'label.username',
validation: {
required: true
}
},
password: {
edit: true,
isPassword: true,
label: 'label.password',
validation: {
required: true
}
},
domain: {
label: 'label.domain',
isHidden: function(args) {
if (isAdmin() || isDomainAdmin())
return false;
else
return true;
},
select: function(args) {
if (isAdmin() || isDomainAdmin()) {
$.ajax({
url: createURL("listDomains&listAll=true"),
success: function(json) {
var items = [];
items.push({
id: "",
description: ""
});
var domainObjs = json.listdomainsresponse.domain;
$(domainObjs).each(function() {
items.push({
id: this.id,
description: this.path
});
});
items.sort(function(a, b) {
return a.description.localeCompare(b.description);
});
args.response.success({
data: items
});
}
});
args.$select.change(function() {
var $form = $(this).closest('form');
if ($(this).val() == "") {
$form.find('.form-item[rel=account]').hide();
} else {
$form.find('.form-item[rel=account]').css('display', 'inline-block');
}
});
} else {
args.response.success({
data: null
});
}
}
},
account: {
label: 'label.account',
validation: {
required: true
},
isHidden: function(args) {
if (isAdmin() || isDomainAdmin()) {
return false;
} else {
return true;
}
}
}
}
},
action: function(args) {
var data = {
username: args.data.username,
password: args.data.password
};
if (args.data.domain != null && args.data.domain.length > 0) {
$.extend(data, {
domainid: args.data.domain
});
if (args.data.account != null && args.data.account.length > 0) {
$.extend(data, {
account: args.data.account
});
}
}
$.ajax({
url: createURL('addVpnUser'),
data: data,
dataType: 'json',
async: true,
success: function(json) {
var jid = json.addvpnuserresponse.jobid;
args.response.success({
_custom: {
jobId: jid,
getUpdatedItem: function(json) {
return json.queryasyncjobresultresponse.jobresult.vpnuser;
}
}
});
}
});
},
notification: {
poll: pollAsyncJobResult
}
}
},
detailView: {
name: 'label.details',
actions: {
destroy: {
label: 'label.action.delete.user',
messages: {
confirm: function(args) {
return 'message.action.delete.vpn.user';
},
notification: function(args) {
return 'label.delete.vpn.user';
}
},
action: function(args) {
$.ajax({
url: createURL("removeVpnUser"),
data: {
domainid: args.context.vpnuser[0].domainid,
account: args.context.vpnuser[0].account,
username: args.context.vpnuser[0].username
},
dataType: 'json',
async: true,
success: function(json) {
var jid = json.removevpnuserresponse.jobid;
args.response.success({
_custom: {
jobId: jid
}
});
}
});
},
notification: {
poll: pollAsyncJobResult
}
}
},
tabs: {
details: {
title: 'label.details',
fields: [{
username: {
label: 'label.name',
validation: {
required: true
}
}
}, {
domain: {
label: 'label.domain'
},
state: {
label: 'label.state'
},
}],
dataProvider: function(args) {
$.ajax({
url: createURL("listVpnUsers"),
data: {
id: args.context.vpnuser[0].id
},
success: function(json) {
var item = json.listvpnusersresponse.vpnuser[0];
args.response.success({
data: item
});