Ghost/ghost/admin/app/templates/components/modal-webhook-form.hbs

<header class="modal-header" data-test-modal="webhook-form">
    <h1 data-test-text="title">{{if this.webhook.isNew "New" "Edit"}} webhook</h1>
</header>
<button class="close" href title="Close" {{action "closeModal"}} {{action (optional this.noop) on="mouseDown"}}>
    {{svg-jar "close"}}
</button>

<div class="modal-body">
    <fieldset>
        {{#gh-form-group errors=this.webhook.errors hasValidated=this.webhook.hasValidated property="name"}}
            <label for="webhook-name" class="fw6">Name</label>
            {{gh-text-input
                value=(readonly this.webhook.name)
                input=(action (mut this.webhook.name) value="target.value")
                focus-out=(action "validate" "name" target=this.webhook)
                id="webhook-name"
                name="name"
                class="gh-input mt1"
                placeholder="Webhook name..."
                shouldFocus=true
                autocapitalize="off"
                autocorrect="off"
                data-test-input="webhook-name"}}
            <GhErrorMessage @errors={{this.webhook.errors}} @property="name" data-test-error="webhook-name" />
        {{/gh-form-group}}
    </fieldset>
    <fieldset>
        {{#gh-form-group errors=this.webhook.errors hasValidated=this.webhook.hasValidated property="event"}}
            <label for="webhook-event" class="fw6">Event</label>
            <span class="gh-select">
                {{one-way-select this.webhook.event
                    options=this.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>
            <GhErrorMessage @errors={{this.webhook.errors}} @property="event" data-test-error="webhook-event" />
        {{/gh-form-group}}
    </fieldset>
    <fieldset>
        {{#gh-form-group errors=this.webhook.errors hasValidated=this.webhook.hasValidated property="targetUrl"}}
            <label for="webhook-targetUrl" class="fw6">Target URL</label>
            {{gh-text-input
                value=(readonly this.webhook.targetUrl)
                input=(action (mut this.webhook.targetUrl) value="target.value")
                focus-out=(action "validate" "targetUrl" target=this.webhook)
                id="webhook-targetUrl"
                name="targetUrl"
                class="gh-input mt1"
                placeholder="Webhook target URL..."
                shouldFocus=true
                autocapitalize="off"
                autocorrect="off"
                data-test-input="webhook-targetUrl"}}
            <GhErrorMessage @errors={{this.webhook.errors}} @property="targetUrl" data-test-error="webhook-targetUrl" />
        {{/gh-form-group}}
    </fieldset>
    {{#if this.config.enableDeveloperExperiments}}
        <fieldset>
            {{#gh-form-group errors=this.webhook.errors hasValidated=this.webhook.hasValidated property="secret"}}
                <label for="webhook-secret" class="fw6">Secret</label>
                {{gh-text-input
                    value=(readonly this.webhook.secret)
                    oninput=(action (mut this.webhook.secret) value="target.value")
                    focus-out=(action "validate" "secret" target=this.webhook)
                    id="webhook-secret"
                    name="secret"
                    class="gh-input mt1"
                    placeholder="Webhook secret..."
                    shouldFocus=true
                    autocapitalize="off"
                    autocorrect="off"
                    data-test-input="webhook-secret"}}
                <GhErrorMessage @errors={{this.webhook.errors}} @property="secret" data-test-error="webhook-secret" />
            {{/gh-form-group}}
        </fieldset>
    {{/if}}
    {{#if this.error}}
        <p class="red">{{this.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 this.noop) on="mouseDown"}}
        data-test-button="cancel-webhook"
    >
        <span>Cancel</span>
    </button>
    {{gh-task-button this.buttonText
        successText=this.successText
        task=this.saveWebhook
        class="gh-btn gh-btn-green gh-btn-icon"
        data-test-button="save-webhook"}}
</div>