Adding emm policy edit UI

components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/units/mdm.unit.policy.edit/edit.hbs

@@ -1,20 +1,4 @@
-{{!
+{{#zone "content"}}
-  Copyright (c) 2016, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
-
-  WSO2 Inc. licenses this file to you under the Apache License,
-  Version 2.0 (the "License"); you may not use this file except
-  in compliance with the License.
-  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-  Unless required by applicable law or agreed to in writing,
-  software distributed under the License is distributed on an
-  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-  KIND, either express or implied. See the License for the
-  specific language governing permissions and limitations
-  under the License.
-}}
     <div class="row">
     <div class="col-md-12">
 
@@ -39,10 +23,10 @@
             <br>Please click <b>"Add Another Policy"</b>, if you wish to add another policy or click
             <b>"View policy list"</b> to complete the process and go back to the policy list.
             <hr>
-                    <button class="wr-btn wizard-stepper" data-current="policy-message" data-direct="{{@app.context}}/policies/">
+            <button class="wr-btn wizard-stepper" data-current="policy-message" data-direct="/emm/policies/">
                 View policy list
             </button>
-                    <a href="{{@app.context}}/policy/add" class="cu-btn-inner">
+            <a href="/emm/policies/add-policy" class="cu-btn-inner">
                         <span class="fw-stack">
                             <i class="fw fw-ring fw-stack-2x"></i>
                             <i class="fw fw-add fw-stack-1x"></i>
@@ -60,7 +44,7 @@
             <hr>
             <div class="row">
                 <div class="col-lg-12">
-                            <h4>Step 3: Republish to devices</h4>
+                    <h4 class="visible-xs">Step 3: Republish to devices</h4>
                     <br>
                     <div id="policy-naming-main-error-msg" class="alert alert-danger hidden" role="alert">
                         <i class="icon fw fw-error"></i><span></span>
@@ -70,11 +54,13 @@
                             Set a name * to your policy<br>
                             ( should be 1-to-30 characters long )
                         </label>
-                                <div class="wr-input-control">
+                        <div id="policy-name-field" class="form-group wr-input-control">
                             <div class="cus-col-50">
                                 <input id="policy-name-input" class="form-control" type="text" value="" placeholder="[ Required field ]"/>
                             </div>
                             <br class="c-both"/>
+                            <span class=" nameError hidden glyphicon glyphicon-remove form-control-feedback"></span>
+                            <label class="error nameEmpty hidden" for="summary">Policy name is required & Should be be 1-to-30 characters long.</label>
                         </div>
                         <label class="wr-input-label">
                             Add a description
@@ -111,7 +97,7 @@
             <hr>
             <div class="row">
                 <div class="col-lg-12">
-                            <h4>Step 2: Edit assignment groups</h4>
+                    <h4 class="visible-xs">Step 2: Edit assignment groups</h4>
                     <br>
                     <div id="policy-criteria-main-error-msg" class="alert alert-danger hidden" role="alert">
                         <i class="icon fw fw-error"></i><span></span>
@@ -159,7 +145,7 @@
                                     <select id="users-input" class="form-control select2" multiple="multiple">
                                         <option value="ANY" selected>ANY</option>
                                         {{#each users}}
-                                                    <option>{{this}}</option>
+                                            <option>{{username}}</option>
                                         {{/each}}
                                     </select>
                                 </div>
@@ -202,7 +188,7 @@
             <hr>
             <div class="row">
                 <div class="col-lg-12">
-                            <h4>Step 1: Edit current profile</h4>
+                    <h4 class="visible-xs">Step 1: Edit current profile</h4>
                     <br>
                     <div id="policy-profile-main-error-msg" class="alert alert-danger hidden" role="alert">
                         <i class="icon fw fw-error"></i><span></span>
@@ -210,8 +196,9 @@
                     <div class="wr-advance-operations">
                         <div class="wr-advance-operations-init">
                             <br>
+                            &nbsp;&nbsp;
                             <i class="fw fw-settings fw-spin fw-2x"></i>
-                                    Loading platform features . . .
+                            &nbsp;Loading platform features . . .
                             <br>
                             <br>
                         </div>
@@ -230,10 +217,17 @@
 
     </div>
     </div>
+{{/zone}}
 {{#zone "bottomJs"}}
-    <script id="hidden-operations-ios" src="{{@unit.publicUri}}/templates/hidden-operations-ios.hbs" type="text/x-handlebars-template" ></script>
+    <!--suppress HtmlUnknownTarget -->
-    <script id="hidden-operations-android" src="{{@unit.publicUri}}/templates/hidden-operations-android.hbs" type="text/x-handlebars-template" ></script>
+    <script id="hidden-operations-ios" src="{{@unit.publicUri}}/templates/hidden-operations-ios.hbs"
-    <script id="hidden-operations-windows" src="{{@unit.publicUri}}/templates/hidden-operations-windows.hbs" type="text/x-handlebars-template" ></script>
+            type="text/x-handlebars-template"></script>
-    {{js "js/policy-create.js"}}
+    <!--suppress HtmlUnknownTarget -->
+    <script id="hidden-operations-android" src="{{@unit.publicUri}}/templates/hidden-operations-android.hbs"
+            type="text/x-handlebars-template"></script>
+    <!--suppress HtmlUnknownTarget -->
+    <script id="hidden-operations-windows" src="{{@unit.publicUri}}/templates/hidden-operations-windows.hbs"
+            type="text/x-handlebars-template"></script>
+    {{js "js/edit.js"}}
 {{/zone}}
 

components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/units/mdm.unit.policy.edit/edit.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2016, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ * Copyright (c) 2015, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
  *
  * WSO2 Inc. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
@@ -10,8 +10,8 @@
  *
  * Unless required by applicable law or agreed to in writing,
  * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
- * KIND, either express or implied. See the License for the
+ * either express or implied. See the License for the
  * specific language governing permissions and limitations
  * under the License.
  */
@@ -19,8 +19,18 @@
 function onRequest(context) {
     var log = new Log("policy-view-edit-unit backend js");
     log.debug("calling policy-view-edit-unit");
+
     var userModule = require("/app/modules/business-controllers/user.js")["userModule"];
-    context.roles = userModule.getRoles().content;
+
-    context.users = userModule.getUsersByUsername().content;
+    var rolesResult = userModule.getRoles();
+    if (rolesResult.status == "success") {
+        context.roles = rolesResult.content;
+    }
+
+    var usersResult = userModule.getUsers();
+    if (usersResult.status == "success") {
+        context.users = usersResult.content;
+    }
+
     return context;
 }

components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/units/mdm.unit.policy.edit/edit.json

@@ -1,3 +1,4 @@
 {
-	"version" : "1.0.0"
+    "version" : "1.0.0",
+    "extends" : "cdmf.unit.policy.edit"
 }

components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/units/mdm.unit.policy.edit/public/js/edit.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2016, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ * Copyright (c) 2015, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
  *
  * WSO2 Inc. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
@@ -10,8 +10,8 @@
  *
  * Unless required by applicable law or agreed to in writing,
  * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
- * KIND, either express or implied. See the License for the
+ * either express or implied. See the License for the
  * specific language governing permissions and limitations
  * under the License.
  */
@@ -24,6 +24,71 @@ var policy = {};
 var configuredOperations = [];
 var currentlyEffected = {};
 
+var validateInline = {};
+var clearInline = {};
+
+var enableInlineError = function (inputField, errorMsg, errorSign) {
+    var fieldIdentifier = "#" + inputField;
+    var errorMsgIdentifier = "#" + inputField + " ." + errorMsg;
+    var errorSignIdentifier = "#" + inputField + " ." + errorSign;
+
+    if (inputField) {
+        $(fieldIdentifier).addClass(" has-error has-feedback");
+    }
+
+    if (errorMsg) {
+        $(errorMsgIdentifier).removeClass(" hidden");
+    }
+
+    if (errorSign) {
+        $(errorSignIdentifier).removeClass(" hidden");
+    }
+};
+
+var disableInlineError = function (inputField, errorMsg, errorSign) {
+    var fieldIdentifier = "#" + inputField;
+    var errorMsgIdentifier = "#" + inputField + " ." + errorMsg;
+    var errorSignIdentifier = "#" + inputField + " ." + errorSign;
+
+    if (inputField) {
+        $(fieldIdentifier).removeClass(" has-error has-feedback");
+    }
+
+    if (errorMsg) {
+        $(errorMsgIdentifier).addClass(" hidden");
+    }
+
+    if (errorSign) {
+        $(errorSignIdentifier).addClass(" hidden");
+    }
+};
+
+/**
+ *clear inline validation messages.
+ */
+clearInline["policy-name"] = function () {
+    disableInlineError("policy-name-field", "nameEmpty", "nameError");
+};
+
+
+/**
+ * Validate if provided policy name is valid against RegEx configures.
+ */
+validateInline["policy-name"] = function () {
+    var policyName = $("input#policy-name-input").val();
+    if (policyName && inputIsValidAgainstLength(policyName, 1, 30)) {
+        disableInlineError("policy-name-field", "nameEmpty", "nameError");
+    } else {
+        enableInlineError("policy-name-field", "nameEmpty", "nameError");
+    }
+};
+
+$("#policy-name-input").focus(function(){
+    clearInline["policy-name"]();
+}).blur(function(){
+    validateInline["policy-name"]();
+});
+
 // Constants to define platform types available
 var platformTypeConstants = {
     "ANDROID": "android",
@@ -47,7 +112,9 @@ var androidOperationConstants = {
     "ENCRYPT_STORAGE_OPERATION": "encrypt-storage",
     "ENCRYPT_STORAGE_OPERATION_CODE": "ENCRYPT_STORAGE",
     "WIFI_OPERATION": "wifi",
-    "WIFI_OPERATION_CODE": "WIFI"
+    "WIFI_OPERATION_CODE": "WIFI",
+    "APPLICATION_OPERATION":"app-restriction",
+    "APPLICATION_OPERATION_CODE":"APP-RESTRICTION"
 };
 
 // Constants to define Android Operation Constants
@@ -110,24 +177,30 @@ var updateGroupedInputVisibility = function (domElement) {
 
 skipStep["policy-platform"] = function (policyPayloadObj) {
     policy["name"] = policyPayloadObj["policyName"];
-    policy["platform"] = policyPayloadObj["profile"]["deviceType"]["name"];
+    policy["platform"] = policyPayloadObj["profile"]["deviceType"];
-    policy["platformId"] = policyPayloadObj["profile"]["deviceType"]["id"];
+
     var userRoleInput = $("#user-roles-input");
     var ownershipInput = $("#ownership-input");
     var userInput = $("#users-input");
     var actionInput = $("#action-input");
     var policyNameInput = $("#policy-name-input");
     var policyDescriptionInput = $("#policy-description-input");
+
     currentlyEffected["roles"] = policyPayloadObj.roles;
     currentlyEffected["users"] = policyPayloadObj.users;
-    userRoleInput.val(currentlyEffected["roles"]).trigger("change");
-    userInput.val(currentlyEffected["users"]).trigger("change");
 
-    if (currentlyEffected["users"].length > 0) {
+    if (currentlyEffected["roles"].length > 0) {
-        $("#users-radio-btn").prop("checked", true)
+        $("#user-roles-radio-btn").prop("checked", true);
+        $("#user-roles-select-field").show();
+        $("#users-select-field").hide();
+        userRoleInput.val(currentlyEffected["roles"]).trigger("change");
+    } else if (currentlyEffected["users"].length > 0) {
+        $("#users-radio-btn").prop("checked", true);
         $("#users-select-field").show();
         $("#user-roles-select-field").hide();
+        userInput.val(currentlyEffected["users"]).trigger("change");
     }
+
     ownershipInput.val(policyPayloadObj.ownershipType);
     actionInput.val(policyPayloadObj.compliance);
     policyNameInput.val(policyPayloadObj["policyName"]);
@@ -157,9 +230,8 @@ skipStep["policy-platform"] = function (policyPayloadObj) {
                 for (var i = 0; i < configuredOperations.length; ++i) {
                     var configuredOperation = configuredOperations[i];
                     $(".operation-data").filterByData("operation-code", configuredOperation).
-                        find(".panel-title .wr-input-control.switch input[type=checkbox]").each(function () {
+                        find(".panel-title .wr-input-control.switch input[type=checkbox]").
-                            $(this).click();
+                            each(function () {$(this).click();});
-                        });
                 }
             });
         },
@@ -321,9 +393,107 @@ validateStep["policy-profile"] = function () {
                 // updating validationStatusArray with validationStatus
                 validationStatusArray.push(validationStatus);
             }
+            if ($.inArray(androidOperationConstants["APPLICATION_OPERATION_CODE"], configuredOperations) != -1) {
+                //If application restriction configured
+                operation = androidOperationConstants["APPLICATION_OPERATION"];
+                // Initializing continueToCheckNextInputs to true
+                continueToCheckNextInputs = true;
+
+                var appRestrictionType = $("#app-restriction-type").val();
+
+                var restrictedApplicationsGridChildInputs = "div#restricted-applications .child-input";
+
+                if (!appRestrictionType) {
+                    validationStatus = {
+                        "error": true,
+                        "subErrorMsg": "Applications restriction type is not provided.",
+                        "erroneousFeature": operation
+                    };
+                    continueToCheckNextInputs = false;
+                }
+
+                if (continueToCheckNextInputs) {
+                    if ($(restrictedApplicationsGridChildInputs).length == 0) {
+                        validationStatus = {
+                            "error": true,
+                            "subErrorMsg": "Applications are not provided in application restriction list.",
+                            "erroneousFeature": operation
+                        };
+                        continueToCheckNextInputs = false;
+                    }
+                    else {
+                        childInputCount = 0;
+                        childInputArray = [];
+                        emptyChildInputCount = 0;
+                        duplicatesExist = false;
+                        // Looping through each child input
+                        $(restrictedApplicationsGridChildInputs).each(function () {
+                            childInputCount++;
+                            if (childInputCount % 2 == 0) {
+                                // If child input is of second column
+                                childInput = $(this).val();
+                                childInputArray.push(childInput);
+                                // Updating emptyChildInputCount
+                                if (!childInput) {
+                                    // If child input field is empty
+                                    emptyChildInputCount++;
+                                }
+                            }
+                        });
+                        // Checking for duplicates
+                        initialChildInputArrayLength = childInputArray.length;
+                        if (emptyChildInputCount == 0 && initialChildInputArrayLength > 1) {
+                            for (m = 0; m < (initialChildInputArrayLength - 1); m++) {
+                                poppedChildInput = childInputArray.pop();
+                                for (n = 0; n < childInputArray.length; n++) {
+                                    if (poppedChildInput == childInputArray[n]) {
+                                        duplicatesExist = true;
+                                        break;
+                                    }
+                                }
+                                if (duplicatesExist) {
+                                    break;
+                                }
                             }
                         }
-    if (policy["platform"] == platformTypeConstants["WINDOWS"]) {
+                        // Updating validationStatus
+                        if (emptyChildInputCount > 0) {
+                            // If empty child inputs are present
+                            validationStatus = {
+                                "error": true,
+                                "subErrorMsg": "One or more package names of " +
+                                "applications are empty.",
+                                "erroneousFeature": operation
+                            };
+                            continueToCheckNextInputs = false;
+                        } else if (duplicatesExist) {
+                            // If duplicate input is present
+                            validationStatus = {
+                                "error": true,
+                                "subErrorMsg": "Duplicate values exist with " +
+                                "for package names.",
+                                "erroneousFeature": operation
+                            };
+                            continueToCheckNextInputs = false;
+                        }
+
+                    }
+                }
+
+                if (continueToCheckNextInputs) {
+                    validationStatus = {
+                        "error": false,
+                        "okFeature": operation
+                    };
+                }
+
+                // Updating validationStatusArray with validationStatus
+                validationStatusArray.push(validationStatus);
+
+
+            }
+        }
+    } if (policy["platform"] == platformTypeConstants["WINDOWS"]) {
         if (configuredOperations.length == 0) {
             // updating validationStatus
             validationStatus = {
@@ -1663,7 +1833,9 @@ stepForwardFrom["policy-criteria"] = function () {
             if ($(this).is(":checked")) {
                 if ($(this).attr("id") == "users-radio-btn") {
                     policy["selectedUsers"] = $("#users-input").val();
+                    policy["selectedUserRoles"] = null;
                 } else if ($(this).attr("id") == "user-roles-radio-btn") {
+                    policy["selectedUsers"] = null;
                     policy["selectedUserRoles"] = $("#user-roles-input").val();
                 }
             }
@@ -1810,14 +1982,15 @@ var updatePolicy = function (policy, state) {
     // traverses key by key in policy["profile"]
     var key;
     for (key in policy["profile"]) {
-        if (policy["platformId"] == platformTypeIds["WINDOWS"] && key == windowsOperationConstants["PASSCODE_POLICY_OPERATION_CODE"]) {
+        if (policy["platform"] == platformTypeConstants["WINDOWS"] &&
-            policy["profile"][key].enablePassword = true;
+            key == windowsOperationConstants["PASSCODE_POLICY_OPERATION_CODE"]) {
+            policy["profile"][windowsOperationConstants["PASSCODE_POLICY_OPERATION_CODE"]].enablePassword = true;
         }
 
         if (policy["profile"].hasOwnProperty(key)) {
             profilePayloads.push({
                 "featureCode": key,
-                "deviceTypeId": policy["platformId"],
+                "deviceType": policy["platform"],
                 "content": policy["profile"][key]
             });
         }
@@ -1825,7 +1998,7 @@ var updatePolicy = function (policy, state) {
 
     $.each(profilePayloads, function (i, item) {
         $.each(item.content, function (key, value) {
-            if (value === "" || value === undefined) {
+            if (value === null || value === undefined || value === "") {
                 item.content[key] = null;
             }
         });
@@ -1838,68 +2011,72 @@ var updatePolicy = function (policy, state) {
         "ownershipType": policy["selectedOwnership"],
         "profile": {
             "profileName": policy["policyName"],
-            "deviceType": {
+            "deviceType": policy["platform"],
-                "id": policy["platformId"]
-            },
             "profileFeaturesList": profilePayloads
         }
     };
 
     if (policy["selectedUsers"]) {
         payload["users"] = policy["selectedUsers"];
+        payload["roles"] = [];
     } else if (policy["selectedUserRoles"]) {
+        payload["users"] = [];
         payload["roles"] = policy["selectedUserRoles"];
     } else {
         payload["users"] = [];
         payload["roles"] = [];
     }
 
-    var serviceURL = "/devicemgt_admin/policies/" + getParameterByName("id");
+    var serviceURL = "/api/device-mgt/v1.0/policies/" + getParameterByName("id");
     invokerUtil.put(
         serviceURL,
         payload,
         // on success
-        function () {
+        function (data, textStatus, jqXHR) {
-            if (state == "save") {
+            if (jqXHR.status == 200) {
                 var policyList = [];
                 policyList.push(getParameterByName("id"));
-                serviceURL = "/devicemgt_admin/policies/inactivate";
+                if (state == "save") {
+                    serviceURL = "/api/device-mgt/v1.0/policies/deactivate-policy";
                     invokerUtil.put(
                         serviceURL,
                         policyList,
                         // on success
-                    function () {
+                        function (data, textStatus, jqXHR) {
+                            if (jqXHR.status == 200) {
                                 $(".add-policy").addClass("hidden");
                                 $(".policy-message").removeClass("hidden");
+                            }
                         },
                         // on error
-                    function (daa) {
+                        function (jqXHR) {
-                        console.log(data);
+                            console.log("error in saving policy. Received error code : " + jqXHR.status);
                         }
                     );
                 } else if (state == "publish") {
-                var policyList = [];
+                    serviceURL = "/api/device-mgt/v1.0/policies/activate-policy";
-                policyList.push(getParameterByName("id"));
-                serviceURL = "/devicemgt_admin/policies/activate";
                     invokerUtil.put(
                         serviceURL,
                         policyList,
                         // on success
-                    function () {
+                        function (data, textStatus, jqXHR) {
+                            if (jqXHR.status == 200) {
                                 $(".add-policy").addClass("hidden");
                                 $(".policy-naming").addClass("hidden");
                                 $(".policy-message").removeClass("hidden");
+                            }
                         },
                         // on error
-                    function (data) {
+                        function (jqXHR) {
-                        console.log(data);
+                            console.log("error in publishing policy. Received error code : " + jqXHR.status);
                         }
                     );
                 }
+            }
         },
         // on error
-        function () {
+        function (jqXHR) {
-
+            console.log("error in updating policy. Received error code : " + jqXHR.status);
         }
     );
 };
@@ -1913,6 +2090,57 @@ var showAdvanceOperation = function (operation, button) {
     $(hiddenOperation + '[data-operation="' + operation + '"]').siblings().hide();
 };
 
+/**
+ * This method will display appropriate fields based on wifi type
+ * @param {object} wifi type select object
+ */
+var changeAndroidWifiPolicy = function (select) {
+    slideDownPaneAgainstValueSet(select, 'control-wifi-password', ['wep', 'wpa', '802eap']);
+    slideDownPaneAgainstValueSet(select, 'control-wifi-eap', ['802eap']);
+    slideDownPaneAgainstValueSet(select, 'control-wifi-phase2', ['802eap']);
+    slideDownPaneAgainstValueSet(select, 'control-wifi-identity', ['802eap']);
+    slideDownPaneAgainstValueSet(select, 'control-wifi-anoidentity', ['802eap']);
+    slideDownPaneAgainstValueSet(select, 'control-wifi-cacert', ['802eap']);
+}
+
+/**
+ * This method will display appropriate fields based on wifi EAP type
+ * @param {object} wifi eap select object
+ * @param {object} wifi type select object
+ */
+var changeAndroidWifiPolicyEAP = function (select, superSelect) {
+    slideDownPaneAgainstValueSet(select, 'control-wifi-password', ['peap', 'ttls', 'pwd' ,'fast', 'leap']);
+    slideDownPaneAgainstValueSet(select, 'control-wifi-phase2', ['peap', 'ttls', 'fast']);
+    slideDownPaneAgainstValueSet(select, 'control-wifi-provisioning', ['fast']);
+    slideDownPaneAgainstValueSet(select, 'control-wifi-identity', ['peap', 'tls', 'ttls', 'pwd', 'fast', 'leap']);
+    slideDownPaneAgainstValueSet(select, 'control-wifi-anoidentity', ['peap', 'ttls']);
+    slideDownPaneAgainstValueSet(select, 'control-wifi-cacert', ['peap', 'tls', 'ttls']);
+    if(superSelect.value != '802eap'){
+        changeAndroidWifiPolicy(superSelect);
+    }
+}
+
+/**
+ * This method will encode the fileinput and enter the values to given input files
+ * @param {object} fileInput
+ * @param {object} fileHiddenInput
+ * @param {object} fileNameHiddenInput
+ */
+var base64EncodeFile = function (fileInput, fileHiddenInput, fileNameHiddenInput) {
+    var file = fileInput.files[0];
+    if (file) {
+        var reader = new FileReader();
+        reader.onload = function(readerEvt) {
+            var binaryString = readerEvt.target.result;
+            fileHiddenInput.value = (btoa(binaryString));
+            fileNameHiddenInput.value =  file.name.substr(0,file.name.lastIndexOf("."));
+        };
+        reader.readAsBinaryString(file);
+    }
+}
+
+
+
 /**
  * Method to slide down a provided pane upon provided value set.
  *
@@ -1922,6 +2150,9 @@ var showAdvanceOperation = function (operation, button) {
  */
 var slideDownPaneAgainstValueSet = function (selectElement, paneID, valueSet) {
     var selectedValueOnChange = $(selectElement).find("option:selected").val();
+    if ($(selectElement).is("input:checkbox")) {
+        selectedValueOnChange = $(selectElement).is(":checked").toString();
+    }
     var i, slideDownVotes = 0;
     for (i = 0; i < valueSet.length; i++) {
         if (selectedValueOnChange == valueSet[i]) {
@@ -2033,54 +2264,49 @@ var getParameterByName = function (name) {
     return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
 };
 
-function formatRepo(user) {
+//function formatRepo(user) {
-    if (user.loading) {
+//    if (user.loading) {
-        return user.text
+//        return user.text
-    }
+//    }
-    if (!user.username) {
+//    if (!user.username) {
-        return;
+//        return;
-    }
+//    }
-    var markup = '<div class="clearfix">' +
+//    var markup = '<div class="clearfix">' +
-        '<div clas="col-sm-8">' +
+//                 '<div clas="col-sm-8">' +
-        '<div class="clearfix">' +
+//                 '<div class="clearfix">' +
-        '<div class="col-sm-3">' + user.username + '</div>';
+//                 '<div class="col-sm-3">' + user.username + '</div>';
-    if (user.firstname) {
+//    if (user.firstname) {
-        markup += '<div class="col-sm-3"><i class="fa fa-code-fork"></i> ' + user.firstname + '</div>';
+//        markup += '<div class="col-sm-3"><i class="fa fa-code-fork"></i> ' + user.firstname + '</div>';
-    }
+//    }
-    if (user.emailAddress) {
+//    if (user.emailAddress) {
-        markup += '<div class="col-sm-2"><i class="fa fa-star"></i> ' + user.emailAddress + '</div></div>';
+//        markup += '<div class="col-sm-2"><i class="fa fa-star"></i> ' + user.emailAddress + '</div></div>';
-    }
+//    }
-    markup += '</div></div>';
+//    markup += '</div></div>';
-    return markup;
+//    return markup;
-}
+//}
-
+//
-function formatRepoSelection(user) {
+//function formatRepoSelection(user) {
-    return user.username || user.text;
+//    return user.username || user.text;
-}
+//}
 
 $(document).ready(function () {
-
     // Adding initial state of wizard-steps.
-
-    var policyPayloadObj;
     invokerUtil.get(
-            "/devicemgt_admin/policies/" + getParameterByName("id"),
+        "/api/device-mgt/v1.0/policies/" + getParameterByName("id"),
         // on success
-        function (data) {
+        function (data, textStatus, jqXHR) {
-            data = JSON.parse(data);
+            if (jqXHR.status == 200 && data) {
-            policyPayloadObj = data["responseContent"];
+                var policy = JSON.parse(data);
-            skipStep["policy-platform"](policyPayloadObj);
+                skipStep["policy-platform"](policy);
+            }
         },
         // on error
-        function (data) {
+        function (jqXHR) {
-            console.log(data);
+            console.log(jqXHR);
             // should be redirected to an error page
         }
     );
 
-    $("#users-select-field").hide();
-    $("#user-roles-select-field").show();
-
     $("input[type='radio'].select-users-radio").change(function () {
         if ($("#users-radio-btn").is(":checked")) {
             $("#user-roles-select-field").hide();
@@ -2093,7 +2319,7 @@ $(document).ready(function () {
     });
 
     // Support for special input type "ANY" on user(s) & user-role(s) selection
-    $("#user-roles-input,#user-input").select2({
+    $("#user-roles-input").select2({
         "tags": false
     }).on("select2:select", function (e) {
         if (e.params.data.id == "ANY") {
@@ -2102,12 +2328,19 @@ $(document).ready(function () {
             $("option[value=ANY]", this).prop("selected", false).parent().trigger("change");
         }
     });
-    $("#policy-profile-wizard-steps").html($(".wr-steps").html());
 
-    $("select.select2[multiple=multiple]").select2({
+    $("#users-input").select2({
         "tags": false
+    }).on("select2:select", function (e) {
+        if (e.params.data.id == "ANY") {
+            $(this).val("ANY").trigger("change");
+        } else {
+            $("option[value=ANY]", this).prop("selected", false).parent().trigger("change");
+        }
     });
 
+    $("#policy-profile-wizard-steps").html($(".wr-steps").html());
+
     // Maintains an array of configured features of the profile
     var advanceOperations = ".wr-advance-operations";
     $(advanceOperations).on("click", ".wr-input-control.switch", function (event) {

components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/units/mdm.unit.policy.edit/public/templates/hidden-operations-android.hbs

@@ -13,7 +13,7 @@
                 <span class="wr-hidden-operations-icon fw-stack">
                     <i class="fw fw-block fw-stack-2x"></i>
                 </span>
-            Restrictions on Camera
+        Restrictions
         <span id="camera-configured" class="has-configured status-icon hidden"><i class="fw fw-ok"></i></span>
         <span id="camera-ok" class="has-success status-icon hidden"><i class="fw fw-ok"></i></span>
         <span class="camera-error status-icon hidden"><i class="fw fw-error"></i></span>
@@ -36,6 +36,35 @@
         <span id="wifi-ok" class="has-success status-icon hidden"><i class="fw fw-ok"></i></span>
         <span id="wifi-error" class="has-error status-icon hidden"><i class="fw fw-error"></i></span>
     </a>
+    <a href="javascript:void(0)" onclick="showAdvanceOperation('vpn', this)">
+                <span class="wr-hidden-operations-icon fw-stack">
+                    <i class="fw fw-vpn fw-stack-2x"></i>
+                </span>
+        Virtual Private Network
+        <span id="wifi-configured" class="has-configured status-icon hidden"><i class="fw fw-ok"></i></span>
+        <span id="wifi-ok" class="has-success status-icon hidden"><i class="fw fw-ok"></i></span>
+        <span id="wifi-error" class="has-error status-icon hidden"><i class="fw fw-error"></i></span>
+    </a>
+    <a href="javascript:void(0)" onclick="showAdvanceOperation('work-profile', this)">
+             <span class="wr-hidden-operations-icon fw-stack">
+                 <i class="fw fw-service fw-stack-2x"></i>
+             </span>
+        Work-Profile Configurations
+        <span id="work-profile-configured" class="has-configured status-icon hidden"><i class="fw fw-ok"></i></span>
+        <span id="work-profile-ok" class="has-success status-icon hidden"><i class="fw fw-ok"></i></span>
+        <span id="work-profile-error" class="has-error status-icon hidden"><i class="fw fw-error"></i></span>
+    </a>
+
+    <a href="javascript:void(0)" onclick="showAdvanceOperation('app-restriction', this)">
+                <span class="fw-stack fw-lg">
+                    <i class="fw fw-application fw-stack-1x"></i>
+                    <i class="fw fw-block fw-stack-2x"></i>
+                </span>
+        Applications Restrictions
+        <span id="app-restriction-configured" class="has-configured status-icon hidden"><i class="fw fw-ok"></i></span>
+        <span id="app-restriction-ok" class="has-success status-icon hidden"><i class="fw fw-ok"></i></span>
+        <span id="app-restriction-error" class="has-error status-icon hidden"><i class="fw fw-error"></i></span>
+    </a>
     <!--<a href="javascript:void(0)" onclick="showAdvanceOperation('install-apps', this)">-->
     <!--<span class="wr-hidden-operations-icon fw-stack">-->
     <!--<i class="fw fw-application fw-stack-2x"></i>-->
@@ -202,7 +231,7 @@
 <div class="panel panel-default operation-data" data-operation="camera" data-operation-code="CAMERA">
 <div id="camera-heading" class="panel-heading" role="tab">
     <h2 class="sub-title panel-title">
-                        Restrictions on Camera
+        Restrictions
         <label class="wr-input-control switch" data-toggle="collapse" data-target="#camera-body">
             <input type="checkbox" />
             <span class="helper"></span>
@@ -210,7 +239,7 @@
         </label>
         <hr>
         <div class="panel-title-description">
-                            This configuration can be used to restrict the usage of camera on an Android device together with all the applications using the camera.
+            This configurations can be used to restrict certain settings on an Android device.
             Once this configuration profile is installed on a device, corresponding users will not be able
             to modify these settings on their devices.
         </div>
@@ -220,7 +249,6 @@
 <div id="camera-feature-error-msg" class="alert alert-danger hidden" role="alert">
     <i class="icon fw fw-error"></i><span></span>
 </div>
-                    Un-check following checkbox in case you need to disable camera.
 <br>
 <br>
 <div class="wr-input-control">
@@ -232,6 +260,386 @@
                             </span>
     </label>
 </div>
+<br><b>
+    Below restrictions will be applied on devices with Android version 5.0 Lollipop onwards only
+</b>
+<br><br>
+<div class="wr-input-control">
+    <label class="wr-input-control checkbox">
+        <input id="volume-adjust-enabled" type="checkbox" class="operationDataKeys"
+               data-key="disallowAdjustVolumeEnabled" />
+                            <span class="helper" title="Having this checked would disallow volume adjust.">
+                                &nbsp;&nbsp;&nbsp;Disallow volume adjust
+                                <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                            </span>
+    </label>
+</div>
+<br>
+<div class="wr-input-control">
+    <label class="wr-input-control checkbox">
+        <input id="disallow-configuring-bluetooth-enabled" type="checkbox" class="operationDataKeys"
+               data-key="disallowConfigBluetooth"/>
+                            <span class="helper" title="Having this checked would disallow configuring bluetooth.">
+                                &nbsp;&nbsp;&nbsp;Disallow configuring bluetooth.
+                                <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                            </span>
+    </label>
+</div>
+<br>
+<div class="wr-input-control">
+    <label class="wr-input-control checkbox">
+        <input id="disallow-configuring-cell-broadcast-enabled" type="checkbox"
+               class="operationDataKeys"
+               data-key="disallowConfigCellBroadcasts"/>
+                            <span class="helper" title="Having this checked would disallow configuring cell broadcast.">
+                                &nbsp;&nbsp;&nbsp;Disallow cell broadcast
+                                <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                            </span>
+    </label>
+</div>
+<br>
+<div class="wr-input-control">
+    <label class="wr-input-control checkbox">
+        <input id="disallow-configuring-credentials-enabled" type="checkbox"
+               class="operationDataKeys"
+               data-key="disallowConfigCredentials"/>
+                            <span class="helper" title="Having this checked would disallow configuring credentials.">
+                                &nbsp;&nbsp;&nbsp;Disallow configuring credentials
+                                <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                            </span>
+    </label>
+</div>
+<br>
+<div class="wr-input-control">
+    <label class="wr-input-control checkbox">
+        <input id="disallow-configuring-mobile-networkst-enabled" type="checkbox"
+               class="operationDataKeys"
+               data-key="disallowConfigMobileNetworks"/>
+                            <span class="helper" title="Having this checked would disallow configuring mobile networks.">
+                                &nbsp;&nbsp;&nbsp;Disallow configuring mobile networks
+                                <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                            </span>
+    </label>
+</div>
+<br>
+<div class="wr-input-control">
+    <label class="wr-input-control checkbox">
+        <input id="disallow-configuring-tethering-enabled" type="checkbox"
+               class="operationDataKeys"
+               data-key="disallowConfigTethering"/>
+                            <span class="helper" title="Having this checked would disallow configuring tethering.">
+                                &nbsp;&nbsp;&nbsp;Disallow configuring tethering
+                                <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                            </span>
+    </label>
+</div>
+<br>
+<div class="wr-input-control">
+    <label class="wr-input-control checkbox">
+        <input id="disallow-configuring-VPN-enabled" type="checkbox" class="operationDataKeys"
+               data-key="disallowConfigVpn"/>
+                            <span class="helper" title="Having this checked would disallow configuring VPN.">
+                                &nbsp;&nbsp;&nbsp;Disallow configuring VPN
+                                <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                            </span>
+    </label>
+</div>
+<br>
+<div class="wr-input-control">
+    <label class="wr-input-control checkbox">
+        <input id="disallow-configuring-Wifi-enabled" type="checkbox" class="operationDataKeys"
+               data-key="disallowConfigWifi"/>
+                            <span class="helper" title="Having this checked would disallow configuring Wifi.">
+                                &nbsp;&nbsp;&nbsp;Disallow configuring Wifi
+                                <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                            </span>
+    </label>
+</div>
+<br>
+
+<div class="wr-input-control">
+    <label class="wr-input-control checkbox">
+        <input id="disallow-configuring-app-control-enabled" type="checkbox"
+               class="operationDataKeys"
+               data-key="disallowAppControl"/>
+                            <span class="helper" title="Having this checked would disallow configuring app control.">
+                                &nbsp;&nbsp;&nbsp;Disallow configuring app control
+                                <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                            </span>
+    </label>
+</div>
+<br>
+<div class="wr-input-control">
+    <label class="wr-input-control checkbox">
+        <input id="disallow-create-window-enabled" type="checkbox" class="operationDataKeys"
+               data-key="disallowCreateWindows"/>
+                            <span class="helper" title="Having this checked would disallow create window.">
+                                &nbsp;&nbsp;&nbsp;Disallow create window
+                                <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                            </span>
+    </label>
+</div>
+<br>
+<div class="wr-input-control">
+    <label class="wr-input-control checkbox">
+        <input id="disallow-cross-profile-copy-paste-enabled" type="checkbox"
+               class="operationDataKeys"
+               data-key="disallowCrossProfileCopyPaste"/>
+                            <span class="helper" title="Having this checked would disallow cross profile copy paste.">
+                                &nbsp;&nbsp;&nbsp;Disallow cross profile copy paste
+                                <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                            </span>
+    </label>
+</div>
+<br>
+<div class="wr-input-control">
+    <label class="wr-input-control checkbox">
+        <input id="disallow-debugging-enabled" type="checkbox" class="operationDataKeys"
+               data-key="disallowDebugging"/>
+                            <span class="helper" title="Having this checked would disallow debugging.">
+                                &nbsp;&nbsp;&nbsp;Disallow debuging
+                                <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                            </span>
+    </label>
+</div>
+<br>
+<div class="wr-input-control">
+    <label class="wr-input-control checkbox">
+        <input id="disallow-factory-reset-enabled" type="checkbox" class="operationDataKeys"
+               data-key="disallowFactoryReset"/>
+                            <span class="helper" title="Having this checked would disallow factory reset.">
+                                &nbsp;&nbsp;&nbsp;Disallow factory reset
+                                <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                            </span>
+    </label>
+</div>
+<br>
+<div class="wr-input-control">
+    <label class="wr-input-control checkbox">
+        <input id="disallow-add-user-enabled" type="checkbox" class="operationDataKeys"
+               data-key="disallowAddUser"/>
+                            <span class="helper" title="Having this checked would disallow add user.">
+                                &nbsp;&nbsp;&nbsp;Disallow add user
+                                <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                            </span>
+    </label>
+</div>
+<br>
+<div class="wr-input-control">
+    <label class="wr-input-control checkbox">
+        <input id="disallow-install-apps-enabled" type="checkbox" class="operationDataKeys"
+               data-key="disallowInstallApps"/>
+                            <span class="helper" title="Having this checked would disallow install apps.">
+                                &nbsp;&nbsp;&nbsp;Disallow install apps
+                                <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                            </span>
+    </label>
+</div>
+<br>
+<div class="wr-input-control">
+    <label class="wr-input-control checkbox">
+        <input id="disallow-installing-from-unknown-enabled" type="checkbox"
+               class="operationDataKeys"
+               data-key="disallowInstallUnknownSources"/>
+                            <span class="helper" title="Having this checked would disallow installing from unknown
+                            sources.">
+                                &nbsp;&nbsp;&nbsp;Disallow install from unknown sources
+                                <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                            </span>
+    </label>
+</div>
+<br>
+<div class="wr-input-control">
+    <label class="wr-input-control checkbox">
+        <input id="disallow-modify-accounts-enabled" type="checkbox" class="operationDataKeys"
+               data-key="disallowModifyAccounts"/>
+                            <span class="helper" title="Having this checked would disallow modify accounts.">
+                                &nbsp;&nbsp;&nbsp;Disallow modify accounts
+                                <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                            </span>
+    </label>
+</div>
+<br>
+<div class="wr-input-control">
+    <label class="wr-input-control checkbox">
+        <input id="disallow-mount-physical-media-enabled" type="checkbox" class="operationDataKeys"
+               data-key="disallowMountPhysicalMedia"/>
+                            <span class="helper" title="Having this checked would disallow mount physical media.">
+                                &nbsp;&nbsp;&nbsp;Disallow mount physical media
+                                <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                            </span>
+    </label>
+</div>
+<br>
+<div class="wr-input-control">
+    <label class="wr-input-control checkbox">
+        <input id="disallow-network-reset-enabled" type="checkbox" class="operationDataKeys"
+               data-key="disallowNetworkReset"/>
+                            <span class="helper" title="Having this checked would disallow network reset.">
+                                &nbsp;&nbsp;&nbsp;Disallow network reset
+                                <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                            </span>
+    </label>
+</div>
+<br>
+<div class="wr-input-control">
+    <label class="wr-input-control checkbox">
+        <input id="disallow-outgoing-beam-enabled" type="checkbox" class="operationDataKeys"
+               data-key="disallowOutgoingBeam"/>
+                            <span class="helper" title="Having this checked would disallow outgoing beam.">
+                                &nbsp;&nbsp;&nbsp;Disallow outgoing beam
+                                <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                            </span>
+    </label>
+</div>
+<br>
+<div class="wr-input-control">
+    <label class="wr-input-control checkbox">
+        <input id="disallow-outgoing-calls-enabled" type="checkbox" class="operationDataKeys"
+               data-key="disallowOutgoingCalls"/>
+                            <span class="helper" title="Having this checked would disallow outgoing calls.">
+                                &nbsp;&nbsp;&nbsp;Disallow outgoing calls
+                                <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                            </span>
+    </label>
+</div>
+<br>
+<div class="wr-input-control">
+    <label class="wr-input-control checkbox">
+        <input id="disallow-remove-user-enabled" type="checkbox" class="operationDataKeys"
+               data-key="disallowRemoveUser"/>
+                            <span class="helper" title="Having this checked would disallow remove user.">
+                                &nbsp;&nbsp;&nbsp;Disallow remove user
+                                <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                            </span>
+    </label>
+</div>
+<br>
+<div class="wr-input-control">
+    <label class="wr-input-control checkbox">
+        <input id="disallow-safe-boot-enabled" type="checkbox" class="operationDataKeys"
+               data-key="disallowSafeBoot"/>
+                            <span class="helper" title="Having this checked would disallow safe boot.">
+                                &nbsp;&nbsp;&nbsp;Disallow safe boot
+                                <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                            </span>
+    </label>
+</div>
+<br>
+<div class="wr-input-control">
+    <label class="wr-input-control checkbox">
+        <input id="disallow-location-sharing-enabled" type="checkbox" class="operationDataKeys"
+               data-key="disallowLocationSharing"/>
+                            <span class="helper" title="Having this checked would disallow location sharing.">
+                                &nbsp;&nbsp;&nbsp;Disallow location sharing
+                                <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                            </span>
+    </label>
+</div>
+<br>
+<div class="wr-input-control">
+    <label class="wr-input-control checkbox">
+        <input id="disallow-SMS-enabled" type="checkbox" class="operationDataKeys"
+               data-key="disallowSMS"/>
+                            <span class="helper" title="Having this checked would disallow SMS.">
+                                &nbsp;&nbsp;&nbsp;Disallow SMS
+                                <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                            </span>
+    </label>
+</div>
+<br>
+<div class="wr-input-control">
+    <label class="wr-input-control checkbox">
+        <input id="disallow-uninstall-apps-enabled" type="checkbox" class="operationDataKeys"
+               data-key="disallowUninstallApps"/>
+                            <span class="helper" title="Having this checked would disallow uninstall apps.">
+                                &nbsp;&nbsp;&nbsp;Disallow uninstall apps
+                                <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                            </span>
+    </label>
+</div>
+<br>
+<div class="wr-input-control">
+    <label class="wr-input-control checkbox">
+        <input id="disallow-unmute-microphone-enabled" type="checkbox" class="operationDataKeys"
+               data-key="disallowUnmuteMicrophone"/>
+                            <span class="helper" title="Having this checked would disallow unmute microphone.">
+                                &nbsp;&nbsp;&nbsp;Disallow unmute microphone
+                                <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                            </span>
+    </label>
+</div>
+<br>
+<div class="wr-input-control">
+    <label class="wr-input-control checkbox">
+        <input id="disallow-USB-transfer-enabled" type="checkbox" class="operationDataKeys"
+               data-key="disallowUSBFileTransfer"/>
+                            <span class="helper" title="Having this checked would disallow USB file transfer.">
+                                &nbsp;&nbsp;&nbsp;Disallow USB file transfer
+                                <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                            </span>
+    </label>
+</div>
+<br>
+<div class="wr-input-control">
+    <label class="wr-input-control checkbox">
+        <input id="disallow-parent-profile-app-linking-enabled" type="checkbox"
+               class="operationDataKeys"
+               data-key="disallowParentProfileAppLinking"/>
+                            <span class="helper" title="Having this checked would disallow parent profile app linking.">
+                                &nbsp;&nbsp;&nbsp;Disallow parent profile app linking
+                                <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                            </span>
+    </label>
+</div>
+<br>
+<div class="wr-input-control">
+    <label class="wr-input-control checkbox">
+        <input id="ensure-verifying-apps-enabled" type="checkbox" class="operationDataKeys"
+               data-key="ensureVerifyApps"/>
+                            <span class="helper" title="Having this checked would ensure verifying apps .">
+                                &nbsp;&nbsp;&nbsp;Ensure verifying apps
+                                <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                            </span>
+    </label>
+</div>
+<br>
+<div class="wr-input-control">
+    <label class="wr-input-control checkbox">
+        <input id="enable-auto-timing-enabled" type="checkbox" class="operationDataKeys"
+               data-key="enableAutoTime"/>
+                            <span class="helper" title="Having this checked would enable auto timing .">
+                                &nbsp;&nbsp;&nbsp;Enable auto timing
+                                <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                            </span>
+    </label>
+</div>
+<br>
+<div class="wr-input-control">
+    <label class="wr-input-control checkbox">
+        <input id="disable-screen-capture-enabled" type="checkbox" class="operationDataKeys"
+               data-key="diableScreenCapture"/>
+                            <span class="helper" title="Having this checked would disable screen capture .">
+                                &nbsp;&nbsp;&nbsp;Disable screen capture
+                                <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                            </span>
+    </label>
+</div>
+<br>
+<br><b>
+    Bellow restrictions will be applied on devices with Android version 6.0 Marshmallow onwards only.
+</b>
+<br><br>
+<div class="wr-input-control">
+    <label class="wr-input-control checkbox">
+        <input id="disable-status-bar-enabled" type="checkbox" class="operationDataKeys"
+               data-key="disableStatusBar" />
+                            <span class="helper" title="Having this checked would disable status bar .">
+                                &nbsp;&nbsp;&nbsp;Disable status bar
+                                <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                            </span>
+    </label>
+</div>
 <br>
 </div>
 </div>
@@ -333,19 +741,289 @@
                 <input id="wifi-ssid" type="text" class="form-control operationDataKeys" data-key="wifiSSID" maxlength="100" placeholder="[ Required field ]"/>
             </div>
             <div class="wr-input-control">
+                <label class="wr-input-label" for="wifi-type">
+                    Security*
+                                    <span class="helper"
+                                          title="Security type of the wireless network to be configured. 802.1x EAP works with Android 4.3 and above devices only.">
+                                        <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                                    </span>
+                </label>
+                <select class="form-control operationDataKeys" id="wifi-type"
+                        onchange="changeAndroidWifiPolicy(this)"  data-key="wifiType">
+                    <option value="none" selected>None</option>
+                    <option value="wep">WEP</option>
+                    <option value="wpa">WPA/WPA 2 PSK</option>
+                    <option value="802eap">802.1x EAP</option>
+                </select>
+            </div>
+
+            <div class="wr-input-control" id="control-wifi-eap" style="display:none;">
+                <label class="wr-input-label" for="wifi-eap">
+                    EAP Method
+                                    <span class="helper" title="EAP Method of the wireless network to be configured.">
+                                        <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                                    </span>
+                </label>
+                <select class="form-control operationDataKeys" id="wifi-eap"
+                        onchange="changeAndroidWifiPolicyEAP(this, document.getElementById('wifi-type'))" data-key="wifiEAP">
+                    <option value="peap">PEAP</option>
+                    <option value="tls">TLS</option>
+                    <option value="ttls">TTLS</option>
+                    <option value="pwd">PWD</option>
+                    <option value="sim">SIM</option>
+                    <option value="aka">AKA</option>
+                </select>
+            </div>
+            <div class="wr-input-control" id="control-wifi-phase2" style="display:none;">
+                <label class="wr-input-label" for="wifi-phase2">
+                    Phase 2 Authentication
+                                    <span class="helper"
+                                          title="Phase 2 authentication of the wireless network to be configured.">
+                                        <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                                    </span>
+                </label>
+                <select class="form-control operationDataKeys" id="wifi-phase2" data-key="wifiPhase2">
+                    <option value="none">None</option>
+                    <option value="pap">PAP</option>
+                    <option value="mchap">MCHAP</option>
+                    <option value="mchapv2">MCHAPV2</option>
+                    <option value="gtc">GTC</option>
+                </select>
+            </div>
+            <div class="wr-input-control" id="control-wifi-provisioning" style="display:none;">
+                <label class="wr-input-label" for="wifi-provisioning">
+                    Provisioning
+                                    <span class="helper" title="Provisioning of the wireless network to be configured.">
+                                        <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                                    </span>
+                </label>
+                <select class="form-control operationDataKeys" id="wifi-provisioning" data-key="wifiProvisioning">
+                    <option value="0">0</option>
+                    <option value="1">1</option>
+                    <option value="2">2</option>
+                    <option value="3">3</option>
+                </select>
+            </div>
+            <div class="wr-input-control" id="control-wifi-identity" style="display:none;">
+                <label class="wr-input-label" for="wifi-identity">
+                    Identity
+                                <span class="helper" title="Identity of the wireless network to be configured.">
+                                    <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                                </span>
+                </label>
+                <label id="wifiIdentityValidationText" class="wr-input-label hidden">
+                    Identity should be 1-to-30 characters long
+                </label>
+                <input id="wifi-identity" type="text" class="form-control operationDataKeys"
+                       data-key="wifiIdentity"
+                       maxlength="100" placeholder="[ Should be 1-to-30 characters long ]"/>
+            </div>
+            <div class="wr-input-control" id="control-wifi-anoidentity" style="display:none;">
+                <label class="wr-input-label" for="wifi-anoidentity">
+                    Anonymous Identity
+                                <span class="helper" title="Identity of the wireless network to be configured.">
+                                    <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                                </span>
+                </label>
+                <label id="wifiIdentityValidationText" class="wr-input-label hidden">
+                    Anonymous Identity should be 1-to-30 characters long
+                </label>
+                <input id="wifi-anoidentity" type="text" class="form-control operationDataKeys"
+                       data-key="wifiAnoIdentity"
+                       maxlength="100" placeholder="[ Should be 1-to-30 characters long ]"/>
+            </div>
+            <div class="wr-input-control" id="control-wifi-cacert" style="display:none;">
+                <label class="wr-input-label" for="wifi-password">
+                    CA Certificate
+                                <span class="helper" title="CA Certificate for the wireless network.">
+                                    <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                                </span>
+                </label>
+                <input id="wifi-cacert-upload" type="file" class="form-control"
+                       onchange="base64EncodeFile(this, document.getElementById('wifi-cacert'), document.getElementById('wifi-cacert-name'))"/>
+                <input id="wifi-cacert" type="text" class="form-control operationDataKeys"
+                       data-key="wifiCaCert" style="display:none;"/>
+                <input id="wifi-cacert-name" type="hidden" class="form-control operationDataKeys"
+                       data-key="wifiCaCertName" />
+            </div>
+            <div class="wr-input-control" id="control-wifi-password" style="display:none;">
                 <label class="wr-input-label" for="wifi-password">
                     Password
                                 <span class="helper" title="Password for the wireless network.">
                                     <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
                                 </span>
                 </label>
-                            <input id="wifi-password" type="password" class="form-control operationDataKeys" data-key="wifiPassword" maxlength="100" placeholder="[ Optional field ]"/>
+                <input id="wifi-password" type="password" class="form-control operationDataKeys"
+                       data-key="wifiPassword" maxlength="100"/>
             </div>
             <!--</div>-->
         </div>
     </div>
 </div>
 <!-- /wi-fi -->
+<!--app-restriction-->
+<div class="wr-hidden-operation" data-operation="app-restriction">
+    <div class="panel panel-default operation-data" data-operation="app-restriction" data-operation-code="APP-RESTRICTION">
+        <div id="app-restriction-heading" class="panel-heading" role="tab">
+            <h2 class="sub-title panel-title">
+                Application Restriction Settings
+                <label class="wr-input-control switch" data-toggle="collapse" data-target="#app-restriction-body">
+                    <input type="checkbox" />
+                    <span class="helper"></span>
+                    <span class="text"></span>
+                </label>
+                <hr>
+                <div class="panel-title-description">
+                    This configuration can be used to create a black list or white list of applications.
+                </div>
+            </h2>
+        </div>
+        <div id="app-restriction-body" class="panel-collapse panel-body collapse" role="tabpanel" aria-labelledby="app-restriction-body">
+
+            <div id="app-restriction-feature-error-msg" class="alert alert-danger hidden" role="alert">
+                <i class="icon fw fw-error"></i><span></span>
+            </div>
+
+            <select id="app-restriction-type" class="form-control operationDataKeys" data-key="restrictionType">
+                <option value="" selected="selected">
+                    None
+                </option>
+                <option value="black-list">Black List</option>
+                <option value="white-list">White List</option>
+            </select>
+
+            <div class="wr-input-control">
+                <label class="wr-input-label" for="restricted-applications">
+                    Restricted Application List
+                            <span class="helper" title="Add an application to restrict.">
+                                <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                            </span>
+                    <br>
+                    <a href="#restricted-applications-grid" class="grid-input-add" data-click-event="add-form">
+                                <span class="icon fw-stack">
+                                    <i class="fw fw-add fw-stack-1x"></i>
+                                    <i class="fw fw-ring fw-stack-2x"></i>
+                                </span>
+                        &nbsp;
+                        Add Application
+                    </a>
+                </label>
+                <div id="restricted-applications" class="operationDataKeys grouped-array-input multi-column-key-value-pair-array" data-key="restrictedApplications" data-column-count="2">
+                    <table class="table table-responsive table-striped">
+                        <thead>
+                        <tr>
+                            <th>No:</th>
+                            <th>Application Name/Description</th>
+                            <th>Package Name</th>
+                            <th></th>
+                        </tr>
+                        </thead>
+                        <tbody data-add-form-container="#restricted-applications-grid">
+                        <tr data-help-text="add-form">
+                            <td colspan="4">
+                                No entries added yet .
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+                    <table class="template hidden">
+                        <tbody data-add-form="#restricted-applications-grid">
+                        <tr data-add-form-element="clone">
+                            <td data-title="No:">
+                                <span class="index"></span>
+                            </td>
+                            <td data-title="App Name">
+                                <input type="text" class="form-control grid-input-text" data-child-key="appName" maxlength="100" data-default="" placeholder="[ Gmail ]" />
+                            </td>
+                            <td data-title="Package Name">
+                                <input type="text" class="form-control grid-input-text" data-child-key="packageName" maxlength="100" data-default="" placeholder="[ com.google.android.gm ]" />
+                            </td>
+                            <td>
+                                            <span class="list-group-item-actions">
+                                                <a href="#restricted-applications-grid" class="grid-input-remove" data-click-event="remove-form">
+                                                    <span class="fw-stack helper" title="Remove Entry">
+                                                        <i class="fw fw-ring fw-stack-2x"></i>
+                                                        <i class="fw fw-delete fw-stack-1x"></i>
+                                                    </span>
+                                                </a>
+                                            </span>
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<!--/app-restriction-->
+
+<!-- VPN -->
+<div class="wr-hidden-operation" data-operation="vpn">
+    <div class="panel panel-default operation-data" data-operation="vpn" data-operation-code="VPN">
+        <div id="vpn-heading" class="panel-heading" role="tab">
+            <h2 class="sub-title panel-title">
+                VPN Settings
+                <label class="wr-input-control switch" data-toggle="collapse" data-target="#vpn-body">
+                    <input type="checkbox" />
+                    <span class="helper"></span>
+                    <span class="text"></span>
+                </label>
+                <hr>
+                <div class="panel-title-description">
+                    This configurations can be used to configure VPN settings on an Android device.
+                    Once this configuration profile is installed on a device, corresponding users will not be able
+                    to modify these settings on their devices.
+                </div>
+            </h2>
+        </div>
+        <div id="vpn-body" class="panel-collapse panel-body collapse" role="tabpanel" aria-labelledby="vpn-body">
+            Please note that * sign represents required fields of data.
+            <br>
+            <br>
+            <div id="vpn-feature-error-msg" class="alert alert-danger hidden" role="alert">
+                <i class="icon fw fw-error"></i><span></span>
+            </div>
+            <div class="wr-input-control">
+                <label class="wr-input-label" for="vpn-server-address">
+                    VPN Server Address*
+                                <span class="helper" title="Address of the VPN server to be configured.">
+                                    <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                                </span>
+                </label>
+                <input id="vpn-server-address" type="text" class="form-control operationDataKeys" data-key="serverAddress" maxlength="200" placeholder="[ Should be a valid hostname ]"/>
+            </div>
+            <div class="wr-input-control">
+                <label class="wr-input-label" for="vpn-server-port">
+                    VPN Server Port
+                                <span class="helper" title="Port of the VPN server to be configured.">
+                                    <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                                </span>
+                </label>
+                <input id="vpn-server-port" type="text" class="form-control operationDataKeys" data-key="serverPort" maxlength="100" placeholder="[ Optional field ]"/>
+            </div>
+            <div class="wr-input-control">
+                <label class="wr-input-label" for="vpn-shared-secret">
+                    Shared Secret
+                                <span class="helper" title="Shared secret.">
+                                    <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                                </span>
+                </label>
+                <input id="vpn-shared-secret" type="password" class="form-control operationDataKeys" data-key="sharedSecret" maxlength="100" placeholder="[ Optional field ]"/>
+            </div>
+            <div class="wr-input-control">
+                <label class="wr-input-label" for="vpn-dns">
+                    DNS Server
+                                <span class="helper" title="DNS Server.">
+                                    <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                                </span>
+                </label>
+                <input id="vpn-dns" type="text" class="form-control operationDataKeys" data-key="dnsServer" maxlength="100" placeholder="[ Optional field ]"/>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- /VPN -->
 
 <!-- install-applications -->
 <!--<div class="wr-hidden-operation" data-operation="install-apps">-->
@@ -453,5 +1131,95 @@
 <!--</div>-->
 <!--</div>-->
 <!-- /web-clips -->
+
+<!--Work-profile-->
+<div class="wr-hidden-operation" data-operation="work-profile">
+    <div class="panel panel-default operation-data" data-operation="work-profile" data-operation-code="WORK_PROFILE">
+        <div id="work-profile-policy-heading" class="panel-heading" role="tab">
+            <h2 class="sub-title panel-title">
+                Work-Profile Configurations
+                <label id="work-profile-policy-lbl" class="wr-input-control switch" data-toggle="collapse" data-target="#work-profile-policy-body">
+                    <input type="checkbox" />
+                    <span class="helper"></span>
+                    <span class="text"></span>
+                </label>
+                <hr>
+                <div class="panel-title-description">
+                    The configurations below can be applied to the devices where the agent is running in Android Work-Profile.
+                </div>
+            </h2>
+        </div>
+        <div id="work-profile-policy-body" class="panel-collapse panel-body collapse" role="tabpanel" aria-labelledby="work-profile-policy-body">
+
+            <div id="work-profile-policy-feature-error-msg" class="alert alert-danger hidden" role="alert">
+                <i class="icon fw fw-error"></i><span></span>
+            </div>
+
+            <!--<div class="wr-input-control">
+             <label class="wr-input-control checkbox">
+                 <input id="work-profile-policy-allow-cross-profile" type="checkbox" class="form-control operationDataKeys" data-key="workProfilePolicyAllowCopyPaste" checked="checked" />
+                     <span class="helper" title="Permit the use of repeating, ascending and descending character sequences">
+                         &nbsp;&nbsp;&nbsp;Allow cross profile copy-paste
+                         <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                     </span>
+             </label>
+            </div> -->
+            <div class="wr-input-control">
+                <label class="wr-input-label" for="work-profile-policy-max-passcode-age-in-days">
+                    Profile Name
+                            <span class="helper" title="Name of the Work-Profile created by EMM Agent">
+                                <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                            </span>
+                    <br>
+                </label>
+                <input id="work-profile-policy-profile-name" type="text" class="form-control operationDataKeys" data-key="workProfilePolicyProfileName" maxlength="20">
+            </div>
+            <div class="wr-input-control">
+                <label class="wr-input-label" for="work-profile-policy-enable-system-apps">
+                    Enable System Apps
+                            <span class="helper" title="The set of system apps needed to be added to the work-profile">
+                                <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                            </span>
+                    <br>
+                    ( Should be exact package names seperated by commas. Ex: com.google.android.apps.maps, com.google.android.calculator )
+                </label>
+                <textarea id="workProfilePolicyEnableSystemApps" type ="text" class="form-control operationDataKeys" rows="4" data-key="workProfilePolicyEnableSystemApps"></textarea>
+            </div>
+            <div class="wr-input-control">
+                <label class="wr-input-label" for="work-profile-policy-hide-system-apps">
+                    Hide System Apps
+                            <span class="helper" title="The set of system apps needed to be hide in the work-profile">
+                                <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                            </span>
+                    <br>
+                    ( Should be exact package names seperated by commas. Ex: com.google.android.apps.maps, com.google.android.calculator )
+                </label>
+                <textarea id="work-profile-policy-hide-system-apps" class="form-control operationDataKeys" rows="4" data-key="workProfilePolicyHideSystemApps" placeholder=""></textarea>
+            </div>
+            <div class="wr-input-control">
+                <label class="wr-input-label" for="work-profile-policy-unhide-system-apps">
+                    Unhide System Apps
+                            <span class="helper" title="The set of system apps needed to be unhide in the work-profile">
+                                <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                            </span>
+                    <br>
+                    ( Should be exact package names seperated by commas. Ex: com.google.android.apps.maps, com.google.android.calculator )
+                </label>
+                <textarea id="work-profile-policy-unhide-system-apps" class="form-control operationDataKeys" rows="4" data-key="workProfilePolicyUnhideSystemApps" placeholder=""></textarea>
+            </div>
+            <div class="wr-input-control">
+                <label class="wr-input-label" for="passcode-policy-max-passcode-age-in-days">
+                    Enable Google Play Store Apps
+                            <span class="helper" title="The set of apps needed to be installed from Google Playstore to work-profile">
+                                <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                            </span>
+                    <br>
+                    ( Should be exact package names seperated by commas. Ex: com.google.android.apps.maps, com.google.android.calculator )
+                </label>
+                <textarea id="work-profile-policy-install-playstore-apps" class="form-control operationDataKeys" rows="4" data-key="workProfilePolicyEnablePlaystoreApps" placeholder=""></textarea>
+            </div>
+        </div>
+    </div>
+</div>
 </div>
 </div>

components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/units/mdm.unit.policy.edit/public/templates/hidden-operations-windows.hbs

@@ -27,6 +27,16 @@
         <span id="encrypt-storage-ok" class="has-success status-icon hidden"><i class="fw fw-ok"></i></span>
         <span id="encrypt-storage-error" class="encryption-error status-icon hidden"><i class="fw fw-error"></i></span>
     </a>
+    <a href="javascript:void(0)" onclick="showAdvanceOperation('app-restriction', this)">
+                <span class="fw-stack fw-lg">
+                    <i class="fw fw-application fw-stack-1x"></i>
+                    <i class="fw fw-block fw-stack-2x"></i>
+                </span>
+        Applications Restrictions
+        <span id="app-restriction-configured" class="has-configured status-icon hidden"><i class="fw fw-ok"></i></span>
+        <span id="app-restriction-ok" class="has-success status-icon hidden"><i class="fw fw-ok"></i></span>
+        <span id="app-restriction-error" class="has-error status-icon hidden"><i class="fw fw-error"></i></span>
+    </a>
     <!--<a href="javascript:void(0)" onclick="showAdvanceOperation('wifi', this)">-->
     <!--<span class="wr-hidden-operations-icon fw-stack">-->
     <!--<i class="fw fw-wifi fw-stack-2x"></i>-->
@@ -282,6 +292,104 @@
 </div>
 <!-- /encrypt-storage -->
 
+<!--app-restriction-->
+<div class="wr-hidden-operation" data-operation="app-restriction">
+    <div class="panel panel-default operation-data" data-operation="app-restriction" data-operation-code="APP-RESTRICTION">
+        <div id="app-restriction-heading" class="panel-heading" role="tab">
+            <h2 class="sub-title panel-title">
+                Application Restriction Settings
+                <label class="wr-input-control switch" data-toggle="collapse" data-target="#app-restriction-body">
+                    <input type="checkbox" />
+                    <span class="helper"></span>
+                    <span class="text"></span>
+                </label>
+                <hr>
+                <div class="panel-title-description">
+                    This configuration can be used to create a black list or white list of applications.
+                </div>
+            </h2>
+        </div>
+        <div id="app-restriction-body" class="panel-collapse panel-body collapse" role="tabpanel" aria-labelledby="app-restriction-body">
+
+            <div id="app-restriction-feature-error-msg" class="alert alert-danger hidden" role="alert">
+                <i class="icon fw fw-error"></i><span></span>
+            </div>
+
+            <select id="app-restriction-type" class="form-control operationDataKeys" data-key="restrictionType">
+                <option value="" selected="selected">
+                    None
+                </option>
+                <option value="black-list">Black List</option>
+                <option value="white-list">White List</option>
+            </select>
+
+            <div class="wr-input-control">
+                <label class="wr-input-label" for="restricted-applications">
+                    Restricted Application List
+                            <span class="helper" title="Add an application to restrict.">
+                                <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                            </span>
+                    <br>
+                    <a href="#restricted-applications-grid" class="grid-input-add" data-click-event="add-form">
+                                <span class="icon fw-stack">
+                                    <i class="fw fw-add fw-stack-1x"></i>
+                                    <i class="fw fw-ring fw-stack-2x"></i>
+                                </span>
+                        &nbsp;
+                        Add Application
+                    </a>
+                </label>
+                <div id="restricted-applications" class="operationDataKeys grouped-array-input multi-column-key-value-pair-array" data-key="restrictedApplications" data-column-count="2">
+                    <table class="table table-responsive table-striped">
+                        <thead>
+                        <tr>
+                            <th>No:</th>
+                            <th>Application Name/Description</th>
+                            <th>Package Name</th>
+                            <th></th>
+                        </tr>
+                        </thead>
+                        <tbody data-add-form-container="#restricted-applications-grid">
+                        <tr data-help-text="add-form">
+                            <td colspan="4">
+                                No entries added yet .
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+                    <table class="template hidden">
+                        <tbody data-add-form="#restricted-applications-grid">
+                        <tr data-add-form-element="clone">
+                            <td data-title="No:">
+                                <span class="index"></span>
+                            </td>
+                            <td data-title="App Name">
+                                <input type="text" class="form-control grid-input-text" data-child-key="appName" maxlength="100" data-default="" placeholder="[ Application Name or Description ]" />
+                            </td>
+                            <td data-title="Package Name">
+                                <input type="text" class="form-control grid-input-text" data-child-key="packageName" maxlength="100" data-default="" placeholder="[ Package Name of Application ]" />
+                            </td>
+                            <td>
+                                            <span class="list-group-item-actions">
+                                                <a href="#restricted-applications-grid" class="grid-input-remove" data-click-event="remove-form">
+                                                    <span class="fw-stack helper" title="Remove Entry">
+                                                        <i class="fw fw-ring fw-stack-2x"></i>
+                                                        <i class="fw fw-delete fw-stack-1x"></i>
+                                                    </span>
+                                                </a>
+                                            </span>
+                            </td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<!--/app-restriction-->
+
+
 <!-- wi-fi -->
 <!--<div class="wr-hidden-operation" data-operation="wifi">-->
 <!--<div class="panel panel-default operation-data" data-operation="wifi" data-operation-code="WIFI">-->