Add QR code generate capability to enroll android agent

components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.platform.configuration/configuration.hbs

@@ -19,7 +19,7 @@
 <div class="panel panel-default">
     <div class="panel-heading" role="tab">
         <h2 class="sub-title panel-title">
-            Platform Configuration - Windows
+            Platform Configuration - Android
         </h2>
     </div>
     <div id="android-config-body" class="panel-collapse panel-body" role="tabpanel">
@@ -87,9 +87,9 @@
             <div class="wr-input-control">
                 <label class="wr-input-label" for="android-kiosk-config-admin-component">
                     PROVISIONING_DEVICE_ADMIN_COMPONENT_NAME
-                    <!--<span class="helper" title="Time interval after which Android agent will contact IoT Server each time to fetch data">-->
+                    <span class="helper" title="Package name of the Entgra Android agent.">
-                    <!--<span class="wr-help-tip glyphicon glyphicon-question-sign"></span>-->
+                    <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
-                    <!--</span>-->
+                    </span>
                     <br>
                     ( ex: io.entgra.iot.agent/org.wso2.iot.agent.services.AgentDeviceAdminReceiver )
                 </label>
@@ -99,9 +99,9 @@
             <div class="wr-input-control">
                 <label class="wr-input-label" for="android-kiosk-config-checksum">
                     PROVISIONING_DEVICE_ADMIN_PACKAGE_CHECKSUM
-                    <!--<span class="helper" title="Time interval after which Android agent will contact IoT Server each time to fetch data">-->
+                    <span class="helper" title="Checksum value of the android agent.">
-                    <!--<span class="wr-help-tip glyphicon glyphicon-question-sign"></span>-->
+                    <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
-                    <!--</span>-->
+                    </span>
                     <br>
                     ( ex: gJD2YwtOiWJHkSMkkIfLRlj-quNqG1fb6v100QmzM9w= )
                 </label>
@@ -111,9 +111,9 @@
             <div class="wr-input-control">
                 <label class="wr-input-label" for="android-kiosk-config-download-url">
                     PROVISIONING_DEVICE_ADMIN_PACKAGE_DOWNLOAD_LOCATION
-                    <!--<span class="helper" title="Time interval after which Android agent will contact IoT Server each time to fetch data">-->
+                    <span class="helper" title="Android agent download location.">
-                    <!--<span class="wr-help-tip glyphicon glyphicon-question-sign"></span>-->
+                    <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
-                    <!--</span>-->
+                    </span>
                     <br>
                     ( ex: http://192.168.8.20:8080/android.apk )
                 </label>
@@ -123,9 +123,9 @@
             <div class="wr-input-control">
                 <label class="wr-input-label" for="android-kiosk-config-wifi-ssid">
                     PROVISIONING_WIFI_SSID
-                    <!--<span class="helper" title="Time interval after which Android agent will contact IoT Server each time to fetch data">-->
+                    <span class="helper" title="SSID of WI-FI network.">
-                    <!--<span class="wr-help-tip glyphicon glyphicon-question-sign"></span>-->
+                    <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
-                    <!--</span>-->
+                    </span>
                     <br>
                     ( ex: Entgra )
                 </label>
@@ -135,9 +135,9 @@
             <div class="wr-input-control">
                 <label class="wr-input-label" for="android-kiosk-config-wifi-sec">
                     PROVISIONING_WIFI_SECURITY_TYPE
-                    <!--<span class="helper" title="Time interval after which Android agent will contact IoT Server each time to fetch data">-->
+                    <span class="helper" title="Wi-Fi security type of network.">
-                    <!--<span class="wr-help-tip glyphicon glyphicon-question-sign"></span>-->
+                    <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
-                    <!--</span>-->
+                    </span>
                     <br>
                 </label>
                 <select id="android-kiosk-config-wifi-sec" class="form-control" data-default="0">
@@ -151,21 +151,32 @@
             <div class="wr-input-control">
                 <label class="wr-input-label" for="android-kiosk-config-wifi-password">
                     PROVISIONING_WIFI_PASSWORD
-                    <!--<span class="helper" title="Time interval after which Android agent will contact IoT Server each time to fetch data">-->
+                    <span class="helper" title="Password of the Wi-Fi network.">
-                    <!--<span class="wr-help-tip glyphicon glyphicon-question-sign"></span>-->
+                    <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
-                    <!--</span>-->
+                    </span>
                     <br>
-
                 </label>
                 <input id="android-kiosk-config-wifi-password" type="text" class="form-control" >
             </div>
 
+            <div class="wr-input-control">
+                <label class="wr-input-label" for="android-kiosk-config-server-ip">
+                    SERVER_ADDRESS
+                    <span class="helper" title="Server address (Ex-www.abc.com:8280)">
+                    <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                    </span>
+                    <br>
+
+                </label>
+                <input id="android-kiosk-config-server-ip" type="text" class="form-control" >
+            </div>
+
             <div class="wr-input-control">
                 <label class="wr-input-label" for="android-kiosk-config-encryption">
                     PROVISIONING_SKIP_ENCRYPTION
-                    <!--<span class="helper" title="Time interval after which Android agent will contact IoT Server each time to fetch data">-->
+                    <span class="helper" title="Set value false to enroll KIOSK device without encrypting.">
-                    <!--<span class="wr-help-tip glyphicon glyphicon-question-sign"></span>-->
+                    <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
-                    <!--</span>-->
+                    </span>
                     <br>
                 </label>
                 <select id="android-kiosk-config-encryption" class="form-control" data-default="0">
@@ -174,6 +185,21 @@
                 </select>
             </div>
 
+            <div class="wr-input-control">
+                <label class="wr-input-label" for="android-kiosk-config-defaultOwner">
+                    DEFAULT_OWNERSHIP
+                    <span class="helper" title="Type of ownership">
+                    <span class="wr-help-tip glyphicon glyphicon-question-sign"></span>
+                    </span>
+                    <br>
+                </label>
+                <select id="android-kiosk-config-defaultOwner" class="form-control" data-default="0">
+                    <option value="BYOD">BYOD</option>
+                    <option value="COPE">COPE</option>
+                    <option value="COSU">COSU</option>
+                    <option value="WORK_PROFILE">WORK_PROFILE</option>
+                </select>
+            </div>
         </div>
 
         <!-- End of KIOSK Configs -->

components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.platform.configuration/public/js/platform-configuration.js

@@ -87,7 +87,9 @@ var kioskConfigs = {
     "wifiSecurity" : "android.app.extra.PROVISIONING_WIFI_SECURITY_TYPE",
     "skipEncryption" : "android.app.extra.PROVISIONING_SKIP_ENCRYPTION",
     "checksum" : "android.app.extra.PROVISIONING_DEVICE_ADMIN_PACKAGE_CHECKSUM",
-    "downloadURL" : "android.app.extra.PROVISIONING_DEVICE_ADMIN_PACKAGE_DOWNLOAD_LOCATION"
+    "downloadURL" : "android.app.extra.PROVISIONING_DEVICE_ADMIN_PACKAGE_DOWNLOAD_LOCATION",
+    "defaultOwnership" : "android.app.extra.defaultOwner",
+    "serverIP" : "android.app.extra.serverIp"
 };
 
 $(document).ready(function () {
@@ -150,6 +152,10 @@ $(document).ready(function () {
                         $("input#android-kiosk-config-download-url").val(config.value);
                     } else if (config.name === kioskConfigs["skipEncryption"]) {
                         $("#android-kiosk-config-encryption").val(config.value);
+                    } else if (config.name === kioskConfigs["defaultOwnership"]) {
+                        $("#android-kiosk-config-defaultOwner").val(config.value);
+                    } else if (config.name === kioskConfigs["serverIP"]) {
+                        $("#android-kiosk-config-server-ip").val(config.value);
                     }
                 }
             }
@@ -194,6 +200,8 @@ $(document).ready(function () {
         var wifiPassword = $("input#android-kiosk-config-wifi-password").val();
         var encryption = $("#android-kiosk-config-encryption").find("option:selected").attr("value");
         var wifiSecurity = $("#android-kiosk-config-wifi-sec").find("option:selected").attr("value");
+        var defaultOwner = $("#android-kiosk-config-defaultOwner").find("option:selected").attr("value");
+        var serverIp = $("#android-kiosk-config-server-ip").val();
 
         if (notifierType === notifierTypeConstants["LOCAL"] && !notifierFrequency) {
             $(errorMsg).text("Notifier frequency is a required field. It cannot be empty.");
@@ -281,6 +289,18 @@ $(document).ready(function () {
                 "contentType": "text"
             };
 
+            var kioskDefaultOwner = {
+                "name": kioskConfigs["defaultOwnership"],
+                "value": defaultOwner,
+                "contentType": "text"
+            };
+
+            var kioskServerIp = {
+                "name": kioskConfigs["serverIP"],
+                "value": serverIp,
+                "contentType": "text"
+            };
+
             configList.push(type);
             configList.push(frequency);
             configList.push(androidEula);
@@ -292,6 +312,8 @@ $(document).ready(function () {
             configList.push(kioskWifiSSID);
             configList.push(kioskWifiPassword);
             configList.push(kioskWifiSecurity);
+            configList.push(kioskDefaultOwner);
+            configList.push(kioskServerIp);
 
             if (notifierType === notifierTypeConstants["FCM"]) {
                 configList.push(fcmKey);

components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.type-view/public/css/styles.css

@@ -59,7 +59,7 @@ hr {
     color: #006eff;
 }
 .enrollment-qr-container canvas {
-    width: 14%;
+    width: 15%;
 }
 
 @media (min-width:992px){

components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.type-view/public/images/application.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" height="512px" viewBox="-96 0 496 496" width="512px" class=""><g><path d="m96 168v48c0 4.425781 3.585938 8 8 8h48c4.414062 0 8-3.574219 8-8v-48c0-4.425781-3.585938-8-8-8h-48c-4.414062 0-8 3.574219-8 8zm16 8h32v32h-32zm0 0" data-original="#000000" class="active-path" data-old_color="#000000" fill="#007E97"/><path d="m272 168c0-4.425781-3.585938-8-8-8h-48c-4.414062 0-8 3.574219-8 8v48c0 4.425781 3.585938 8 8 8h48c4.414062 0 8-3.574219 8-8zm-16 40h-32v-32h32zm0 0" data-original="#000000" class="active-path" data-old_color="#000000" fill="#007E97"/><path d="m160 328v-48c0-4.425781-3.585938-8-8-8h-48c-4.414062 0-8 3.574219-8 8v48c0 4.425781 3.585938 8 8 8h48c4.414062 0 8-3.574219 8-8zm-16-8h-32v-32h32zm0 0" data-original="#000000" class="active-path" data-old_color="#000000" fill="#007E97"/><path d="m272 240h-80v-80h-16v80h-80v16h80v80h16v-80h80zm0 0" data-original="#000000" class="active-path" data-old_color="#000000" fill="#007E97"/><path d="m272 272h-56c-4.414062 0-8 3.574219-8 8v56h16v-48h48zm0 0" data-original="#000000" class="active-path" data-old_color="#000000" fill="#007E97"/><path d="m240 296h16v40h-16zm0 0" data-original="#000000" class="active-path" data-old_color="#000000" fill="#007E97"/><path d="m304 192v-56c0-4.425781-3.585938-8-8-8h-24v-88c0-22.054688-17.945312-40-40-40h-192c-22.054688 0-40 17.945312-40 40v416c0 22.054688 17.945312 40 40 40h192c22.054688 0 40-17.945312 40-40v-88h24c4.414062 0 8-3.574219 8-8v-56h-16v48h-48v16h16v88c0 13.230469-10.769531 24-24 24h-8v-8c0-13.230469-10.769531-24-24-24h-128c-13.230469 0-24 10.769531-24 24v8h-8c-13.230469 0-24-10.769531-24-24v-416c0-9.902344 6.03125-18.414062 14.609375-22.078125l43.734375 43.734375c1.496094 1.503906 3.535156 2.34375 5.65625 2.34375h112c2.121094 0 4.160156-.839844 5.65625-2.34375l43.734375-43.734375c8.578125 3.664063 14.609375 12.175781 14.609375 22.078125v88h-16v16h48v48zm-240 280c0-4.414062 3.59375-8 8-8h128c4.40625 0 8 3.585938 8 8v8h-144zm124.6875-424h-105.375l-32-32h169.375zm0 0" data-original="#000000" class="active-path" data-old_color="#000000" fill="#007E97"/><path d="m64 136v56h16v-48h48v-16h-56c-4.414062 0-8 3.574219-8 8zm0 0" data-original="#000000" class="active-path" data-old_color="#000000" fill="#007E97"/><path d="m64 360c0 4.425781 3.585938 8 8 8h56v-16h-48v-48h-16zm0 0" data-original="#000000" class="active-path" data-old_color="#000000" fill="#007E97"/></g> </svg>

components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.type-view/public/js/type-view.js

@@ -40,7 +40,9 @@ var kioskConfigs = {
     "checksum": "android.app.extra.PROVISIONING_DEVICE_ADMIN_PACKAGE_CHECKSUM",
     "downloadURL": "android.app.extra.PROVISIONING_DEVICE_ADMIN_PACKAGE_DOWNLOAD_LOCATION",
     "androidExtra": "android.app.extra.PROVISIONING_ADMIN_EXTRAS_BUNDLE",
-    "accessToken" : "android.app.extra.token"
+    "accessToken": "android.app.extra.token",
+    "defaultOwnership": "android.app.extra.defaultOwner",
+    "serverIp": "android.app.extra.serverIp"
 };
 
 /*
@@ -75,12 +77,12 @@ function hidePopup() {
 /*
  * QR-code generation function.
  */
-function generateQRCode(qrCodeClass) {
+function generateQRCode() {
     var enrollmentURL = $("#qr-code-modal").data("enrollment-url");
     $(qrCodeClass).qrcode({
         text: enrollmentURL,
-        width: 200,
+        width: 150,
-        height: 200
+        height: 150
     });
 }
 
@@ -89,19 +91,26 @@ function generateQRCode(qrCodeClass) {
  */
 function generateKIOSKQRCode(qrCodeClass) {
 
-    var androidConfigAPI = "/api/device-mgt/android/v1.0/configuration";
     var payload = {};
+    var androidConfigAPI = "/api/device-mgt/android/v1.0/configuration";
 
     var isKioskConfigured = false;
+    var defaultOwnerVal = {};
+    var serverIp = {};
+    $("#android-qr-code").show();
+    $("#enrollment_qr_content").show();
+    $("#qr-code-img").hide();
+    $("#enroll-qr-heading").show();
+    var ownership_type = $("#android-device-ownership").find("option:selected").attr("value");
 
     invokerUtil.get(
         androidConfigAPI,
         function(data) {
             data = JSON.parse(data);
             if (data != null && data.configuration != null) {
+                if (ownership_type == "COSU") {
                     for (var i = 0; i < data.configuration.length; i++) {
                         var config = data.configuration[i];
-
                         if (config.name === kioskConfigs["adminComponentName"]) {
                             isKioskConfigured = true;
                             payload[config.name] = config.value;
@@ -117,10 +126,28 @@ function generateKIOSKQRCode(qrCodeClass) {
                             payload[config.name] = config.value;
                         } else if (config.name === kioskConfigs["skipEncryption"]) {
                             payload[config.name] = Boolean(config.value);
+                        } else if (config.name === kioskConfigs["defaultOwnership"]) {
+                            defaultOwnerVal[config.name] = ownership_type;
+                        } else if (config.name === kioskConfigs["serverIp"]) {
+                            serverIp[config.name] = config.value;
+                        }
+                    }
+                } else {
+                    for (var i = 0; i < data.configuration.length; i++) {
+                        var config = data.configuration[i];
+                        if (config.name === kioskConfigs["adminComponentName"]) {
+                            isKioskConfigured = true;
+                            payload[config.name] = config.value;
+                        } else if (config.name === kioskConfigs["defaultOwnership"]) {
+                            defaultOwnerVal[config.name] = ownership_type;
+                        } else if (config.name === kioskConfigs["serverIp"]) {
+                            serverIp[config.name] = config.value;
                         }
                     }
                 }
-        }, function (data) {
+            }
+        },
+        function(data) {
             console.log(data);
         });
 
@@ -129,20 +156,50 @@ function generateKIOSKQRCode(qrCodeClass) {
 
     var accessToken = {};
     accessToken[kioskConfigs["accessToken"]] = tokenPair["accessToken"];
-    payload[kioskConfigs["androidExtra"]] = accessToken;
+    var sumExtra = $.extend(accessToken, defaultOwnerVal, serverIp);
-
+    payload[kioskConfigs["androidExtra"]] = sumExtra;
+    $(".kiosk-enrollment-qr-container").empty();
     if (isKioskConfigured) {
         $(qrCodeClass).qrcode({
             text: JSON.stringify(payload),
-            width: 300,
+            width: 350,
-            height: 300
+            height: 350
         });
     } else {
-        $("#kiosk_heading").hide();
+        $("#android-configurations-alert").fadeToggle(500);
         $("#kiosk_content").hide();
     }
 }
 
+function displayAgentDownloadQR() {
+    $(".enrollment-qr-container").empty();
+    generateQRCode(".enrollment-qr-container");
+    $("#download-agent-qr").fadeToggle(1000);
+    $("#enroll-agent-qr").fadeOut(1000);
+    $("#android-enroll-manually-instructions").fadeOut(1000);
+    $('html,body').animate({
+        scrollTop: $('#download-agent-qr').position().top
+    }, 800);
+}
+
+function displayEnrollmentQR() {
+    $("#download-agent-qr").fadeOut(1000);
+    $("#enroll-agent-qr").fadeToggle(1000);
+    $("#android-enroll-manually-instructions").fadeOut(1000);
+    $('html,body').animate({
+        scrollTop: $('#enroll-agent-qr').position().top
+    }, 800);
+}
+
+function manualEnrollmentGuide() {
+    $("#enroll-agent-qr").fadeOut(1000);
+    $("#download-agent-qr").fadeOut(1000);
+    $("#android-enroll-manually-instructions").fadeToggle(1000);
+    $('html,body').animate({
+        scrollTop: $('#android-enroll-manually-instructions').position().top
+    }, 800);
+}
+
 function toggleEnrollment() {
     $(".modal-content").html($("#qr-code-modal").html());
     generateQRCode(".modal-content .qr-code");
@@ -421,9 +478,6 @@ $.fn.collapse_nav_sub = function () {
 $(document).ready(function() {
     $.sidebar_toggle();
 
-    generateQRCode(".enrollment-qr-container");
-    generateKIOSKQRCode(".kiosk-enrollment-qr-container");
-
     if (typeof $.fn.collapse == 'function') {
         $('.navbar-collapse.tiles').on('shown.bs.collapse', function() {
             $(this).collapse_nav_sub();

components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.type-view/type-view.hbs

@@ -1,22 +1,34 @@
-{{unit "cdmf.unit.lib.qrcode"}}
+
 {{unit "cdmf.unit.device.type.qr-modal" enrollmentURL=enrollmentURL deviceTypeName="Android"}}
-{{unit "cdmf.unit.device.type.email.invite-modal" deviceTypeView="android"}}
 
 <div class="row">
     <div class="col-lg-12">
         {{#if isVirtual}}
             <h1 class="grey ">DOWNLOAD THE VIRTUAL ANDROID DEVICE</h1>
         {{else}}
-            <h1 class="grey ">DOWNLOAD THE ANDROID AGENT</h1>
+            <h2 class="grey ">ENROLL THE ANDROID AGENT</h2>
         {{/if}}
         <hr>
     </div>
 </div>
 
 <div class="row">
-    <!--<div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 add-padding-top-2x">
+    <h3>Step 01 - Get your Android Agent.</h3>
+    <hr><br>
+        <p>The Android agent can be downloaded by 2 methods.
+            Either the generated QR code can be scanned, and the agent APK downloaded from the link,
+            or the agent APK can be manually downloaded via the "Download APK" button, transferred to
+            the device and then installed.</p>
+        <br>
+        <button  id="button-download-qr" onclick="displayAgentDownloadQR();" class="btn btn-default btn-primary">Get Android Agent</button>
+        <br>
+
+        {{!-- Agent download qr class --}}
+
+        <div id="download-agent-qr" style="display:none" class="row">
+        {{!-- <div class="col-xs-12 col-sm-4 col-md-3 col-lg-3 add-padding-top-2x">
         <img src="{{@unit.publicUri}}/images/android-icon.png" class="img-responsive">
-    </div>-->
+        </div> --}}
             <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 add-padding-top-2x add-padding-bottom-2x">
             {{#if isVirtual}}
                 <h3 class="text-center add-padding-bottom-4x">Download our virtual Android device, enroll it with WSO2
@@ -70,7 +82,68 @@
                         target="_blank">Entgra IoT Server documentation.</a></p>
             {{/if}}
         </div>
+    <hr>
+    <h3>Step 02 - Enroll the Android Agent.</h3><br>
+        <p>Your device can be enrolled with Entgra IoTS automatically via QR code or manually by a wizard.
+            To enroll automatically; first download agent as mentioned in Step 1 then proceed with the ENROLL WITH QR option from the device setup activity.
+            Thereafter select the ownership configuration and scan the generated QR to complete the process.
+            To enroll manually; select the Manual enrollment option from the setup activity and follow the succeeding steps.</p>
+        <br>
+        {{#unless isVirtual}}
+            {{#unless isCloud}}
+            <div>
+                <button  id="button-enroll-qr" onclick="displayEnrollmentQR();" class="btn btn-default btn-primary">Enroll using QR</button>
+                <button  id="button-enroll-manual" onclick="manualEnrollmentGuide();" class="btn btn-default btn-primary">Enroll manually</button>
+            </div>
+            {{/unless}}
+            {{else}}
+                <button  id="button-enroll-manual" onclick="manualEnrollmentGuide();" class="btn btn-default btn-primary">Enroll manually</button>
+        {{/unless}}
 
+    {{!-- Agent enroll QR code class --}}
+        <div id="enroll-agent-qr" style="display:none" class="row">
+            {{#unless isVirtual}}
+                {{#unless isCloud}}
+                <h3 class="text-center">Generate QR code to QR based Provisioning.</h3>
+                <hr>
+                    <div class="text-center">
+                        <label class="text-center add-margin-bottom-2x add-margin-top-2x">Select device ownership</label>
+                        <select id="android-device-ownership" class="text-center" data-default="0" onchange="generateKIOSKQRCode('.kiosk-enrollment-qr-container');">
+                            <option value="BYOD">Select</option>
+                            <option value="BYOD">BYOD</option>
+                            <option value="COPE">COPE</option>
+                            <option value="COSU">COSU (KIOSK)</option>
+                            <option value="WORK_PROFILE">WORK PROFILE</option>
+                        </select>
+                    </div>
+                    <div class="text-center" id="android-qr-code">
+                        <div class="a-token" data-atoken="{{accessToken}}"></div>
+                            <div class="row" id="enrollment_qr_content">
+                            <div class="col-xs-12 col-sm-12.enrollment-qr-container canvas  col-md-12 col-lg-12 add-padding-top-2x add-padding-bottom-2x">
+                                <div class="kiosk-enrollment-qr-container text-center" data-toggle="popover"
+                                    data-trigger="focus" data-placement="bottom">
+                                </div>
+                            </div>
+
+                        </div>
+                </div>
+                <div class="text-center">
+                    <div class="text-center " alt="Responsive image" id="qr-code-img">
+                        <img src="{{@unit.publicUri}}/images/application.svg" height="300" width="300" style="width:50%;">
+                    </div>
+                    <h3 id="enroll-qr-heading" style="display:none" class="text-center fw fw-lg add-margin-1x">Scan to enroll android agent</h3>
+                </div>
+                <hr>
+                {{/unless}}
+        {{/unless}}
+</div>
+
+{{!-- Warning message  --}}
+<div id="android-configurations-alert" style="display:none" class="alert alert-warning text-center ">
+    <strong>Warning!</strong> Android Platform Configurations is empty. Please set Platform Configurations before generating QR code.
+</div>
+
+<div id="android-enroll-manually-instructions" class="row" style="display:none">
     <div class="row">
     <div class="col-xs-12 col-sm-12 col-md-8 col-lg-12 add-padding-top-2x ">
         {{#if isVirtual}}
@@ -81,8 +154,6 @@
         <hr>
     </div>
 </div>
-
-<div class="row grey-bg">
     {{#if isCloud}}
         <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 add-padding-top-2x add-padding-bottom-2x">
             <h5><strong>Step 1</strong></h5>
@@ -109,14 +180,14 @@
                         </li>
                     </ol>
                 </div>
-                <img src="{{@unit.publicUri}}/images/android-tryit.png" class="img-responsive">
+                <img src="{{@unit.publicUri}}/images/android-tryit.png" style="width:70%;" class="img-responsive">
             {{else}}
                 <div class="add-min-height">
                     <p>Let's start by opening the Android agent on your device.
                         <br/>Tap on <b>WSO2 Device Management Agent</b>.
                     </p>
                 </div>
-                <img src="{{@unit.publicUri}}/images/launch_agent.png" class="img-responsive">
+                <img src="{{@unit.publicUri}}/images/launch_agent.png" style="width:70%;" class="img-responsive">
             {{/if}}
         </div>
         <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 col-md-offset-1 col-lg-offset-1 add-padding-top-2x add-padding-bottom-2x">
@@ -128,7 +199,7 @@
                     <li>Password: <i>Your Cloud password.</i></li>
                 </ul>
             </div>
-            <img src="{{@unit.publicUri}}/images/register-cloud.png" class="img-responsive">
+            <img src="{{@unit.publicUri}}/images/register-cloud.png" style="width:70%;" class="img-responsive">
         </div>
         <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 col-md-offset-1 col-lg-offset-1 add-padding-top-2x add-padding-bottom-2x">
             <h5><strong>Step 3</strong></h5>
@@ -168,29 +239,28 @@
                         </li>
                     </ol>
                 </div>
-                <img src="{{@unit.publicUri}}/images/android-tryit.png" class="img-responsive">
+                <img src="{{@unit.publicUri}}/images/android-tryit.png" style="width:70%;" class="img-responsive">
             {{else}}
                 <div class="add-min-height">
                     <p>Let's start by installing the Android agent on your device. Open the downloaded file, and tap
                         <b>INSTALL</b>.</p>
                 </div>
-                <img src="{{@unit.publicUri}}/images/install_agent.png" class="img-responsive">
+                <img src="{{@unit.publicUri}}/images/install_agent.png" style="width:70%;" class="img-responsive">
             {{/if}}
         </div>
-
         <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 add-padding-top-2x add-padding-bottom-2x">
             <h5><strong>Step 2</strong></h5>
             <div class="add-min-height">
                 <p>Tap Skip to proceed with the default enrollment process.</p>
             </div>
-            <img src="{{@unit.publicUri}}/images/set_profile.png" class="img-responsive">
+            <img src="{{@unit.publicUri}}/images/set_profile.png" style="width:70%;" class="img-responsive">
         </div>
         <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 add-padding-top-2x add-padding-bottom-2x">
             <h5><strong>Step 3</strong></h5>
             <div class="add-min-height">
                 <p>Enter the server address based on your environment, in the text box provided.</p>
             </div>
-            <img src="{{@unit.publicUri}}/images/registration.png" class="img-responsive">
+            <img src="{{@unit.publicUri}}/images/registration.png" style="width:70%;" class="img-responsive">
         </div>
         <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 add-padding-top-2x add-padding-bottom-2x">
             <h5><strong>Step 4</strong></h5>
@@ -202,27 +272,11 @@
                     <li>Password: <i>Your password.</i></li>
                 </ul>
             </div>
-            <img src="{{@unit.publicUri}}/images/register.png" class="img-responsive">
+            <img src="{{@unit.publicUri}}/images/register.png" style="width:70%;" class="img-responsive">
         </div>
     {{/if}}
 </div>
 
-<div class="row" id="kiosk_heading">
-    <div class="col-xs-12 col-sm-12 col-md-8 col-lg-12 add-padding-top-2x ">
-        <h3 class="uppercase">PROVISION YOUR KIOSK DEVICE</h3>
-        <hr>
-    </div>
-</div>
-
-<div class="a-token" data-atoken="{{accessToken}}"></div>
-
-<div class="row" id="kiosk_content">
-    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 add-padding-top-2x add-padding-bottom-2x">
-        <h3 class="text-center">Scan to provision the KIOSK device</h3>
-        <div class="kiosk-enrollment-qr-container text-center"></div>
-    </div>
-</div>
-
 {{#zone "topCss"}}
     {{css "css/styles.css"}}
 {{/zone}}