settings: Change admin pages to have readonly view for non-admins.

This changes the layout of administration for non-administrators such
that they can view organization settings and emoji settings and
displays everything as readonly unless they have the capability to edit.

For now, we just enabled this for the emoji settings and organization
settings features.

docs/manual-testing.md

@@ -473,6 +473,9 @@ Here are the tasks:
 
 ### To be continued... ###
 
-This document does not cover admin options yet.  The main thing to do
-when testing the admin system is to verify that changes are synced to
-other users.
+This document does not cover settings/admin options yet.  The main
+things to do when testing the settings system are:
+- Verify that changes are synced to other users.
+- Verify error messages appear if you do something wrong and look right.
+- For organization settings, verify that they look right in read-only
+  mode (i.e. when not logged into an administrator account).

static/js/admin.js

@@ -12,8 +12,8 @@ exports.show_or_hide_menu_item = function () {
         item.show();
     } else {
         item.hide();
-        $(".ind-tab[data-tab-key='administration']").addClass("disabled");
-        $(".settings-list li.admin").hide();
+        $(".administration-box [data-name='organization-settings']")
+            .find("input, button, select").attr("disabled", true);
     }
 };
 
@@ -227,6 +227,7 @@ exports.populate_emoji = function (emoji_data) {
                 name: name, source_url: data.source_url,
                 display_url: data.display_url,
                 author: data.author,
+                is_admin: page_params.is_admin,
             },
         }));
     });
@@ -321,6 +322,7 @@ function _setup_page() {
         language_list: page_params.language_list,
         realm_default_language: page_params.realm_default_language,
         realm_waiting_period_threshold: page_params.realm_waiting_period_threshold,
+        is_admin: page_params.is_admin,
     };
 
     var admin_tab = templates.render('admin_tab', options);

static/styles/components.css

@@ -72,6 +72,13 @@
     filter: brightness(0.9);
 }
 
+.new-style .button[disabled="disabled"] {
+    cursor: not-allowed;
+    -webkit-filter: saturate(0);
+    -moz-filter: saturate(0);
+    filter: saturate(0);
+}
+
 /* -- button style variations -- */
 .new-style .button.no-style {
     padding: 0px;

static/styles/zulip.css

@@ -1352,6 +1352,10 @@ blockquote p {
     font-weight: bold;
 }
 
+.alert {
+    display: none;
+}
+
 .home-error-bar .alert {
     margin-bottom: auto;
 }

static/templates/admin_emoji_list.handlebars

@@ -13,10 +13,12 @@
         <span class="emoji_author">Unknown Author</span>
         {{/if}}
     </td>
+    {{#if is_admin}}
     <td>
         <button class="button delete btn-danger" data-emoji-name="{{name}}">
             {{t "Delete" }}
         </button>
     </td>
+    {{/if}}
 </tr>
 {{/with}}

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

@@ -8,10 +8,11 @@
         <th>{{t "Name" }}</th>
         <th class="image">{{t "Image" }}</th>
         <th class="image">{{t "Author" }}</th>
-        <th class="actions">{{t "Actions" }}</th>
+        {{#if is_admin}}<th class="actions">{{t "Actions" }}</th>{{/if}}
       </tbody>
     </table>
   </div>
+
   <form class="form-horizontal admin-emoji-form">
     <div class="add-new-emoji-box grey-bg green-bg">
       <div class="new-emoji-form">

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

@@ -23,7 +23,9 @@
       <label for="id_realm_restricted_to_domain" class="inline" 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>
+      {{#if is_admin }}
       <a data-toggle="modal" href="#realm_aliases_modal">{{t "[Add or Change]" }}</a>
+      {{/if}}
     </div>
     <div class="input-group">
       <input type="checkbox" class="inline-block" id="id_realm_invite_required" name="realm_invite_required"

templates/zerver/settings_overlay.html

@@ -44,6 +44,7 @@
           <i class="icon icon-vector-smile"></i>
           <div class="text">{{ _('Custom emoji') }}</div>
         </li>
+        {% if is_admin %}
         <li class="admin" tabindex="1" data-section="auth-methods">
           <i class="icon icon-vector-lock"></i>
           <div class="text">{{ _('Authentication methods') }}</div>
@@ -72,6 +73,7 @@
           <i class="icon icon-vector-font"></i>
           <div class="text">{{ _('Filter settings') }}</div>
         </li>
+        {% endif %}
       </ul>
     </div>