Ghost/ghost/admin/app/components/modals/new-custom-integration.hbs
Kevin Ansfield d0f6dd7fef Refactored custom integration creation and limits modals
refs https://github.com/TryGhost/Team/issues/559

- switched to new ember-promise-modals pattern
- removed controller and template in favor of opening modals directly from the route
- removed unused `mousedown` event handlers - they are only necessary when an input blur would trigger validation errors
- fixed Enter key not triggering create action by adding an `{{on-key "Enter"}}` event handler to the name input
- fixed scroll not resetting to top of integrations screens when navigating between them by adding `{{scroll-top}}` element modifier to the main content sections
2022-01-13 13:16:13 +00:00

48 lines
1.9 KiB
Handlebars

<div class="modal-content">
<header class="modal-header" data-test-modal="new-integration">
<h1>New custom integration</h1>
</header>
{{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
<button class="close" href title="Close" {{on "click" @close}}>
{{svg-jar "close"}}
</button>
<div class="modal-body">
<fieldset>
<GhFormGroup @errors={{this.integration.errors}} @hasValidated={{this.integration.hasValidated}} @property="name">
<label for="new-integration-name" class="fw6">Name</label>
<input type="text"
value={{this.integration.name}}
{{on "input" this.updateName}}
{{on-key "Enter" (perform this.createIntegrationTask)}}
id="new-integration-name"
class="gh-input mt1"
name="integration-name"
autofocus="autofocus"
{{autofocus}}
autocapitalize="off"
autocorrect="off"
data-test-input="new-integration-name">
<GhErrorMessage @errors={{this.integration.errors}} @property="name" data-test-error="new-integration-name" />
</GhFormGroup>
</fieldset>
{{#if this.errorMessage}}
<p class="error"><strong class="response">{{this.errorMessage}}</strong></p>
{{/if}}
</div>
<div class="modal-footer">
<button class="gh-btn" {{on "click" @close}} data-test-button="cancel-new-integration">
<span>Cancel</span>
</button>
<GhTaskButton
@buttonText="Create"
@successText="Created"
@task={{this.createIntegrationTask}}
@class="gh-btn gh-btn-black gh-btn-icon"
data-test-button="create-integration" />
</div>
</div>