Sample implimentation using the new cdmf.ui.modal unit

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.users/public/js/listing.js

@@ -39,9 +39,6 @@ $(function () {
 });
 
 var apiBasePath = "/api/device-mgt/v1.0";
-var modalPopup = ".modal";
-var modalPopupContainer = modalPopup + " .modal-content";
-var modalPopupContent = modalPopup + " .modal-content";
 var body = "body";
 
 /**
@@ -54,31 +51,6 @@ $(document).on('draw.dt', function () {
     $(".icon .text").res_text(0.2);
 });
 
-/*
- * set popup maximum height function.
- */
-function setPopupMaxHeight() {
-    $(modalPopupContent).css('max-height', ($(body).height() - ($(body).height() / 100 * 30)));
-    $(modalPopupContainer).css('margin-top', (-($(modalPopupContainer).height() / 2)));
-}
-
-/*
- * show popup function.
- */
-function showPopup() {
-    $(modalPopup).modal('show');
-}
-
-/*
- * hide popup function.
- */
-function hidePopup() {
-    $(modalPopupContent).html('');
-    $(modalPopup).modal('hide');
-    $('body').removeClass('modal-open').css('padding-right', '0px');
-    $('.modal-backdrop').remove();
-}
-
 /**
  * Following click function would execute
  * when a user clicks on "Invite" link
@@ -89,34 +61,48 @@ $("a#invite-user-link").click(function () {
     var inviteUserAPI = apiBasePath + "/users/send-invitation";
 
     if (usernameList.length == 0) {
-        $(modalPopupContent).html($("#errorUsers").html());
+        modalDialog.header("Operation cannot be performed !");
+        modalDialog.content("Please select a user or a list of users to send invitation emails.");
+        modalDialog.footer('<div class="buttons"> <a href="javascript:modalDialog.hide()" class="btn-operations">Ok' +
+            '</a> </div>');
+        modalDialog.showAsError();
     } else {
-        $(modalPopupContent).html($('#invite-user-modal-content').html());
+        modalDialog.header("");
-    }
+        modalDialog.content("An invitation mail will be sent to the selected user(s) to initiate an enrolment process." +
+            " Do you wish to continue ?");
+        modalDialog.footer('<div class="buttons"> <a href="#" id="invite-user-yes-link" class="btn-operations">yes</a>' +
+            '<a href="#" id="invite-user-cancel-link" class="btn-operations btn-default">No</a> </div>');
+        modalDialog.show();
 
-    showPopup();
+    }
 
     $("a#invite-user-yes-link").click(function () {
         invokerUtil.post(
             inviteUserAPI,
             usernameList,
             function () {
-                $(modalPopupContent).html($('#invite-user-success-content').html());
+                modalDialog.header("User invitation email for enrollment was successfully sent.");
+                modalDialog.footer('<div class="buttons"> <a href="#" id="invite-user-success-link" ' +
+                    'class="btn-operations">Ok </a> </div>');
                 $("a#invite-user-success-link").click(function () {
-                    hidePopup();
+                    modalPopup.hide();
                 });
             },
             function () {
-                $(modalPopupContent).html($('#invite-user-error-content').html());
+                modalDialog.header('<span class="fw-stack"> <i class="fw fw-ring fw-stack-2x"></i> <i class="fw ' +
+                    'fw-error fw-stack-1x"></i> </span> Unexpected Error !');
+                modalDialog.content('An unexpected error occurred. Try again later.');
+                modalDialog.footer('<div class="buttons"> <a href="#" id="invite-user-error-link" ' +
+                    'class="btn-operations">Ok </a> </div>');
                 $("a#invite-user-error-link").click(function () {
-                    hidePopup();
+                    modalPopup.hide();
                 });
             }
         );
     });
 
     $("a#invite-user-cancel-link").click(function () {
-        hidePopup();
+        modalPopup.hide();
     });
 });
 
@@ -138,13 +124,16 @@ function getSelectedUsernames() {
  * on User Listing page in WSO2 MDM Console.
  */
 function resetPassword(username) {
-    $(modalPopupContent).html($('#reset-password-window').html());
+    modalDialog.header('<span class="fw-stack"> <i class="fw fw-ring fw-stack-2x"></i> <i class="fw fw-key ' +
-    showPopup();
+        'fw-stack-1x"></i> </span> Reset Password');
+    modalDialog.content($("#modal-content-reset-password").html());
+    modalDialog.footer('<div class="buttons"> <a href="#" id="reset-password-yes-link" class="btn-operations"> Save ' +
+        '</a> <a href="#" id="reset-password-cancel-link" class="btn-operations btn-default"> Cancel </a> </div>');
+    modalDialog.show();
 
     $("a#reset-password-yes-link").click(function () {
-        var newPassword = $("#new-password").val();
+        var newPassword = $("#basic-modal-view .new-password").val();
-        var confirmedPassword = $("#confirmed-password").val();
+        var confirmedPassword = $("#basic-modal-view .confirmed-password").val();
-
         var errorMsgWrapper = "#notification-error-msg";
         var errorMsg = "#notification-error-msg span";
         if (!newPassword) {
@@ -177,10 +166,10 @@ function resetPassword(username) {
                 // The success callback
                 function (data, textStatus, jqXHR) {
                     if (jqXHR.status == 200) {
-                        $(modalPopupContent).html($('#reset-password-success-content').html());
+                        modalDialog.header("Password reset is successful.");
-                        $("a#reset-password-success-link").click(function () {
+                        modalDialog.content("");
-                            hidePopup();
+                        modalDialog.footer('<div class="buttons"> <a href="javascript:modalDialog.hide()" ' +
-                        });
+                            'class="btn-operations">Ok</a> </div>');
                     }
                 },
                 // The error callback
@@ -194,7 +183,7 @@ function resetPassword(username) {
     });
 
     $("a#reset-password-cancel-link").click(function () {
-        hidePopup();
+        modalDialog.hide();
     });
 }
 
@@ -213,8 +202,16 @@ function removeUser(username) {
     if (domain) {
         removeUserAPI += '?domain=' + domain;
     }
-    $(modalPopupContent).html($('#remove-user-modal-content').html());
+
-    showPopup();
+    modalDialog.header("Remove User");
+    modalDialog.content("Do you really want to remove this user ?");
+    modalDialog.footer('<div class="buttons"> <a href="#" id="remove-user-yes-link" class="btn-operations">Remove</a> ' +
+        '<a href="#" id="remove-user-cancel-link" class="btn-operations btn-default">Cancel</a> </div>');
+    modalDialog.showAsAWarning();
+
+    $("a#remove-user-cancel-link").click(function () {
+        modalDialog.hide();
+    });
 
     $("a#remove-user-yes-link").click(function () {
         invokerUtil.delete(
@@ -227,24 +224,24 @@ function removeUser(username) {
                         $("#user-" + username).remove();
                     }
                     // update modal-content with success message
-                    $(modalPopupContent).html($('#remove-user-success-content').html());
+                    modalDialog.header("User Removed.");
-                    $("a#remove-user-success-link").click(function () {
+                    modalDialog.content("Done. User was successfully removed.");
-                        hidePopup();
+                    modalDialog.footer('<div class="buttons"> <a href="javascript:modalDialog.hide()" ' +
-                    });
+                        'class="btn-operations">Ok</a> </div>');
+
                 }
             },
             function () {
-                $(modalPopupContent).html($('#remove-user-error-content').html());
+                modalDialog.hide();
-                $("a#remove-user-error-link").click(function () {
+                modalDialog.header("Operation cannot be performed !");
-                    hidePopup();
+                modalDialog.content("An unexpected error occurred. Please try again later.");
-                });
+                modalDialog.footer('<div class="buttons"> <a href="javascript:modalDialog.hide()" ' +
+                    'class="btn-operations">Ok</a> </div>');
+                modalDialog.showAsError();
             }
         );
     });
 
-    $("a#remove-user-cancel-link").click(function () {
-        hidePopup();
-    });
 }
 
 /**
@@ -256,8 +253,10 @@ function InitiateViewOption() {
     if ($("#can-view").val()) {
         $(location).attr('href', $(this).data("url"));
     } else {
-        $(modalPopupContent).html($('#errorUserView').html());
+        modalDialog.header("Unauthorized action!");
-        showPopup();
+        modalDialog.content("You don't have permissions to view users");
+        modalDialog.footer('<div class="buttons"> <a href="javascript:modalDialog.hide()" class="btn-operations">Ok</a> </div>');
+        modalDialog.showAsError();
     }
 }
 

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/pages/cdmf.page.users/users.hbs

@@ -18,6 +18,7 @@
 
 {{unit "cdmf.unit.ui.title" pageTitle="User Management"}}
 {{unit "cdmf.unit.data-tables-extended"}}
+{{unit "cdmf.unit.ui.modal"}}
 
 {{#zone "breadcrumbs"}}
     <li>
@@ -47,7 +48,7 @@
 {{/zone}}
 
 {{#zone "content"}}
-
+    <input type="hidden" id="user" value="{{user.username}}">
     <!-- content -->
     <div id="loading-content" class="col-centered">
         {{#if canManage}}
@@ -99,226 +100,26 @@
         </div>
     </div>
 
-    <div id="invite-user-modal-content" class="hide">
+    <div id="modal-content-reset-password" class="hide">
-        <div class="modal-header">
+        <div id="notification-error-msg" class="alert alert-danger hidden" role="alert">
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i>
+            <i class="icon fw fw-error"></i><span></span>
-            </button>
         </div>
-        <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
+        <h4>
-            <h4>
+            Enter new password
-                An invitation mail will be sent to the selected user(s) to initiate an enrolment process.
+            <br><br>
-                Do you wish to continue ?
+            <div>
-            </h4>
+                <input type="password" class="form-control modal-input operationDataKeys new-password"
-        </div>
+                       data-key="message"/>
-        <div class="modal-footer">
-            <div class="buttons">
-                <a href="#" id="invite-user-yes-link" class="btn-operations">yes</a>
-                <a href="#" id="invite-user-cancel-link" class="btn-operations btn-default">No</a>
             </div>
-        </div>
+            <br>
-    </div>
+            Retype new password
-
+            <br><br>
-    <div id="invite-user-success-content" class="hide">
+            <div>
-        <div class="modal-header">
+                <input type="password" class="form-control modal-input operationDataKeys confirmed-password"
-            <h3 class="pull-left modal-title">User invitation email for enrollment was successfully sent.</h3>
+                       data-key="message"/>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i></button>
-        </div>
-        <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
-        </div>
-        <div class="modal-footer">
-            <div class="buttons">
-                <a href="#" id="invite-user-success-link" class="btn-operations">
-                    Ok
-                </a>
             </div>
-        </div>
+            <br>
-    </div>
+        </h4>
-
-    <div id="invite-user-error-content" class="hide">
-        <div class="modal-header">
-            <h3 class="pull-left modal-title">
-                <span class="fw-stack">
-                    <i class="fw fw-ring fw-stack-2x"></i>
-                    <i class="fw fw-error fw-stack-1x"></i>
-                </span>
-                Unexpected Error
-            </h3>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i>
-            </button>
-        </div>
-        <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
-            <h4>
-                An unexpected error occurred. Try again later.
-            </h4>
-        </div>
-        <div class="modal-footer">
-            <div class="buttons">
-                <a href="#" id="invite-user-error-link" class="btn-operations">Ok</a>
-            </div>
-        </div>
-    </div>
-
-    <div id="remove-user-modal-content" class="hide">
-        <div class="modal-header">
-            <h3 class="pull-left modal-title">
-                Remove User
-            </h3>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i>
-            </button>
-        </div>
-        <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
-            <h4>
-                Do you really want to remove this user ?
-            </h4>
-        </div>
-        <div class="modal-footer">
-            <div class="buttons">
-                <a href="#" id="remove-user-yes-link" class="btn-operations">Remove</a>
-                <a href="#" id="remove-user-cancel-link" class="btn-operations btn-default">Cancel</a>
-            </div>
-        </div>
-    </div>
-
-    <div id="remove-user-success-content" class="hide">
-        <div class="modal-header">
-            <h3 class="pull-left modal-title">
-                User Removed.
-            </h3>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i>
-            </button>
-        </div>
-        <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
-            <h4>
-                Done. User was successfully removed.
-            </h4>
-        </div>
-        <div class="modal-footer">
-            <div class="buttons">
-                <a href="#" id="remove-user-success-link" class="btn-operations">Ok</a>
-            </div>
-        </div>
-    </div>
-
-    <div id="remove-user-error-content" class="hide">
-        <div class="modal-header">
-            <h3 class="pull-left modal-title">
-                <span class="fw-stack">
-                    <i class="fw fw-ring fw-stack-2x"></i>
-                    <i class="fw fw-error fw-stack-1x"></i>
-                </span>
-                Unexpected Error
-            </h3>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i>
-            </button>
-        </div>
-        <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
-            <h4>
-                An unexpected error occurred. Please try again later.
-            </h4>
-        </div>
-        <div class="modal-footer">
-            <div class="buttons">
-                <a href="#" id="remove-user-error-link" class="btn-operations">Ok</a>
-            </div>
-        </div>
-    </div>
-
-    <div id="errorUsers" class="hide">
-        <div class="modal-header">
-            <h3 class="pull-left modal-title">
-                <span class="fw-stack">
-                        <i class="fw fw-ring fw-stack-2x"></i>
-                        <i class="fw fw-error fw-stack-1x"></i>
-                    </span>
-                Operation cannot be performed !
-            </h3>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i>
-            </button>
-        </div>
-        <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
-            <h4>
-                Please select a user or a list of users to send invitation emails.
-            </h4>
-        </div>
-        <div class="modal-footer">
-            <div class="buttons">
-                <a href="javascript:hidePopup()" class="btn-operations">Ok</a>
-            </div>
-        </div>
-    </div>
-
-    <div id="errorUserView" class="hide">
-        <div class="modal-header">
-            <h3 class="pull-left modal-title">
-                Unauthorized action!
-            </h3>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i>
-            </button>
-        </div>
-    </div>
-
-    <div id="reset-password-window" class="hide">
-        <input type="hidden" id="user" value="{{user.username}}">
-        <div class="modal-header">
-            <h3 class="pull-left modal-title">
-                <span class="fw-stack">
-                    <i class="fw fw-ring fw-stack-2x"></i>
-                    <i class="fw fw-key fw-stack-1x"></i>
-                </span>
-                Reset Password
-            </h3>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i>
-            </button>
-        </div>
-        <div class="modal-body add-margin-top-2x add-margin-bottom-2x">
-            <div id="notification-error-msg" class="alert alert-danger hidden" role="alert">
-                <i class="icon fw fw-error"></i><span></span>
-            </div>
-            <h4>
-                Enter new password
-                <br><br>
-                <div>
-                    <input type="password" class="form-control modal-input operationDataKeys" id="new-password"
-                           data-key="message"/>
-                </div>
-                <br>
-                Retype new password
-                <br><br>
-                <div>
-                    <input type="password" class="form-control modal-input operationDataKeys" id="confirmed-password"
-                           data-key="message"/>
-                </div>
-                <br>
-            </h4>
-        </div>
-        <div class="modal-footer">
-            <div class="buttons">
-                <a href="#" id="reset-password-yes-link" class="btn-operations">
-                    Save
-                </a>
-
-                <a href="#" id="reset-password-cancel-link" class="btn-operations btn-default">
-                    Cancel
-                </a>
-            </div>
-        </div>
-    </div>
-
-    <div id="reset-password-success-content" class="hide">
-        <div class="modal-header">
-            <h3 class="pull-left modal-title">
-                Password reset is successful.
-            </h3>
-            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="fw fw-cancel"></i>
-            </button>
-        </div>
-        <div class="modal-footer">
-            <div class="buttons">
-                <a href="#" id="reset-password-success-link" class="btn-operations">
-                    Ok
-                </a>
-            </div>
-        </div>
     </div>
 
 {{/zone}}