settings: Add notice for non-admin users about read-only access.

With contributions from Brock Whittaker and Tim Abbott.

Fixes #5165.

static/js/settings_org.js

@@ -100,6 +100,10 @@ exports.populate_auth_methods = function (auth_methods) {
     if (!page_params.is_admin) {
         $(".organization-box [data-name='auth-methods']")
             .find("input, button, select, checked").attr("disabled", true);
+        $(".organization-box").find(".settings-section:not(.can-edit)")
+            .prepend("<div class='tip'>" +
+                     i18n.t("Only organization administrators can edit these settings.") +
+                     "</div>");
     }
 };
 

static/styles/settings.css

@@ -217,6 +217,28 @@ td .button {
     margin-right: 5px;
 }
 
+.settings-section .tip {
+    position: relative;
+    display: block;
+    background-color: #fbf7ea;
+    border: 1px solid #e0ddd0;
+    border-radius: 4px;
+    padding: 10px;
+    margin: 10px 0px;
+    font-size: 1rem;
+    line-height: 1.5;
+    color: #666;
+}
+
+.settings-section .tip::before {
+    content: "\f0a2";
+
+    display: inline;
+    margin-right: 8px;
+
+    font-family: FontAwesome, "Yantramanav", Humbug;
+    font-weight: 600;
+}
 .dynamic-input {
     display: inline-block;
     padding: 5px;

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

@@ -1,4 +1,9 @@
-<div id="emoji-settings" data-name="emoji-settings" class="settings-section">
+<div id="emoji-settings" data-name="emoji-settings" class="settings-section {{#unless realm_add_emoji_by_admins_only}}can-edit{{/unless}}">
+    {{#if realm_add_emoji_by_admins_only}}
+    <div class='tip'>{{t '<a href="#organization/organization-permissions">Only administrators</a> can add custom emoji in this organization.' }}</div>
+    {{else}}
+    <div class='tip'>{{t 'Any user can add custom emoji in this organization.' }}</div>
+    {{/if}}
     <div class="admin-table-wrapper">
         <p>{{#tr this}}Add extra emoji for members of the __realm_name__ organization.{{/tr}}</p>
         <table class="table table-condensed table-striped admin_emoji_table">
@@ -10,7 +15,7 @@
             </tbody>
         </table>
     </div>
-
+    {{#unless realm_add_emoji_by_admins_only}}
     <form class="form-horizontal admin-emoji-form">
         <div class="add-new-emoji-box grey-bg green-bg">
             <div class="new-emoji-form">
@@ -34,4 +39,5 @@
             </div>
         </div>
     </form>
+    {{/unless}}
 </div>