Ghost/ghost/admin/app/components/modal-invite-new-user.hbs

<header class="modal-header">
    <h1>Invite a new user</h1>
</header>
{{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
<a class="close" href role="button" title="Close" {{action "closeModal"}} {{action (optional this.noop) on="mouseDown"}}>
    {{svg-jar "close"}}<span class="hidden">Close</span>
</a>

<div class="modal-body">
    <fieldset>
        <GhFormGroup @errors={{this.errors}} @hasValidated={{this.hasValidated}} @property="email">
            <label for="new-user-email">Email address</label>
            <GhTextInput
                @class="email"
                @id="new-user-email"
                @type="email"
                @placeholder="Email address"
                @name="email"
                @shouldFocus={{true}}
                @autocapitalize="off"
                @autocorrect="off"
                @value={{readonly email}}
                @input={{action (mut email) value="target.value"}}
                @keyEvents={{hash
                    Enter=(action "confirm")
                }}
                @focus-out={{action "validate" "email"}}
            />
            <GhErrorMessage @errors={{this.errors}} @property="email" />
        </GhFormGroup>


        <GhFormGroup @class="for-select" @errors={{this.errors}} @hasValidated={{this.hasValidated}} @property="role">
            <label for="new-user-role">Role</label>
            <span class="gh-select">
                <OneWaySelect
                    @id="new-user-role"
                    @name="role"
                    @options={{readonly this.roles}}
                    @optionValuePath="id"
                    @optionLabelPath="name"
                    @value={{this.role}}
                    @update={{action "setRole"}}
                />
                {{svg-jar "arrow-down-small"}}
            </span>
            <GhErrorMessage @errors={{this.errors}} @property="role" />
        </GhFormGroup>
    </fieldset>
</div>

<div class="modal-footer">
    <GhTaskButton @buttonText="Send invitation now"
        @successText="Sent"
        @task={{this.sendInvitation}}
        @class="gh-btn gh-btn-black gh-btn-icon"
        @disabled={{this.fetchRoles.isRunning}}
        @disableMouseDown="true"
        data-test-button="send-user-invite" />
</div>