Ghost/ghost/admin/app/templates/settings/integrations/slack.hbs

<section class="gh-canvas">
    <GhCanvasHeader class="gh-canvas-header">
        <h2 class="gh-canvas-title" data-test-screen-title>
            <LinkTo @route="settings">Settings</LinkTo>
            <span>{{svg-jar "arrow-right"}}</span>
            <LinkTo @route="settings.integrations" data-test-link="integrations-back">Integrations</LinkTo>
            <span>{{svg-jar "arrow-right"}}</span>
            Slack
        </h2>
        <section class="view-actions">
            <GhTaskButton @task={{this.saveTask}} @class="gh-btn gh-btn-primary gh-btn-icon" data-test-save-button={{true}} />
        </section>
    </GhCanvasHeader>

    {{#if this.showLeaveSettingsModal}}
        <GhFullscreenModal @modal="leave-settings"
            @confirm={{action "leaveSettings"}}
            @close={{action "toggleLeaveSettingsModal"}}
            @modifier="action wide" />
    {{/if}}

    <section class="view-container">
        <section class="gh-main-section bt app-grid">
            <div class="gh-main-section-block app-detail-heading app-grid">
                <div class="app-cell">
                    <img class="app-icon" src="assets/img/slackicon.png" />
                </div>
                <div class="app-cell">
                    <h3>Slack</h3>
                    <p>A messaging app for teams</p>
                </div>
            </div>
        </section>

        <section class="gh-main-section">
            <h4 class="gh-main-section-header small bn">Slack configuration</h4>
            <div class="gh-main-section-block">
                <div class="gh-main-section-content grey">
                    <form class="app-config-form" id="slack-settings" novalidate="novalidate" {{action "save" on="submit"}}>

                        <div class="gh-main-section-block">
                            <div class="gh-setting-first">
                                <div class="gh-setting-content gh-setting-content--no-action">
                                    <div class="gh-setting-title">Webhook URL</div>
                                    <div class="gh-setting-desc">Automatically send newly published posts to a channel in Slack or any Slack-compatible service like Discord or Mattermost.</div>
                                    <div class="gh-setting-content-extended">
                                        <GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="slackUrl">
                                            <GhTextInput
                                                @placeholder="https://hooks.slack.com/services/..."
                                                @name="slack_url"
                                                @value={{readonly this.settings.slackUrl}}
                                                @input={{action (mut this.settings.slackUrl) value="target.value"}}
                                                @focus-out={{action "validate" "slackUrl" target=this.settings}}
                                                @keyEvents={{hash
                                                    Enter=(action "save")
                                                }}
                                                data-test-slack-url-input={{true}}
                                            />
                                            {{#unless this.settings.errors}}
                                                <p>Set up a new incoming webhook <a href="https://my.slack.com/apps/new/A0F7XDUAZ-incoming-webhooks" target="_blank" rel="noopener noreferrer">here</a>, and grab the URL.</p>
                                            {{else}}
                                                <GhErrorMessage @errors={{this.settings.errors}} @property="slackUrl" data-test-error="slack-url" />
                                            {{/unless}}
                                        </GhFormGroup>
                                    </div>
                                </div>
                            </div>
                            <div class="gh-setting-last">
                                <div class="gh-setting-content gh-setting-content--no-action">
                                    <div class="gh-setting-title">Username</div>
                                    <div class="gh-setting-desc">The username to display messages from</div>
                                    <div class="gh-setting-content-extended">
                                        <GhFormGroup @errors={{this.settings.errors}} @hasValidated={{this.settings.hasValidated}} @property="username">
                                            <GhTextInput
                                                @placeholder="Ghost"
                                                @name="slack_username"
                                                @value={{readonly this.settings.slackUsername}}
                                                @input={{action (mut this.settings.slackUsername) value="target.value"}}
                                                @keyEvents={{hash
                                                    Enter=(action "save")
                                                }}
                                                data-test-slack-username-input={{true}}
                                            />
                                            {{#if this.settings.errors}}
                                                <GhErrorMessage @errors={{this.settings.errors}} @property="slackUsername" />
                                            {{/if}}
                                        </GhFormGroup>
                                    </div>
                                    <GhTaskButton @buttonText="Send test notification" @task={{this.sendTestNotification}} @successText="Sent" @class="gh-btn gh-btn-icon" @disabled={{this.testNotificationDisabled}} data-test-send-notification-button="true" />
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </section>
    </section>
</section>