mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-07 03:22:21 +03:00
203 lines
10 KiB
Handlebars
203 lines
10 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>
|
||
|
||
<div class="gh-roles-container">
|
||
<div class="gh-radio {{if (eq this.role.name "Contributor") "active"}}" {{on "click" (fn this.setRole "Contributor")}} data-test-option="Contributor">
|
||
<div class="gh-radio-button"></div>
|
||
<div class="gh-radio-content">
|
||
<div class="gh-radio-label">Contributor</div>
|
||
<div class="gh-radio-desc">Can create and edit their own posts, but cannot publish. An Editor needs to approve and publish for them.</div>
|
||
</div>
|
||
<div>
|
||
{{!-- Inner container collapses height to the SVG so popover can align correctly --}}
|
||
<div>
|
||
{{svg-jar "info"}}
|
||
<EmberPopover @tooltipClass="popover" @arrowClass="popover-arrow" @side="left">
|
||
<table>
|
||
<tbody>
|
||
<tr>
|
||
<td class="left">Settings</td>
|
||
<td>View and edit own profile</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="left">Posts</td>
|
||
<td>Create and edit own draft posts</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</EmberPopover>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="gh-radio {{if (eq this.role.name "Author") "active"}}" {{on "click" (fn this.setRole "Author")}} data-test-option="Author">
|
||
<div class="gh-radio-button"></div>
|
||
<div class="gh-radio-content">
|
||
<div class="gh-radio-label">Author</div>
|
||
<div class="gh-radio-desc">A trusted user who can create, edit and publish their own posts, but can’t modify others.</div>
|
||
</div>
|
||
<div>
|
||
{{!-- Inner container collapses height to the SVG so popover can align correctly --}}
|
||
<div>
|
||
{{svg-jar "info"}}
|
||
<EmberPopover @tooltipClass="popover" @arrowClass="popover-arrow" @side="left">
|
||
<table>
|
||
<tbody>
|
||
<tr>
|
||
<td class="left">Settings</td>
|
||
<td>View and edit own profile</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="left">Users</td>
|
||
<td>Browse users</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="left">Posts</td>
|
||
<td>View, edit and publish own posts, generate slugs</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="left">Tags</td>
|
||
<td>Add tags</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</EmberPopover>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="gh-radio {{if (eq this.role.name "Editor") "active"}}" {{on "click" (fn this.setRole "Editor")}} data-test-option="Editor">
|
||
<div class="gh-radio-button"></div>
|
||
<div class="gh-radio-content">
|
||
<div class="gh-radio-label">Editor</div>
|
||
<div class="gh-radio-desc">Can invite and manage other Authors and Contributors, as well as edit and publish any posts on the site.</div>
|
||
</div>
|
||
<div>
|
||
{{!-- Inner container collapses height to the SVG so popover can align correctly --}}
|
||
<div>
|
||
{{svg-jar "info"}}
|
||
<EmberPopover @tooltipClass="popover" @arrowClass="popover-arrow" @side="left">
|
||
<table>
|
||
<tbody>
|
||
<tr>
|
||
<td class="left">Settings</td>
|
||
<td>View and edit own profile</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="left">Users</td>
|
||
<td>Browse users, manage authors and contributors (invite, revoke, delete)</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="left">Posts</td>
|
||
<td>Create, publish, edit and delete all posts, generate slugs</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="left">Tags</td>
|
||
<td>Edit, add and delete tags</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</EmberPopover>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="gh-radio {{if (eq this.role.name "Administrator") "active"}}" {{on "click" (fn this.setRole "Administrator")}} data-test-option="Administrator">
|
||
<div class="gh-radio-button"></div>
|
||
<div class="gh-radio-content">
|
||
<div class="gh-radio-label">Administrator</div>
|
||
<div class="gh-radio-desc">Trusted staff user who should be able to manage all content and users, as well as site settings and options.</div>
|
||
</div>
|
||
<div>
|
||
{{!-- Inner container collapses height to the SVG so popover can align correctly --}}
|
||
<div>
|
||
{{svg-jar "info"}}
|
||
<EmberPopover @tooltipClass="popover" @arrowClass="popover-arrow" @side="left">
|
||
<table>
|
||
<tbody>
|
||
<tr>
|
||
<td class="left">Settings</td>
|
||
<td>Access all except Stripe settings</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="left">Users</td>
|
||
<td>Manage all users (invite, revoke, delete)</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="left">Posts</td>
|
||
<td>Create, publish, edit and delete all posts, generate slugs</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="left">Tags</td>
|
||
<td>Edit, add and delete tags</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="left">Database</td>
|
||
<td>Import, export and delete all content</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="left">Email</td>
|
||
<td>Send newsletters and test emails</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</EmberPopover>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="gh-content-box pa" hidden={{if this.limitErrorMessage false true}}>
|
||
{{html-safe this.limitErrorMessage}}
|
||
</div>
|
||
</div>
|
||
</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>
|