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

<div id="bot-settings" class="settings-section" data-name="your-bots">

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

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

        <ul class="nav nav-tabs nav-justified" id="bots_lists_navbar">
            <li class="active active-bots-tab"><a>{{t "Active bots" }}</a></li>
            <li class="inactive-bots-tab"><a>{{t "Inactive bots" }}</a></li>
        </ul>

        <ol class="bots_list" id="active_bots_list">
        </ol>

        <ol class="bots_list" id="inactive_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">{{t "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 'Cookie Bot' }}" 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="cookie" value="" />
                        -bot@{{ page_params.realm_bot_domain }}
                        <div>
                            <label for="create_bot_short_name" generated="true" class="text-error"></label>
                        </div>
                    </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="button white rounded small btn-danger display-none" id="bot_avatar_clear_button">{{t "Clear avatar" }}</button>
                        <button class="button white rounded" 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>
                    <button type="submit" class="button white rounded sea-green" id="create_bot_button">
                        {{t 'Create bot' }}
                    </button>
                </div>
            </form>
        </div>

        <hr class="settings_separator" />

        <div class="form-horizontal" id="api_key_button_box">
            <div class="input-group side-padded-container">
                <p class="api-key-note">
                    {{#tr this}}
                    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.
                    {{/tr}}
                </p>
                <button class="button white rounded" id="api_key_button">{{t "Show/change your API key" }}</button>
            </div>
        </div>
        <div id="get_api_key_box" class="side-padded-container">
            <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">
                    <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" class="side-padded-container">
            <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>
            <a id="download_zuliprc" download="{{zuliprc}}" class="btn btn-success">
                {{t "Download .zuliprc" }}
            </a>
            <div id="user_api_key_error text-error">
            </div>
        </div>

    </div>
</div>