Refactoring user-listing page

merge-requests/7/head
dilanua 8 years ago
parent 177b7cf3df
commit da6ff6e7fa

@ -1,21 +1,23 @@
/*
* Copyright (c) 2016, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
* Copyright (c) 2015, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
*
* WSO2 Inc. licenses this file to you under the Apache License,
* Version 2.0 (the "License"); you may not use this file except
* in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
* either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
var deviceMgtAPIsBasePath = "/api/device-mgt/v1.0";
/**
* Checks if provided input is valid against RegEx input.
*
@ -35,10 +37,10 @@ function inputIsValid(regExp, inputString) {
$(function () {
var sortableElem = '.wr-sortable';
$(sortableElem).sortable({
beforeStop: function () {
var sortedIDs = $(this).sortable('toArray');
}
});
beforeStop: function () {
$(this).sortable('toArray');
}
});
$(sortableElem).disableSelection();
});
@ -46,11 +48,9 @@ var modalPopup = ".wr-modalpopup";
var modalPopupContainer = modalPopup + " .modalpopup-container";
var modalPopupContent = modalPopup + " .modalpopup-content";
var body = "body";
var isInit = true;
//var isInit = true;
$(".icon .text").res_text(0.2);
var resetPasswordServiceURL = "/devicemgt_admin/users/reset-password";
/*
* set popup maximum height function.
*/
@ -80,11 +80,9 @@ function hidePopup() {
*/
function getSelectedUsernames() {
var usernameList = [];
var userList = $("#user-grid").find('> tbody > tr');
var userList = $("#user-grid").find('tr.DTTT_selected');
userList.each(function () {
if ($(this).hasClass('DTTT_selected')) {
usernameList.push($(this).attr('data-username'));
}
usernameList.push($(this).data('username'));
});
return usernameList;
}
@ -96,7 +94,7 @@ function getSelectedUsernames() {
*/
$("a.invite-user-link").click(function () {
var usernameList = getSelectedUsernames();
var inviteUserAPI = "/devicemgt_admin/users/email-invitation";
var inviteUserAPI = deviceMgtAPIsBasePath + "/users/send-invitation";
if (usernameList.length == 0) {
$(modalPopupContent).html($("#errorUsers").html());
@ -108,20 +106,25 @@ $("a.invite-user-link").click(function () {
$("a#invite-user-yes-link").click(function () {
invokerUtil.post(
inviteUserAPI,
usernameList,
function () {
inviteUserAPI,
usernameList,
// The success callback
function (data, textStatus, jqXHR) {
if (jqXHR.status == 200) {
$(modalPopupContent).html($('#invite-user-success-content').html());
$("a#invite-user-success-link").click(function () {
hidePopup();
});
},
function () {
$(modalPopupContent).html($('#invite-user-error-content').html());
$("a#invite-user-error-link").click(function () {
hidePopup();
});
}
},
// The error callback
function (jqXHR) {
console.log("error in invite-user API, status code: " + jqXHR.status);
$(modalPopupContent).html($('#invite-user-error-content').html());
$("a#invite-user-error-link").click(function () {
hidePopup();
});
}
);
});
@ -137,16 +140,17 @@ $("a.invite-user-link").click(function () {
*/
function removeUser(uname, uid) {
var username = uname;
var userid = uid;
var removeUserAPI = "/devicemgt_admin/users?username=" + username;
var userId = uid;
var removeUserAPI = deviceMgtAPIsBasePath + "/users/" + username;
$(modalPopupContent).html($('#remove-user-modal-content').html());
showPopup();
$("a#remove-user-yes-link").click(function () {
invokerUtil.delete(
removeUserAPI,
function () {
$("#" + userid).remove();
removeUserAPI,
function (data, textStatus, jqXHR) {
if (jqXHR.status == 200) {
$("#" + userId).remove();
// get new user-list-count
var newUserListCount = $(".user-list > span").length;
// update user-listing-status-msg with new user-count
@ -156,13 +160,16 @@ function removeUser(uname, uid) {
$("a#remove-user-success-link").click(function () {
hidePopup();
});
},
function () {
$(modalPopupContent).html($('#remove-user-error-content').html());
$("a#remove-user-error-link").click(function () {
hidePopup();
});
}
},
// The error callback
function (jqXHR) {
console.log("error in remove-user API, status code: " + jqXHR.status);
$(modalPopupContent).html($('#remove-user-error-content').html());
$("a#remove-user-error-link").click(function () {
hidePopup();
});
}
);
});
@ -202,29 +209,30 @@ function resetPassword(uname) {
$(errorMsgWrapper).removeClass("hidden");
} else {
var resetPasswordFormData = {};
resetPasswordFormData.username = user;
resetPasswordFormData.newPassword = window.btoa(unescape(encodeURIComponent(confirmedPassword)));
//resetPasswordFormData.username = user;
resetPasswordFormData.newPassword = unescape(confirmedPassword);
var resetPasswordServiceURL = deviceMgtAPIsBasePath + "/admin/users/"+ user +"/credentials";
invokerUtil.post(
resetPasswordServiceURL,
resetPasswordFormData,
function (data) { // The success callback
data = JSON.parse(data);
if (data.statusCode == 201) {
$(modalPopupContent).html($('#reset-password-success-content').html());
$("a#reset-password-success-link").click(function () {
hidePopup();
});
}
}, function (data) { // The error callback
if (data.statusCode == 400) {
$(errorMsg).text("Old password does not match with the provided value.");
$(errorMsgWrapper).removeClass("hidden");
} else {
$(errorMsg).text("An unexpected error occurred. Please try again later.");
$(errorMsgWrapper).removeClass("hidden");
}
resetPasswordServiceURL,
resetPasswordFormData,
// The success callback
function (data, textStatus, jqXHR) {
if (jqXHR.status == 200) {
$(modalPopupContent).html($('#reset-password-success-content').html());
$("a#reset-password-success-link").click(function () {
hidePopup();
});
}
},
// The error callback
function (jqXHR) {
console.log("error in reset-password API, status code: " + jqXHR.status);
var payload = JSON.parse(jqXHR.responseText);
$(errorMsg).text(payload.message);
$(errorMsgWrapper).removeClass("hidden");
}
);
}
});
@ -250,7 +258,7 @@ $("#search-btn").click(function () {
* when a user clicks on the list item
* initial mode and with out select mode.
*/
function InitiateViewOption() {
function initiateViewOption() {
if ($("#can-view").val()) {
$(location).attr('href', $(this).data("url"));
} else {
@ -259,74 +267,112 @@ function InitiateViewOption() {
}
}
function loadUsers(searchParam) {
$("#loading-content").show();
var userListing = $("#user-listing");
var userListingSrc = userListing.attr("src");
$.template("user-listing", userListingSrc, function (template) {
var serviceURL = "/devicemgt_admin/users";
if (searchParam) {
serviceURL = serviceURL + "/view-users?username=" + searchParam;
}
var successCallback = function (data) {
if (!data) {
$('#ast-container').addClass('hidden');
$('#user-listing-status-msg').text('No users are available to be displayed.');
return;
function loadUsers() {
var loadingContentIcon = "#loading-content";
$(loadingContentIcon).show();
var dataFilter = function (data) {
data = JSON.parse(data);
var objects = [];
$(data.users).each(function (index) {
objects.push({
username: data.users[index].username,
firstname: data.users[index].firstname ? data.users[index].firstname: '' ,
lastname: data.users[index].lastname ? data.users[index].lastname : '',
emailAddress : data.users[index].emailAddress ? data.users[index].emailAddress: '',
DT_RowId : "role-" + data.users[index].username})
});
var json = {
"recordsTotal": data.count,
"recordsFiltered": data.count,
"data": objects
};
return JSON.stringify(json);
};
var fnCreatedRow = function(nRow, aData, iDataIndex) {
console.log(JSON.stringify(aData));
$(nRow).attr('data-type', 'selectable');
$(nRow).attr('data-username', aData["username"]);
};
var columns = [
{
class: "remove-padding icon-only content-fill",
data: null,
defaultContent:
'<div class="thumbnail icon">' +
'<i class="square-element text fw fw-user" style="font-size: 30px;"></i>' +
'</div>'
},
{
class: "fade-edge",
data: null,
render: function (data, type, row, meta) {
return '<h4>' + data.firstname + ' ' + data.lastname + '</h4>';
}
var canRemove = $("#can-remove").val();
var canEdit = $("#can-edit").val();
var canResetPassword = $("#can-reset-password").val();
data = JSON.parse(data);
data = data.responseContent;
var viewModel = {};
viewModel.users = data;
for (var i = 0; i < viewModel.users.length; i++) {
viewModel.users[i].userid = viewModel.users[i].username.replace(/[^\w\s]/gi, '');
if (canRemove) {
viewModel.users[i].canRemove = true;
}
if (canEdit) {
viewModel.users[i].canEdit = true;
}
if (canResetPassword) {
viewModel.users[i].canResetPassword = true;
}
viewModel.users[i].adminUser = $("#user-table").data("user");
},
{
class: "fade-edge remove-padding-top",
data: null,
render: function (data, type, row, meta) {
return '<i class="fw-user"></i> ' + data.username;
}
if (data.length > 0) {
$('#ast-container').removeClass('hidden');
$('#user-listing-status-msg').text("");
var content = template(viewModel);
$("#ast-container").html(content);
} else {
$('#ast-container').addClass('hidden');
$('#user-listing-status-msg').text('No users are available to be displayed.');
},
{
class: "fade-edge remove-padding-top",
data: null,
render: function (data, type, row, meta) {
return '<a href="mailto:' + data.emailAddress + ' " class="wr-list-email"><i class="fw-mail"></i> ' +
data.emailAddress + ' </a>';
}
$("#loading-content").hide();
if (isInit) {
$('#user-grid').datatables_extended();
isInit = false;
},
{
class: "text-right content-fill text-left-on-grid-view no-wrap",
data: null,
render: function (data, type, row, meta) {
return '<a href="/emm/users/edit-user?username=' + data.username + '" data-username="' + data.username +
'" data-click-event="edit-form" class="btn padding-reduce-on-grid-view edit-user-link"> ' +
'<span class="fw-stack"><i class="fw fw-ring fw-stack-2x"></i>' +
'<i class="fw fw-edit fw-stack-1x"></i>' +
' </span> <span class="hidden-xs hidden-on-grid-view">Edit</span> </a>' +
'<a href="#" data-username="' + data.username + '" data-user-id=' + data.username +
' data-click-event="remove-form" onclick="javascript:removeUser(\'' + data.username + '\', \'' +
data.username + '\')" class="btn padding-reduce-on-grid-view remove-user-link">' +
'<span class="fw-stack"> <i class="fw fw-ring fw-stack-2x"></i><i class="fw fw-delete fw-stack-1x">' +
'</i> </span> <span class="hidden-xs hidden-on-grid-view">Remove</span> </a>' +
'<a href="#" data-username="' + data.username + '" data-user-id="' + data.username +
'" data-click-event="edit-form" onclick="javascript:resetPassword(\'' + data.username +
'\')" class="btn padding-reduce-on-grid-view remove-user-link"> <span class="fw-stack">' +
'<i class="fw fw-ring fw-stack-2x">' +
'</i> <i class="fw fw-key fw-stack-1x"></i> <span class="fw-stack fw-move-right fw-move-bottom"> ' +
'<i class="fw fw-circle fw-stack-2x fw-stroke fw-inverse"><' +
'/i> <i class="fw fw-circle fw-stack-2x"></i> <i class="fw fw-refresh fw-stack-1x fw-inverse">' +
'</i> </span> </span> <span class="hidden-xs hidden-on-grid-view">Reset</span> </a>'
}
$(".icon .text").res_text(0.2);
};
invokerUtil.get(serviceURL,
successCallback,
function (message) {
$('#ast-container').addClass('hidden');
$('#user-listing-status-msg').text('Invalid search query. Try again with a valid search query');
}
);
});
}
];
$('#user-grid').datatables_extended_serverside_paging(null, '/api/device-mgt/v1.0/users', dataFilter, columns, fnCreatedRow, null);
$("#loading-content").hide();
}
$(document).ready(function () {
loadUsers();
$(".viewEnabledIcon").click(function () {
InitiateViewOption();
initiateViewOption();
});
if (!$("#can-invite").val()) {
$("#invite-user-button").remove();
}
});
});

@ -52,6 +52,11 @@
<span class="fw-stack">
<i class="fw fw-ring fw-stack-2x"></i>
<i class="fw fw-key fw-stack-1x"></i>
<span class="fw-stack fw-move-right fw-move-bottom">
<i class="fw fw-circle fw-stack-2x fw-stroke fw-inverse"></i>
<i class="fw fw-circle fw-stack-2x"></i>
<i class="fw fw-refresh fw-stack-1x fw-inverse"></i>
</span>
</span>
<span class="hidden-xs hidden-on-grid-view">Reset</span>
</a>

@ -298,15 +298,13 @@
Enter new password
<br><br>
<div>
<input type="password" class="form-control modal-input operationDataKeys" id="new-password"
data-key="message"/>
<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"/>
<input type="password" class="form-control modal-input operationDataKeys" id="confirmed-password" data-key="message"/>
</div>
<br>
</h4>
@ -338,6 +336,7 @@
</div>
</div>
</div>
{{/zone}}
{{#zone "common-navigation"}}
<!--Later add the navigation menu from here-->

@ -26,13 +26,13 @@ function onRequest(context) {
return options.fn(this);
}
});
var page = {};
var userModule = require("/app/modules/user.js")["userModule"];
var deviceMgtProps = require("/app/conf/devicemgt-props.js").config();
page["adminUser"] = deviceMgtProps["adminUser"];
page["permissions"] = userModule.getUIPermissions();
if (userModule.isAuthorized("/permission/admin/device-mgt/users/delete")) {
page["removePermitted"] = true;
}
if (userModule.isAuthorized("/permission/admin/device-mgt/users/remove")) {
page["removePermitted"] = true;
@ -51,6 +51,5 @@ function onRequest(context) {
page["resetPasswordPermitted"] = true;
}
page["adminUser"] = deviceMgtProps.adminUser;
return page;
}
Loading…
Cancel
Save