Ghost/ghost/admin/app/templates/integrations/slack.hbs
2021-02-22 22:51:02 +01:00

98 lines
6.0 KiB
Handlebars

<section class="gh-canvas">
<GhCanvasHeader class="gh-canvas-header">
<h2 class="gh-canvas-title" data-test-screen-title>
<LinkTo @route="integrations" data-test-link="integrations-back">Integrations</LinkTo>
<span>{{svg-jar "arrow-right"}}</span>
Slack
</h2>
<section class="view-actions">
<GhTaskButton @task={{this.save}} @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.slackSettings.errors}} @hasValidated={{this.slackSettings.hasValidated}} @property="url">
<GhTextInput
@placeholder="https://hooks.slack.com/services/..."
@name="slack[url]"
@value={{readonly this.slackSettings.url}}
@input={{action "updateURL" value="target.value"}}
@keyEvents={{hash
Enter=(action "save")
}}
@focus-out={{action "triggerDirtyState"}}
data-test-slack-url-input={{true}}
/>
{{#unless this.slackSettings.errors.url}}
<p>Set up a new incoming webhook <a href="https://my.slack.com/apps/new/A0F7XDUAZ-incoming-webhooks" target="_blank">here</a>, and grab the URL.</p>
{{else}}
<GhErrorMessage @errors={{this.slackSettings.errors}} @property="url" 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.slackSettings.errors}} @hasValidated={{this.slackSettings.hasValidated}} @property="username">
<GhTextInput
@placeholder="Ghost"
@name="slack[username]"
@value={{readonly this.slackSettings.username}}
@input={{action "updateUsername" value="target.value"}}
@keyEvents={{hash
Enter=(action "save")
}}
@focus-out={{action "triggerDirtyState"}}
data-test-slack-username-input={{true}}
/>
{{#if this.slackSettings.errors.username}}
<GhErrorMessage @errors={{this.slackSettings.errors}} @property="username" />
{{/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>