Updating Add Device Modal - UI

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

@@ -18,25 +18,45 @@
 {{#zone "content"}}
     <div id="qr-code-modal" data-enrollment-url="{{enrollmentURL}}" class="hidden">
         <div class="modal-header">
-            <h3 class="pull-left modal-title">
+            <h4 class="pull-left modal-title">
-                Scan QR code to start enrollment
+                <span class="fw-stack">
-            </h3>
+                    <i class="fw fw-mobile fw-stack-2x"></i>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
+                    <span class="fw-stack fw-move-right fw-move-bottom">
+                      <i class="fw fw-ring fw-stack-2x"></i>
+                      <i class="fw fw-circle fw-stack-2x fw-stroke text-info"></i>
+                      <i class="fw fw-add fw-stack-1x fw-inverse"></i>
+                   </span>
+                </span>
+                &nbsp;&nbsp;Add your new mobile device to {{@app.conf.appName}}
+            </h4>
         </div>
+        <hr>
         <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
-            <div>
+            <div class="panel-body col-centered text-center">
-                <h4>
+                <h5>
-                    Please scan the QR code using your mobile device to retrieve enrollment URL.
+                    Please scan the following QR code using your new <b>Android</b>, <b>iPhone</b> or <b>Windows</b> mobile device.
-                </h4>
+                </h5>
+                <br>
                 <div class="panel panel-default">
-                    <div class="panel-body col-centered text-center">
+                    <div class="panel-body">
                         <div class="qr-code"></div>
                     </div>
                 </div>
+                <br>
+                <h5>
+                    Not having a QR code scanner in your device?
+                    <br><br>
+                    Try following link
+                    <br><br>
+                    <b>{{enrollmentURL}}</b>
+                    <br><br>
+                    on your device's Internet browser instead.
+                </h5>
             </div>
         </div>
         <div class="modal-footer">
             <div class="buttons">
+                <a href="javascript:hidePopup()" class="btn-operations btn-default">Ok</a>
             </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.device.qr-modal/qr-modal.js

@@ -14,11 +14,10 @@
  *  limitations under the License.
  */
 
-function onRequest(context) {
+function onRequest() {
     var mdmProps = require("/app/modules/conf-reader/main.js")["conf"];
-
     var viewModel = {};
     //TODO: Move enrollment URL into app-conf.json
-    viewModel.enrollmentURL = mdmProps.generalConfig.host + mdmProps.enrollmentDir;
+    viewModel["enrollmentURL"] = mdmProps["generalConfig"]["host"] + mdmProps["enrollmentDir"];
     return viewModel;
 }