Ghost/ghost/admin/app/components/modal-invite-new-user.hbs
Rishabh 95c3759282 Removed focus out error handling for invite staff modal
refs https://github.com/TryGhost/Team/issues/732

This fix is part of the broader design change we want in Admin, moving away from showing errors on focus out in fields with feels a little aggressive and instead change it to the default behaviour of showing errors when submitting the form. This change updates this behaviour for invite staff modal.
2021-07-19 14:02:15 +05:30

58 lines
2.3 KiB
Handlebars
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<header class="modal-header" data-test-modal="invite-staff-user">
<h1>Invite a new staff user</h1>
<p>Send an invitation for a new person to create a staff account on your site, and select a role that matches what youd like them to be able to do.</p>
</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="youremail@example.com"
@name="email"
@shouldFocus={{true}}
@autocapitalize="off"
@autocorrect="off"
@value={{readonly email}}
@input={{action (mut email) value="target.value"}}
@keyEvents={{hash
Enter=(action "confirm")
}}
/>
<GhErrorMessage @errors={{this.errors}} @property="email" />
</GhFormGroup>
<GhRoleSelection
@selected={{this.role}}
@setRole={{this.setRole}}
@onValidationSuccess={{action "roleValidationSucceeded"}}
@onValidationFailure={{action "roleValidationFailed"}}
/>
</fieldset>
</div>
<div class="modal-footer">
{{#if this.limitErrorMessage}}
<GhTaskButton @buttonText="Upgrade my plan &rarr;"
@task={{this.transitionToBilling}}
@class="gh-btn gh-btn-green gh-btn-icon"
@disableMouseDown="true"
data-test-button="upgrade-my-plan" />
{{else}}
<GhTaskButton @buttonText="Send invitation now &rarr;"
@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" />
{{/if}}
</div>