Skip to content

Commit

Permalink
org settings: Add save/discard widget for realm authentication methods.
Browse files Browse the repository at this point in the history 
Along with this, we refactored settings_org.populate_auth_methods to use
HTML function after rendering all auth methods rows rather than appending
each row individually, which actually is a good practice.

Also in this commit, to compare `current_val` and `changed_val` in
`check_property_changed` function of the property
`realm_authentication_methods`, which are objects, and we found here
https://stackoverflow.com/a/1144249 that there is no easy way to do so. So
I followed this approach,

```js
 JSON.stringify(obj1) === JSON.stringify(obj2)
```

but before converting them to string we want the same order of keys, so we
used `sort_object_by_key` to sort `current_val` by keys and
`get_auth_method_table_data` always return `changed_val` having keys
sorted.

Since these refactor were closely related we kept them as a single commit
here.

Fixes: #11954.
  • Loading branch information
@pragatiagrawal31 @timabbott
pragatiagrawal31 authored and timabbott committed May 20, 2019
1 parent c634d22 commit 4df971c
Show file tree
Hide file tree
Showing 6 changed files with 55 additions and 66 deletions.
2 changes: 2 additions & 0 deletions frontend_tests/casper_tests/10-admin.js
View file
Expand Up @@ -387,6 +387,8 @@ casper.then(function () {
casper.click("li[data-section='auth-methods']");
casper.waitUntilVisible(".method_row[data-method='Google'] input[type='checkbox'] + span", function () {
casper.click(".method_row[data-method='Google'] input[type='checkbox'] + span");
casper.test.assertSelectorHasText('#org-submit-auth_settings', "Save");
casper.click('#org-submit-auth_settings');
});
});

Expand Down
22 changes: 2 additions & 20 deletions frontend_tests/node_tests/settings_org.js
View file
Expand Up @@ -85,24 +85,7 @@ run_test('unloaded', () => {
settings_org.populate_auth_methods();
});

function simulate_auth_methods() {
$('#admin_auth_methods_table').set_find_results(
'tr.method_row',
$.create('admin-tr-stub')
);

var controls = $.create('auth-methods-controls-stub');

$(".organization-box [data-name='auth-methods']").set_find_results(
'input, button, select, checked',
controls
);

controls.attr = function (name, val) {
assert.equal(name, 'disabled');
assert.equal(val, true);
};

function simulate_tip_box() {
var non_editables = $.create('auth-methods-not-edit-stub');
$('.organization-box').set_find_results(
'.settings-section:not(.can-edit)',
Expand Down Expand Up @@ -734,13 +717,12 @@ run_test('set_up', () => {
name: "Zoom",
},
};
simulate_auth_methods();
simulate_tip_box();

$('#id_realm_create_stream_policy').change = set_callback('realm_create_stream_policy');
$('#id_realm_video_chat_provider').change = set_callback('realm_video_chat_provider');
$("#id_realm_org_join_restrictions").change = set_callback('change_org_join_restrictions');
$('#submit-add-realm-domain').click = set_callback('add_realm_domain');
$('#admin_auth_methods_table').change = set_callback('admin_auth_methods_table');
$('.notifications-stream-disable').click = set_callback('disable_notifications_stream');
$('.signup-notifications-stream-disable').click = set_callback('disable_signup_notifications_stream');

Expand Down
8 changes: 3 additions & 5 deletions frontend_tests/node_tests/templates.js
View file
Expand Up @@ -441,14 +441,12 @@ run_test('bankruptcy_modal', () => {

run_test('admin_auth_methods_list', () => {
var args = {
method: {
method: "Email",
enabled: false,
},
method: "Email",
enabled: false,
};

var html = '';
html += '<tbody id="admin_auth_methods_table">';
html += '<tbody>';
html += render('admin_auth_methods_list', args);
html += '</tbody>';

Expand Down
56 changes: 29 additions & 27 deletions static/js/settings_org.js
View file
Expand Up @@ -304,7 +304,6 @@ exports.populate_realm_domains = function (realm_domains) {
realm_domains_table_body.append(templates.render("admin-realm-domains-list", {realm_domain: realm_domain}));
});
};

function sort_object_by_key(obj) {
var keys = _.keys(obj).sort();
var new_obj = {};
Expand All @@ -313,24 +312,21 @@ function sort_object_by_key(obj) {
});
return new_obj;
}

exports.populate_auth_methods = function (auth_methods) {
if (!meta.loaded) {
return;
}

var auth_methods_table = $("#admin_auth_methods_table").expectOne();
auth_methods_table.find('tr.method_row').remove();
var auth_methods_table = $("#id_realm_authentication_methods").expectOne();
auth_methods = sort_object_by_key(auth_methods);
var rendered_auth_method_rows = "";
_.each(auth_methods, function (value, auth_method) {
auth_methods_table.append(templates.render('admin_auth_methods_list', {
method: {
method: auth_method,
enabled: value,
is_admin: page_params.is_admin,
},
}));
rendered_auth_method_rows += templates.render('admin_auth_methods_list', {
method: auth_method,
enabled: value,
is_admin: page_params.is_admin,
});
});
auth_methods_table.html(rendered_auth_method_rows);
};

function insert_tip_box() {
Expand All @@ -344,7 +340,6 @@ function insert_tip_box() {
.prepend(tip_box);
}


exports.render_notifications_stream_ui = function (stream_id, elem) {

var name = stream_data.maybe_get_stream_name(stream_id);
Expand Down Expand Up @@ -453,6 +448,9 @@ function discard_property_element_changes(elem) {
elem.prop('checked', property_value);
} else if (typeof property_value === 'string' || typeof property_value === 'number') {
elem.val(property_value);
} else if (typeof property_value === 'object' &&
property_name === 'realm_authentication_methods') {
exports.populate_auth_methods(property_value);
} else {
blueslip.error('Element refers to unknown property ' + property_name);
}
Expand Down Expand Up @@ -605,19 +603,33 @@ exports.build_page = function () {
set_message_content_in_email_notifications_visiblity();
set_digest_emails_weekday_visibility();

function get_auth_method_table_data() {
var new_auth_methods = {};
var auth_method_rows = $("#id_realm_authentication_methods").find('tr.method_row');
_.each(auth_method_rows, function (method_row) {
new_auth_methods[$(method_row).data('method')] = $(method_row).find('input').prop('checked');
});
return new_auth_methods;
}

function check_property_changed(elem) {
elem = $(elem);
var property_name = exports.extract_property_name(elem);
var changed_val;
var current_val = get_property_value(property_name);

if (typeof current_val === 'boolean') {
changed_val = elem.prop('checked');
} else if (typeof current_val === 'string') {
changed_val = elem.val().trim();
} else if (typeof current_val === 'number') {
current_val = current_val.toString();
changed_val = elem.val().trim();
} else if (typeof current_val === 'object') {
// Currently we only deal with realm_authentication_methods object
current_val = sort_object_by_key(current_val);
current_val = JSON.stringify(current_val);
changed_val = get_auth_method_table_data();
changed_val = JSON.stringify(changed_val);
} else {
blueslip.error('Element refers to unknown property ' + property_name);
}
Expand Down Expand Up @@ -775,6 +787,9 @@ exports.build_page = function () {
data.invite_required = true;
data.invite_by_admins_only = false;
}
} else if (subsection === 'auth_settings') {
data = {};
data.authentication_methods = JSON.stringify(get_auth_method_table_data());
}
return data;
}
Expand Down Expand Up @@ -865,19 +880,6 @@ exports.build_page = function () {
e.stopPropagation();
});


$('#admin_auth_methods_table').change(function () {
var new_auth_methods = {};
_.each($("#admin_auth_methods_table").find('tr.method_row'), function (method_row) {
new_auth_methods[$(method_row).data('method')] = $(method_row).find('input').prop('checked');
});

settings_ui.do_settings_change(channel.patch, '/json/realm',
{authentication_methods: JSON.stringify(new_auth_methods)},
$('#admin-realm-authentication-methods-status').expectOne()
);
});

function fade_status_element(elem) {
setTimeout(function () {
elem.fadeOut(500);
Expand Down
2 changes: 0 additions & 2 deletions static/templates/settings/admin_auth_methods_list.handlebars
View file
@@ -1,4 +1,3 @@
{{#with method}}
<tr class="method_row" data-method="{{method}}">
<td>
<span class="method">{{method}}</span>
Expand All @@ -10,4 +9,3 @@
</label>
</td>
</tr>
{{/with}}
31 changes: 19 additions & 12 deletions static/templates/settings/auth-methods-settings-admin.handlebars
View file
@@ -1,16 +1,23 @@
<div id="admin-auth-settings" class="settings-section" data-name="auth-methods">
<div id="organization-auth-settings" class="settings-section" data-name="auth-methods">
<form class="form-horizontal admin-realm-form org-authentications-form">
<div class="admin-table-wrapper">
<h3 class="inline-block">{{t "Authentication methods" }}</h3>
<div class="alert-notification" id="admin-realm-authentication-methods-status"></div>
<p>{{#tr this}}Configure the authentication methods for your organization.{{/tr}}</p>
<table class="table table-condensed table-striped">
<thead>
<th>{{t "Method" }}</th>
<th>{{t "Enabled" }}</th>
</thead>
<tbody id="admin_auth_methods_table" class=" admin_auth_methods_table"></tbody>
</table>
<div id="org-auth_settings" class="admin-table-wrapper org-subsection-parent">
<div class ="subsection-header">
<h3>{{t "Authentication methods" }}</h3>
{{ partial "settings-save-discard-widget" "section_name" "auth_settings" }}
</div>

<div>
<p>{{t "Configure the authentication methods for your organization."}}</p>
<table id="id_realm_authentication_methods"
class="table table-condensed table-striped prop-element">
<thead>
<th>{{t "Method" }}</th>
<th>{{t "Enabled" }}</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</form>
</div>

0 comments on commit 4df971c

Please sign in to comment.