admin settings: Restyle realm alias modal.

frontend_tests/node_tests/templates.js

@@ -106,7 +106,7 @@ function render(template_name, args) {
     var domain = $(html).find('.domain');
     var row = button.closest('tr');
 
-    assert.equal(button.text().trim(), "Delete");
+    assert.equal(button.text().trim(), "Remove");
     assert(button.hasClass("delete_alias"));
     assert.equal(button.data("id"), "1");
 

static/js/admin.js

@@ -190,7 +190,6 @@ exports.populate_filters = function (filters_data) {
 };
 
 exports.populate_realm_aliases = function (aliases) {
-    var alias_table = $("#alias_table").expectOne();
     var domains_list = _.map(page_params.domains, function (ADomain) {
         return ADomain.domain;
     });
@@ -200,9 +199,10 @@ exports.populate_realm_aliases = function (aliases) {
     }
     $("#realm_restricted_to_domains_label").text(i18n.t("New users restricted to the following domains: __domains__", {domains: domains}));
 
-    alias_table.find("tr").remove();
+    var alias_table_body = $("#alias_table tbody").expectOne();
+    alias_table_body.find("tr").remove();
     _.each(aliases, function (alias) {
-        alias_table.append(templates.render("admin_alias_list", {alias: alias}));
+        alias_table_body.append(templates.render("admin_alias_list", {alias: alias}));
     });
 };
 

static/styles/settings.css

@@ -437,6 +437,11 @@ input[type=checkbox].inline-block {
 }
 
 #administration #new_alias {
-    margin-right: 20px;
+    width: 130px;
     margin-bottom: auto;
+    padding: 0px 2px;
+}
+
+#administration #add_alias {
+    width: 75px;
 }

static/templates/admin_tab.handlebars

@@ -74,20 +74,28 @@
           <button class="button btn-danger" id="do_deactivate_stream_button">{{t "Yes, delete this stream" }}</button>
         </div>
       </div>
-      <div id="realm_aliases_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="realm_aliases_modal_label" aria-hidden="true">
+      <div id="realm_aliases_modal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="realm_aliases_modal_label" aria-hidden="true">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
           <h3 id="realm_aliases_modal_label">{{t "Allowed domains" }}</h3>
         </div>
         <div class="modal-body">
           <table class="table table-condensed table-stripped" id="alias_table">
-            <th>{{t "Domain" }}</th>
-            <th>{{t "Action" }}</th>
+            <thead>
+              <th>{{t "Domain" }}</th>
+              <th>{{t "Action" }}</th>
+            </thead>
+            <tbody>
+            </tbody>
+            <tfoot>
+              <tr>
+                <td><input type="text" id="new_alias" placeholder={{t "acme.com" }}></input></td>
+                <td><button type="button" class="btn btn-primary" id="add_alias">{{t "Add" }}</button></td>
+              </tr>
+            </tfoot>
           </table>
         </div>
         <div class="modal-footer centered-footer">
-          <input type="text" id="new_alias"></input>
-          <button type="button" id="add_alias">{{t "Add" }}</button>
           <div class="aliases_info"></div>
         </div>
       </div>

static/templates/settings/admin_alias_list.handlebars

@@ -1,6 +1,6 @@
 {{#with alias}}
   <tr id="alias_{{id}}">
     <td class="domain">{{domain}}</td>
-    <td><button class="btn btn-danger btn-sm delete_alias" data-id="{{id}}">{{t "Delete" }}</button></td>
+    <td><button class="btn btn-danger btn-sm delete_alias" data-id="{{id}}">{{t "Remove" }}</button></td>
   </tr>
 {{/with}}

static/templates/settings/organization-settings-admin.handlebars

@@ -23,7 +23,7 @@
       <label for="id_realm_restricted_to_domain" class="inline-block" id="realm_restricted_to_domains_label"
         title="{{#tr this}}If checked, only users with an e-mail address ending in these domains will be able to join the organization.{{/tr}}">
       </label>
-      <a data-toggle="modal" href="#realm_aliases_modal">{{t "Change domains" }}</a>
+      <a data-toggle="modal" href="#realm_aliases_modal">{{t "[Add or Change]" }}</a>
     </div>
     <div class="input-group">
       <input type="checkbox" class="inline-block" id="id_realm_invite_required" name="realm_invite_required"