From aada09de1085292b31769e9e47b4d2e7be2fc1dd Mon Sep 17 00:00:00 2001
From: dilanua <dilan.u.ariyaratne@gmail.com>
Date: Wed, 10 Aug 2016 18:06:26 +0530
Subject: [PATCH] Adding policy create UI updates

---
 .../units/mdm.unit.policy.create/create.hbs   | 477 +++++++++---------
 .../units/mdm.unit.policy.create/create.js    |  32 +-
 .../public/js/policy-create.js                | 166 +++---
 3 files changed, 344 insertions(+), 331 deletions(-)

diff --git a/components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/units/mdm.unit.policy.create/create.hbs b/components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/units/mdm.unit.policy.create/create.hbs
index f101f41a9..ff6748535 100644
--- a/components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/units/mdm.unit.policy.create/create.hbs
+++ b/components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/units/mdm.unit.policy.create/create.hbs
@@ -1,279 +1,280 @@
 {{#zone "content"}}
     <div class="row">
-        <div class="col-md-12">
+    <div class="col-md-12">
 
-            <div class="wr-steps hidden">
-                <div class="col-md-3 col-xs-3">
-                    <div class="itm-wiz itm-wiz-current" data-step="policy-platform">
-                        <div class="wiz-no">1</div>
-                        <div class="wiz-lbl hidden-xs"><span>Select a platform</span></div>
-                    </div>
-                    <br class="c-both" />
-                </div>
-                <div class="col-md-3 col-xs-3">
-                    <div class="itm-wiz" data-step="policy-profile">
-                        <div class="wiz-no">2</div>
-                        <div class="wiz-lbl hidden-xs"><span>Configure profile</span></div>
-                    </div>
-                    <br class="c-both" />
-                </div>
-                <div class="col-md-3 col-xs-3">
-                    <div class="itm-wiz" data-step="policy-criteria">
-                        <div class="wiz-no">3</div>
-                        <div class="wiz-lbl hidden-xs"><span>Assign to groups</span></div>
-                    </div>
-                    <br class="c-both" />
-                </div>
-                <div class="col-md-3 col-xs-3">
-                    <div class="itm-wiz" data-step="policy-naming">
-                        <div class="wiz-no">4</div>
-                        <div class="wiz-lbl hidden-xs"><span>Publish to devices</span></div>
-                    </div>
-                    <br class="c-both" />
-                </div>
+    <div class="wr-steps hidden">
+        <div class="col-md-3 col-xs-3">
+            <div class="itm-wiz itm-wiz-current" data-step="policy-platform">
+                <div class="wiz-no">1</div>
+                <div class="wiz-lbl hidden-xs"><span>Select a platform</span></div>
             </div>
+            <br class="c-both" />
+        </div>
+        <div class="col-md-3 col-xs-3">
+            <div class="itm-wiz" data-step="policy-profile">
+                <div class="wiz-no">2</div>
+                <div class="wiz-lbl hidden-xs"><span>Configure profile</span></div>
+            </div>
+            <br class="c-both" />
+        </div>
+        <div class="col-md-3 col-xs-3">
+            <div class="itm-wiz" data-step="policy-criteria">
+                <div class="wiz-no">3</div>
+                <div class="wiz-lbl hidden-xs"><span>Assign to groups</span></div>
+            </div>
+            <br class="c-both" />
+        </div>
+        <div class="col-md-3 col-xs-3">
+            <div class="itm-wiz" data-step="policy-naming">
+                <div class="wiz-no">4</div>
+                <div class="wiz-lbl hidden-xs"><span>Publish to devices</span></div>
+            </div>
+            <br class="c-both" />
+        </div>
+    </div>
 
-            <div class="container col-centered policy-message hidden">
-                <div class="wr-form">
-                    <h1 id="policy-message-page-wizard-title" class="page-sub-title">Policy creation is successful.</h1>
-                    <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="/emm/policies/">
-                        View policy list
-                    </button>
-                    <a href="/emm/policies/add-policy" class="cu-btn-inner">
+    <div class="container col-centered policy-message hidden">
+        <div class="wr-form">
+            <h1 id="policy-message-page-wizard-title" class="page-sub-title">Policy creation is successful.</h1>
+            <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="/emm/policies/">
+                View policy list
+            </button>
+            <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>
                         </span>
-                        Add another policy
-                    </a>
-                </div>
-            </div>
+                Add another policy
+            </a>
+        </div>
+    </div>
 
-            <div class="container col-centered wr-content policy-naming hidden">
-                <div class="wr-form">
-                    <h1 id="policy-naming-page-wizard-title" class="page-sub-title">ADD POLICY</h1>
-                    <hr>
-                    <div id="policy-naming-wizard-steps" class="row wr-wizard"></div>
-                    <hr>
-                    <div class="row">
-                        <div class="col-lg-12">
-                            <h4 class="visible-xs">Step 4: Publish 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>
-                            </div>
-                            <div>
-                                <label class="wr-input-label">Set a Name for your Policy *</label>
-                                <br />
-                                <label class="wr-input-label">
-                                    (Policy name should be 1-to-30 characters long)
-                                </label>
-                                <div id="policyNameField" class="wr-input-control">
-                                    <div class="cus-col-50 form-group wr-input-control">
-                                        <input id="policy-name-input" class="form-control" type="text" value="" />
-                                        <label class="error nameEmpty hidden" for="summary">Policy name is required &
-                                                                                            Should be be 1-to-30
-                                                                                            characters long.</label>
-                                    </div>
-                                    <br class="c-both" />
-                                </div>
-                                <label class="wr-input-label">
-                                    Add a description
-                                </label>
-                                <div class="wr-input-control">
-                                    <div class="cus-col-50">
-                                        <textarea id="policy-description-input" class="form-control" rows="10"
-                                                  placeholder="[ Summary about the policy ]"></textarea>
-                                    </div>
-                                    <br class="c-both" />
-                                </div>
+    <div class="container col-centered wr-content policy-naming hidden">
+        <div class="wr-form">
+            <h1 id="policy-naming-page-wizard-title" class="page-sub-title">ADD POLICY</h1>
+            <hr>
+            <div id="policy-naming-wizard-steps" class="row wr-wizard"></div>
+            <hr>
+            <div class="row">
+                <div class="col-lg-12">
+                    <h4 class="visible-xs">Step 4: Publish 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>
+                    </div>
+                    <div>
+                        <label class="wr-input-label">Set a Name for your Policy *</label>
+                        <br />
+                        <label class="wr-input-label">
+                            (Policy name should be 1-to-30 characters long)
+                        </label>
+                        <div id="policyNameField" class="wr-input-control">
+                            <div class="cus-col-50 form-group wr-input-control">
+                                <input id="policy-name-input" class="form-control" type="text" value="" />
+                                <label class="error nameEmpty hidden" for="summary">Policy name is required &
+                                    Should be be 1-to-30
+                                    characters long.</label>
                             </div>
-                            <div class="wr-input-control wr-btn-grp">
-                                <a href="javascript:void(0)" class="wr-btn wizard-stepper" data-is-back-btn="true"
-                                   data-current="policy-naming" data-next="policy-criteria">Back</a>
-                                <a href="javascript:void(0)" class="wr-btn wizard-stepper"
-                                   data-current="policy-naming-publish" data-next="policy-message" data-validate="true">Publish
-                                                                                                                        to
-                                                                                                                        Devices</a>
-                                <a href="javascript:void(0)" class="wr-btn wizard-stepper" data-current="policy-naming"
-                                   data-next="policy-message" data-validate="true">Save</a>
+                            <br class="c-both" />
+                        </div>
+                        <label class="wr-input-label">
+                            Add a description
+                        </label>
+                        <div class="wr-input-control">
+                            <div class="cus-col-50">
+                                <textarea id="policy-description-input" class="form-control" rows="10"
+                                          placeholder="[ Summary about the policy ]"></textarea>
                             </div>
+                            <br class="c-both" />
                         </div>
                     </div>
+                    <div class="wr-input-control wr-btn-grp">
+                        <a href="javascript:void(0)" class="wr-btn wizard-stepper" data-is-back-btn="true"
+                           data-current="policy-naming" data-next="policy-criteria">Back</a>
+                        <a href="javascript:void(0)" class="wr-btn wizard-stepper"
+                           data-current="policy-naming-publish" data-next="policy-message" data-validate="true">Publish
+                            to
+                            Devices</a>
+                        <a href="javascript:void(0)" class="wr-btn wizard-stepper" data-current="policy-naming"
+                           data-next="policy-message" data-validate="true">Save</a>
+                    </div>
                 </div>
             </div>
+        </div>
+    </div>
 
-            <div class="container col-centered wr-content policy-criteria hidden">
-                <div class="wr-form">
-                    <h1 id="policy-criteria-page-wizard-title" class="page-sub-title">ADD POLICY</h1>
-                    <hr>
-                    <div id="policy-criteria-wizard-steps" class="row wr-wizard"></div>
-                    <hr>
-                    <div class="row">
-                        <div class="col-lg-12">
-                            <h4 class="visible-xs">Step 3: Assign to 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>
+    <div class="container col-centered wr-content policy-criteria hidden">
+        <div class="wr-form">
+            <h1 id="policy-criteria-page-wizard-title" class="page-sub-title">ADD POLICY</h1>
+            <hr>
+            <div id="policy-criteria-wizard-steps" class="row wr-wizard"></div>
+            <hr>
+            <div class="row">
+                <div class="col-lg-12">
+                    <h4 class="visible-xs">Step 3: Assign to 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>
+                    </div>
+                    <div>
+                        <label class="wr-input-label">
+                            Set device ownership type
+                        </label>
+                        <div class="wr-input-control">
+                            <div class="cus-col-50">
+                                <select id="ownership-input" class="form-control">
+                                    <option value="ANY" selected>ANY</option>
+                                    <option value="BYOD">BYOD (Bring Your Own Device)</option>
+                                    <option value="COPE">COPE (Corporate-Owned, Personally Enabled)</option>
+                                </select>
                             </div>
-                            <div>
-                                <label class="wr-input-label">
-                                    Set device ownership type
-                                </label>
-                                <div class="wr-input-control">
-                                    <div class="cus-col-50">
-                                        <select id="ownership-input" class="form-control">
-                                            <option value="ANY" selected>ANY</option>
-                                            <option value="BYOD">BYOD (Bring Your Own Device)</option>
-                                            <option value="COPE">COPE (Corporate-Owned, Personally Enabled)</option>
-                                        </select>
-                                    </div>
-                                    <br class="c-both" />
-                                </div>
-                                <div class="wr-input-control">
-                                    <label class="wr-input-control radio light">
-                                        <input id="user-roles-radio-btn" type="radio" name="select-users-radio-btn"
-                                               class="select-users-radio" checked />
-                                        <span class="helper">&nbsp;Set user role(s)</span>
-                                    </label>
-                                    <label class="wr-input-control radio light" rel="assetfilter">
-                                        <input id="users-radio-btn" type="radio" name="select-users-radio-btn"
-                                               class="select-users-radio" />
-                                        <span class="helper">&nbsp;Set user(s)</span>
-                                    </label>
-                                </div>
-                                <div id="user-roles-select-field" class="select-users">
-                                    <div class="wr-input-control">
-                                        <div class="cus-col-50">
-                                            <select id="user-roles-input" class="form-control select2"
-                                                    multiple="multiple">
-                                                <option value="ANY" selected>ANY</option>
-                                                {{#each roles}}
-                                                    <option>{{this}}</option>
-                                                {{/each}}
-                                            </select>
-                                        </div>
-                                        <br class="c-both" />
-                                    </div>
-                                </div>
-                                <div id="users-select-field" class="select-users">
-                                    <div class="wr-input-control">
-                                        <div class="cus-col-50">
-                                            <select id="users-input" class="form-control select2" multiple="multiple">
-                                            </select>
-                                        </div>
-                                        <br class="c-both" />
-                                    </div>
+                            <br class="c-both" />
+                        </div>
+                        <div class="wr-input-control">
+                            <label class="wr-input-control radio light">
+                                <input id="user-roles-radio-btn" type="radio" name="select-users-radio-btn"
+                                       class="select-users-radio" checked />
+                                <span class="helper">&nbsp;Set user role(s)</span>
+                            </label>
+                            <label class="wr-input-control radio light" rel="assetfilter">
+                                <input id="users-radio-btn" type="radio" name="select-users-radio-btn"
+                                       class="select-users-radio" />
+                                <span class="helper">&nbsp;Set user(s)</span>
+                            </label>
+                        </div>
+                        <div id="user-roles-select-field" class="select-users">
+                            <div class="wr-input-control">
+                                <div class="cus-col-50">
+                                    <select id="user-roles-input" class="form-control select2"
+                                            multiple="multiple">
+                                        <option value="ANY" selected>ANY</option>
+                                        {{#each roles}}
+                                            <option>{{this}}</option>
+                                        {{/each}}
+                                    </select>
                                 </div>
-                                <br>
-                                <label class="wr-input-label" title="">
-                                    Set an action upon non-compliance
-                                </label>
-                                <div class="wr-input-control">
-                                    <div class="cus-col-50">
-                                        <select id="action-input" class="form-control">
-                                            <option data-action="enforce" selected>Enforce</option>
-                                            <option data-action="warn">Warn</option>
-                                            <option data-action="monitor">Monitor</option>
-                                        </select>
-                                    </div>
-                                    <br class="c-both" />
+                                <br class="c-both" />
+                            </div>
+                        </div>
+                        <div id="users-select-field" class="select-users">
+                            <div class="wr-input-control">
+                                <div class="cus-col-50">
+                                    <select id="users-input" class="form-control select2" multiple="multiple">
+                                    </select>
                                 </div>
+                                <br class="c-both" />
                             </div>
-                            <div class="wr-input-control wr-btn-grp">
-                                <a href="javascript:void(0)" class="wr-btn wizard-stepper" data-is-back-btn="true"
-                                   data-current="policy-criteria" data-next="policy-profile">Back</a>
-                                <a href="javascript:void(0)" class="wr-btn wizard-stepper"
-                                   data-current="policy-criteria" data-next="policy-naming" data-validate="true">Continue</a>
+                        </div>
+                        <br>
+                        <label class="wr-input-label" title="">
+                            Set an action upon non-compliance
+                        </label>
+                        <div class="wr-input-control">
+                            <div class="cus-col-50">
+                                <select id="action-input" class="form-control">
+                                    <option data-action="enforce" selected>Enforce</option>
+                                    <option data-action="warn">Warn</option>
+                                    <option data-action="monitor">Monitor</option>
+                                </select>
                             </div>
+                            <br class="c-both" />
                         </div>
                     </div>
+                    <div class="wr-input-control wr-btn-grp">
+                        <a href="javascript:void(0)" class="wr-btn wizard-stepper" data-is-back-btn="true"
+                           data-current="policy-criteria" data-next="policy-profile">Back</a>
+                        <a href="javascript:void(0)" class="wr-btn wizard-stepper"
+                           data-current="policy-criteria" data-next="policy-naming" data-validate="true">Continue</a>
+                    </div>
                 </div>
             </div>
+        </div>
+    </div>
 
-            <div class="container col-centered wr-content policy-profile hidden">
-                <div class="wr-form">
-                    <h1 id="policy-profile-page-wizard-title" class="page-sub-title">ADD POLICY</h1>
-                    <hr>
-                    <div id="policy-profile-wizard-steps" class="row wr-wizard"></div>
-                    <hr>
-                    <div class="row">
-                        <div class="col-lg-12">
-                            <h4 class="visible-xs">Step 2: Configure profile</h4>
+    <div class="container col-centered wr-content policy-profile hidden">
+        <div class="wr-form">
+            <h1 id="policy-profile-page-wizard-title" class="page-sub-title">ADD POLICY</h1>
+            <hr>
+            <div id="policy-profile-wizard-steps" class="row wr-wizard"></div>
+            <hr>
+            <div class="row">
+                <div class="col-lg-12">
+                    <h4 class="visible-xs">Step 2: Configure 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>
+                    </div>
+                    <div class="wr-advance-operations">
+                        <div class="wr-advance-operations-init">
                             <br>
-                            <div id="policy-profile-main-error-msg" class="alert alert-danger hidden" role="alert">
-                                <i class="icon fw fw-error"></i><span></span>
-                            </div>
-                            <div class="wr-advance-operations">
-                                <div class="wr-advance-operations-init">
-                                    <br>
-                                    &nbsp;&nbsp;&nbsp;&nbsp;<i class="fw fw-settings fw-spin fw-2x"></i>
-                                    &nbsp;&nbsp;&nbsp;Loading platform features . . .
-                                    <br><br>
-                                </div>
-                            </div>
-                            <div class="wr-input-control wr-btn-grp">
-                                <a href="javascript:void(0)" class="wr-btn wizard-stepper" data-is-back-btn="true"
-                                   data-current="policy-profile" data-next="policy-platform">Back</a>
-                                <a href="javascript:void(0)" class="wr-btn wizard-stepper" data-current="policy-profile"
-                                   data-next="policy-criteria" data-validate="true">Continue</a>
-                            </div>
+                            &nbsp;&nbsp;&nbsp;&nbsp;<i class="fw fw-settings fw-spin fw-2x"></i>
+                            &nbsp;&nbsp;&nbsp;Loading platform features . . .
+                            <br><br>
                         </div>
                     </div>
+                    <div class="wr-input-control wr-btn-grp">
+                        <a href="javascript:void(0)" class="wr-btn wizard-stepper" data-is-back-btn="true"
+                           data-current="policy-profile" data-next="policy-platform">Back</a>
+                        <a href="javascript:void(0)" class="wr-btn wizard-stepper" data-current="policy-profile"
+                           data-next="policy-criteria" data-validate="true">Continue</a>
+                    </div>
                 </div>
             </div>
-            <div id="loading-content" class="col-centered">
-                <br><br>
-                &nbsp;&nbsp;<i class="fw fw-settings fw-spin fw-2x"></i>
-                &nbsp;&nbsp;&nbsp;Loading policy creation wizard . . .
-                <br><br>
-            </div>
-            <div class="container col-centered wr-content policy-platform hidden">
-                <div class="wr-form">
-                    <h1 id="policy-platform-page-wizard-title" class="page-sub-title">ADD POLICY</h1>
-                    <hr>
-                    <div id="policy-platform-wizard-steps" class="row wr-wizard"></div>
-                    <hr>
-                    <!--<div id="policy-platform-main-error-msg" class="alert alert-danger hidden" role="alert">-->
-                    <!--<i class="icon fw fw-error"></i><span></span>-->
-                    <!--</div>-->
-                    <div class="row">
-                        <div class="col-lg-12">
-                            <h4 class="visible-xs"> Step 1: Select a platform</h4>
-                            <br>
-                            <div id="policy-platform-main-error-msg" class="alert alert-danger hidden" role="alert">
-                                <i class="icon fw fw-error"></i><span></span>
-                            </div>
-                            <div class="row wr-tile-buttons-list">
-                                <div class="wr-input-control">
-                                    <ul class="tile-buttons row">
-                                        {{#each types}}
-                                            <li class="col-xs-12 col-sm-12 col-md- 4 col-lg-4"
-                                                style="margin-top: 5px;margin-bottom: 5px;">
-                                                <a href="javascript:void(0)"
-                                                   class="wizard-stepper {{name}}-platform"
-                                                   data-current="policy-platform"
-                                                   data-next="policy-profile" data-platform="android"
-                                                   data-validate="false">
-                                                    <img src="{{icon}}" width="50px" height="50px" /><br><br>
-                                                    <b>{{label}}</b>
-                                                </a>
-                                            </li>
-                                        {{/each}}
-                                    </ul>
-                                </div>
-                            </div>
+        </div>
+    </div>
+    <div id="loading-content" class="col-centered">
+        <br><br>
+        &nbsp;&nbsp;<i class="fw fw-settings fw-spin fw-2x"></i>
+        &nbsp;&nbsp;&nbsp;Loading policy creation wizard . . .
+        <br><br>
+    </div>
+    <div class="container col-centered wr-content policy-platform hidden">
+        <div class="wr-form">
+            <h1 id="policy-platform-page-wizard-title" class="page-sub-title">ADD POLICY</h1>
+            <hr>
+            <div id="policy-platform-wizard-steps" class="row wr-wizard"></div>
+            <hr>
+            <!--<div id="policy-platform-main-error-msg" class="alert alert-danger hidden" role="alert">-->
+            <!--<i class="icon fw fw-error"></i><span></span>-->
+            <!--</div>-->
+            <div class="row">
+                <div class="col-lg-12">
+                    <h4 class="visible-xs"> Step 1: Select a platform</h4>
+                    <br>
+                    <div id="policy-platform-main-error-msg" class="alert alert-danger hidden" role="alert">
+                        <i class="icon fw fw-error"></i><span></span>
+                    </div>
+                    <div class="row wr-tile-buttons-list">
+                        <div class="wr-input-control">
+                            <ul class="tile-buttons row">
+                                {{#each types}}
+                                    <li class="col-xs-12 col-sm-12 col-md- 4 col-lg-4"
+                                        style="margin-top: 5px;margin-bottom: 5px;">
+                                        <a href="javascript:void(0)"
+                                           class="wizard-stepper {{name}}-platform"
+                                           data-current="policy-platform"
+                                           data-next="policy-profile" data-platform="{{name}}"
+                                           data-validate="false">
+                                            <img src="{{icon}}" width="50px" height="50px" />
+                                            <br><br>
+                                            <b>{{label}}</b>
+                                        </a>
+                                    </li>
+                                {{/each}}
+                            </ul>
                         </div>
                     </div>
                 </div>
             </div>
-            <!-- content -->
-
         </div>
     </div>
+    <!-- content -->
+
+    </div>
+    </div>
 {{/zone}}
 {{#zone "bottomJs"}}
     <script id="hidden-operations-ios" src="{{@unit.publicUri}}/templates/hidden-operations-ios.hbs"
diff --git a/components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/units/mdm.unit.policy.create/create.js b/components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/units/mdm.unit.policy.create/create.js
index 1b4c879f4..012efb08e 100644
--- a/components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/units/mdm.unit.policy.create/create.js
+++ b/components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/units/mdm.unit.policy.create/create.js
@@ -16,17 +16,20 @@
  * under the License.
  */
 
-function onRequest(context) {
-    var DTYPE_CONF_DEVICE_TYPE_KEY = "deviceType";
-    var DTYPE_CONF_DEVICE_TYPE_LABEL_KEY = "label";
+function onRequest() {
+    var log = new Log("/app/units/mdm.unit.policy.create");
 
-    var utility = require("/app/modules/utility.js").utility;
+    var CONF_DEVICE_TYPE_KEY = "deviceType";
+    var CONF_DEVICE_TYPE_LABEL_KEY = "label";
+
+    var utility = require("/app/modules/utility.js")["utility"];
     var userModule = require("/app/modules/business-controllers/user.js")["userModule"];
 
-    var types = {};
-    types["types"] = [];
+    var viewModelData = {};
+    viewModelData["types"] = [];
     var typesListResponse = userModule.getPlatforms();
     var deviceTypes = typesListResponse["content"]["deviceTypes"];
+
     if (typesListResponse["status"] == "success") {
         for (var i = 0; i < deviceTypes.length; i++) {
             var content = {};
@@ -34,16 +37,25 @@ function onRequest(context) {
             content["name"] = deviceType;
             var configs = utility.getDeviceTypeConfig(deviceType);
             var deviceTypeLabel = deviceType;
-            if (configs && configs[DTYPE_CONF_DEVICE_TYPE_KEY][DTYPE_CONF_DEVICE_TYPE_LABEL_KEY]) {
-                deviceTypeLabel = configs[DTYPE_CONF_DEVICE_TYPE_KEY][DTYPE_CONF_DEVICE_TYPE_LABEL_KEY];
+            if (configs && configs[CONF_DEVICE_TYPE_KEY][CONF_DEVICE_TYPE_LABEL_KEY]) {
+                deviceTypeLabel = configs[CONF_DEVICE_TYPE_KEY][CONF_DEVICE_TYPE_LABEL_KEY];
             }
             var policyWizard = new File("/app/units/" + utility.getTenantedDeviceUnitName(deviceType, "policy-wizard"));
+
+            log.error("/app/units/" + utility.getTenantedDeviceUnitName(deviceType, "policy-wizard"));
+
             if (policyWizard.isExists()) {
                 content["icon"] = utility.getDeviceThumb(deviceType);
                 content["label"] = deviceTypeLabel;
-                types["types"].push(content);
+                viewModelData["types"].push(content);
             }
         }
     }
-    return types;
+
+    var result = userModule.getRolesByUserStore();
+    if (result["status"] == "success") {
+        viewModelData["roles"] = result["content"];
+    }
+
+    return viewModelData;
 }
diff --git a/components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/units/mdm.unit.policy.create/public/js/policy-create.js b/components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/units/mdm.unit.policy.create/public/js/policy-create.js
index 2f4108473..be9a56826 100644
--- a/components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/units/mdm.unit.policy.create/public/js/policy-create.js
+++ b/components/mobile-plugins/mobile-base-plugin/org.wso2.carbon.device.mgt.mobile.ui/src/main/resources/jaggeryapps/devicemgt/app/units/mdm.unit.policy.create/public/js/policy-create.js
@@ -403,7 +403,7 @@ validateStep["policy-profile"] = function () {
                         validationStatus = {
                             "error": true,
                             "subErrorMsg": "VPN server port is not within the range " +
-                                           "of valid port numbers.",
+                                "of valid port numbers.",
                             "erroneousFeature": operation
                         };
                         continueToCheckNextInputs = false;
@@ -491,7 +491,7 @@ validateStep["policy-profile"] = function () {
                             validationStatus = {
                                 "error": true,
                                 "subErrorMsg": "One or more package names of " +
-                                               "applications are empty.",
+                                    "applications are empty.",
                                 "erroneousFeature": operation
                             };
                             continueToCheckNextInputs = false;
@@ -500,7 +500,7 @@ validateStep["policy-profile"] = function () {
                             validationStatus = {
                                 "error": true,
                                 "subErrorMsg": "Duplicate values exist with " +
-                                               "for package names.",
+                                    "for package names.",
                                 "erroneousFeature": operation
                             };
                             continueToCheckNextInputs = false;
@@ -739,7 +739,7 @@ validateStep["policy-profile"] = function () {
                         validationStatus = {
                             "error": true,
                             "subErrorMsg": "One or more permitted App ID entries in " +
-                                           "Autonomous Single App Mode are empty.",
+                                "Autonomous Single App Mode are empty.",
                             "erroneousFeature": operation
                         };
                         continueToCheckNextInputs = false;
@@ -747,7 +747,7 @@ validateStep["policy-profile"] = function () {
                         validationStatus = {
                             "error": true,
                             "subErrorMsg": "Duplicate values exist with permitted App ID entries in " +
-                                           "Autonomous Single App Mode.",
+                                "Autonomous Single App Mode.",
                             "erroneousFeature": operation
                         };
                         continueToCheckNextInputs = false;
@@ -820,7 +820,7 @@ validateStep["policy-profile"] = function () {
                                 validationStatus = {
                                     "error": true,
                                     "subErrorMsg": "Wi-Fi Proxy Port is not within the range " +
-                                                   "of valid port numbers.",
+                                        "of valid port numbers.",
                                     "erroneousFeature": operation
                                 };
                                 continueToCheckNextInputs = false;
@@ -870,7 +870,7 @@ validateStep["policy-profile"] = function () {
                                 validationStatus = {
                                     "error": true,
                                     "subErrorMsg": "One or more Payload Certificate " +
-                                                   "Anchor UUIDs are empty.",
+                                        "Anchor UUIDs are empty.",
                                     "erroneousFeature": operation
                                 };
                                 continueToCheckNextInputs = false;
@@ -878,7 +878,7 @@ validateStep["policy-profile"] = function () {
                                 validationStatus = {
                                     "error": true,
                                     "subErrorMsg": "Duplicate values exist " +
-                                                   "with Payload Certificate Anchor UUIDs.",
+                                        "with Payload Certificate Anchor UUIDs.",
                                     "erroneousFeature": operation
                                 };
                                 continueToCheckNextInputs = false;
@@ -930,7 +930,7 @@ validateStep["policy-profile"] = function () {
                                     validationStatus = {
                                         "error": true,
                                         "subErrorMsg": "Duplicate values exist " +
-                                                       "with TLS Trusted Server Names.",
+                                            "with TLS Trusted Server Names.",
                                         "erroneousFeature": operation
                                     };
                                     continueToCheckNextInputs = false;
@@ -991,7 +991,7 @@ validateStep["policy-profile"] = function () {
                             validationStatus = {
                                 "error": true,
                                 "subErrorMsg": "One or more Roaming Consortium OIs " +
-                                               "are out of allowed length.",
+                                    "are out of allowed length.",
                                 "erroneousFeature": operation
                             };
                             continueToCheckNextInputs = false;
@@ -1000,7 +1000,7 @@ validateStep["policy-profile"] = function () {
                             validationStatus = {
                                 "error": true,
                                 "subErrorMsg": "One or more Roaming Consortium OIs " +
-                                               "contain non-hexadecimal characters.",
+                                    "contain non-hexadecimal characters.",
                                 "erroneousFeature": operation
                             };
                             continueToCheckNextInputs = false;
@@ -1139,7 +1139,7 @@ validateStep["policy-profile"] = function () {
                             validationStatus = {
                                 "error": true,
                                 "subErrorMsg": "One or more MCC/MNC pairs " +
-                                               "do not fulfill the accepted length of 6 digits.",
+                                    "do not fulfill the accepted length of 6 digits.",
                                 "erroneousFeature": operation
                             };
                             continueToCheckNextInputs = false;
@@ -1273,7 +1273,7 @@ validateStep["policy-profile"] = function () {
                             validationStatus = {
                                 "error": true,
                                 "subErrorMsg": "Incoming Mail Server Port is not within the range " +
-                                               "of valid port numbers.",
+                                    "of valid port numbers.",
                                 "erroneousFeature": operation
                             };
                             continueToCheckNextInputs = false;
@@ -1307,7 +1307,7 @@ validateStep["policy-profile"] = function () {
                             validationStatus = {
                                 "error": true,
                                 "subErrorMsg": "Outgoing Mail Server Port is not within the range " +
-                                               "of valid port numbers.",
+                                    "of valid port numbers.",
                                 "erroneousFeature": operation
                             };
                             continueToCheckNextInputs = false;
@@ -1388,7 +1388,7 @@ validateStep["policy-profile"] = function () {
                             validationStatus = {
                                 "error": true,
                                 "subErrorMsg": "One or more Device Names of " +
-                                               "AirPlay Credentials are empty.",
+                                    "AirPlay Credentials are empty.",
                                 "erroneousFeature": operation
                             };
                             continueToCheckNextInputs = false;
@@ -1397,7 +1397,7 @@ validateStep["policy-profile"] = function () {
                             validationStatus = {
                                 "error": true,
                                 "subErrorMsg": "Duplicate values exist with " +
-                                               "Device Names of AirPlay Credentials.",
+                                    "Device Names of AirPlay Credentials.",
                                 "erroneousFeature": operation
                             };
                             continueToCheckNextInputs = false;
@@ -1420,7 +1420,7 @@ validateStep["policy-profile"] = function () {
                                 // if child input field is empty
                                 emptyChildInputCount++;
                             } else if (!inputIsValidAgainstRegExp(
-                                    /([a-z|A-Z|0-9][a-z|A-Z|0-9][:]){5}([a-z|A-Z|0-9][a-z|A-Z|0-9])$/, childInput)) {
+                                /([a-z|A-Z|0-9][a-z|A-Z|0-9][:]){5}([a-z|A-Z|0-9][a-z|A-Z|0-9])$/, childInput)) {
                                 // if child input field is invalid against RegEx
                                 invalidAgainstRegExCount++
                             }
@@ -1455,7 +1455,7 @@ validateStep["policy-profile"] = function () {
                             validationStatus = {
                                 "error": true,
                                 "subErrorMsg": "One or more AirPlay Destination fields " +
-                                               "do not fulfill expected format.",
+                                    "do not fulfill expected format.",
                                 "erroneousFeature": operation
                             };
                             continueToCheckNextInputs = false;
@@ -1545,7 +1545,7 @@ validateStep["policy-profile"] = function () {
                             validationStatus = {
                                 "error": true,
                                 "subErrorMsg": "One or more email domains of " +
-                                               "unmarked email domains are empty.",
+                                    "unmarked email domains are empty.",
                                 "erroneousFeature": operation
                             };
                             continueToCheckNextInputs = false;
@@ -1554,7 +1554,7 @@ validateStep["policy-profile"] = function () {
                             validationStatus = {
                                 "error": true,
                                 "subErrorMsg": "Duplicate values exist with " +
-                                               "email domains of unmarked email domains.",
+                                    "email domains of unmarked email domains.",
                                 "erroneousFeature": operation
                             };
                             continueToCheckNextInputs = false;
@@ -1604,7 +1604,7 @@ validateStep["policy-profile"] = function () {
                             validationStatus = {
                                 "error": true,
                                 "subErrorMsg": "One or more managed safari web domains of " +
-                                               "unmarked email domains are empty.",
+                                    "unmarked email domains are empty.",
                                 "erroneousFeature": operation
                             };
                             continueToCheckNextInputs = false;
@@ -1613,7 +1613,7 @@ validateStep["policy-profile"] = function () {
                             validationStatus = {
                                 "error": true,
                                 "subErrorMsg": "Duplicate values exist with " +
-                                               "managed safari web domains of unmarked email domains.",
+                                    "managed safari web domains of unmarked email domains.",
                                 "erroneousFeature": operation
                             };
                             continueToCheckNextInputs = false;
@@ -1705,7 +1705,7 @@ validateStep["policy-profile"] = function () {
                             validationStatus = {
                                 "error": true,
                                 "subErrorMsg": "Duplicate values exist with " +
-                                               "Search Setting Search Base and Scope pairs.",
+                                    "Search Setting Search Base and Scope pairs.",
                                 "erroneousFeature": operation
                             };
                             continueToCheckNextInputs = false;
@@ -1762,7 +1762,7 @@ validateStep["policy-profile"] = function () {
                         validationStatus = {
                             "error": true,
                             "subErrorMsg": "Account Port is not within the range " +
-                                           "of valid port numbers.",
+                                "of valid port numbers.",
                             "erroneousFeature": operation
                         };
                         continueToCheckNextInputs = false;
@@ -1875,7 +1875,7 @@ validateStep["policy-profile"] = function () {
                         validationStatus = {
                             "error": true,
                             "subErrorMsg": "Duplicate values exist with " +
-                                           "APN fields of Configurations.",
+                                "APN fields of Configurations.",
                             "erroneousFeature": operation
                         };
                         continueToCheckNextInputs = false;
@@ -1963,7 +1963,7 @@ validateStep["policy-profile"] = function () {
                             validationStatus = {
                                 "error": true,
                                 "subErrorMsg": "Duplicate values exist with " +
-                                               "APN fields of APN Configurations.",
+                                    "APN fields of APN Configurations.",
                                 "erroneousFeature": operation
                             };
                             continueToCheckNextInputs = false;
@@ -2062,7 +2062,7 @@ stepForwardFrom["policy-profile"] = function () {
         var ownershipTypeSelectOptions = $("#ownership-input");
         ownershipTypeSelectOptions.empty();
         ownershipTypeSelectOptions.append($("<option></option>").
-        attr("value", "BYOD").text("BYOD (Bring Your Own Device)"));
+            attr("value", "BYOD").text("BYOD (Bring Your Own Device)"));
         ownershipTypeSelectOptions.attr("disabled", true);
     }
 };
@@ -2074,13 +2074,13 @@ stepBackFrom["policy-profile"] = function () {
     // so that, the wrong content would not be shown at the first glance, in case
     // the user selects a different platform
     $(".wr-advance-operations").html(
-        "<div class='wr-advance-operations-init'>" +
-        "<br>" +
-        "<i class='fw fw-settings fw-spin fw-2x'></i>" +
-        "Loading Platform Features . . ." +
-        "<br>" +
-        "<br>" +
-        "</div>"
+            "<div class='wr-advance-operations-init'>" +
+            "<br>" +
+            "<i class='fw fw-settings fw-spin fw-2x'></i>" +
+            "Loading Platform Features . . ." +
+            "<br>" +
+            "<br>" +
+            "</div>"
     );
 };
 
@@ -2250,10 +2250,10 @@ var savePolicy = function (policy, isActive, serviceURL) {
         }
         if (policy["profile"].hasOwnProperty(key)) {
             profilePayloads.push({
-                                     "featureCode": key,
-                                     "deviceType": policy["platform"],
-                                     "content": policy["profile"][key]
-                                 });
+                "featureCode": key,
+                "deviceType": policy["platform"],
+                "content": policy["profile"][key]
+            });
         }
     }
 
@@ -2393,7 +2393,7 @@ var slideDownPaneAgainstValueSet = function (selectElement, paneID, valueSet) {
         }
         $(paneSelector).slideUp();
         /** now follows the code to reinitialize all inputs of the slidable pane */
-        // reinitializing input fields into the defaults
+            // reinitializing input fields into the defaults
         $(paneSelector + " input").each(
             function () {
                 if ($(this).is("input:text")) {
@@ -2480,9 +2480,9 @@ function formatRepo(user) {
         return;
     }
     var markup = '<div class="clearfix">' +
-                 '<div clas="col-sm-8">' +
-                 '<div class="clearfix">' +
-                 '<div class="col-sm-3">' + user.username + '</div>';
+        '<div clas="col-sm-8">' +
+        '<div class="clearfix">' +
+        '<div class="col-sm-3">' + user.username + '</div>';
     if (user.firstname) {
         markup += '<div class="col-sm-3"><i class="fa fa-code-fork"></i> ' + user.firstname + '</div>';
     }
@@ -2509,42 +2509,42 @@ function promptErrorPolicyPlatform(errorMsg) {
 
 $(document).ready(function () {
     $("#users-input").select2({
-                                  multiple: true,
-                                  tags: false,
-                                  ajax: {
-                                      url: "/emm/api/invoker/execute/",
-                                      method: "POST",
-                                      dataType: 'json',
-                                      delay: 250,
-                                      id: function (user) {
-                                          return user.username;
-                                      },
-                                      data: function (params) {
-                                          var postData = {};
-                                          postData.actionMethod = "GET";
-                                          postData.actionUrl = "/api/device-mgt/v1.0/users/search/usernames?filter=" + params.term;
-                                          postData.actionPayload = null;
-                                          return JSON.stringify(postData);
-                                      },
-                                      processResults: function (data) {
-                                          var newData = [];
-                                          $.each(data, function (index, value) {
-                                              value.id = value.username;
-                                              newData.push(value);
-                                          });
-                                          return {
-                                              results: newData
-                                          };
-                                      },
-                                      cache: true
-                                  },
-                                  escapeMarkup: function (markup) {
-                                      return markup;
-                                  }, // let our custom formatter work
-                                  minimumInputLength: 1,
-                                  templateResult: formatRepo, // omitted for brevity, see the source of this page
-                                  templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
-                              });
+        multiple: true,
+        tags: false,
+        ajax: {
+            url: "/emm/api/invoker/execute/",
+            method: "POST",
+            dataType: 'json',
+            delay: 250,
+            id: function (user) {
+                return user.username;
+            },
+            data: function (params) {
+                var postData = {};
+                postData.requestMethod = "GET";
+                postData.requestURL = "/api/device-mgt/v1.0/users/search/usernames?filter=" + params.term;
+                postData.requestPayload = null;
+                return JSON.stringify(postData);
+            },
+            processResults: function (data) {
+                var newData = [];
+                $.each(data, function (index, value) {
+                    value.id = value.username;
+                    newData.push(value);
+                });
+                return {
+                    results: newData
+                };
+            },
+            cache: true
+        },
+        escapeMarkup: function (markup) {
+            return markup;
+        }, // let our custom formatter work
+        minimumInputLength: 1,
+        templateResult: formatRepo, // omitted for brevity, see the source of this page
+        templateSelection: formatRepoSelection // omitted for brevity, see the source of this page
+    });
 
     $("#loading-content").remove();
     $(".policy-platform").removeClass("hidden");
@@ -2552,8 +2552,8 @@ $(document).ready(function () {
     $("#policy-platform-wizard-steps").html($(".wr-steps").html());
 
     $("select.select2[multiple=multiple]").select2({
-                                                       "tags": false
-                                                   });
+        "tags": false
+    });
 
     $("#users-select-field").hide();
     $("#user-roles-select-field").show();
@@ -2571,8 +2571,8 @@ $(document).ready(function () {
 
     // Support for special input type "ANY" on user(s) & user-role(s) selection
     $("#user-roles-input").select2({
-                                       "tags": false
-                                   }).on("select2:select", function (e) {
+        "tags": false
+    }).on("select2:select", function (e) {
         if (e.params.data.id == "ANY") {
             $(this).val("ANY").trigger("change");
         } else {
@@ -2707,7 +2707,7 @@ $(document).ready(function () {
     $(advanceOperations).on("click", "[data-click-event=add-form]", function () {
         var addFormContainer = $("[data-add-form-container=" + $(this).attr("href") + "]");
         var clonedForm = $("[data-add-form=" + $(this).attr("href") + "]").clone().
-        find("[data-add-form-element=clone]").attr("data-add-form-clone", $(this).attr("href"));
+            find("[data-add-form-element=clone]").attr("data-add-form-clone", $(this).attr("href"));
 
         // adding class .child-input to capture text-input-array-values
         $("input, select", clonedForm).addClass("child-input");