mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-02 08:13:34 +03:00
ecf82fbfe8
no issue - when the role selection was extracted to an external component the limit validation was also extracted but had no way of feeding back to the consumer - added `onValidationSuccess` and `onValidationFailure` arguments to the role selection component to allow validation feedback to the consumer - updated staff invite modal with actions to update state based on validation so the modal's buttons can update accordingly
59 lines
2.3 KiB
Handlebars
59 lines
2.3 KiB
Handlebars
<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 you’d 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")
|
||
}}
|
||
@focus-out={{action "validate" "email"}}
|
||
/>
|
||
<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 →"
|
||
@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 →"
|
||
@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>
|