org-settings: Fix styling of Allowed Domains modal.

Fixes: #7628.

Cleaned up by Brock Whittaker and Node tests fixed by Steve Howell.

frontend_tests/node_tests/settings_org.js

@@ -108,12 +108,7 @@ function simulate_realm_domains_table() {
 }
 
 function test_realms_domain_modal(add_realm_domain) {
-    var info = $.create('domains-info-stub');
-
-    $('#realm_domains_modal').set_find_results(
-        '.realm_domains_info',
-        info
-    );
+    var info = $('.realm_domains_info');
 
     $('#add-realm-domain-widget').set_find_results(
         '.new-realm-domain',
@@ -410,7 +405,7 @@ function test_change_allow_subdomains(change_allow_subdomains) {
         stopPropagation: noop,
     };
 
-    var info = $.create('realm-domain-info-stub');
+    var info = $('.realm_domains_info');
     var domain = 'example.com';
     var allow = true;
 
@@ -423,11 +418,6 @@ function test_change_allow_subdomains(change_allow_subdomains) {
         error_callback = req.error;
     };
 
-    $('#realm_domains_modal').set_find_results(
-        '.realm_domains_info',
-        info
-    );
-
     var domain_obj = $.create('domain object');
     domain_obj.text(domain);
 

static/js/settings_org.js

@@ -689,7 +689,7 @@ function _set_up() {
     $("#realm_domains_table").on("click", ".delete_realm_domain", function () {
         var domain = $(this).parents("tr").find(".domain").text();
         var url = "/json/realm/domains/" + domain;
-        var realm_domains_info = $("#realm_domains_modal").find(".realm_domains_info");
+        var realm_domains_info = $(".realm_domains_info");
 
         channel.del({
             url: url,
@@ -703,7 +703,7 @@ function _set_up() {
     });
 
     $("#submit-add-realm-domain").click(function () {
-        var realm_domains_info = $("#realm_domains_modal").find(".realm_domains_info");
+        var realm_domains_info = $(".realm_domains_info");
         var widget = $("#add-realm-domain-widget");
         var domain = widget.find(".new-realm-domain").val();
         var allow_subdomains = widget.find(".new-realm-domain-allow-subdomains").prop("checked");
@@ -728,7 +728,7 @@ function _set_up() {
 
     $("#realm_domains_table").on("change", ".allow-subdomains", function (e) {
         e.stopPropagation();
-        var realm_domains_info = $("#realm_domains_modal").find(".realm_domains_info");
+        var realm_domains_info = $(".realm_domains_info");
         var domain = $(this).parents("tr").find(".domain").text();
         var allow_subdomains = $(this).prop('checked');
         var url = '/json/realm/domains/' + domain;

static/styles/app_components.css

@@ -296,6 +296,7 @@
 .new-style input[type=text] {
     border-radius: 5px;
     box-shadow: none;
+    margin: 0px;
 }
 
 .clear_search_button:hover {

static/styles/settings.css

@@ -336,6 +336,15 @@ input[type=checkbox] + .inline-block {
     margin-left: 10px;
 }
 
+.allow-subdomains,
+.new-realm-domain-allow-subdomains {
+    margin: 0 !important;
+}
+
+.realm_domains_info {
+    margin-bottom: 0px;
+}
+
 .admin-realm-form h3 {
     margin-bottom: 0px;
 }

static/templates/settings/admin-realm-domains-list.handlebars

@@ -1,7 +1,13 @@
 {{#with realm_domain}}
 <tr>
     <td class="domain">{{domain}}</td>
-    <td><input type="checkbox" class="allow-subdomains" {{#if allow_subdomains}}checked{{/if}}></td>
+    <td>
+        <label class="checkbox">
+            <input type="checkbox" class="allow-subdomains"
+                {{#if allow_subdomains}} checked="checked" {{/if}} />
+            <span></span>
+        </label>
+    </td>
     <td><button class="button btn-danger small rounded delete_realm_domain">{{t "Remove" }}</button></td>
 </tr>
 {{/with}}

static/templates/settings/realm-domains-modal.handlebars

@@ -14,14 +14,21 @@
             </tbody>
             <tfoot>
                 <tr id="add-realm-domain-widget">
-                    <td><input type="text" class="new-realm-domain" placeholder="acme.com"></td>
-                    <td><input type="checkbox" class="new-realm-domain-allow-subdomains"></td>
+                    <td><input type="text" class="new-realm-domain" placeholder="acme.com" /></td>
+                    <td>
+                        <label class="checkbox">
+                            <input type="checkbox" class="new-realm-domain-allow-subdomains" />
+                            <span></span>
+                        </label>
+                    </td>
                     <td><button type="button" class="button sea-green small rounded" id="submit-add-realm-domain">{{t "Add" }}</button></td>
                 </tr>
             </tfoot>
         </table>
-    </div>
-    <div class="modal-footer centered-footer">
+
         <div class="alert realm_domains_info"></div>
     </div>
+    <div class="modal-footer centered-footer">
+        <button class="new-style button rounded" data-dismiss="modal">{{t "Close" }}</button>
+    </div>
 </div>

tools/linter_lib/custom_check.py

@@ -515,7 +515,7 @@ def build_custom_checkers(by_lang):
          'exclude_line': [('templates/zerver/register.html', 'placeholder="acme"'),
                           ('templates/zerver/register.html', 'placeholder="Acme or Aκμή"'),
                           ('static/templates/settings/realm-domains-modal.handlebars',
-                           '<td><input type="text" class="new-realm-domain" placeholder="acme.com"></td>'),
+                           '<td><input type="text" class="new-realm-domain" placeholder="acme.com" /></td>'),
                           ("static/templates/user-groups-admin.handlebars",
                            '<input type="text" name="name" id="user_group_name" placeholder="hamletcharacters" />')],
          'exclude': set(["static/templates/settings/emoji-settings-admin.handlebars",