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

<div id="account-settings" class="settings-section show" data-name="your-account">
    <div class="alert" id="account-settings-status"></div>
    <div class="account-settings-form">
        <div class="inline-block">
            <form class="email-change-form grid">
                <h3 class="light">{{t "User settings" }}</h3>
                <div class="input-group user-name-section">
                    <label class="inline-block title">{{t "Email" }}</label>
                    <a id="change_email" {{#unless page_params.realm_email_changes_disabled}}href="#change_email"{{/unless}}>
                        <button type="button" class="button small rounded inline-block" id='email_value'
                            {{#if page_params.realm_email_changes_disabled}} disabled="true" {{/if}}>
                            {{page_params.email}}
                            <i class="fa fa-pencil"></i>
                        </button>
                    </a>
                </div>

                <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>

                <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-label="{{t 'Close' }}"><span aria-hidden="true">×</span></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 }}" autocomplete="off" />
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button id='change_email_button' class="button rounded sea-green" data-dismiss="modal">{{t "Change" }}</button>
                        <button class="button white rounded" data-dismiss="modal">{{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.full_name }}" {{#if page_params.realm_name_changes_disabled}}disabled="disabled" {{/if}}/>
                            <i class="icon-vector-question-sign change_name_tooltip" data-toggle="tooltip"
                            {{#unless page_params.realm_name_changes_disabled}}style="display:none" {{/unless}}
                            title="{{t 'Changing your name has been disabled by your Zulip organization administrators. Contact an administrator for help.' }}"/>
                            <i class="icon-vector-question-sign change_name_tooltip" data-toggle="tooltip"
                            {{#if page_params.realm_name_changes_disabled}}style="display:none" {{/if}}
                            title="{{t 'Zulip has full unicode support, so you can spell your name exactly how you want it to appear.' }}"/>
                            <div class="warning"></div>
                        </div>

                        <!-- password start -->
                        {{#if page_params.realm_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 button rounded inline-block input-size" data-dismiss="modal">{{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=""
                                 data-min-length="{{ page_params.password_min_length }}" data-min-quality="{{ page_params.password_min_quality }}" />
                                <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>
                            <button type="submit" class="button rounded w-200 sea-green input-size" name="change_settings">
                                {{t 'Save changes'}}
                            </button>
                        </div>
                        <div class="input-group">
                            <label for="" class="inline-block"></label>
                            <button type="submit" class="button rounded w-200 btn-danger input-size" id="user_deactivate_account_button">
                                {{t 'Deactivate account' }}
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>

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

            <div class="inline-block">
                <img id="user-settings-avatar" src="{{ page_params.avatar_url_medium }}" />
                <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="avatar-controls">
                <button class="button rounded sea-green w-200 block" id="user_avatar_upload_button">
                    {{t 'Upload new avatar' }}
                </button>
                <button class="button rounded btn-danger w-200 m-t-20 block" id="user_avatar_delete_button">
                    {{t 'Delete avatar' }}
                </button>
            </div>
        </div>
        <div class="clear-float"></div>

        <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-label="{{t 'Close' }}"><span aria-hidden="true">×</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">{{t "Deactivate now" }}</button>
            </div>
        </div>

        <hr class="settings_separator" />

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

            <div class="input-group">
                <p class="api-key-note">
                    {{#tr this}}
                    Creating a bot, and using the bot's account / API key, is the recommended way to use
                    the Zulip API. However, you can also use your personal API key if you need to a way
                    to automatically send and edit messages from your own account.
                    {{/tr}}
                </p>
                <button class="button rounded" id="api_key_button">{{t "Show/change your API key" }}</button>
            </div>
        </div>
        <div id="get_api_key_box">
            <p>{{t "Please re-enter your password to confirm your identity." }}
              <a href="/accounts/password/reset/" target="_blank">{{t "Forgotten it?" }}</a></p>
            <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">
                    <button type="submit" name="view_api_key"
                           class="button sea-green">{{t 'Get API key' }}</button>
                </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="button white rounded regenerate_api_key">
                {{t "Generate new API key" }}
            </button>
            <a id="download_zuliprc" download="{{zuliprc}}" class="button sea-green">
                {{t "Download .zuliprc" }}
            </a>
            <div id="user_api_key_error text-error">
            </div>
        </div>

    </div>
</div>