zulip/static/templates/settings_tab.handlebars

<h1><i class="icon-vector-wrench settings-icon"></i>{{t "Settings" }}</h1>

<div id="settings-change-box">

  <div class="alert" id="settings-status"></div>

  <div id="account-settings" class="settings-section">
    <div class="settings-section-title">
      <i class="icon-vector-user settings-section-icon"></i>
      {{t "Your Account" }}
    </div>
    <div class="account-settings-form">
      <form action="/json/settings/change" method="post"
            class="form-horizontal your-account-settings">
        <div class="input-group" id="name_change_container">
          <label for="full_name">{{t "Full name" }}</label>
          <input type="text" name="full_name" id="full_name" value="{{ page_params.fullname }}" />
        </div>

        <!-- password start -->
        {{#if page_params.password_auth_enabled}}
        <div class="input-group" id="pw_change_link">
          <label for="change_password_button">{{t "Password" }}</label>
          <button class="change_password_button button" data-dismiss="modal" aria-hidden="true">{{t "Change Password" }}</button>
        </div>

        <div id="pw_change_controls">
          <div class="input-group">
            <label for="old_password">{{t "Old password" }}</label>
            <input type="password" autocomplete="off" name="old_password" id="old_password" value="" />
            (<a href="/accounts/password/reset/" target="_blank">{{t "Forgotten it?" }}</a>)
          </div>

          <div class="input-group">
            <label for="new_password">{{t "New password" }}</label>
            <input type="password" autocomplete="off" name="new_password" id="new_password" value="" />
          </div>

          <div class="input-group">
            <label>{{t "Password strength" }}</label>
            <div class="progress" id="pw_strength">
              <div class="bar bar-danger fade" style="width: 10%;"></div>
            </div>
          </div>

          <div class="input-group">
            <label for="confirm_password">{{t "Confirm password" }}</label>
            <input type="password" autocomplete="off" name="confirm_password" id="confirm_password" value="" />
          </div>

        </div>
        {{/if}}

        <div class="input-group">
          <input type="submit" class="button green" name="change_settings" value="Save Changes" />
        </div>

        <div class="input-group">
          <img id="user-settings-avatar" src="{{ page_params.avatar_url }}" />
          <div id="user_avatar_file_input_error" class="text-error"></div>
          <div id="user_avatar_file"></div>
          <input type="file" name="user_avatar_file_input" class="notvisible" id="user_avatar_file_input" value="{{t 'Upload avatar' }}" />
          <div id="upload_avatar_spinner"></div>
          <button class="button standalone" id="user_avatar_upload_button">{{t 'Customize avatar' }}</button>
        </div>

      </form>

    </div>
  </div>

  <div>
    <div id="display-settings" class="settings-section">
      <div class="settings-section-title">
        <i class="icon-vector-time settings-section-icon"></i>
        {{t 'Display Settings' }}
      </div>
      <div class="alert" id="display-settings-status"></div>
      <form class="display-settings-form">

        <div class="input-group">
          <label for="default_language" class="inline-block"> {{t "Default Language" }}: <span id='default_language_name'>{{page_params.default_language_name}}</span></label>
          <a id="default_language" href="#default_language" title='Change default language'>[Change]</a>
        </div>
        <div id="default_language_modal" class="modal hide" tabindex="-1" role="dialog"
              aria-labelledby="default_language_modal_label" aria-hidden="true">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="default_language_modal_label">{{t "Select Default Language" }}</h3>
          </div>
          <div class="modal-body">
            <p>
            The following is a few of the languages we have started to
            support or are hoping to support in the near future. We would
            love help translating; if you're interested in helping, make an
            account at <a href='https://www.transifex.com/zulip/zulip/'>
            https://www.transifex.com/zulip/zulip/</a>, and sign up for a
            language! You can also request any language we don't currently
            have. It only takes a few hours to translate the most important
            parts of the app.
            </p>
            <div>
              <table>
                {{#each page_params.language_list_dbl_col}}
                  <tr>
                    <td>
                      <a class="language" data-code="{{this.first.code}}" data-name="{{this.first.name}}">
                        {{#if this.first.selected}}
                        <b>{{this.first.percent}}</b>
                        {{else}}
                        {{this.first.percent}}
                        {{/if}}
                      </a>
                    </td>
                    <td>
                      <a class="language" data-code="{{this.second.code}}" data-name="{{this.second.name}}">
                        {{#if this.second.selected}}
                        <b>{{this.second.percent}}</b>
                        {{else}}
                        {{this.second.percent}}
                        {{/if}}
                      </a>
                    </td>
                  </tr>
                {{/each}}
              </table>
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">{{t "Close" }}</button>
          </div>
        </div>

        <div class="input-group thinner">
          <input type="checkbox" class="inline-block" name="left_side_userlist" id="left_side_userlist"
            {{#if page_params.left_side_userlist}}
              checked="checked"
            {{/if}} />
            <label for="left_side_userlist" class="inline-block">{{t "Display user list on left side in narrow windows." }}</label>
        </div>

        <div class="input-group thinner">
          <input type="checkbox" class="inline-block" name="twenty_four_hour_time" id="twenty_four_hour_time"
            {{#if page_params.twenty_four_hour_time}}
              checked="checked"
            {{/if}} />
          <label for="twenty_four_hour_time" class="inline-block">
            {{t "Display time in 24-hour format (17:00 instead of 5:00 PM)" }}
          </label>
        </div>
      </form>
    </div>
  </div>

  <div>
    <div id="notification-settings" class="settings-section">
      <div class="settings-section-title">
        <i class="icon-vector-warning-sign settings-section-icon"></i>
        {{t "Notifications" }}
      </div>

      <form class="notification-settings-form">
        <div class="notification-reminder w-70 padded-container center-block">{{#tr this }}You'll receive notifications when a message arrives and __page_params.product_name__ isn't in focus or the message is offscreen.{{/tr}}</div>
        <div class="alert" id="notify-settings-status"></div>

        <h4>{{t "Stream messages" }}</h4>

        <div class="padded-container">
          <p>{{t "Unless I say otherwise for a particular stream, I want:" }}</p>

          <div class="input-group thinner">
            <input type="checkbox" class="inline-block" name="enable_stream_desktop_notifications"
                   id="enable_stream_desktop_notifications"
                   {{#if page_params.stream_desktop_notifications_enabled}}
                   checked="checked"
                   {{/if}} />
            <label for="enable_stream_desktop_notifications" class="inline-block">
              {{t "Desktop notifications" }}
            </label>
            <div class="propagate_stream_notifications_change"></div>
          </div>

          <div class="input-group thinner">
            <input type="checkbox" class="inline-block" name="enable_stream_sounds" id="enable_stream_sounds"
                   {{#if page_params.stream_sounds_enabled}}
                   checked="checked"
                   {{/if}} />
            <label for="enable_stream_sounds" class="inline-block">
              {{t "Audible notifications" }}
            </label>
            <div class="propagate_stream_notifications_change"></div>
          </div>

          <p class="notification-settings-note">
            {{#tr this}}Change notification settings for individual streams on your <a href="/#subscriptions">Streams page</a>.{{/tr}}
          </p>
        </div>

        <h4>{{t "Private messages and @-mentions" }}</h4>

        <div class="padded-container">
          <p>{{t "I want:" }}</p>

          <div class="input-group thinner">
            <input type="checkbox" class="inline-block" name="enable_desktop_notifications" id="enable_desktop_notifications"
                   {{#if page_params.desktop_notifications_enabled}}
                   checked="checked"
                   {{/if}} />
            <label for="enable_desktop_notifications" class="inline-block">
              {{t "Desktop notifications" }}
            </label>
          </div>

          <div class="input-group thinner">
            <input type="checkbox" class="inline-block" name="enable_sounds" id="enable_sounds"
                   {{#if page_params.sounds_enabled}}
                   checked="checked"
                   {{/if}} />
            <label for="enable_sounds" class="inline-block">
              {{t "Audible notifications" }}
            </label>
          </div>

          <div class="input-group thinner">
            <input type="checkbox" class="inline-block" name="enable_offline_email_notifications" id="enable_offline_email_notifications"
                   {{#if page_params.enable_offline_email_notifications}}
                   checked="checked"
                   {{/if}} />
            <label for="enable_offline_email_notifications" class="inline-block">
              {{t "Email notifications when offline" }}
            </label>
          </div>

          <div class="input-group thinner">
            <input type="checkbox" class="inline-block" name="enable_offline_push_notifications" id="enable_offline_push_notifications"
                   {{#if page_params.enable_offline_push_notifications}}
                   checked="checked"
                   {{/if}} />
            <label for="enable_offline_push_notifications" class="inline-block">
              {{t "Mobile push notifications when offline" }}
            </label>
          </div>
        </div>

        <div id="other_notifications">

        <h4>{{t "Other notifications" }} {{t "I want" }}:</h4>

        <div class="padded-container">
          <div class="input-group no-margin" id="digest_container">
            <input type="checkbox" class="inline-block" name="enable_digest_emails" id="enable_digest_emails"
                   {{#if page_params.enable_digest_emails}}
                   checked="checked"
                   {{/if}} />
            <label for="enable_digest_emails" class="inline-block">
              {{t "Digest emails when I'm away" }}
            </label>
          </div>
        </div>
        {{!-- If you add another control group here, make sure to change
              $("#other_notifications").hide(); in settings.js to
                    $("#digest_container").hide();
        --}}
        </div>

        <div class="input-group">
          <div class="controls notification-submission">
            <input type="submit" id="change_notification_settings"
                   name="change_notification_settings" value="{{t 'Save Changes' }}"
                   class="button green" />
          </div>
        </div>
      </form>

    </div>

  </div>
</div>

<div id="bot-settings" class="settings-section">

  <div class="settings-section-title">
    <i class="icon-vector-github settings-section-icon"></i>
    {{t "Your Bots" }}
  </div>

  <div class="bot-settings-form">
    {{#tr this}}
    <p class="bot-settings-note padded-container">
      Looking for our <a href="/integrations" target="_blank">Integrations</a>
      or <a href="{{ server_uri }}/api" target="_blank">API</a> documentation?
    </p>
    {{/tr}}

    <ol id="bots_list">
    </ol>
    <div id="bot_table_error" class="alert alert-error hide"></div>

    <div class="add-new-bot-box grey-bg">
      <form id="create_bot_form" class="form-horizontal no-padding">
        <h4 class="new-bot-section-title light no-margin">Add a New Bot</h4>
        <div class="new-bot-form">
          <div class="input-group">
            <label for="create_bot_name">{{t "Full name" }}</label>
            <input type="text" name="bot_name" id="create_bot_name" class="required"
                   maxlength=100 placeholder="{{t 'Full Bot Name' }}" value="" />
            <div><label for="create_bot_name" generated="true" class="text-error"></label></div>
          </div>
          <div class="input-group">
            <label for="bot_short_name">{{t "Username" }}</label>
            <input type="text" name="bot_short_name" id="create_bot_short_name" class="required bot_local_part"
                   placeholder="{{t 'bot_user_name' }}" value="" />
                   -{{t "bot" }}@{{ page_params.domain }}
            <div>
              <label for="create_bot_short_name" generated="true" class="text-error"></label>
            </div>
          </div>
          <div class="input-group new-bot-ui">
            <label for="create_bot_default_sending_stream">{{t "Send to stream" }}</label>
            <select name="bot_default_sending_stream" id="create_bot_default_sending_stream"></select>
          </div>
          <div class="input-group new-bot-ui">
            <label for="create_bot_default_events_register_stream">{{t "Listen on" }}</label>
            <select name="bot_default_events_register_stream" id="create_bot_default_events_register_stream"></select>
          </div>
          <div class="input-group">
            <div id="bot_avatar_file"></div>
            <input type="file" name="bot_avatar_file_input" class="notvisible" id="bot_avatar_file_input" value="{{t 'Upload avatar' }}" />
            <button class="btn btn-default display-none" id="bot_avatar_clear_button">{{t "Clear avatar" }}</button>
            <button class="button white" id="bot_avatar_upload_button">{{t "Customize avatar" }}</button> ({{t "Optional" }})
          </div>
          <p>
            <div id="bot_avatar_file_input_error" class="text-error"></div>
          </p>
          <input type="submit" class="button" id="create_bot_button" value="{{t 'Create Bot' }}" />
        </div>
      </form>
    </div>

    <hr class="settings_separator" />

    <div class="form-horizontal" id="api_key_button_box">
      <div class="input-group side-padded-container">
        {{#tr this}}
        <p class="api-key-note">For most bots using the API, you'll want to give each bot
          its own name and API key using the above section.  But if you
          want to write a bot that can access your own private
          messages, you should use your personal API key.
        </p>
        {{/tr}}
        <button class="button white" id="api_key_button">{{t "Show/change your API key" }}</button>
      </div>
    </div>
    <div id="get_api_key_box">
      {{#tr this}}
      <p>Please re-enter your password to confirm your identity.
        (<a href="/accounts/password/reset/" target="_blank">Forgotten it?</a>)</p>
      {{/tr}}
      <form action="/json/fetch_api_key" method="post" class="form-horizontal">
        <div class="control-group">
          <label for="password" class="control-label">{{t "Current password" }}</label>
          <input type="password" autocomplete="off"
                 name="password" id="get_api_key_password" value="" />
        </div>
        <div class="control-group">
          <input type="submit" name="view_api_key" value="{{t 'Get API key' }}"
                 class="btn btn-primary" />
        </div>
      </form>
    </div>
    <div id="show_api_key_box">
      <p>{{t "Your API key:" }}</p>
      <p><b><span id="api_key_value"></span></b></p>
      <button type="submit" class="btn btn-primary regenerate_api_key">
        {{t "Generate new API Key" }}
      </button>
      <div id="user_api_key_error text-error">
      </div>
    </div>

  </div>
</div>

<div id="alert-word-settings" class="settings-section">
  <div class="settings-section-title">
    <i class="icon-vector-book settings-section-icon"></i>
    {{t "Custom Alert Words" }}
  </div>
  <form class="form-horizontal" id="alert_word_info_box">
    {{#tr this}}
    <p class="alert-word-settings-note">
      {{t "Alert words allow you to be notified as if you were @-mentioned
      when certain words or phrases are used in Zulip."}}
    </p>
    {{/tr}}
  </form>
  <ul id="alert_words_list"></ul>
</div>

<div class="ui-settings">
  <div id="ui-settings" class="settings-section">
    <div class="settings-section-title"><i class="icon-vector-beaker settings-section-icon"></i>{{#tr this}}__page_params.product_name__ Labs{{/tr}}</div>
    <div class="alert" id="ui-settings-status"></div>
    <form class="ui-settings-form">
      <p class="input-group">
        {{t "Warning: the below features are experimental features and may not work as well as you would like." }}
      </p>
      <div class="input-group thinner">
        <input type="checkbox" class="inline-block" name="autoscroll_forever" id="autoscroll_forever"
               {{#if page_params.autoscroll_forever}}
               checked="checked"
            {{/if}} />
        <label for="autoscroll_forever" class="inline-block">
          {{t "Always auto-scroll to new messages" }}
        </label>
      </div>
      <div class="input-group thinner">
        <input type="checkbox" class="inline-block" name="default_desktop_notifications" id="default_desktop_notifications"
               {{#if page_params.default_desktop_notifications}}
               checked="checked"
            {{/if}} />
        <label for="default_desktop_notifications" class="inline-block">
          {{t "Enable desktop notifications for new streams" }}
        </label>

      </div>
      <div class="input-group">
        <div class="ui-submission">
          <input type="submit" name="change_settings" value="{{t 'Save Changes' }}" class="button green" />
        </div>
      </div>
    </form>
  </div>
</div>