settings: Hide password change controls behind a link

(imported from commit 6d0f3861ef97f45231d388378f429974e876ddbe)

templates/zephyr/settings.html

@@ -68,6 +68,14 @@
             </div>
         </div>
 
+        <div class="control-group" id="pw_change_link">
+            <label class="control-label">
+                <a href="#settings">Change password</a>
+            </label>
+        </div>
+
+        <div id="pw_change_controls">
+
             <div class="control-group">
                 <label for="old_password" class="control-label">Old password</label>
                 <div class="controls">
@@ -101,6 +109,8 @@
                 </div>
             </div>
 
+        </div>
+
         <div class="control-group">
             <label for="enable_desktop_notifications" class="control-label">
                 Desktop notifications (Chrome only)</label>

zephyr/static/js/ui.js

@@ -756,6 +756,12 @@ $(function () {
     // have it (and instead to scroll to a weird place.)
     $('#gear-menu a[href="#subscriptions"]').on('shown', subs.setup_page);
 
+    $('#pw_change_link').on('click', function (e) {
+        e.preventDefault();
+        $('#pw_change_link').hide();
+        $('#pw_change_controls').show();
+    });
+
     $('#new_password').on('change keyup', function () {
         var pw_quality = password_quality($('#new_password').val());
         if (pw_quality !== undefined)

zephyr/static/styles/zephyr.css

@@ -1087,3 +1087,7 @@ table.floating_recipient {
 .form-horizontal .label_for_text {
     padding-top: 0;
 }
+
+#pw_change_controls {
+    display: none;
+}