zulip/static/templates/settings/account-settings.handlebars

<div id="account-settings" class="settings-section show" data-name="your-account">
  <div class="settings-section-title">
    <i class="icon-vector-user settings-section-icon"></i>
    {{t "Your account" }}
  </div>
  <div class="alert" id="account-settings-status"></div>
  <div class="account-settings-form">
    <form class="email-change-form">
      <p for="change_email" class="inline-block title">
        {{t "Email" }}: <span id='email_value'>{{page_params.email}}</span>
        <a id="change_email" href="#change_email" {{#if page_params.realm_email_changes_disabled}}style="display:none" {{/if}}title="{{t 'Change email' }}">[Change]</a>
        <i class="icon-vector-question-sign change_email_tooltip" {{#unless page_params.realm_email_changes_disabled}}style="display:none" {{/unless}} data-toggle="tooltip"
        title="{{t 'Changing email addresses has been disabled by your Zulip organization administrators. Contact an administrator for help.' }}"></i>
      </p>

      <div id="change_email_modal" class="modal hide" tabindex="-1" role="dialog"
            aria-labelledby="change_email_modal_label" aria-hidden="true">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h3 id="change_email_modal_label">{{t "Change email" }}</h3>
        </div>
        <div class="modal-body">
          <div class="input-group email_change_container">
            <label for="email">{{t "Email" }}</label>
            <input type="text" name="email" value="{{ page_params.email }}" />
          </div>
        </div>
        <div class="modal-footer">
          <button id='change_email_button' class="btn btn-success" data-dismiss="modal" aria-hidden="true">{{t "Change" }}</button>
          <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">{{t "Close" }}</button>
        </div>
      </div>
    </form>

    <form action="/json/settings/change" method="post"
          class="form-horizontal your-account-settings">

      <div class="m-10 inline-block grid user-name-parent">
        <div class="user-name-section inline-block">
          <div class="input-group" id="name_change_container">
            <label for="full_name" class="inline-block title">{{t "Full name" }}</label>
            <input type="text" name="full_name" id="full_name" class="w-200 inline-block" value="{{ page_params.fullname }}" {{#if page_params.realm_name_changes_disabled}}disabled="disabled" {{/if}}/>
            <i class="icon-vector-question-sign change_name_tooltip" {{#unless page_params.realm_name_changes_disabled}}style="display:none" {{/unless}}data-toggle="tooltip"
            title="{{t 'Changing your name has been disabled by your Zulip organization administrators. Contact an administrator for help.' }}"></i>
            <div class="warning"></div>
          </div>

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

          <div id="pw_change_controls">
            <div class="input-group">
              <label for="old_password" class="inline-block title">{{t "Old password" }}</label>
              <input type="password" autocomplete="off" name="old_password" id="old_password" class="w-200 inline-block" value="" />
              <div class="warning">
                <a href="/accounts/password/reset/" class="sea-green" target="_blank">{{t "Forgotten it?" }}</a>
              </div>
            </div>

            <div class="input-group">
              <label for="new_password" class="inline-block title">{{t "New password" }}</label>
              <input type="password" autocomplete="off" name="new_password" id="new_password" class="w-200 inline-block" value="" />
              <div class="warning">
                <div class="progress inline-block" id="pw_strength">
                  <div class="bar bar-danger fade" style="width: 10%;"></div>
                </div>
              </div>
            </div>

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

          <div class="input-group no-border">
            <label for="" class="inline-block"></label>
            <input type="submit" class="button w-200 sea-green input-size" name="change_settings" value="Save Changes" />
          </div>
          <div class="input-group">
            <label for="" class="inline-block"></label>
            <button type="submit" class="button w-200 btn-danger input-size" id="user_deactivate_account_button">{{t 'Deactivate account' }}</button>
          </div>
        </div>
      </div>

      <div class="user-avatar-section box-shadow border-radius">
        <div class="inline-block">
          {{#if page_params.avatar_url_medium }}
            <img id="user-settings-avatar" src="{{ page_params.avatar_url_medium }}" />
          {{else}}
            <img id="user-settings-avatar" src="{{ page_params.avatar_url }}" />
          {{/if}}
          <div id="user_avatar_file_input_error" class="text-error"></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>
        </div>
        <div class="inline-block">
            <button class="button sea-green w-200 m-t-20 block input-size" id="user_avatar_upload_button">{{t 'Upload new avatar' }}</button>
            <button class="button btn-danger w-200 m-t-20 block input-size" id="user_avatar_delete_button">{{t 'Delete avatar' }}</button>
        </div>
      </div>

    </form>

      <div id="deactivate_self_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="deactivation_self_modal_label" aria-hidden="true">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h3 id="deactivation_user_modal_label">{{t "Deactivate your account" }} </h3>
        </div>
        <div class="modal-body">
          <p>{{#tr this}}By deactivating your account, you will be logged out immediately.{{/tr}}</p>
          <p>{{t "Note that any bots that you maintain will be disabled." }}</p>
        </div>
        <div class="modal-footer">
          <button class="button white" data-dismiss="modal" aria-hidden="true">{{t "Cancel" }}</button>
          <button class="button btn-danger" id="do_deactivate_self_button">{{t "Deactivate now" }}</button>

        </div>
      </div>

  </div>
</div>