zulip/static/templates/settings/account_settings.hbs

<div id="account-settings" class="settings-section show" data-name="your-account">
    <div class="alert" id="dev-account-settings-status"></div>
    <div class="account-settings-form">
        <div class="inline-block">
            <form class="email-change-form grid">
                <h3 class="inline-block">{{t "User settings" }}</h3>
                <div class="alert-notification" id="account-settings-status"></div>
                <div class="input-group user-name-section">
                    <label class="inline-block title">{{t "Email" }}</label>
                    <button id='change_email' type="button" class="button btn-link small rounded inline-block" id='email_value'
                      {{#if (and page_params.realm_email_changes_disabled (not page_params.is_admin))}}disabled="disabled"{{/if}}>
                        {{page_params.delivery_email}}
                        <i class="fa fa-pencil"></i>
                    </button>
                    <i class="fa fa-question-circle change_email_tooltip settings-info-icon" {{#if (or (not page_params.realm_email_changes_disabled) page_params.is_admin)}}style="display: none;"{{/if}} data-toggle="tooltip"
                      title="{{t 'Email address changes are disabled in this organization.' }}"></i>
                </div>

                <div id="change_email_modal" class="modal modal-bg hide fade" 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-label="{{t 'Close' }}"><span aria-hidden="true">&times;</span></button>
                        <h3 class="inline-block" id="change_email_modal_label">{{t "Change email" }}</h3>
                        <div class="alert-notification change_email_info"></div>
                    </div>
                    <div class="modal-body">
                        <div class="input-group email_change_container">
                            <label for="email">{{t "New email" }}</label>
                            <input type="text" name="email" value="{{ page_params.delivery_email }}" autocomplete="off" spellcheck="false" autofocus="autofocus"/>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="button white rounded" type="button" data-dismiss="modal">{{t "Cancel" }}</button>
                        <button id='change_email_button' class="button rounded sea-green" data-dismiss="modal">{{t "Change" }}</button>
                    </div>
                </div>
            </form>

            {{#if page_params.two_fa_enabled }}
            <p for="two_factor_auth" class="inline-block title">
                {{t "Two factor authentication" }}: {{#if page_params.two_fa_enabled_user }}{{t "Enabled" }}{{else}}{{t "Disabled" }}{{/if}}
                <a target="_blank" id="two_factor_auth" href="/account/two_factor/" title="{{t 'Setup two factor authentication' }}">[{{t "Setup" }}]</a>
            </p>
            {{/if}}

            <form class="form-horizontal full-name-change-form">
                <div class="input-group inline-block grid user-name-parent">
                    <div class="user-name-section inline-block">
                        <label for="full_name" class="inline-block title">{{t "Full name" }}</label>
                        <button type="button" id='change_full_name' class="button btn-link small white rounded inline-block" id="full_name"
                          {{#unless user_can_change_name}}disabled="disabled"{{/unless}}>
                            <span id="full_name_value">{{page_params.full_name}}</span>
                            <i class="fa fa-pencil"></i>
                        </button>
                        <i class="fa fa-question-circle change_name_tooltip settings-info-icon" data-toggle="tooltip"
                          {{#if user_can_change_name}}style="display:none"{{/if}}
                          title="{{t 'Name changes are disabled in this organization. Contact an administrator to change your name.' }}"/>
                    </div>
                    <div id="change_full_name_modal" class="modal modal-bg hide fade" tabindex="-1" role="dialog"
                      aria-labelledby="change_full_name_modal_label" aria-hidden="true">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="{{t 'Close' }}"><span aria-hidden="true">&times;</span></button>
                            <h3 class="inline-block" id="change_full_name_modal_label">{{t "Change full name" }}</h3>
                            <div class="alert-notification change_full_name_info"></div>
                        </div>
                        <div class="modal-body">
                            <div class="input-group full_name_change_container">
                                <label for="email">{{t "New full name" }}</label>
                                <input type="text" name="full_name" value="{{ page_params.full_name }}" autocomplete="off" spellcheck="false" autofocus="autofocus"/>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button class="button white rounded" type="button" data-dismiss="modal">{{t "Cancel" }}</button>
                            <button id='change_full_name_button' class="button rounded sea-green" data-dismiss="modal">{{t "Change" }}</button>
                        </div>
                    </div>
                </div>
            </form>

            <form class="password-change-form grid">
                {{#if page_params.realm_email_auth_enabled}}
                <div class="user-name-section">
                    <label class="inline-block title">{{t "Password" }}</label>
                    <div class="input-group inline-block" id="pw_change_link">
                        <button id="change_password" type="button" class="change_password_button btn-link small button rounded inline-block" data-dismiss="modal">********<i class="fa fa-pencil"></i></button>
                    </div>
                </div>
                {{/if}}

                <div id="change_password_modal" class="modal modal-bg hide fade" tabindex="-1" role="dialog"
                  aria-labelledby="change_password_modal_label" aria-hidden="true">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="{{t 'Close' }}"><span aria-hidden="true">&times;</span></button>
                        <h3 class="inline-block" id="change_password_modal_label">{{t "Change password" }}</h3>
                        <div class="alert-notification change_password_info"></div>
                    </div>
                    <div class="flex-row normal">
                        <div class="field">
                            <label for="old_password" class="title">{{t "Old password" }}</label>
                            <input type="password" autocomplete="off" name="old_password" id="old_password" class="w-200 inline-block" value="" />
                            <div class="info">
                                <a href="/accounts/password/reset/" class="sea-green" target="_blank">{{t "Forgotten it?" }}</a>
                            </div>

                        </div>
                        <div class="field">
                            <label for="new_password" class="title">{{t "New password" }}</label>
                            <input type="password" autocomplete="off" name="new_password" id="new_password" class="w-200 inline-block" value=""
                              data-min-length="{{ page_params.password_min_length }}" data-min-guesses="{{ page_params.password_min_guesses }}" />
                            <div class="progress inline-block" id="pw_strength">
                                <div class="bar bar-danger fade" style="width: 10%;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="button white rounded" type="button" data-dismiss="modal">{{t "Cancel" }}</button>
                        <button id='change_password_button' class="button rounded sea-green">{{t "Change" }}</button>
                    </div>
                </div>
            </form>

            <div class="user-role input-group grid">
                <label for="user_role" class="inline-block title">{{t "Role" }}</label>
                <span>
                    {{#if page_params.is_admin}}
                    {{t "Administrator" }}
                    {{else if page_params.is_guest}}
                    {{t "Guest" }}
                    {{else}}
                    {{t "Member" }}
                    {{/if}}
                </span>
            </div>

            <form class="deactivate_account grid">
                <div class="input-group">
                    <button type="submit" class="button rounded btn-danger" id="user_deactivate_account_button">
                        {{t 'Deactivate account' }}
                    </button>
                </div>
            </form>

            <h3 class="inline-block" id="custom-field-header" {{#unless page_params.custom_profile_fields}}style="display: none"{{/unless}}>{{t "Profile" }}</h3>
            <form class="form-horizontal custom-profile-fields-form grid"></form>
            <button class="button rounded sea-green w-200 block" id="show_my_user_profile_modal">
                {{t 'Preview profile' }}
                <i class="fa fa-external-link" aria-hidden="true" title="{{t 'Preview profile' }}"></i>
            </button>

        </div>

        <div class="inline-block user-avatar-section">
            <h3>{{t "Profile picture" }}</h3>

            <div class="inline-block">
                <div id="user-settings-avatar">
                    <div id="user-avatar-block" style="background-image: url({{ page_params.avatar_url_medium }})" {{#if page_params.is_guest}} class="guest-avatar"{{/if}}/>
                    <span id="user_avatar_delete_button" aria-label="{{t 'Delete profile picture'}}" role="button" tabindex="0"
                      {{#unless user_can_change_avatar}}style="display:none"{{/unless}}>
                        &times;
                    </span>
                    <div id="user-avatar-source">
                        <a href="https://en.gravatar.com/" target="_blank">{{t "Avatar from Gravatar" }}</a>
                    </div>
                </div>
                <input type="file" name="user_avatar_file_input" class="notvisible" id="user_avatar_file_input" value="{{t 'Upload profile picture' }}" />
                <div id="upload_avatar_spinner"></div>
            </div>
            <div class="avatar-controls">
                <button class="button rounded sea-green w-200 block" id="user_avatar_upload_button"
                  {{#if (and (not page_params.is_admin) page_params.realm_avatar_changes_disabled)}}style="display:none"{{/if}}>
                    {{t 'Upload new profile picture' }}
                </button>
                <div id="user_avatar_file_input_error" class="text-error"></div>
            </div>
        </div>
        <div class="clear-float"></div>

        <div id="deactivate_self_modal" class="modal modal-bg 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-label="{{t 'Close' }}"><span aria-hidden="true">&times;</span></button>
                <h3 id="deactivation_self_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" data-dismiss="modal">{{t "Cancel" }}</button>
                <button class="button btn-danger rounded" id="do_deactivate_self_button">
                    <object class="loader" type="image/svg+xml" data="/static/images/loader.svg"></object>
                    <span>{{t "Deactivate now" }}</span>
                </button>
            </div>
        </div>

        <hr class="settings_separator" />

        <div class="form-horizontal" id="api_key_button_box">
            <h3>{{t "API key" }}</h3>

            <div class="input-group">
                <p class="api-key-note">
                    {{#tr this}}
                    An API key can be used to programmatically access a Zulip account.
                    Anyone with access to your API key has the ability to read your messages, send
                    messages on your behalf, and otherwise impersonate you on Zulip, so you should
                    guard your API key as carefully as you guard your password. <br />
                    We recommend creating bots and using the bots' accounts and API keys to access
                    the Zulip API, unless the task requires access to your account.
                    {{/tr}}
                </p>
                <button class="button rounded" id="api_key_button">{{t "Show/change your API key" }}</button>
            </div>
        </div>
        <!-- Render /settings/api_key_modal.hbs after #api_key_button is clicked
        to avoid password being inserted by password manager too aggressively. -->
    </div>
</div>