TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-25 09:03:12 +03:00
Code Issues Projects Releases Wiki Activity

Added Staff as subpages of Settings

Browse Source 
- The Admin is being restructured with Offers. This commit moves Staff under Settings.
This commit is contained in:
Peter Zimon 2021-10-18 13:27:42 +02:00
parent 31182c4dcf
commit a78afb5749
10 changed files with 1282 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ghost/admin/app/components/gh-user-list-item.hbs
View File

@ -1,5 +1,5 @@
<div class="apps-grid-cell tooltip-centered" data-tooltip="{{ if user.isLocked 'Requires password reset to log in'}}">
<LinkTo @route="staff.user" @model={{user.slug}} data-test-user-id={{user.id}}>
<LinkTo @route={{if (feature "offers") "settings.staff.user" "staff.user"}} @model={{user.slug}} data-test-user-id={{user.id}}>
<article class="apps-card-app">
<div class="apps-card-left">
<span class="user-list-item-figure" style={{background-image-style user.profileImageUrl}}>

89
ghost/admin/app/controllers/settings/staff/index.js Normal file
View File

@ -0,0 +1,89 @@
/* eslint-disable ghost/ember/alias-model-in-controller */
import Controller from '@ember/controller';
import RSVP from 'rsvp';
import {alias, sort} from '@ember/object/computed';
import {computed} from '@ember/object';
import {inject as service} from '@ember/service';
import {task} from 'ember-concurrency';
export default Controller.extend({
session: service(),
store: service(),
showInviteUserModal: false,
showResetAllPasswordsModal: false,
inviteOrder: null,
userOrder: null,
init() {
this._super(...arguments);
this.inviteOrder = ['email'];
this.userOrder = ['name', 'email'];
},
currentUser: alias('model'),
sortedInvites: sort('filteredInvites', 'inviteOrder'),
sortedActiveUsers: sort('activeUsers', 'userOrder'),
sortedSuspendedUsers: sort('suspendedUsers', 'userOrder'),
filteredInvites: computed.filterBy('invites', 'isNew', false),
invites: computed(function () {
return this.store.peekAll('invite');
}),
allUsers: computed(function () {
return this.store.peekAll('user');
}),
activeUsers: computed('allUsers.@each.status', function () {
return this.allUsers.filter((user) => {
return user.status !== 'inactive';
});
}),
suspendedUsers: computed('allUsers.@each.status', function () {
return this.allUsers.filter((user) => {
return user.status === 'inactive';
});
}),
actions: {
toggleInviteUserModal() {
this.toggleProperty('showInviteUserModal');
},
toggleResetAllPasswordsModal() {
this.toggleProperty('showResetAllPasswordsModal');
}
},
backgroundUpdate: task(function* () {
let users = this.fetchUsers.perform();
let invites = this.fetchInvites.perform();
try {
yield RSVP.all([users, invites]);
} catch (error) {
this.send('error', error);
}
}),
fetchUsers: task(function* () {
yield this.store.query('user', {limit: 'all'});
}),
fetchInvites: task(function* () {
if (this.currentUser.isAuthorOrContributor) {
return;
}
// ensure roles are loaded before invites. Invites do not have embedded
// role records which means Ember Data will throw errors when trying to
// read the invite.role data when the role has not yet been loaded
yield this.store.query('role', {limit: 'all'});
return yield this.store.query('invite', {limit: 'all'});
})
});

497
ghost/admin/app/controllers/settings/staff/user.js Normal file
View File

@ -0,0 +1,497 @@
import Controller from '@ember/controller';
import boundOneWay from 'ghost-admin/utils/bound-one-way';
import copyTextToClipboard from 'ghost-admin/utils/copy-text-to-clipboard';
import isNumber from 'ghost-admin/utils/isNumber';
import validator from 'validator';
import windowProxy from 'ghost-admin/utils/window-proxy';
import {alias, and, not, or, readOnly} from '@ember/object/computed';
import {computed} from '@ember/object';
import {isArray as isEmberArray} from '@ember/array';
import {run} from '@ember/runloop';
import {inject as service} from '@ember/service';
import {task, taskGroup, timeout} from 'ember-concurrency';
export default Controller.extend({
ajax: service(),
config: service(),
dropdown: service(),
ghostPaths: service(),
limit: service(),
notifications: service(),
session: service(),
slugGenerator: service(),
utils: service(),
personalToken: null,
limitErrorMessage: null,
personalTokenRegenerated: false,
leaveSettingsTransition: null,
dirtyAttributes: false,
showDeleteUserModal: false,
showSuspendUserModal: false,
showTransferOwnerModal: false,
showUploadCoverModal: false,
showUploadImageModal: false,
showRegenerateTokenModal: false,
showRoleSelectionModal: false,
_scratchFacebook: null,
_scratchTwitter: null,
saveHandlers: taskGroup().enqueue(),
user: alias('model'),
currentUser: alias('session.user'),
email: readOnly('user.email'),
slugValue: boundOneWay('user.slug'),
canChangeEmail: not('isAdminUserOnOwnerProfile'),
canChangePassword: not('isAdminUserOnOwnerProfile'),
canMakeOwner: and('currentUser.isOwnerOnly', 'isNotOwnProfile', 'user.isAdminOnly', 'isNotSuspended'),
isAdminUserOnOwnerProfile: and('currentUser.isAdminOnly', 'user.isOwnerOnly'),
isNotOwnersProfile: not('user.isOwnerOnly'),
isNotSuspended: not('user.isSuspended'),
rolesDropdownIsVisible: and('currentUser.isAdmin', 'isNotOwnProfile', 'isNotOwnersProfile'),
userActionsAreVisible: or('deleteUserActionIsVisible', 'canMakeOwner'),
isNotOwnProfile: not('isOwnProfile'),
isOwnProfile: computed('user.id', 'currentUser.id', function () {
return this.get('user.id') === this.get('currentUser.id');
}),
deleteUserActionIsVisible: computed('currentUser.{isAdmin,isEditor}', 'user.{isOwnerOnly,isAuthorOrContributor}', 'isOwnProfile', function () {
// users can't delete themselves
if (this.isOwnProfile) {
return false;
}
if (
// owners/admins can delete any non-owner user
(this.currentUser.get('isAdmin') && !this.user.isOwnerOnly) ||
// editors can delete any author or contributor
(this.currentUser.get('isEditor') && this.user.isAuthorOrContributor)
) {
return true;
}
return false;
}),
coverTitle: computed('user.name', function () {
return `${this.get('user.name')}'s Cover Image`;
}),
roles: computed(function () {
return this.store.query('role', {permissions: 'assign'});
}),
actions: {
toggleRoleSelectionModal(event) {
event?.preventDefault?.();
this.toggleProperty('showRoleSelectionModal');
},
changeRole(newRole) {
this.user.set('role', newRole);
this.set('dirtyAttributes', true);
},
toggleDeleteUserModal() {
if (this.deleteUserActionIsVisible) {
this.toggleProperty('showDeleteUserModal');
}
},
suspendUser() {
this.user.set('status', 'inactive');
return this.save.perform();
},
toggleSuspendUserModal() {
if (this.deleteUserActionIsVisible) {
this.toggleProperty('showSuspendUserModal');
}
},
unsuspendUser() {
this.user.set('status', 'active');
return this.save.perform();
},
toggleUnsuspendUserModal() {
if (this.deleteUserActionIsVisible) {
if (this.user.role.name !== 'Contributor'
&& this.limit.limiter
&& this.limit.limiter.isLimited('staff')
) {
this.limit.limiter.errorIfWouldGoOverLimit('staff')
.then(() => {
this.toggleProperty('showUnsuspendUserModal');
})
.catch((error) => {
if (error.errorType === 'HostLimitError') {
this.limitErrorMessage = error.message;
this.toggleProperty('showUnsuspendUserModal');
} else {
this.notifications.showAPIError(error, {key: 'staff.limit'});
}
});
} else {
this.toggleProperty('showUnsuspendUserModal');
}
}
},
validateFacebookUrl() {
let newUrl = this._scratchFacebook;
let oldUrl = this.get('user.facebook');
let errMessage = '';
// reset errors and validation
this.get('user.errors').remove('facebook');
this.get('user.hasValidated').removeObject('facebook');
if (newUrl === '') {
// Clear out the Facebook url
this.set('user.facebook', '');
return;
}
// _scratchFacebook will be null unless the user has input something
if (!newUrl) {
newUrl = oldUrl;
}
try {
// strip any facebook URLs out
newUrl = newUrl.replace(/(https?:\/\/)?(www\.)?facebook\.com/i, '');
// don't allow any non-facebook urls
if (newUrl.match(/^(http|\/\/)/i)) {
throw 'invalid url';
}
// strip leading / if we have one then concat to full facebook URL
newUrl = newUrl.replace(/^\//, '');
newUrl = `https://www.facebook.com/${newUrl}`;
// don't allow URL if it's not valid
if (!validator.isURL(newUrl)) {
throw 'invalid url';
}
this.set('user.facebook', '');
run.schedule('afterRender', this, function () {
this.set('user.facebook', newUrl);
});
} catch (e) {
if (e === 'invalid url') {
errMessage = 'The URL must be in a format like '
+ 'https://www.facebook.com/yourPage';
this.get('user.errors').add('facebook', errMessage);
return;
}
throw e;
} finally {
this.get('user.hasValidated').pushObject('facebook');
}
},
validateTwitterUrl() {
let newUrl = this._scratchTwitter;
let oldUrl = this.get('user.twitter');
let errMessage = '';
// reset errors and validation
this.get('user.errors').remove('twitter');
this.get('user.hasValidated').removeObject('twitter');
if (newUrl === '') {
// Clear out the Twitter url
this.set('user.twitter', '');
return;
}
// _scratchTwitter will be null unless the user has input something
if (!newUrl) {
newUrl = oldUrl;
}
if (newUrl.match(/(?:twitter\.com\/)(\S+)/) || newUrl.match(/([a-z\d.]+)/i)) {
let username = [];
if (newUrl.match(/(?:twitter\.com\/)(\S+)/)) {
[, username] = newUrl.match(/(?:twitter\.com\/)(\S+)/);
} else {
[username] = newUrl.match(/([^/]+)\/?$/mi);
}
// check if username starts with http or www and show error if so
if (username.match(/^(http|www)|(\/)/) || !username.match(/^[a-z\d._]{1,15}$/mi)) {
errMessage = !username.match(/^[a-z\d._]{1,15}$/mi) ? 'Your Username is not a valid Twitter Username' : 'The URL must be in a format like https://twitter.com/yourUsername';
this.get('user.errors').add('twitter', errMessage);
this.get('user.hasValidated').pushObject('twitter');
return;
}
newUrl = `https://twitter.com/${username}`;
this.get('user.hasValidated').pushObject('twitter');
this.set('user.twitter', '');
run.schedule('afterRender', this, function () {
this.set('user.twitter', newUrl);
});
} else {
errMessage = 'The URL must be in a format like '
+ 'https://twitter.com/yourUsername';
this.get('user.errors').add('twitter', errMessage);
this.get('user.hasValidated').pushObject('twitter');
return;
}
},
transferOwnership() {
let user = this.user;
let url = this.get('ghostPaths.url').api('users', 'owner');
this.dropdown.closeDropdowns();
return this.ajax.put(url, {
data: {
owner: [{
id: user.get('id')
}]
}
}).then((response) => {
// manually update the roles for the users that just changed roles
// because store.pushPayload is not working with embedded relations
if (response && isEmberArray(response.users)) {
response.users.forEach((userJSON) => {
let updatedUser = this.store.peekRecord('user', userJSON.id);
let role = this.store.peekRecord('role', userJSON.roles[0].id);
updatedUser.set('role', role);
});
}
this.notifications.showAlert(`Ownership successfully transferred to ${user.get('name')}`, {type: 'success', key: 'owner.transfer.success'});
}).catch((error) => {
this.notifications.showAPIError(error, {key: 'owner.transfer'});
});
},
toggleLeaveSettingsModal(transition) {
let leaveTransition = this.leaveSettingsTransition;
if (!transition && this.showLeaveSettingsModal) {
this.set('leaveSettingsTransition', null);
this.set('showLeaveSettingsModal', false);
return;
}
if (!leaveTransition || transition.targetName === leaveTransition.targetName) {
this.set('leaveSettingsTransition', transition);
// if a save is running, wait for it to finish then transition
if (this.get('saveHandlers.isRunning')) {
return this.get('saveHandlers.last').then(() => {
transition.retry();
});
}
// we genuinely have unsaved data, show the modal
this.set('showLeaveSettingsModal', true);
}
},
leaveSettings() {
let transition = this.leaveSettingsTransition;
let user = this.user;
if (!transition) {
this.notifications.showAlert('Sorry, there was an error in the application. Please let the Ghost team know what happened.', {type: 'error'});
return;
}
// roll back changes on user props
user.rollbackAttributes();
// roll back the slugValue property
if (this.dirtyAttributes) {
this.set('slugValue', user.get('slug'));
this.set('dirtyAttributes', false);
}
return transition.retry();
},
toggleTransferOwnerModal() {
if (this.canMakeOwner) {
this.toggleProperty('showTransferOwnerModal');
}
},
toggleUploadCoverModal() {
this.toggleProperty('showUploadCoverModal');
},
toggleUploadImageModal() {
this.toggleProperty('showUploadImageModal');
},
// TODO: remove those mutation actions once we have better
// inline validations that auto-clear errors on input
updatePassword(password) {
this.set('user.password', password);
this.get('user.hasValidated').removeObject('password');
this.get('user.errors').remove('password');
},
updateNewPassword(password) {
this.set('user.newPassword', password);
this.get('user.hasValidated').removeObject('newPassword');
this.get('user.errors').remove('newPassword');
},
updateNe2Password(password) {
this.set('user.ne2Password', password);
this.get('user.hasValidated').removeObject('ne2Password');
this.get('user.errors').remove('ne2Password');
},
confirmRegenerateTokenModal() {
this.set('showRegenerateTokenModal', true);
},
cancelRegenerateTokenModal() {
this.set('showRegenerateTokenModal', false);
},
regenerateToken() {
let url = this.get('ghostPaths.url').api('users', 'me', 'token');
return this.ajax.put(url, {data: {}}).then(({apiKey}) => {
this.set('personalToken', apiKey.id + ':' + apiKey.secret);
this.set('personalTokenRegenerated', true);
}).catch((error) => {
this.notifications.showAPIError(error, {key: 'token.regenerate'});
});
}
},
_exportDb(filename) {
this.utils.downloadFile(`${this.ghostPaths.url.api('db')}?filename=${filename}`);
},
deleteUser: task(function *() {
try {
const result = yield this.user.destroyRecord();
if (result._meta && result._meta.filename) {
this._exportDb(result._meta.filename);
// give the iframe some time to trigger the download before
// it's removed from the dom when transitioning
yield timeout(300);
}
this.notifications.closeAlerts('user.delete');
this.store.unloadAll('post');
this.transitionToRoute('staff');
} catch (error) {
this.notifications.showAlert('The user could not be deleted. Please try again.', {type: 'error', key: 'user.delete.failed'});
throw error;
}
}),
updateSlug: task(function* (newSlug) {
let slug = this.get('user.slug');
newSlug = newSlug || slug;
newSlug = newSlug.trim();
// Ignore unchanged slugs or candidate slugs that are empty
if (!newSlug || slug === newSlug) {
this.set('slugValue', slug);
return true;
}
let serverSlug = yield this.slugGenerator.generateSlug('user', newSlug);
// If after getting the sanitized and unique slug back from the API
// we end up with a slug that matches the existing slug, abort the change
if (serverSlug === slug) {
return true;
}
// Because the server transforms the candidate slug by stripping
// certain characters and appending a number onto the end of slugs
// to enforce uniqueness, there are cases where we can get back a
// candidate slug that is a duplicate of the original except for
// the trailing incrementor (e.g., this-is-a-slug and this-is-a-slug-2)
// get the last token out of the slug candidate and see if it's a number
let slugTokens = serverSlug.split('-');
let check = Number(slugTokens.pop());
// if the candidate slug is the same as the existing slug except
// for the incrementor then the existing slug should be used
if (isNumber(check) && check > 0) {
if (slug === slugTokens.join('-') && serverSlug !== newSlug) {
this.set('slugValue', slug);
return true;
}
}
this.set('slugValue', serverSlug);
this.set('dirtyAttributes', true);
return true;
}).group('saveHandlers'),
save: task(function* () {
let user = this.user;
let slugValue = this.slugValue;
let slugChanged;
if (user.get('slug') !== slugValue) {
slugChanged = true;
user.set('slug', slugValue);
}
try {
user = yield user.save({format: false});
// If the user's slug has changed, change the URL and replace
// the history so refresh and back button still work
if (slugChanged) {
let currentPath = window.location.hash;
let newPath = currentPath.split('/');
newPath[newPath.length - 1] = user.get('slug');
newPath = newPath.join('/');
windowProxy.replaceState({path: newPath}, '', newPath);
}
this.set('dirtyAttributes', false);
this.notifications.closeAlerts('user.update');
return user;
} catch (error) {
// validation engine returns undefined so we have to check
// before treating the failure as an API error
if (error) {
this.notifications.showAPIError(error, {key: 'user.update'});
}
}
}).group('saveHandlers'),
copyContentKey: task(function* () {
copyTextToClipboard(this.personalToken);
yield timeout(this.isTesting ? 50 : 3000);
})
});

8
ghost/admin/app/router.js
View File

@ -54,6 +54,14 @@ Router.map(function () {
});
});
this.route('settings.staff', {path: '/settings/staff'}, function () {
this.route('user', {path: ':user_slug'});
});
// this.route('staff', function () {
// this.route('user', {path: ':user_slug'});
// });
// this.route('settings.products', {path: '/settings/products'});
// this.route('settings.product.new', {path: '/settings/product/new'});
// this.route('settings.product', {path: '/settings/product/:product_id'});

29
ghost/admin/app/routes/settings/staff/index.js Normal file
View File

@ -0,0 +1,29 @@
import AuthenticatedRoute from 'ghost-admin/routes/authenticated';
import CurrentUserSettings from 'ghost-admin/mixins/current-user-settings';
import {inject as service} from '@ember/service';
export default AuthenticatedRoute.extend(CurrentUserSettings, {
infinity: service(),
session: service(),
model() {
return this.session.user;
},
setupController(controller) {
this._super(...arguments);
controller.backgroundUpdate.perform();
},
actions: {
reload() {
this.controller.backgroundUpdate.perform();
}
},
buildRouteInfoMetadata() {
return {
titleToken: 'Staff'
};
}
});

72
ghost/admin/app/routes/settings/staff/user.js Normal file
View File

@ -0,0 +1,72 @@
/* eslint-disable camelcase */
import AuthenticatedRoute from 'ghost-admin/routes/authenticated';
import CurrentUserSettings from 'ghost-admin/mixins/current-user-settings';
export default AuthenticatedRoute.extend(CurrentUserSettings, {
model(params) {
return this.store.queryRecord('user', {slug: params.user_slug, include: 'count.posts'});
},
afterModel(user) {
this._super(...arguments);
const currentUser = this.session.user;
let isOwnProfile = user.get('id') === currentUser.get('id');
let isAuthorOrContributor = currentUser.get('isAuthorOrContributor');
let isEditor = currentUser.get('isEditor');
if (isAuthorOrContributor && !isOwnProfile) {
this.transitionTo('settings.staff.user', currentUser);
} else if (isEditor && !isOwnProfile && !user.get('isAuthorOrContributor')) {
this.transitionTo('settings.staff');
}
if (isOwnProfile) {
this.store.queryRecord('api-key', {id: 'me'}).then((apiKey) => {
this.controller.set('personalToken', apiKey.id + ':' + apiKey.secret);
this.controller.set('personalTokenRegenerated', false);
});
}
},
serialize(model) {
return {user_slug: model.get('slug')};
},
actions: {
didTransition() {
this.modelFor('settings.staff.user').get('errors').clear();
},
save() {
this.get('controller.save').perform();
},
willTransition(transition) {
let controller = this.controller;
let user = controller.user;
let dirtyAttributes = controller.dirtyAttributes;
let modelIsDirty = user.get('hasDirtyAttributes');
// always reset the password properties on the user model when leaving
if (user) {
user.set('password', '');
user.set('newPassword', '');
user.set('ne2Password', '');
}
if (modelIsDirty || dirtyAttributes) {
transition.abort();
controller.send('toggleLeaveSettingsModal', transition);
return;
}
}
},
buildRouteInfoMetadata() {
return {
titleToken: 'Staff - User'
};
}
});

22
ghost/admin/app/templates/settings.hbs
View File

@ -48,7 +48,7 @@
</LinkTo>
{{#if (feature "offers")}}
<LinkTo class="gh-setting-group" @route="staff" data-test-nav="navigation">
<LinkTo class="gh-setting-group" @route="settings.staff" data-test-nav="navigation">
<span class="green">{{svg-jar "staff"}}</span>
<div>
<h4>Staff</h4>
@ -78,6 +78,16 @@
<div class="gh-setting-header">Advanced</div>
<div class="gh-settings-main-grid">
{{#if (feature "offers")}}
<LinkTo class="gh-setting-group" @route="integrations" data-test-nav="navigation">
<span class="yellow">{{svg-jar "module"}}</span>
<div>
<h4>Integrations</h4>
<p>Make Ghost work with apps and tools</p>
</div>
</LinkTo>
{{/if}}
<LinkTo class="gh-setting-group" @route="settings.code-injection" data-test-nav="code-injection">
<span class="green">{{svg-jar "brackets"}}</span>
<div>
@ -85,16 +95,6 @@
<p>Add code to your publication</p>
</div>
</LinkTo>
{{#if (feature "offers")}}
<LinkTo class="gh-setting-group" @route="integrations" data-test-nav="navigation">
<span class="blue">{{svg-jar "module"}}</span>
<div>
<h4>Integrations</h4>
<p>Make Ghost work with apps and tools</p>
</div>
</LinkTo>
{{/if}}
<LinkTo class="gh-setting-group" @route="settings.labs" data-test-nav="labs">
<span class="pink">{{svg-jar "labs"}}</span>

147
ghost/admin/app/templates/settings/staff/index.hbs Normal file
View File

@ -0,0 +1,147 @@
<section class="gh-canvas">
<GhCanvasHeader class="gh-canvas-header">
<h2 class="gh-canvas-title" data-test-screen-title>
<LinkTo @route="settings">Settings</LinkTo>
<span>{{svg-jar "arrow-right"}}</span>
Staff
</h2>
{{!-- Do not show Invite user button to authors --}}
{{#unless this.currentUser.isAuthorOrContributor}}
<section class="view-actions">
{{#if (gh-user-can-admin this.session.user)}}
<span class="dropdown">
<GhDropdownButton
@dropdownName="staff-actions-menu"
@classNames="gh-btn gh-btn-icon icon-only gh-btn-action-icon"
@title="Staff Actions"
data-test-button="staff-actions"
>
<span>
{{svg-jar "settings"}}
<span class="hidden">Actions</span>
</span>
</GhDropdownButton>
<GhDropdown
@name="staff-actions-menu"
@tagName="ul"
@classNames="gh-member-actions-menu dropdown-menu dropdown-triangle-top-right"
>
<li >
<button {{on "click" (action "toggleResetAllPasswordsModal")}}>
<span>Reset all passwords</span>
</button>
</li>
</GhDropdown>
</span>
{{/if}}
<button class="gh-btn gh-btn-primary" {{on "click" (action "toggleInviteUserModal")}} data-test-button="invite-staff-user"><span>Invite people</span></button>
</section>
{{/unless}}
</GhCanvasHeader>
{{#if this.showInviteUserModal}}
<GhFullscreenModal @modal="invite-new-user"
@close={{action "toggleInviteUserModal"}}
@modifier="action wide invite-user" />
{{/if}}
{{#if this.showResetAllPasswordsModal}}
<GhFullscreenModal @modal="reset-all-passwords"
@close={{action "toggleResetAllPasswordsModal"}}
@modifier="action wide" />
{{/if}}
<section class="view-container gh-team">
{{!-- Show invited users to everyone except authors --}}
{{#unless this.currentUser.isAuthorOrContributor}}
{{#if this.invites}}
<section class="gh-main-section gh-invited-users apps-first-header" data-test-invited-users>
<h4 class="gh-main-section-header small">Invited users</h4>
<div class="apps-grid">
{{#each this.sortedInvites as |invite|}}
<GhUserInvited @invite={{invite}} @reload={{route-action "reload"}} as |component|>
<div class="apps-grid-cell" data-test-invite-id="{{invite.id}}">
<article class="apps-card-app">
<div class="apps-card-left">
<span class="user-list-item-icon">{{svg-jar "email"}}ic</span>
<div class="apps-card-meta">
<h3 class="apps-card-app-title" data-test-email>{{invite.email}}</h3>
<p class="apps-card-app-desc">
{{#if invite.pending}}
<span class="description-error">
Invitation not sent - please try again
</span>
{{else}}
<span class="description" data-test-invite-description>
Invitation sent: {{component.createdAt}},
{{if component.isExpired "expired" "expires"}} {{component.expiresAt}}
</span>
{{/if}}
</p>
</div>
</div>
<div class="apps-card-right">
<div class="apps-configured">
{{#if component.isSending}}
<span>Sending Invite...</span>
{{else}}
<a class="apps-configured-action red-hover" href="#revoke" {{action "revoke" target=component}} data-test-revoke-button>
Revoke
</a>
<a class="apps-configured-action green-hover" href="#resend" {{action "resend" target=component}} data-test-resend-button>
Resend
</a>
<span class="apps-configured-action gh-badge {{invite.role.lowerCaseName}}" data-test-role-name>{{invite.role.name}}</span>
{{/if}}
</div>
</div>
</article>
</div>
</GhUserInvited>
{{/each}}
</div>
</section>
{{/if}}
{{/unless}}
<section class="gh-main-section gh-active-users {{unless this.invites "apps-first-header"}}" data-test-active-users>
<h4 class="gh-main-section-header small">Active users</h4>
<div class="apps-grid">
{{!-- For authors/contributors, only show their own user --}}
{{#if this.currentUser.isAuthorOrContributor}}
<GhUserActive @user={{this.currentUser}} as |component|>
<GhUserListItem @user={{this.currentUser}} @component={{component}} />
</GhUserActive>
{{else}}
{{#vertical-collection this.sortedActiveUsers
key="id"
containerSelector=".gh-main"
estimateHeight=75
as |user|
}}
<GhUserActive @user={{user}} as |component|>
<GhUserListItem @user={{user}} @component={{component}} />
</GhUserActive>
{{/vertical-collection}}
{{/if}}
</div>
</section>
</section>
{{!-- Don't show if we have no suspended users or logged in as an author --}}
{{#if (and this.suspendedUsers (not this.currentUser.isAuthorOrContributor))}}
<section class="apps-grid-container gh-active-users" data-test-suspended-users>
<span class="apps-grid-title">Suspended users</span>
<div class="apps-grid">
{{#each this.sortedSuspendedUsers key="id" as |user|}}
<GhUserActive @user={{user}} as |component|>
<GhUserListItem @user={{user}} @component={{component}} />
</GhUserActive>
{{/each}}
</div>
</section>
{{/if}}
</section>

19
ghost/admin/app/templates/settings/staff/user-loading.hbs Normal file
View File

@ -0,0 +1,19 @@
<section class="gh-canvas">
<GhCanvasHeader class="gh-canvas-header">
<h2 class="gh-canvas-title" data-test-screen-title>
<LinkTo @route="settings">Settings</LinkTo>
<span>{{svg-jar "arrow-right"}}</span>
<LinkTo @route="settings.staff" data-test-staff-link={{true}}>Staff</LinkTo>
<span>{{svg-jar "arrow-right"}}</span>
{{this.user.name}}
</h2>
<section class="view-actions">
<div class="gh-btn gh-btn-primary"><span>Save</span></div>
</section>
</GhCanvasHeader>
<div class="gh-content">
<GhLoadingSpinner />
</div>
</section>

409
ghost/admin/app/templates/settings/staff/user.hbs Normal file
View File

@ -0,0 +1,409 @@
<section class="gh-canvas">
<GhCanvasHeader class="gh-canvas-header">
<h2 class="gh-canvas-title" data-test-screen-title>
<LinkTo @route="settings">Settings</LinkTo>
<span>{{svg-jar "arrow-right"}}</span>
<LinkTo @route="settings.staff" data-test-staff-link={{true}}>Staff</LinkTo>
<span>{{svg-jar "arrow-right"}}</span>
{{this.user.name}}
{{#if this.user.isSuspended}}
<span class="gh-badge suspended" data-test-suspended-badge>Suspended</span>
{{/if}}
</h2>
{{#if this.showLeaveSettingsModal}}
<GhFullscreenModal @modal="leave-settings"
@confirm={{action "leaveSettings"}}
@close={{action "toggleLeaveSettingsModal"}}
@modifier="action wide" />
{{/if}}
<section class="view-actions">
{{#if this.userActionsAreVisible}}
<span class="dropdown">
<GhDropdownButton @dropdownName="user-actions-menu" @classNames="gh-btn gh-btn-white gh-btn-icon icon-only user-actions-cog" @title="User Actions" data-test-user-actions={{true}}>
<span>
{{svg-jar "settings"}}
<span class="hidden">User Settings</span>
</span>
</GhDropdownButton>
<GhDropdown @name="user-actions-menu" @tagName="ul" @classNames="user-actions-menu dropdown-menu dropdown-align-right">
{{#if this.canMakeOwner}}
<li>
<button {{action "toggleTransferOwnerModal"}}>
Make owner
</button>
{{#if this.showTransferOwnerModal}}
<GhFullscreenModal @modal="transfer-owner"
@confirm={{action "transferOwnership"}}
@close={{action "toggleTransferOwnerModal"}}
@modifier="action wide" />
{{/if}}
</li>
{{/if}}
{{#if this.deleteUserActionIsVisible}}
<li>
<button {{action "toggleDeleteUserModal"}} class="delete" data-test-delete-button>
Delete user
</button>
</li>
{{#if this.user.isActive}}
<li>
<button {{action "toggleSuspendUserModal"}} class="suspend" data-test-suspend-button>
Suspend user
</button>
</li>
{{/if}}
{{#if this.user.isSuspended}}
<li>
<button {{action "toggleUnsuspendUserModal"}} class="unsuspend" data-test-unsuspend-button>
Un-suspend user
</button>
</li>
{{/if}}
{{/if}}
</GhDropdown>
</span>
{{/if}}
<GhTaskButton @class="gh-btn gh-btn-primary gh-btn-icon" @task={{this.save}} data-test-save-button={{true}} />
{{#if this.showDeleteUserModal}}
<GhFullscreenModal @modal="delete-user"
@model={{this.user}}
@confirm={{action (perform this.deleteUser)}}
@close={{action "toggleDeleteUserModal"}}
@modifier="action wide" />
{{/if}}
{{#if this.showSuspendUserModal}}
<GhFullscreenModal @modal="suspend-user"
@model={{this.user}}
@confirm={{action "suspendUser"}}
@close={{action "toggleSuspendUserModal"}}
@modifier="action wide" />
{{/if}}
{{#if this.showUnsuspendUserModal}}
{{#if this.limitErrorMessage}}
<GhFullscreenModal @modal="upgrade-unsuspend-user-host-limit"
@model={{hash
message=limitErrorMessage
}}
@close={{action "toggleUnsuspendUserModal"}}
@modifier="action wide" />
{{else}}
<GhFullscreenModal @modal="unsuspend-user"
@model={{this.user}}
@confirm={{action "unsuspendUser"}}
@close={{action "toggleUnsuspendUserModal"}}
@modifier="action wide" />
{{/if}}
{{/if}}
</section>
</GhCanvasHeader>
{{#if user.isLocked}}
<p class="gh-box gh-box-alert">{{svg-jar "info"}}This user account is locked. To sign in, ask this user to perform a password reset on their account.</p>
{{/if}}
{{!-- <div class="bg-"> --}}
<section>
<div class="gm-main view-container settings-user">
<form class="user-profile" novalidate="novalidate" autocomplete="off" {{action (perform this.save) on="submit"}}>
<figure class="user-cover" style={{background-image-style this.user.coverImageUrl}}>
<button type="button" class="gh-btn gh-btn-default user-cover-edit" {{action "toggleUploadCoverModal"}}><span>Change cover</span></button>
{{#if this.showUploadCoverModal}}
<GhFullscreenModal @modal="upload-image"
@model={{hash model=this.user imageProperty="coverImage"}}
@close={{action "toggleUploadCoverModal"}}
@modifier="action wide" />
{{/if}}
</figure>
<figure class="user-image bg-whitegrey">
<div id="user-image" class="img" style={{background-image-style this.user.profileImageUrl}}><span class="hidden">{{this.user.name}}"s picture</span></div>
<button type="button" {{action "toggleUploadImageModal"}} class="edit-user-image">Edit picture</button>
{{#if this.showUploadImageModal}}
<GhFullscreenModal @modal="upload-image"
@model={{hash model=this.user imageProperty="profileImage" paramsHash=(hash purpose="profile_image")}}
@close={{action "toggleUploadImageModal"}}
@modifier="action wide" />
{{/if}}
</figure>
<div class="pa5">
<fieldset class="user-details-bottom">
<GhFormGroup @errors={{this.user.errors}} @hasValidated={{this.user.hasValidated}} @property="name" @class="first-form-group">
<label for="user-name">Full name</label>
<GhTextInput
@id="user-name"
@class="user-name"
@autocorrect="off"
@value={{readonly this.user.name}}
@input={{action (mut this.user.name) value="target.value"}}
@focus-out={{action "validate" "name" target=this.user}}
data-test-name-input={{true}}
/>
{{#if this.user.errors.name}}
<GhErrorMessage @errors={{this.user.errors}} @property="name" data-test-error="user-name" />
{{else}}
<p>Use your real name so people can recognize you</p>
{{/if}}
</GhFormGroup>
<GhFormGroup @errors={{this.user.errors}} @hasValidated={{this.user.hasValidated}} @property="slug">
<label for="user-slug">Slug</label>
<GhTextInput
@class="user-name"
@id="user-slug"
@name="user"
@selectOnClick="true"
@autocorrect="off"
@value={{readonly this.slugValue}}
@input={{action (mut this.slugValue) value="target.value"}}
@focus-out={{action (perform this.updateSlug this.slugValue)}}
data-test-slug-input={{true}}
/>
<p><GhBlogUrl />/author/{{this.slugValue}}</p>
<GhErrorMessage @errors={{this.user.errors}} @property="slug" data-test-error="user-slug" />
</GhFormGroup>
<GhFormGroup @errors={{this.user.errors}} @hasValidated={{this.user.hasValidated}} @property="email">
<label for="user-email">Email</label>
{{!-- Administrators only see text of Owner's email address but not input --}}
{{#if this.canChangeEmail}}
<GhTextInput
@type="email"
@id="user-email"
@name="email"
@placeholder="jamie@example.com"
@autocapitalize="off"
@autocorrect="off"
@autocomplete="off"
@value={{readonly this.user.email}}
@input={{action (mut this.user.email) value="target.value"}}
@focus-out={{action "validate" "email" target=this.user}}
data-test-email-input={{true}}
/>
<GhErrorMessage @errors={{this.user.errors}} @property="email" data-test-error="user-email" />
{{else}}
<span>{{this.user.email}}</span>
{{/if}}
<p>Used for notifications</p>
</GhFormGroup>
{{#if this.rolesDropdownIsVisible}}
<div class="form-group">
<label for="user-role">Role</label>
<div class="gh-input pointer" {{on "click" (action "toggleRoleSelectionModal")}}>{{this.user.role.name}}{{svg-jar "arrow-down-small"}}</div>
<p>What permissions should this user have?</p>
</div>
{{#if this.showRoleSelectionModal}}
<GhFullscreenModal
@modal="select-user-role"
@model={{readonly this.user.role}}
@confirm={{action "changeRole"}}
@close={{action "toggleRoleSelectionModal"}}
@modifier="change-role"
/>
{{/if}}
{{/if}}
<GhFormGroup @errors={{this.user.errors}} @hasValidated={{this.user.hasValidated}} @property="location">
<label for="user-location">Location</label>
<GhTextInput
@id="user-location"
@value={{readonly this.user.location}}
@input={{action (mut this.user.location) value="target.value"}}
@focus-out={{action "validate" "location" target=this.user}}
data-test-location-input={{true}} />
<GhErrorMessage @errors={{this.user.errors}} @property="location" data-test-error="user-location" />
<p>Where in the world do you live?</p>
</GhFormGroup>
<GhFormGroup @errors={{this.user.errors}} @hasValidated={{this.user.hasValidated}} @property="website">
<label for="user-website">Website</label>
<GhTextInput
@type="url"
@id="user-website"
@autocapitalize="off"
@autocorrect="off"
@autocomplete="off"
@value={{readonly this.user.website}}
@input={{action (mut this.user.website) value="target.value"}}
@focus-out={{action "validate" "website" target=this.user}}
data-test-website-input={{true}} />
<GhErrorMessage @errors={{this.user.errors}} @property="website" data-test-error="user-website" />
<p>Have a website or blog other than this one? Link it!</p>
</GhFormGroup>
<GhFormGroup @errors={{this.user.errors}} @hasValidated={{this.user.hasValidated}} @property="facebook">
<label for="user-facebook">Facebook profile</label>
<GhTextInput
@type="url"
@placeholder="https://www.facebook.com/username"
@autocorrect="off"
@id="user-facebook"
@name="user[facebook]"
@value={{readonly this.user.facebook}}
@input={{action (mut this._scratchFacebook) value="target.value"}}
@focus-out={{action "validateFacebookUrl"}}
data-test-facebook-input={{true}}
/>
<GhErrorMessage @errors={{this.user.errors}} @property="facebook" data-test-error="user-facebook" />
<p>URL of your personal Facebook Profile</p>
</GhFormGroup>
<GhFormGroup @errors={{this.user.errors}} @hasValidated={{this.user.hasValidated}} @property="twitter">
<label for="user-twitter">Twitter profile</label>
<GhTextInput
@type="url"
@placeholder="https://twitter.com/username"
@autocorrect="off"
@id="user-twitter"
@name="user[twitter]"
@value={{readonly this.user.twitter}}
@input={{action (mut this._scratchTwitter) value="target.value"}}
@focus-out={{action "validateTwitterUrl"}}
data-test-twitter-input={{true}}
/>
<GhErrorMessage @errors={{this.user.errors}} @property="twitter" data-test-error="user-twitter" />
<p>URL of your personal Twitter profile</p>
</GhFormGroup>
<GhFormGroup @errors={{this.user.errors}} @hasValidated={{this.user.hasValidated}} @property="bio" @class="bio-container">
<label for="user-bio">Bio</label>
<GhTextarea
@id="user-bio"
@value={{readonly this.user.bio}}
@input={{action (mut this.user.bio) value="target.value"}}
@focus-out={{action "validate" "bio" target=this.user}}
data-test-bio-input={{true}}
/>
<GhErrorMessage @errors={{this.user.errors}} @property="bio" data-test-error="user-bio" />
<p>
Write about you, in 200 characters or less.
{{gh-count-characters this.user.bio}}
</p>
</GhFormGroup>
</fieldset>
</div>
</form> {{! user details form }}
{{!-- If an administrator is viewing Owner's profile then hide inputs for change password --}}
{{#if this.canChangePassword}}
<form id="password-reset" class="user-profile" novalidate="novalidate" autocomplete="off" {{action (perform this.user.saveNewPassword) on="submit"}}>
<div class="pa5">
<fieldset class="user-details-form">
{{#if this.isOwnProfile}}
<GhFormGroup @errors={{this.user.errors}} @hasValidated={{this.user.hasValidated}} @property="password">
<label for="user-password-old">Old password</label>
<GhTextInput
@type="password"
@id="user-password-old"
@autocomplete="current-password"
@value={{readonly this.user.password}}
@input={{action "updatePassword" value="target.value"}}
@keyEvents={{hash
Enter=(action (perform this.user.saveNewPassword))
}}
data-test-old-pass-input={{true}}
/>
<GhErrorMessage @errors={{this.user.errors}} @property="password" data-test-error="user-old-pass" />
</GhFormGroup>
{{/if}}
<GhFormGroup @errors={{this.user.errors}} @hasValidated={{this.user.hasValidated}} @property="newPassword">
<label for="user-password-new">New password</label>
<GhTextInput
@value={{readonly this.user.newPassword}}
@type="password"
@autocomplete="new-password"
@id="user-password-new"
@input={{action "updateNewPassword" value="target.value"}}
@keyEvents={{hash
Enter=(action (perform this.user.saveNewPassword))
}}
data-test-new-pass-input={{true}}
/>
<GhErrorMessage @errors={{this.user.errors}} @property="newPassword" data-test-error="user-new-pass" />
</GhFormGroup>
<GhFormGroup @errors={{this.user.errors}} @hasValidated={{this.user.hasValidated}} @property="ne2Password">
<label for="user-new-password-verification">Verify password</label>
<GhTextInput
@value={{readonly this.user.ne2Password}}
@type="password"
@id="user-new-password-verification"
@input={{action "updateNe2Password" value="target.value"}}
@keyEvents={{hash
Enter=(action (perform this.user.saveNewPassword))
}}
data-test-ne2-pass-input={{true}}
/>
<GhErrorMessage @errors={{this.user.errors}} @property="ne2Password" data-test-error="user-ne2-pass" />
</GhFormGroup>
<div class="form-group">
<GhTaskButton @buttonText="Change Password" @idleClass="gh-btn-red" @class="gh-btn gh-btn-icon button-change-password" @task={{this.user.saveNewPassword}} data-test-save-pw-button="true" />
</div>
</fieldset>
</div>
</form> {{! change password form }}
{{/if}}
{{#if this.isOwnProfile}}
<form class="user-profile">
<div class="pa5">
<fieldset class="user-details-form">
<GhFormGroup>
<label for="personal-token">Staff access token</label>
<div class="relative flex items-center {{unless this.copyContentKey.isRunning "hide-child-instant"}}">
<GhTextInput
@id="personal-token"
@value={{readonly this.personalToken}}
@readonly
@type="text"
onclick="this.select()"
/>
<div class="app-api-personal-token-buttons child">
<button type="button" {{action "confirmRegenerateTokenModal"}} class="app-button-regenerate" data-tooltip="Regenerate">
{{svg-jar "reload" class="w4 h4 stroke-midgrey"}}
</button>
<button type="button" {{action (perform this.copyContentKey)}} class="app-button-copy">
{{#if this.copyContentKey.isRunning}}
{{svg-jar "check-circle" class="w3 v-mid mr2 stroke-white"}} Copied
{{else}}
Copy
{{/if}}
</button>
</div>
</div>
<p>
Give apps personal access without sharing your email/password.
</p>
{{#if this.personalTokenRegenerated}}
<p class="green">Staff access token was successfully regenerated </p>
{{/if}}
{{#if this.showRegenerateTokenModal}}
<GhFullscreenModal @modal="regenerate-token"
@confirm={{action "regenerateToken"}}
@close={{action "cancelRegenerateTokenModal"}}
@modifier="action wide" />
{{/if}}
</GhFormGroup>
</fieldset>
</div>
</form>
{{/if}}
</div>
</section>
</section>