mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-24 23:48:13 -05:00
Extracted role selector to <GhRoleSelection> component
refs https://github.com/TryGhost/Team/issues/572 - preparation for re-using the new role selector in a model when changing an existing user's role
This commit is contained in:
Kevin Ansfield
parent
80357855aa
commit
e7ac8731b0
4 changed files with 213 additions and 191 deletions
154
ghost/admin/app/components/gh-role-selection.hbs
Normal file
154
ghost/admin/app/components/gh-role-selection.hbs
Normal file
|
|
@ -0,0 +1,154 @@
|
|||
<div class="gh-roles-container" {{did-insert (perform this.fetchRolesTask)}}>
|
||||
{{#if this.fetchRolesTask.isRunning}}
|
||||
<GhLoadingSpinner />
|
||||
{{else}}
|
||||
<div class="gh-radio {{if (eq @selected.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 @selected.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 @selected.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 @selected.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>
|
||||
{{/if}}
|
||||
</div>
|
||||
54
ghost/admin/app/components/gh-role-selection.js
Normal file
54
ghost/admin/app/components/gh-role-selection.js
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
import Component from '@glimmer/component';
|
||||
import {action} from '@ember/object';
|
||||
import {inject as service} from '@ember/service';
|
||||
import {task} from 'ember-concurrency-decorators';
|
||||
import {tracked} from '@glimmer/tracking';
|
||||
|
||||
const DEFAULT_ROLE_NAME = 'Contributor';
|
||||
|
||||
export default class GhRoleSelectionComponent extends Component {
|
||||
@service limit;
|
||||
@service notifications;
|
||||
@service store;
|
||||
|
||||
@tracked roles = [];
|
||||
@tracked limitErrorMessage = null;
|
||||
|
||||
@action
|
||||
async setRole(roleName) {
|
||||
const role = this.roles.findBy('name', roleName);
|
||||
this.args.setRole(role);
|
||||
return this.validateRole();
|
||||
}
|
||||
|
||||
@task
|
||||
*fetchRolesTask() {
|
||||
const roles = yield this.store.query('role', {permissions: 'assign'});
|
||||
const defaultRole = roles.findBy('name', DEFAULT_ROLE_NAME);
|
||||
|
||||
this.roles = roles;
|
||||
|
||||
if (!this.args.role && defaultRole) {
|
||||
this.args.setRole(defaultRole);
|
||||
}
|
||||
}
|
||||
|
||||
async validateRole(role) {
|
||||
if (role.name !== 'Contributor'
|
||||
&& this.limit.limiter && this.limit.limiter.isLimited('staff')) {
|
||||
try {
|
||||
await this.limit.limiter.errorIfWouldGoOverLimit('staff');
|
||||
|
||||
this.limitErrorMessage = null;
|
||||
} catch (error) {
|
||||
if (error.errorType === 'HostLimitError') {
|
||||
this.limitErrorMessage = error.message;
|
||||
} else {
|
||||
this.notifications.showAPIError(error, {key: 'staff.limit'});
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.limitErrorMessage = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -30,156 +30,10 @@
|
|||
<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>
|
||||
<GhRoleSelection
|
||||
@selected={{this.role}}
|
||||
@setRole={{this.setRole}}
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -17,17 +17,9 @@ export default ModalComponent.extend(ValidationEngine, {
|
|||
classNames: 'modal-content invite-new-user',
|
||||
|
||||
role: null,
|
||||
roles: null,
|
||||
|
||||
limitErrorMessage: null,
|
||||
|
||||
validationType: 'inviteUser',
|
||||
|
||||
didInsertElement() {
|
||||
this._super(...arguments);
|
||||
this.fetchRoles.perform();
|
||||
},
|
||||
|
||||
willDestroyElement() {
|
||||
this._super(...arguments);
|
||||
// TODO: this should not be needed, ValidationEngine acts as a
|
||||
|
|
@ -42,32 +34,11 @@ export default ModalComponent.extend(ValidationEngine, {
|
|||
}
|
||||
},
|
||||
|
||||
setRole: action(function (roleName) {
|
||||
const role = this.roles.findBy('name', roleName);
|
||||
setRole: action(function (role) {
|
||||
this.set('role', role);
|
||||
this.errors.remove('role');
|
||||
this.validateRole();
|
||||
}),
|
||||
|
||||
async validateRole() {
|
||||
if (this.get('role.name') !== 'Contributor'
|
||||
&& this.limit.limiter && this.limit.limiter.isLimited('staff')) {
|
||||
try {
|
||||
await this.limit.limiter.errorIfWouldGoOverLimit('staff');
|
||||
|
||||
this.set('limitErrorMessage', null);
|
||||
} catch (error) {
|
||||
if (error.errorType === 'HostLimitError') {
|
||||
this.set('limitErrorMessage', error.message);
|
||||
} else {
|
||||
this.notifications.showAPIError(error, {key: 'staff.limit'});
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.set('limitErrorMessage', null);
|
||||
}
|
||||
},
|
||||
|
||||
validate() {
|
||||
let email = this.email;
|
||||
|
||||
|
|
@ -103,17 +74,6 @@ export default ModalComponent.extend(ValidationEngine, {
|
|||
}));
|
||||
},
|
||||
|
||||
fetchRoles: task(function * () {
|
||||
let roles = yield this.store.query('role', {permissions: 'assign'});
|
||||
let defaultRole = roles.findBy('name', 'Contributor');
|
||||
|
||||
this.set('roles', roles);
|
||||
|
||||
if (!this.role) {
|
||||
this.set('role', defaultRole);
|
||||
}
|
||||
}),
|
||||
|
||||
sendInvitation: task(function* () {
|
||||
let email = this.email;
|
||||
let role = this.role;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue