Added Staff as subpages of Settings

- The Admin is being restructured with Offers. This commit moves Staff under Settings.

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

@@ -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}}>

ghost/admin/app/controllers/settings/staff/index.js

@@ -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'});
+    })
+});

ghost/admin/app/controllers/settings/staff/user.js

@@ -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);
+    })
+});

ghost/admin/app/router.js

@@ -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'});

ghost/admin/app/routes/settings/staff/index.js

@@ -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'
+        };
+    }
+});

ghost/admin/app/routes/settings/staff/user.js

@@ -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'
+        };
+    }
+});

ghost/admin/app/templates/settings.hbs

@@ -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>
@@ -86,16 +96,6 @@
                 </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>
                 <div>

ghost/admin/app/templates/settings/staff/index.hbs

@@ -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>

ghost/admin/app/templates/settings/staff/user-loading.hbs

@@ -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>

ghost/admin/app/templates/settings/staff/user.hbs

@@ -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>