Ghost/ghost/admin/app/components/modal-webhook-form.hbs
Kevin Ansfield 09435ecf76 Co-located component template files
no issue

Keeps component JS backing files and template files in the same directory which avoids hunting across directories when working with components. Also lets you see all components when looking at one directory, whereas previously template-only or js-only components may not have been obvious without looking at both directories.

- ran [codemod](https://github.com/ember-codemods/ember-component-template-colocation-migrator/) for app-level components
- manually moved in-repo-addon component templates in `lib/koenig-editor`
- removed all explicit `layout` imports as JS/template associations are now made at build-time removing the need for them
- updated `.embercli` to default to new flat component structure
2020-05-18 13:14:08 +01:00

108 lines
4.8 KiB
Handlebars

<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>
<GhFormGroup @errors={{this.webhook.errors}} @hasValidated={{this.webhook.hasValidated}} @property="name">
<label for="webhook-name" class="fw6">Name</label>
<GhTextInput
@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" />
</GhFormGroup>
</fieldset>
<fieldset>
<GhFormGroup @errors={{this.webhook.errors}} @hasValidated={{this.webhook.hasValidated}} @property="event">
<label for="webhook-event" class="fw6">Event</label>
<span class="gh-select">
<OneWaySelect @value={{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" />
</GhFormGroup>
</fieldset>
<fieldset>
<GhFormGroup @errors={{this.webhook.errors}} @hasValidated={{this.webhook.hasValidated}} @property="targetUrl">
<label for="webhook-targetUrl" class="fw6">Target URL</label>
<GhTextInput
@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" />
</GhFormGroup>
</fieldset>
{{#if this.config.enableDeveloperExperiments}}
<fieldset>
<GhFormGroup @errors={{this.webhook.errors}} @hasValidated={{this.webhook.hasValidated}} @property="secret">
<label for="webhook-secret" class="fw6">Secret</label>
<GhTextInput
@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" />
</GhFormGroup>
</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>
<GhTaskButton @buttonText={{this.buttonText}}
@successText={{this.successText}}
@task={{this.saveWebhook}}
@class="gh-btn gh-btn-green gh-btn-icon"
data-test-button="save-webhook" />
</div>