zulip/web/templates/settings/api_key_modal.hbs

<div class="micromodal" id="api_key_modal" aria-hidden="true">
    <div class="modal__overlay" tabindex="-1">
        <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="api_key_modal_label">
            <header class="modal__header">
                <h1 class="modal__title" id="api_key_modal_label">
                    {{t "Show API key" }}
                </h1>
                <button class="modal__close" aria-label="{{t 'Close modal' }}" data-micromodal-close></button>
            </header>
            <main class="modal__content">
                <div id="password_confirmation">
                    <span class="alert-notification" id="api_key_status"></span>
                    <div id="api_key_form">
                        <p>{{t "Please re-enter your password to confirm your identity." }}</p>
                        <div class="settings-password-div">
                            <label for="get_api_key_password" class="modal-field-label">{{t "Your password" }}</label>
                            <div class="password-input-row">
                                <input type="password" autocomplete="off" name="password" id="get_api_key_password" class=" modal_password_input" value="" />
                                <i class="fa fa-eye-slash password_visibility_toggle tippy-zulip-tooltip" role="button"></i>
                            </div>
                        </div>
                        <p class="small">
                            {{#tr}}If you don't know your password, you can <z-link>reset it</z-link>.
                                {{#*inline "z-link"}}<a href="/accounts/password/reset/" target="_blank" rel="noopener noreferrer">{{> @partial-block}}</a>{{/inline}}
                            {{/tr}}
                        </p>
                    </div>
                </div>
                <div id="show_api_key">
                    <p>{{t "Your API key:" }}</p>
                    <p><b class="highlighted-element"><span id="api_key_value"></span></b></p>
                    <div id="user_api_key_error" class="text-error"></div>
                </div>
            </main>
            <footer class="modal__footer">
                <button type="submit" name="view_api_key" id="get_api_key_button" class="modal__button dialog_submit_button">
                    {{t 'Get API key' }}
                </button>
                <div id="api_key_buttons">
                    <button class="modal__button dialog_submit_button" id="regenerate_api_key" aria-label="{{t 'Generate new API key' }}">{{t "Generate new API key" }}</button>
                    <a class="modal__button dialog_submit_button" id="download_zuliprc" download="zuliprc" tabindex="0">{{t "Download zuliprc" }}</a>
                </div>
            </footer>
        </div>
    </div>
</div>