Improve global proxy policy config UI

Improve the policy config ui to support auto config proxy using a pac file url
revert-dabc3590
Madawa Soysa 6 years ago committed by Madawa Soysa
parent 2a959c39a7
commit 8b2a5f5157

@ -157,11 +157,13 @@ var androidOperationModule = function () {
break;
case androidOperationConstants["GLOBAL_PROXY_OPERATION_CODE"]:
payload = {
"proxyConfigType": operationPayload["proxyConfigType"],
"proxyHost": operationPayload["proxyHost"],
"proxyPort": operationPayload["proxyPort"],
"proxyExclList": operationPayload["proxyExclList"],
"proxyUsername": operationPayload["proxyUsername"],
"proxyPassword": operationPayload["proxyPassword"]
"proxyPassword": operationPayload["proxyPassword"],
"proxyPacUrl": operationPayload["proxyPacUrl"]
};
break;
case androidOperationConstants["VPN_OPERATION_CODE"]:
@ -323,17 +325,15 @@ var androidOperationModule = function () {
break;
case androidOperationConstants["GLOBAL_PROXY_OPERATION_CODE"]:
operationType = operationTypeConstants["PROFILE"];
var proxyExclList = [];
if (operationData["proxyExclList"]) {
proxyExclList = operationData["proxyExclList"].trim().split(/\s*,\s*/);
}
payload = {
"operation": {
"proxyConfigType": operationData["proxyConfigType"],
"proxyHost": operationData["proxyHost"],
"proxyPort": operationData["proxyPort"],
"proxyExclList": proxyExclList,
"proxyExclList": operationData["proxyExclList"],
"proxyUsername": operationData["proxyUsername"],
"proxyPassword": operationData["proxyPassword"]
"proxyPassword": operationData["proxyPassword"],
"proxyPacUrl": operationData["proxyPacUrl"]
}
};
break;

@ -332,6 +332,7 @@ var validatePolicyProfile = function () {
// initializing continueToCheckNextInputs to true
continueToCheckNextInputs = true;
if ($("input#manual-proxy-configuration-radio-button").is(":checked")) {
var proxyHost = $("input#proxy-host").val();
var proxyPort = $("input#proxy-port").val();
if (!proxyHost) {
@ -365,6 +366,17 @@ var validatePolicyProfile = function () {
};
continueToCheckNextInputs = false;
}
} else if ($("input#auto-proxy-configuration-radio-button").is(":checked")) {
var pacFileUrl = $("input#proxy-pac-url").val();
if (!pacFileUrl) {
validationStatus = {
"error": true,
"subErrorMsg": "Proxy pac file URL is required for proxy auto config.",
"erroneousFeature": operation
};
continueToCheckNextInputs = false;
}
}
// at-last, if the value of continueToCheckNextInputs is still true
// this means that no error is found
@ -830,6 +842,33 @@ var slideDownPaneAgainstValueSetForRadioButtons = function (selectElement, paneI
$(paneSelector).addClass("hidden");
}
};
/**
* Method to switch panes based on the selected radio button.
*
* The method will un hide the element with the id (paneIdPrefix + selectElement.value)
*
* @param selectElement selected HTML element
* @param paneIdPrefix prefix of the id of the pane to un hide.
* @param valueSet applicable value set
*/
var switchPaneAgainstValueSetForRadioButtons = function (selectElement, paneIdPrefix, valueSet) {
var selectedValueOnChange = selectElement.value;
var paneSelector = "#" + paneIdPrefix;
for (var i = 0; i < valueSet.length; ++i) {
if (selectedValueOnChange !== valueSet[i]) {
if ($(paneSelector).hasClass("expanded")) {
$(paneSelector).removeClass("expanded");
}
$(paneSelector + valueSet[i]).slideUp();
} else {
if (!$(paneSelector).hasClass("expanded")) {
$(paneSelector).addClass("expanded");
}
$(paneSelector + selectedValueOnChange).slideDown();
}
}
};
// End of HTML embedded invoke methods

@ -979,57 +979,99 @@
device. Once this configuration profile is installed on a device, all the network traffic
will be routed through the proxy server.
</p>
<p>
<b>This method requires the caller to be the device owner.</b>
</p>
<p>
This proxy is only a recommendation and it is possible that some apps will ignore it.
</p>
</div>
</div>
<div id="global-proxy-body" class="panel-collapse panel-body collapse" role="tabpanel"
aria-labelledby="global-proxy-body">
<hr/>
<ul class="message message-info">
<i class="icon fw fw-info"></i>
<a id="global-proxy-info-message">
This profile requires the agent application to be the device owner.
</a>
</ul>
<br>
<ul class="message message-warning">
<i class="icon fw fw-warning"></i>
<a id="global-proxy-warning-message">
This proxy is only a recommendation and it is possible that some apps will ignore it.
</a>
</ul>
<br>
Please note that * sign represents required fields of data.
<br>
<br>
<div id="global-proxy-feature-error-msg" class="alert alert-danger hidden" role="alert">
<i class="icon fw fw-error"></i><span></span>
</div>
<label class="wr-input-label" for="proxy-config-type-container">
Proxy Configuration Type
<span class="helper" title="Select the configuration type.">
<span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
</span>
</label>
<div class="wr-input-control" id="proxy-config-type-container">
<label class="wr-input-control radio light">
<input id="manual-proxy-configuration-radio-button" type="radio" name="global-proxy-config-type"
class="form-control operationDataKeys" data-key="proxyConfigType"
value="manual"
onload="switchPaneAgainstValueSetForRadioButtons(this,
'global-proxy-configuration-type-', ['manual','auto'])"
onchange="switchPaneAgainstValueSetForRadioButtons(this,
'global-proxy-configuration-type-', ['manual','auto'])" checked/>
<span class="helper"title="Manually enter proxy configurations.">
Manual
</span>
</label>
<label class="wr-input-control radio light">
<input id="auto-proxy-configuration-radio-button" type="radio" name="global-proxy-config-type"
class="form-control operationDataKeys" data-key="proxyConfigType"
value="auto"
onload="switchPaneAgainstValueSetForRadioButtons(this,
'global-proxy-configuration-type-', ['auto','manual'])"
onchange="switchPaneAgainstValueSetForRadioButtons(this,
'global-proxy-configuration-type-', ['auto','manual'])"/>
<span class="helper"
title="Proxy configurations will be automatically fetched from Proxy PAC file.">
Auto
</span>
</label>
</div>
<div id="global-proxy-configuration-type-manual" class="wr-input-control" style="display:block">
<div class="wr-input-control">
<label class="wr-input-label" for="proxy-host">
Proxy Host
<span class="helper required" title="Host name of the proxy server.">
<span class="helper required" title="Host name/IP address of the proxy server.">
<span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
</span>
</label>
<input id="proxy-host" class="form-control operationDataKeys" data-key="proxyHost"/>
<input id="proxy-host" class="form-control operationDataKeys" data-key="proxyHost"
placeholder="[ 192.168.8.1 ]"/>
</div>
<div class="wr-input-control">
<label class="wr-input-label" for="proxy-port">
Proxy Port
<span class="helper required" title="The port which the proxy server is running.">
<span class="helper required" title="Target port for the proxy server">
<span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
</span>
</label>
<label id="proxyPortValidationText" class="wr-input-label hidden">
Port number should be between 0 - 65535
Target port should be between 0 - 65535
</label>
<input id="proxy-port" class="form-control operationDataKeys" data-key="proxyPort"
placeholder="[ Port number 0-65535 ]"/>
placeholder="[ Target port 0-65535 ]"/>
</div>
<div class="wr-input-control">
<label class="wr-input-label" for="proxy-excl">
Excluded List
Proxy Exclusion List
<span class="helper"
title="Hosts to exclude using the proxy on connections for. These hosts can use
wildcards such as *.example.com.">
title="Add hostnames to this separated by commas to prevent them from routing through the proxy server.
The hostname entries can be wildcards such as *.example.com">
<span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
</span>
</label>
<input id="proxy-excl" class="form-control operationDataKeys" data-key="proxyExclList"
placeholder="[ Comma (,) separated list of proxy exclusions. These hosts can use
wildcards such as *.example.com. ]"/>
placeholder="[ Example: localhost, *.example.com ]"/>
</div>
<div class="wr-input-control" id="control-proxy-username">
<label class="wr-input-label" for="proxy-username">
@ -1051,7 +1093,19 @@
<input id="proxy-password" type="password" class="form-control operationDataKeys"
data-key="proxyPassword" maxlength="100"/>
</div>
<!--</div>-->
</div>
<div id="global-proxy-configuration-type-auto" class="wr-input-control" style="display:none">
<div class="wr-input-control">
<label class="wr-input-label" for="proxy-host">
Proxy PAC File URL
<span class="helper required" title="URL for the proxy auto config PAC script">
<span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
</span>
</label>
<input id="proxy-pac-url" class="form-control operationDataKeys" data-key="proxyPacUrl"
placeholder="[ http://exampleproxy.com/proxy.pac ]"/>
</div>
</div>
</div>
</div>
</div>

@ -166,6 +166,33 @@ var slideDownPaneAgainstValueSetForRadioButtons = function (selectElement, paneI
$(paneSelector).addClass("hidden");
}
};
/**
* Method to switch panes based on the selected radio button.
*
* The method will un hide the element with the id (paneIdPrefix + selectElement.value)
*
* @param selectElement selected HTML element
* @param paneIdPrefix prefix of the id of the pane to un hide.
* @param valueSet applicable value set
*/
var switchPaneAgainstValueSetForRadioButtons = function (selectElement, paneIdPrefix, valueSet) {
var selectedValueOnChange = selectElement.value;
var paneSelector = "#" + paneIdPrefix;
for (var i = 0; i < valueSet.length; ++i) {
if (selectedValueOnChange !== valueSet[i]) {
if ($(paneSelector).hasClass("expanded")) {
$(paneSelector).removeClass("expanded");
}
$(paneSelector + valueSet[i]).slideUp();
} else {
if (!$(paneSelector).hasClass("expanded")) {
$(paneSelector).addClass("expanded");
}
$(paneSelector + selectedValueOnChange).slideDown();
}
}
};
// End of HTML embedded invoke methods
/**

@ -968,7 +968,8 @@
<!-- global-proxy -->
<div class="wr-hidden-operation" data-operation="global-proxy">
<div class="panel panel-default operation-data" data-operation="global-proxy" data-operation-code="GLOBAL_PROXY">
<div class="panel panel-default operation-data" data-operation="global-proxy"
data-operation-code="GLOBAL_PROXY">
<div id="global-proxy-heading" class="panel-heading" role="tab">
<h2 class="sub-title panel-title">
Global Proxy Settings
@ -984,57 +985,94 @@
device. Once this configuration profile is installed on a device, all the network traffic
will be routed through the proxy server.
</p>
<p>
<b>This method requires the caller to be the device owner.</b>
</p>
<p>
This proxy is only a recommendation and it is possible that some apps will ignore it.
</p>
</div>
</div>
<div id="global-proxy-body" class="panel-collapse panel-body collapse" role="tabpanel"
aria-labelledby="global-proxy-body">
<hr/>
<ul class="message message-info">
<i class="icon fw fw-info"></i>
<a id="global-proxy-info-message">
This profile requires the agent application to be the device owner.
</a>
</ul>
<br>
<ul class="message message-warning">
<i class="icon fw fw-warning"></i>
<a id="global-proxy-warning-message">
This proxy is only a recommendation and it is possible that some apps will ignore it.
</a>
</ul>
<br>
Please note that * sign represents required fields of data.
<br>
<br>
<div id="global-proxy-feature-error-msg" class="alert alert-danger hidden" role="alert">
<i class="icon fw fw-error"></i><span></span>
</div>
<label class="wr-input-label" for="proxy-config-type-container">
Proxy Configuration Type
<span class="helper" title="Select the configuration type.">
<span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
</span>
</label>
<div class="wr-input-control" id="proxy-config-type-container">
<label class="wr-input-control radio light">
<input id="manual-proxy-configuration-radio-button" type="radio"
name="global-proxy-config-type"
class="form-control operationDataKeys" data-key="proxyConfigType"
value="manual" disabled/>
<span class="helper" title="Manually enter proxy configurations.">
Manual
</span>
</label>
<label class="wr-input-control radio light">
<input id="auto-proxy-configuration-radio-button" type="radio"
name="global-proxy-config-type"
class="form-control operationDataKeys" data-key="proxyConfigType"
value="auto" disabled/>
<span class="helper"
title="Proxy configurations will be automatically fetched from Proxy PAC file.">
Auto
</span>
</label>
</div>
<div id="global-proxy-configuration-type-manual" class="wr-input-control expanded">
<div class="wr-input-control">
<label class="wr-input-label" for="proxy-host">
Proxy Host
<span class="helper required" title="Host name of the proxy server.">
<span class="helper required" title="Host name/IP address of the proxy server.">
<span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
</span>
</label>
<input id="proxy-host" class="form-control operationDataKeys" data-key="proxyHost"/>
<input id="proxy-host" class="form-control operationDataKeys" data-key="proxyHost"
placeholder="[ 192.168.8.1 ]" disabled/>
</div>
<div class="wr-input-control">
<label class="wr-input-label" for="proxy-port">
Proxy Port
<span class="helper required" title="The port which the proxy server is running.">
<span class="helper required" title="Target port for the proxy server">
<span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
</span>
</label>
<label id="proxyPortValidationText" class="wr-input-label hidden">
Port number should be between 0 - 65535
Target port should be between 0 - 65535
</label>
<input id="proxy-port" class="form-control operationDataKeys" data-key="proxyPort"
placeholder="[ Port number 0-65535 ]"/>
placeholder="[ Target port 0-65535 ]" disabled/>
</div>
<div class="wr-input-control">
<label class="wr-input-label" for="proxy-excl">
Excluded List
Proxy Exclusion List
<span class="helper"
title="Hosts to exclude using the proxy on connections for. These hosts can use
wildcards such as *.example.com.">
title="Add hostnames to this separated by commas to prevent them from routing
through the proxy server. The hostname entries can be wildcards such as
*.example.com">
<span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
</span>
</label>
<input id="proxy-excl" class="form-control operationDataKeys" data-key="proxyExclList"
placeholder="[ Comma (,) separated list of proxy exclusions. These hosts can use
wildcards such as *.example.com. ]"/>
placeholder="[ Example: localhost, *.example.com ]" disabled/>
</div>
<div class="wr-input-control" id="control-proxy-username">
<label class="wr-input-label" for="proxy-username">
@ -1044,7 +1082,7 @@
</span>
</label>
<input id="proxy-username" class="form-control operationDataKeys"
data-key="proxyUsername" maxlength="50"/>
data-key="proxyUsername" maxlength="50" disabled/>
</div>
<div class="wr-input-control" id="control-proxy-password">
<label class="wr-input-label" for="proxy-password">
@ -1054,9 +1092,21 @@
</span>
</label>
<input id="proxy-password" type="password" class="form-control operationDataKeys"
data-key="proxyPassword" maxlength="100"/>
data-key="proxyPassword" maxlength="100" disabled/>
</div>
</div>
<div id="global-proxy-configuration-type-auto" class="wr-input-control">
<div class="wr-input-control">
<label class="wr-input-label" for="proxy-host">
Proxy PAC File URL
<span class="helper required" title="URL for the proxy auto config PAC script">
<span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
</span>
</label>
<input id="proxy-pac-url" class="form-control operationDataKeys" data-key="proxyPacUrl"
placeholder="[ http://exampleproxy.com/proxy.pac ]" disabled/>
</div>
</div>
<!--</div>-->
</div>
</div>
</div>

@ -251,6 +251,7 @@ var validatePolicyProfile = function () {
// initializing continueToCheckNextInputs to true
continueToCheckNextInputs = true;
if ($("input#manual-proxy-configuration-radio-button").is(":checked")) {
var proxyHost = $("input#proxy-host").val();
var proxyPort = $("input#proxy-port").val();
if (!proxyHost) {
@ -284,6 +285,17 @@ var validatePolicyProfile = function () {
};
continueToCheckNextInputs = false;
}
} else if ($("input#auto-proxy-configuration-radio-button").is(":checked")) {
var pacFileUrl = $("input#proxy-pac-url").val();
if (!pacFileUrl) {
validationStatus = {
"error": true,
"subErrorMsg": "Proxy pac file URL is required for proxy auto config.",
"erroneousFeature": operation
};
continueToCheckNextInputs = false;
}
}
// at-last, if the value of continueToCheckNextInputs is still true
// this means that no error is found
@ -795,6 +807,33 @@ var slideDownPaneAgainstValueSetForRadioButtons = function (selectElement, paneI
}
};
/**
* Method to switch panes based on the selected radio button.
*
* The method will un hide the element with the id (paneIdPrefix + selectElement.value)
*
* @param selectElement selected HTML element
* @param paneIdPrefix prefix of the id of the pane to un hide.
* @param valueSet applicable value set
*/
var switchPaneAgainstValueSetForRadioButtons = function (selectElement, paneIdPrefix, valueSet) {
var selectedValueOnChange = selectElement.value;
var paneSelector = "#" + paneIdPrefix;
for (var i = 0; i < valueSet.length; ++i) {
if (selectedValueOnChange !== valueSet[i]) {
if ($(paneSelector).hasClass("expanded")) {
$(paneSelector).removeClass("expanded");
}
$(paneSelector + valueSet[i]).slideUp();
} else {
if (!$(paneSelector).hasClass("expanded")) {
$(paneSelector).addClass("expanded");
}
$(paneSelector + selectedValueOnChange).slideDown();
}
}
};
// End of HTML embedded invoke methods

@ -1003,57 +1003,99 @@
device. Once this configuration profile is installed on a device, all the network traffic
will be routed through the proxy server.
</p>
<p>
<b>This method requires the caller to be the device owner.</b>
</p>
<p>
This proxy is only a recommendation and it is possible that some apps will ignore it.
</p>
</div>
</div>
<div id="global-proxy-body" class="panel-collapse panel-body collapse" role="tabpanel"
aria-labelledby="global-proxy-body">
<hr/>
<ul class="message message-info">
<i class="icon fw fw-info"></i>
<a id="global-proxy-info-message">
This profile requires the agent application to be the device owner.
</a>
</ul>
<br>
<ul class="message message-warning">
<i class="icon fw fw-warning"></i>
<a id="global-proxy-warning-message">
This proxy is only a recommendation and it is possible that some apps will ignore it.
</a>
</ul>
<br>
Please note that * sign represents required fields of data.
<br>
<br>
<div id="global-proxy-feature-error-msg" class="alert alert-danger hidden" role="alert">
<i class="icon fw fw-error"></i><span></span>
</div>
<label class="wr-input-label" for="proxy-config-type-container">
Proxy Configuration Type
<span class="helper" title="Select the configuration type.">
<span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
</span>
</label>
<div class="wr-input-control" id="proxy-config-type-container">
<label class="wr-input-control radio light">
<input id="manual-proxy-configuration-radio-button" type="radio" name="global-proxy-config-type"
class="form-control operationDataKeys" data-key="proxyConfigType"
value="manual"
onload="switchPaneAgainstValueSetForRadioButtons(this,
'global-proxy-configuration-type-', ['manual','auto'])"
onchange="switchPaneAgainstValueSetForRadioButtons(this,
'global-proxy-configuration-type-', ['manual','auto'])" checked/>
<span class="helper"title="Manually enter proxy configurations.">
Manual
</span>
</label>
<label class="wr-input-control radio light">
<input id="auto-proxy-configuration-radio-button" type="radio" name="global-proxy-config-type"
class="form-control operationDataKeys" data-key="proxyConfigType"
value="auto"
onload="switchPaneAgainstValueSetForRadioButtons(this,
'global-proxy-configuration-type-', ['auto','manual'])"
onchange="switchPaneAgainstValueSetForRadioButtons(this,
'global-proxy-configuration-type-', ['auto','manual'])"/>
<span class="helper"
title="Proxy configurations will be automatically fetched from Proxy PAC file.">
Auto
</span>
</label>
</div>
<div id="global-proxy-configuration-type-manual" class="wr-input-control" style="display:block">
<div class="wr-input-control">
<label class="wr-input-label" for="proxy-host">
Proxy Host
<span class="helper required" title="Host name of the proxy server.">
<span class="helper required" title="Host name/IP address of the proxy server.">
<span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
</span>
</label>
<input id="proxy-host" class="form-control operationDataKeys" data-key="proxyHost"/>
<input id="proxy-host" class="form-control operationDataKeys" data-key="proxyHost"
placeholder="[ 192.168.8.1 ]"/>
</div>
<div class="wr-input-control">
<label class="wr-input-label" for="proxy-port">
Proxy Port
<span class="helper required" title="The port which the proxy server is running.">
<span class="helper required" title="Target port for the proxy server">
<span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
</span>
</label>
<label id="proxyPortValidationText" class="wr-input-label hidden">
Port number should be between 0 - 65535
Target port should be between 0 - 65535
</label>
<input id="proxy-port" class="form-control operationDataKeys" data-key="proxyPort"
placeholder="[ Port number 0-65535 ]"/>
placeholder="[ Target port 0-65535 ]"/>
</div>
<div class="wr-input-control">
<label class="wr-input-label" for="proxy-excl">
Excluded List
Proxy Exclusion List
<span class="helper"
title="Hosts to exclude using the proxy on connections for. These hosts can use
wildcards such as *.example.com.">
title="Add hostnames to this separated by commas to prevent them from routing through the proxy server.
The hostname entries can be wildcards such as *.example.com">
<span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
</span>
</label>
<input id="proxy-excl" class="form-control operationDataKeys" data-key="proxyExclList"
placeholder="[ Comma (,) separated list of proxy exclusions. These hosts can use
wildcards such as *.example.com. ]"/>
placeholder="[ Example: localhost, *.example.com ]"/>
</div>
<div class="wr-input-control" id="control-proxy-username">
<label class="wr-input-label" for="proxy-username">
@ -1075,7 +1117,19 @@
<input id="proxy-password" type="password" class="form-control operationDataKeys"
data-key="proxyPassword" maxlength="100"/>
</div>
<!--</div>-->
</div>
<div id="global-proxy-configuration-type-auto" class="wr-input-control" style="display:none">
<div class="wr-input-control">
<label class="wr-input-label" for="proxy-host">
Proxy PAC File URL
<span class="helper required" title="URL for the proxy auto config PAC script">
<span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
</span>
</label>
<input id="proxy-pac-url" class="form-control operationDataKeys" data-key="proxyPacUrl"
placeholder="[ http://exampleproxy.com/proxy.pac ]"/>
</div>
</div>
</div>
</div>
</div>

Loading…
Cancel
Save