mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-30 01:42:29 +03:00
855fd7ae80
closes https://github.com/TryGhost/Ghost/issues/10135 - `focusOut` events are fired before the `click` event is fired when clicking buttons whilst an input has focus, this has the effect of triggering our on-blur validations that can cause UI to jump which then results in the `mouseUp` being outside of the button which means no `click` event is fired - stops `mouseDown` event from bubbling from modal cancel/close buttons so that `focusOut` validations aren't triggered
108 lines
4.5 KiB
Handlebars
108 lines
4.5 KiB
Handlebars
<header class="modal-header" data-test-modal="webhook-form">
|
|
<h1 data-test-text="title">{{if webhook.isNew "New" "Edit"}} webhook</h1>
|
|
</header>
|
|
<button class="close" href="" title="Close" {{action "closeModal"}} {{action (optional noop) on="mouseDown"}}>
|
|
{{svg-jar "close"}}
|
|
</button>
|
|
|
|
<div class="modal-body">
|
|
<fieldset>
|
|
{{#gh-form-group errors=webhook.errors hasValidated=webhook.hasValidated property="name"}}
|
|
<label for="webhook-name" class="fw6">Name</label>
|
|
{{gh-text-input
|
|
value=(readonly webhook.name)
|
|
input=(action (mut webhook.name) value="target.value")
|
|
focus-out=(action "validate" "name" target=webhook)
|
|
id="webhook-name"
|
|
name="name"
|
|
class="gh-input mt1"
|
|
placeholder="Webhook name..."
|
|
autofocus="autofocus"
|
|
autocapitalize="off"
|
|
autocorrect="off"
|
|
data-test-input="webhook-name"}}
|
|
{{gh-error-message errors=webhook.errors property="name" data-test-error="webhook-name"}}
|
|
{{/gh-form-group}}
|
|
</fieldset>
|
|
<fieldset>
|
|
{{#gh-form-group errors=webhook.errors hasValidated=webhook.hasValidated property="event"}}
|
|
<label for="webhook-event" class="fw6">Event</label>
|
|
<span class="gh-select">
|
|
{{one-way-select webhook.event
|
|
options=availableEvents
|
|
optionValuePath="event"
|
|
optionLabelPath="name"
|
|
optionTargetPath="event"
|
|
groupLabelPath="group"
|
|
class="mt1"
|
|
includeBlank=true
|
|
prompt="Select an event"
|
|
update=(action "selectEvent")
|
|
id="webhook-event"
|
|
name="event"
|
|
data-test-select="webhook-event"}}
|
|
{{svg-jar "arrow-down-small"}}
|
|
</span>
|
|
{{gh-error-message errors=webhook.errors property="event" data-test-error="webhook-event"}}
|
|
{{/gh-form-group}}
|
|
</fieldset>
|
|
<fieldset>
|
|
{{#gh-form-group errors=webhook.errors hasValidated=webhook.hasValidated property="targetUrl"}}
|
|
<label for="webhook-targetUrl" class="fw6">Target URL</label>
|
|
{{gh-text-input
|
|
value=(readonly webhook.targetUrl)
|
|
input=(action (mut webhook.targetUrl) value="target.value")
|
|
focus-out=(action "validate" "targetUrl" target=webhook)
|
|
id="webhook-targetUrl"
|
|
name="targetUrl"
|
|
class="gh-input mt1"
|
|
placeholder="Webhook target URL..."
|
|
autofocus="autofocus"
|
|
autocapitalize="off"
|
|
autocorrect="off"
|
|
data-test-input="webhook-targetUrl"}}
|
|
{{gh-error-message errors=webhook.errors property="targetUrl" data-test-error="webhook-targetUrl"}}
|
|
{{/gh-form-group}}
|
|
</fieldset>
|
|
{{#if config.enableDeveloperExperiments}}
|
|
<fieldset>
|
|
{{#gh-form-group errors=webhook.errors hasValidated=webhook.hasValidated property="secret"}}
|
|
<label for="webhook-secret" class="fw6">Secret</label>
|
|
{{gh-text-input
|
|
value=(readonly webhook.secret)
|
|
oninput=(action (mut webhook.secret) value="target.value")
|
|
focus-out=(action "validate" "secret" target=webhook)
|
|
id="webhook-secret"
|
|
name="secret"
|
|
class="gh-input mt1"
|
|
placeholder="Webhook secret..."
|
|
autofocus="autofocus"
|
|
autocapitalize="off"
|
|
autocorrect="off"
|
|
data-test-input="webhook-secret"}}
|
|
{{gh-error-message errors=webhook.errors property="secret" data-test-error="webhook-secret"}}
|
|
{{/gh-form-group}}
|
|
</fieldset>
|
|
{{/if}}
|
|
{{#if error}}
|
|
<p class="red">{{error}}</p>
|
|
{{/if}}
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<button
|
|
class="gh-btn"
|
|
{{action "closeModal"}}
|
|
{{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
|
|
{{action (optional noop) on="mouseDown"}}
|
|
data-test-button="cancel-webhook"
|
|
>
|
|
<span>Cancel</span>
|
|
</button>
|
|
{{gh-task-button buttonText
|
|
successText=successText
|
|
task=saveWebhook
|
|
class="gh-btn gh-btn-green gh-btn-icon"
|
|
data-test-button="save-webhook"}}
|
|
</div>
|