TryGhost/Ghost

<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" type="button" {{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" data-test-button="cancel-new-integration" type="button" {{on "click" @close}}>
            <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>