From 85cce39af7f87249a85de151873ed4edf1e94046 Mon Sep 17 00:00:00 2001 From: Kevin Ansfield Date: Mon, 3 Oct 2022 21:15:27 +0100 Subject: [PATCH] Refactored staff user modals refs https://github.com/TryGhost/Team/issues/1734 refs https://github.com/TryGhost/Team/issues/559 refs https://github.com/TryGhost/Ghost/issues/14101 - switches to newer modal patterns ready for later Ember upgrades - cleaned up the `upload-image` modal which had multiple areas of code that were no longer being used - disabled `no-duplicate-landmark-elements` template lint rule as it's buggy and mostly gives false positives --- ghost/admin/.lint-todo | 29 +++ ghost/admin/.template-lintrc.js | 3 +- .../admin/app/components/gh-image-uploader.js | 3 +- .../app/components/modal-delete-user.hbs | 31 --- .../admin/app/components/modal-delete-user.js | 31 --- .../app/components/modal-import-members.hbs | 1 - .../app/components/modal-regenerate-token.hbs | 20 -- .../app/components/modal-regenerate-token.js | 10 - .../app/components/modal-select-user-role.hbs | 16 -- .../app/components/modal-select-user-role.js | 39 ---- .../app/components/modal-suspend-user.hbs | 13 -- .../app/components/modal-suspend-user.js | 24 -- .../app/components/modal-transfer-owner.hbs | 16 -- .../app/components/modal-transfer-owner.js | 23 -- .../app/components/modal-unsuspend-user.hbs | 13 -- .../app/components/modal-unsuspend-user.js | 24 -- ...odal-upgrade-unsuspend-user-host-limit.hbs | 20 -- ...modal-upgrade-unsuspend-user-host-limit.js | 16 -- .../app/components/modal-upload-image.hbs | 32 --- .../app/components/modal-upload-image.js | 109 --------- .../settings/staff/modals/delete-user.hbs | 34 +++ .../settings/staff/modals/delete-user.js | 31 +++ .../staff/modals/regenerate-staff-token.hbs | 22 ++ .../staff/modals/regenerate-staff-token.js | 23 ++ .../settings/staff/modals/select-role.hbs | 18 ++ .../settings/staff/modals/select-role.js | 11 + .../settings/staff/modals/suspend-user.hbs | 21 ++ .../settings/staff/modals/suspend-user.js | 24 ++ .../staff/modals/transfer-ownership.hbs | 22 ++ .../staff/modals/transfer-ownership.js | 47 ++++ .../settings/staff/modals/unsuspend-user.hbs | 46 ++++ .../settings/staff/modals/unsuspend-user.js | 57 +++++ .../settings/staff/modals/upload-image.hbs | 38 +++ .../settings/staff/modals/upload-image.js | 52 +++++ .../app/controllers/settings/staff/user.js | 221 ++++++------------ .../app/templates/settings/staff/user.hbs | 88 +------ 36 files changed, 566 insertions(+), 662 deletions(-) delete mode 100644 ghost/admin/app/components/modal-delete-user.hbs delete mode 100644 ghost/admin/app/components/modal-delete-user.js delete mode 100644 ghost/admin/app/components/modal-regenerate-token.hbs delete mode 100644 ghost/admin/app/components/modal-regenerate-token.js delete mode 100644 ghost/admin/app/components/modal-select-user-role.hbs delete mode 100644 ghost/admin/app/components/modal-select-user-role.js delete mode 100644 ghost/admin/app/components/modal-suspend-user.hbs delete mode 100644 ghost/admin/app/components/modal-suspend-user.js delete mode 100644 ghost/admin/app/components/modal-transfer-owner.hbs delete mode 100644 ghost/admin/app/components/modal-transfer-owner.js delete mode 100644 ghost/admin/app/components/modal-unsuspend-user.hbs delete mode 100644 ghost/admin/app/components/modal-unsuspend-user.js delete mode 100644 ghost/admin/app/components/modal-upgrade-unsuspend-user-host-limit.hbs delete mode 100644 ghost/admin/app/components/modal-upgrade-unsuspend-user-host-limit.js delete mode 100644 ghost/admin/app/components/modal-upload-image.hbs delete mode 100644 ghost/admin/app/components/modal-upload-image.js create mode 100644 ghost/admin/app/components/settings/staff/modals/delete-user.hbs create mode 100644 ghost/admin/app/components/settings/staff/modals/delete-user.js create mode 100644 ghost/admin/app/components/settings/staff/modals/regenerate-staff-token.hbs create mode 100644 ghost/admin/app/components/settings/staff/modals/regenerate-staff-token.js create mode 100644 ghost/admin/app/components/settings/staff/modals/select-role.hbs create mode 100644 ghost/admin/app/components/settings/staff/modals/select-role.js create mode 100644 ghost/admin/app/components/settings/staff/modals/suspend-user.hbs create mode 100644 ghost/admin/app/components/settings/staff/modals/suspend-user.js create mode 100644 ghost/admin/app/components/settings/staff/modals/transfer-ownership.hbs create mode 100644 ghost/admin/app/components/settings/staff/modals/transfer-ownership.js create mode 100644 ghost/admin/app/components/settings/staff/modals/unsuspend-user.hbs create mode 100644 ghost/admin/app/components/settings/staff/modals/unsuspend-user.js create mode 100644 ghost/admin/app/components/settings/staff/modals/upload-image.hbs create mode 100644 ghost/admin/app/components/settings/staff/modals/upload-image.js diff --git a/ghost/admin/.lint-todo b/ghost/admin/.lint-todo index e737bdeb3a..1d61999165 100644 --- a/ghost/admin/.lint-todo +++ b/ghost/admin/.lint-todo @@ -858,3 +858,32 @@ remove|ember-template-lint|no-unused-block-params|1|0|1|0|6640f2d788e2ebf173ee6a add|ember-template-lint|no-duplicate-attributes|9|4|9|4|1bd74ed221db1070a4ef257ccb712285f6e4ebc6|1663977600000|1674349200000|1679533200000|app/components/gh-members-segment-select.hbs add|ember-template-lint|table-groups|29|12|29|12|fd6c7d9c26f38dac21ab2603a31d20617717ab33|1663977600000|1674349200000|1679533200000|app/templates/offers.hbs add|ember-template-lint|no-unused-block-params|1|0|1|0|1709beda164cdda6c0196211f71d73a81b9251dd|1663977600000|1674349200000|1679533200000|lib/koenig-editor/addon/components/koenig-card-email-cta.hbs +remove|ember-template-lint|no-action|47|93|47|93|a927cb3d62f088a149f64288c634921673563e7d|1662681600000|1673053200000|1678237200000|app/templates/settings/staff/user.hbs +remove|ember-template-lint|no-action|83|29|83|29|c81a8b61bc2a6a24c5103fd71843b71c96a7e413|1662681600000|1673053200000|1678237200000|app/templates/settings/staff/user.hbs +remove|ember-template-lint|no-action|84|27|84|27|a927cb3d62f088a149f64288c634921673563e7d|1662681600000|1673053200000|1678237200000|app/templates/settings/staff/user.hbs +remove|ember-template-lint|no-action|53|99|53|99|7628e64f5e59b4de2f529e029596f5570a4827ae|1662681600000|1673053200000|1678237200000|app/templates/settings/staff/user.hbs +remove|ember-template-lint|no-action|91|29|91|29|509c2ee1c3b1c57ee10b62649404561d5817de7f|1662681600000|1673053200000|1678237200000|app/templates/settings/staff/user.hbs +remove|ember-template-lint|no-action|92|27|92|27|7628e64f5e59b4de2f529e029596f5570a4827ae|1662681600000|1673053200000|1678237200000|app/templates/settings/staff/user.hbs +remove|ember-template-lint|no-action|60|103|60|103|a98190ea4757d865b31ad00184c6cc12a89c1009|1662681600000|1673053200000|1678237200000|app/templates/settings/staff/user.hbs +remove|ember-template-lint|no-action|102|31|102|31|a98190ea4757d865b31ad00184c6cc12a89c1009|1662681600000|1673053200000|1678237200000|app/templates/settings/staff/user.hbs +remove|ember-template-lint|no-action|107|33|107|33|34da22516e03547d6f322fe271a3251add8f3ec9|1662681600000|1673053200000|1678237200000|app/templates/settings/staff/user.hbs +remove|ember-template-lint|no-action|108|31|108|31|a98190ea4757d865b31ad00184c6cc12a89c1009|1662681600000|1673053200000|1678237200000|app/templates/settings/staff/user.hbs +remove|ember-template-lint|no-action|34|54|34|54|5af61080eb82340db68e59c287a1e9273f805b1e|1662681600000|1673053200000|1678237200000|app/templates/settings/staff/user.hbs +remove|ember-template-lint|no-action|39|49|39|49|7f6812a5fb3d34d95b4e27ce4b9691b3065f7b8c|1662681600000|1673053200000|1678237200000|app/templates/settings/staff/user.hbs +remove|ember-template-lint|no-action|40|47|40|47|5af61080eb82340db68e59c287a1e9273f805b1e|1662681600000|1673053200000|1678237200000|app/templates/settings/staff/user.hbs +remove|ember-template-lint|no-action|473|62|473|62|4150a56e60c88b9d8203a48c28069896522205ed|1662681600000|1673053200000|1678237200000|app/templates/settings/staff/user.hbs +remove|ember-template-lint|no-action|493|49|493|49|60dfff263d99797e3bcdf455c9c6ccf8ae539f1e|1662681600000|1673053200000|1678237200000|app/templates/settings/staff/user.hbs +remove|ember-template-lint|no-action|494|47|494|47|a1a5fab148882be2de9da5aca1d7d7e39e65a326|1662681600000|1673053200000|1678237200000|app/templates/settings/staff/user.hbs +remove|ember-template-lint|no-duplicate-landmark-elements|459|16|459|16|c7e339eb9f5d83115a7fda2636d1487ba11b133d|1662681600000|1673053200000|1678237200000|app/templates/settings/staff/user.hbs +remove|ember-template-lint|no-duplicate-landmark-elements|19|4|19|4|75d318fd9d711332a80f28848acc874ec14b0f4f|1662681600000|1673053200000|1678237200000|app/components/modal-members-label-form.hbs +remove|ember-template-lint|no-duplicate-landmark-elements|16|16|16|16|1661d2edb187b634c8187e5ecb0db15a4c7262fc|1662681600000|1673053200000|1678237200000|app/templates/signin.hbs +remove|ember-template-lint|no-duplicate-landmark-elements|46|16|46|16|f2740bc03b393e8708035d4952a2ab630472bd22|1662681600000|1673053200000|1678237200000|app/templates/settings/navigation.hbs +remove|ember-template-lint|no-duplicate-landmark-elements|398|16|398|16|f8a398a428b26623555526f6e625aeca79d8dc72|1662681600000|1673053200000|1678237200000|app/templates/settings/staff/user.hbs +remove|ember-template-lint|no-action|210|75|210|75|e0b0429cdf24580adc31da56392cc9814a42b2bb|1662681600000|1673053200000|1678237200000|app/templates/settings/staff/user.hbs +remove|ember-template-lint|no-action|218|45|218|45|4a66eafd7ad8fea066c11d298665e40bb02e3fc1|1662681600000|1673053200000|1678237200000|app/templates/settings/staff/user.hbs +remove|ember-template-lint|no-action|219|43|219|43|923e950a7705bc29217afe2e0a81dbf6012777f1|1662681600000|1673053200000|1678237200000|app/templates/settings/staff/user.hbs +remove|ember-template-lint|no-invalid-interactive|210|62|210|62|19a5403007099acc29f4f7bbbb8fd008405002eb|1662681600000|1673053200000|1678237200000|app/templates/settings/staff/user.hbs +remove|ember-template-lint|no-action|125|88|125|88|ea7c6e414cc202b6e4049eae4f60eb0829bd3ff0|1662681600000|1673053200000|1678237200000|app/templates/settings/staff/user.hbs +remove|ember-template-lint|no-action|129|35|129|35|ea7c6e414cc202b6e4049eae4f60eb0829bd3ff0|1662681600000|1673053200000|1678237200000|app/templates/settings/staff/user.hbs +remove|ember-template-lint|no-action|136|42|136|42|7a2a7a1b2159d811b310a9b89817108ddff9df88|1662681600000|1673053200000|1678237200000|app/templates/settings/staff/user.hbs +remove|ember-template-lint|no-action|140|35|140|35|7a2a7a1b2159d811b310a9b89817108ddff9df88|1662681600000|1673053200000|1678237200000|app/templates/settings/staff/user.hbs diff --git a/ghost/admin/.template-lintrc.js b/ghost/admin/.template-lintrc.js index 59d6e9283a..ebb04ffb7f 100644 --- a/ghost/admin/.template-lintrc.js +++ b/ghost/admin/.template-lintrc.js @@ -4,6 +4,7 @@ module.exports = { rules: { 'no-forbidden-elements': ['meta', 'html', 'script'], 'no-implicit-this': {allow: ['noop', 'now', 'site-icon-style', 'accent-color-background']}, - 'no-inline-styles': false + 'no-inline-styles': false, + 'no-duplicate-landmark-elements': false } }; diff --git a/ghost/admin/app/components/gh-image-uploader.js b/ghost/admin/app/components/gh-image-uploader.js index ce008e9c55..9f50422976 100644 --- a/ghost/admin/app/components/gh-image-uploader.js +++ b/ghost/admin/app/components/gh-image-uploader.js @@ -248,10 +248,11 @@ export default Component.extend({ message = `The image type you uploaded is not supported. Please use ${validExtensions}`; } else if (isRequestEntityTooLargeError(error)) { message = 'The image you uploaded was larger than the maximum file size your server allows.'; - } else if (error.payload.errors && !isBlank(error.payload.errors[0].message)) { + } else if (!isBlank(error.payload?.errors[0]?.message)) { message = error.payload.errors[0].message; } else { message = 'Something went wrong :('; + console.error(error); // eslint-disable-line } this.set('failureMessage', message); diff --git a/ghost/admin/app/components/modal-delete-user.hbs b/ghost/admin/app/components/modal-delete-user.hbs deleted file mode 100644 index d62f48b326..0000000000 --- a/ghost/admin/app/components/modal-delete-user.hbs +++ /dev/null @@ -1,31 +0,0 @@ -
-

Are you sure you want to delete this user?

-
-{{svg-jar "close"}} - -
- {{#if this.user.count.posts}} -

- {{this.user.name}} will be permanently deleted and their {{gh-pluralize this.user.count.posts 'post'}} will be automatically assigned to {{this.ownerUser.name}}. -

- -

- To make these easy to find in the future, each post will be given an internal tag of #{{this.user.slug}} -

- {{else}} -

- {{this.user.name}} will be permanently deleted. -

- {{/if}} -
- -
- - -
diff --git a/ghost/admin/app/components/modal-delete-user.js b/ghost/admin/app/components/modal-delete-user.js deleted file mode 100644 index 4efbfd3eea..0000000000 --- a/ghost/admin/app/components/modal-delete-user.js +++ /dev/null @@ -1,31 +0,0 @@ -import ModalComponent from 'ghost-admin/components/modal-base'; -import {alias} from '@ember/object/computed'; -import {inject as service} from '@ember/service'; -import {task} from 'ember-concurrency'; - -export default ModalComponent.extend({ - store: service(), - - // Allowed actions - confirm: () => {}, - - user: alias('model'), - - actions: { - confirm() { - this.deleteUser.perform(); - } - }, - - get ownerUser() { - return this.store.peekAll('user').findBy('isOwnerOnly', true); - }, - - deleteUser: task(function* () { - try { - yield this.confirm(); - } finally { - this.send('closeModal'); - } - }).drop() -}); diff --git a/ghost/admin/app/components/modal-import-members.hbs b/ghost/admin/app/components/modal-import-members.hbs index 869bb96f88..99b785fc75 100644 --- a/ghost/admin/app/components/modal-import-members.hbs +++ b/ghost/admin/app/components/modal-import-members.hbs @@ -1,5 +1,4 @@
- {{!-- template-lint-disable no-duplicate-landmark-elements --}} {{#if (eq this.state 'INIT')}}

Import members

diff --git a/ghost/admin/app/components/modal-regenerate-token.hbs b/ghost/admin/app/components/modal-regenerate-token.hbs deleted file mode 100644 index 22d5b42e8a..0000000000 --- a/ghost/admin/app/components/modal-regenerate-token.hbs +++ /dev/null @@ -1,20 +0,0 @@ -
-

Regenerate your Staff Access Token

-
-{{svg-jar "close"}} - -
-

- You can regenerate your Staff Access Token any time, but any scripts or applications using it will need to be updated. -

- {{#if this.errorMessage}} -

{{this.errorMessage}}

- {{/if}} -
- -
- - -
diff --git a/ghost/admin/app/components/modal-regenerate-token.js b/ghost/admin/app/components/modal-regenerate-token.js deleted file mode 100644 index e18aa093bd..0000000000 --- a/ghost/admin/app/components/modal-regenerate-token.js +++ /dev/null @@ -1,10 +0,0 @@ -import ModalComponent from 'ghost-admin/components/modal-base'; - -export default ModalComponent.extend({ - actions: { - confirm() { - this.confirm(); - this.send('closeModal'); - } - } -}); diff --git a/ghost/admin/app/components/modal-select-user-role.hbs b/ghost/admin/app/components/modal-select-user-role.hbs deleted file mode 100644 index 98f10e6cca..0000000000 --- a/ghost/admin/app/components/modal-select-user-role.hbs +++ /dev/null @@ -1,16 +0,0 @@ -
-

Change user role

-
-{{svg-jar "close"}} - -
- -
- -
- - -
diff --git a/ghost/admin/app/components/modal-select-user-role.js b/ghost/admin/app/components/modal-select-user-role.js deleted file mode 100644 index 72133c34b2..0000000000 --- a/ghost/admin/app/components/modal-select-user-role.js +++ /dev/null @@ -1,39 +0,0 @@ -import ModalBase from 'ghost-admin/components/modal-base'; -import classic from 'ember-classic-decorator'; -import {action} from '@ember/object'; -import {tracked} from '@glimmer/tracking'; - -// TODO: update modals to work fully with Glimmer components -@classic -export default class ModalPostPreviewComponent extends ModalBase { - @tracked role; - - // TODO: rename to confirm() when modals have full Glimmer support - @action - confirmAction() { - this.confirm(this.role); - this.close(); - } - - @action - close(event) { - event?.preventDefault?.(); - this.closeModal(); - } - - @action - setRoleFromModel() { - this.role = this.model; - } - - actions = { - confirm() { - this.confirmAction(...arguments); - }, - - // needed because ModalBase uses .send() for keyboard events - closeModal() { - this.close(); - } - }; -} diff --git a/ghost/admin/app/components/modal-suspend-user.hbs b/ghost/admin/app/components/modal-suspend-user.hbs deleted file mode 100644 index 7aa8d4399f..0000000000 --- a/ghost/admin/app/components/modal-suspend-user.hbs +++ /dev/null @@ -1,13 +0,0 @@ -
-

Are you sure you want to suspend this user?

-
-{{svg-jar "close"}} - -
- WARNING: This user will no longer be able to log in but their posts will be kept. -
- -
- - -
diff --git a/ghost/admin/app/components/modal-suspend-user.js b/ghost/admin/app/components/modal-suspend-user.js deleted file mode 100644 index 7a323f5565..0000000000 --- a/ghost/admin/app/components/modal-suspend-user.js +++ /dev/null @@ -1,24 +0,0 @@ -import ModalComponent from 'ghost-admin/components/modal-base'; -import {alias} from '@ember/object/computed'; -import {task} from 'ember-concurrency'; - -export default ModalComponent.extend({ - // Allowed actions - confirm: () => {}, - - user: alias('model'), - - actions: { - confirm() { - return this.suspendUser.perform(); - } - }, - - suspendUser: task(function* () { - try { - yield this.confirm(); - } finally { - this.send('closeModal'); - } - }).drop() -}); diff --git a/ghost/admin/app/components/modal-transfer-owner.hbs b/ghost/admin/app/components/modal-transfer-owner.hbs deleted file mode 100644 index 951c67ed79..0000000000 --- a/ghost/admin/app/components/modal-transfer-owner.hbs +++ /dev/null @@ -1,16 +0,0 @@ -
-

Transfer Ownership

-
-{{svg-jar "close"}} - -
-

- Are you sure you want to transfer the ownership of this blog? - You will not be able to undo this action. -

-
- -
- - -
diff --git a/ghost/admin/app/components/modal-transfer-owner.js b/ghost/admin/app/components/modal-transfer-owner.js deleted file mode 100644 index 829742c651..0000000000 --- a/ghost/admin/app/components/modal-transfer-owner.js +++ /dev/null @@ -1,23 +0,0 @@ -import ModalComponent from 'ghost-admin/components/modal-base'; -import {task} from 'ember-concurrency'; - -export default ModalComponent.extend({ - user: null, - - // Allowed actions - confirm: () => {}, - - actions: { - confirm() { - this.transferOwnership.perform(); - } - }, - - transferOwnership: task(function* () { - try { - yield this.confirm(); - } finally { - this.send('closeModal'); - } - }).drop() -}); diff --git a/ghost/admin/app/components/modal-unsuspend-user.hbs b/ghost/admin/app/components/modal-unsuspend-user.hbs deleted file mode 100644 index e401d63f66..0000000000 --- a/ghost/admin/app/components/modal-unsuspend-user.hbs +++ /dev/null @@ -1,13 +0,0 @@ -
-

Are you sure you want to un-suspend this user?

-
-{{svg-jar "close"}} - -
- WARNING: This user will be able to log in again and will have the same permissions they had previously. -
- -
- - -
diff --git a/ghost/admin/app/components/modal-unsuspend-user.js b/ghost/admin/app/components/modal-unsuspend-user.js deleted file mode 100644 index 2922c820c8..0000000000 --- a/ghost/admin/app/components/modal-unsuspend-user.js +++ /dev/null @@ -1,24 +0,0 @@ -import ModalComponent from 'ghost-admin/components/modal-base'; -import {alias} from '@ember/object/computed'; -import {task} from 'ember-concurrency'; - -export default ModalComponent.extend({ - // Allowed actions - confirm: () => {}, - - user: alias('model'), - - actions: { - confirm() { - return this.unsuspendUser.perform(); - } - }, - - unsuspendUser: task(function* () { - try { - yield this.confirm(); - } finally { - this.send('closeModal'); - } - }).drop() -}); diff --git a/ghost/admin/app/components/modal-upgrade-unsuspend-user-host-limit.hbs b/ghost/admin/app/components/modal-upgrade-unsuspend-user-host-limit.hbs deleted file mode 100644 index 9d44ebc01b..0000000000 --- a/ghost/admin/app/components/modal-upgrade-unsuspend-user-host-limit.hbs +++ /dev/null @@ -1,20 +0,0 @@ -
-

Upgrade to un-suspend this user

-
- - -
-

- {{html-safe this.model.message}} To give this user access to Ghost, upgrade to a different plan. -

-
- -
- - - -
\ No newline at end of file diff --git a/ghost/admin/app/components/modal-upgrade-unsuspend-user-host-limit.js b/ghost/admin/app/components/modal-upgrade-unsuspend-user-host-limit.js deleted file mode 100644 index 99c3e17ee7..0000000000 --- a/ghost/admin/app/components/modal-upgrade-unsuspend-user-host-limit.js +++ /dev/null @@ -1,16 +0,0 @@ -import ModalComponent from 'ghost-admin/components/modal-base'; -import {inject as service} from '@ember/service'; - -export default ModalComponent.extend({ - router: service(), - - actions: { - upgrade() { - this.router.transitionTo('pro'); - }, - - confirm() { - this.send('upgrade'); - } - } -}); diff --git a/ghost/admin/app/components/modal-upload-image.hbs b/ghost/admin/app/components/modal-upload-image.hbs deleted file mode 100644 index 360759e4a5..0000000000 --- a/ghost/admin/app/components/modal-upload-image.hbs +++ /dev/null @@ -1,32 +0,0 @@ -
- {{#if this.url}} -
-
- - {{svg-jar "trash"}} - - -
- {{else}} - - {{/if}} -
- -
- - {{#if this._isUploading}} - - {{else}} - - {{/if}} -
diff --git a/ghost/admin/app/components/modal-upload-image.js b/ghost/admin/app/components/modal-upload-image.js deleted file mode 100644 index 9d44f2db6b..0000000000 --- a/ghost/admin/app/components/modal-upload-image.js +++ /dev/null @@ -1,109 +0,0 @@ -import ModalComponent from 'ghost-admin/components/modal-base'; -import cajaSanitizers from 'ghost-admin/utils/caja-sanitizers'; -import {computed} from '@ember/object'; -import {isEmpty} from '@ember/utils'; -import {inject as service} from '@ember/service'; -import {task} from 'ember-concurrency'; - -export default ModalComponent.extend({ - config: service(), - notifications: service(), - - model: null, - - url: '', - newUrl: '', - _isUploading: false, - - image: computed('model.{model,imageProperty}', { - get() { - let imageProperty = this.get('model.imageProperty'); - - return this.get(`model.model.${imageProperty}`); - }, - - set(key, value) { - let model = this.get('model.model'); - let imageProperty = this.get('model.imageProperty'); - - return model.set(imageProperty, value); - } - }), - - didReceiveAttrs() { - this._super(...arguments); - - let image = this.image; - this.set('url', image); - this.set('newUrl', image); - }, - - actions: { - fileUploaded(url) { - this.set('url', url); - this.set('newUrl', url); - }, - - removeImage() { - this.set('url', ''); - this.set('newUrl', ''); - }, - - confirm() { - this.uploadImage.perform(); - }, - - isUploading() { - this.toggleProperty('_isUploading'); - } - }, - - // TODO: should validation be handled in the gh-image-uploader component? - // pro - consistency everywhere, simplification here - // con - difficult if the "save" is happening externally as it does here - // - // maybe it should be handled at the model level? - // - automatically present everywhere - // - file uploads should always result in valid urls so it should only - // affect the url input form - keyDown() { - this._setErrorState(false); - }, - - _setErrorState(state) { - if (state) { - this.element.querySelector('.url').classList.add('error'); - } else { - this.element.querySelector('.url').classList.remove('error'); - } - }, - - _validateUrl(url) { - if (!isEmpty(url) && !cajaSanitizers.url(url)) { - this._setErrorState(true); - return {message: 'Image URI is not valid'}; - } - - return true; - }, - // end validation - - uploadImage: task(function* () { - let model = this.get('model.model'); - let newUrl = this.newUrl; - let result = this._validateUrl(newUrl); - let notifications = this.notifications; - - if (result === true) { - this.set('image', newUrl); - - try { - yield model.save(); - } catch (e) { - notifications.showAPIError(e, {key: 'image.upload'}); - } finally { - this.send('closeModal'); - } - } - }).drop() -}); diff --git a/ghost/admin/app/components/settings/staff/modals/delete-user.hbs b/ghost/admin/app/components/settings/staff/modals/delete-user.hbs new file mode 100644 index 0000000000..758650c24a --- /dev/null +++ b/ghost/admin/app/components/settings/staff/modals/delete-user.hbs @@ -0,0 +1,34 @@ +
+
+

Are you sure you want to delete this user?

+
+ + +
+ {{#if @data.user.count.posts}} +

+ {{@data.user.name}} will be permanently deleted and their {{gh-pluralize @data.user.count.posts 'post'}} will be automatically assigned to {{this.ownerUser.name}}. +

+ +

+ To make these easy to find in the future, each post will be given an internal tag of #{{@data.user.slug}} +

+ {{else}} +

+ {{@data.user.name}} will be permanently deleted. +

+ {{/if}} +
+ +
+ + +
+
\ No newline at end of file diff --git a/ghost/admin/app/components/settings/staff/modals/delete-user.js b/ghost/admin/app/components/settings/staff/modals/delete-user.js new file mode 100644 index 0000000000..83eadf104d --- /dev/null +++ b/ghost/admin/app/components/settings/staff/modals/delete-user.js @@ -0,0 +1,31 @@ +import Component from '@glimmer/component'; +import {inject as service} from '@ember/service'; +import {task} from 'ember-concurrency'; + +export default class DeleteUserModal extends Component { + @service notifications; + @service router; + @service store; + + get ownerUser() { + return this.store.peekAll('user').findBy('isOwnerOnly', true); + } + + @task({drop: true}) + *deleteUserTask() { + try { + const {user} = this.args.data; + + yield user.destroyRecord(); + + this.notifications.closeAlerts('user.delete'); + this.store.unloadAll('post'); + this.router.transitionTo('settings.staff'); + } catch (error) { + this.notifications.showAlert('The user could not be deleted. Please try again.', {type: 'error', key: 'user.delete.failed'}); + throw error; + } finally { + this.args.close(); + } + } +} diff --git a/ghost/admin/app/components/settings/staff/modals/regenerate-staff-token.hbs b/ghost/admin/app/components/settings/staff/modals/regenerate-staff-token.hbs new file mode 100644 index 0000000000..4f811b3852 --- /dev/null +++ b/ghost/admin/app/components/settings/staff/modals/regenerate-staff-token.hbs @@ -0,0 +1,22 @@ +
+
+

Regenerate your Staff Access Token

+
+ + +
+

+ You can regenerate your Staff Access Token any time, but any scripts or applications using it will need to be updated. +

+ {{#if this.errorMessage}} +

{{this.errorMessage}}

+ {{/if}} +
+ +
+ + +
+
\ No newline at end of file diff --git a/ghost/admin/app/components/settings/staff/modals/regenerate-staff-token.js b/ghost/admin/app/components/settings/staff/modals/regenerate-staff-token.js new file mode 100644 index 0000000000..82700ff2be --- /dev/null +++ b/ghost/admin/app/components/settings/staff/modals/regenerate-staff-token.js @@ -0,0 +1,23 @@ +import Component from '@glimmer/component'; +import {action} from '@ember/object'; +import {inject as service} from '@ember/service'; + +export default class RegenerateStaffTokenModal extends Component { + @service ajax; + @service ghostPaths; + @service notifications; + + @action + async regenerateStaffToken() { + const url = this.ghostPaths.url.api('users', 'me', 'token'); + + try { + const {apiKey} = await this.ajax.put(url, {data: {}}); + + this.args.close(`${apiKey.id}:${apiKey.secret}`); + } catch (error) { + this.notifications.showAPIError(error, {key: 'token.regenerate'}); + this.args.close(); + } + } +} diff --git a/ghost/admin/app/components/settings/staff/modals/select-role.hbs b/ghost/admin/app/components/settings/staff/modals/select-role.hbs new file mode 100644 index 0000000000..faca0d3f23 --- /dev/null +++ b/ghost/admin/app/components/settings/staff/modals/select-role.hbs @@ -0,0 +1,18 @@ +
+
+

Change user role

+
+ + +
+ +
+ +
+ + +
+
\ No newline at end of file diff --git a/ghost/admin/app/components/settings/staff/modals/select-role.js b/ghost/admin/app/components/settings/staff/modals/select-role.js new file mode 100644 index 0000000000..c38f44b3f2 --- /dev/null +++ b/ghost/admin/app/components/settings/staff/modals/select-role.js @@ -0,0 +1,11 @@ +import Component from '@glimmer/component'; +import {tracked} from '@glimmer/tracking'; + +export default class SelectRoleModal extends Component { + @tracked role; + + constructor() { + super(...arguments); + this.role = this.args.data.currentRole; + } +} diff --git a/ghost/admin/app/components/settings/staff/modals/suspend-user.hbs b/ghost/admin/app/components/settings/staff/modals/suspend-user.hbs new file mode 100644 index 0000000000..2208023bbf --- /dev/null +++ b/ghost/admin/app/components/settings/staff/modals/suspend-user.hbs @@ -0,0 +1,21 @@ +
+
+

Are you sure you want to suspend this user?

+
+ + +
+ WARNING: This user will no longer be able to log in but their posts will be kept. +
+ +
+ + +
+
\ No newline at end of file diff --git a/ghost/admin/app/components/settings/staff/modals/suspend-user.js b/ghost/admin/app/components/settings/staff/modals/suspend-user.js new file mode 100644 index 0000000000..65ea2c6ce5 --- /dev/null +++ b/ghost/admin/app/components/settings/staff/modals/suspend-user.js @@ -0,0 +1,24 @@ +import Component from '@glimmer/component'; +import {inject as service} from '@ember/service'; +import {task} from 'ember-concurrency'; + +export default class SuspendUserModal extends Component { + @service notifications; + + @task({drop: true}) + *suspendUserTask() { + try { + const {user, saveTask} = this.args.data; + + user.status = 'inactive'; + yield saveTask.perform(); + + this.notifications.closeAlerts('user.suspend'); + } catch (error) { + this.notifications.showAlert('The user could not be suspended. Please try again.', {type: 'error', key: 'user.suspend.failed'}); + throw error; + } finally { + this.args.close(); + } + } +} diff --git a/ghost/admin/app/components/settings/staff/modals/transfer-ownership.hbs b/ghost/admin/app/components/settings/staff/modals/transfer-ownership.hbs new file mode 100644 index 0000000000..32bb26259d --- /dev/null +++ b/ghost/admin/app/components/settings/staff/modals/transfer-ownership.hbs @@ -0,0 +1,22 @@ +
+
+

Transfer Ownership

+
+ + +
+

+ Are you sure you want to transfer the ownership of this blog? + You will not be able to undo this action. +

+
+ +
+ + +
+
\ No newline at end of file diff --git a/ghost/admin/app/components/settings/staff/modals/transfer-ownership.js b/ghost/admin/app/components/settings/staff/modals/transfer-ownership.js new file mode 100644 index 0000000000..9dc9998334 --- /dev/null +++ b/ghost/admin/app/components/settings/staff/modals/transfer-ownership.js @@ -0,0 +1,47 @@ +import Component from '@glimmer/component'; +import {isArray} from '@ember/array'; +import {inject as service} from '@ember/service'; +import {task} from 'ember-concurrency'; + +export default class TransferOwnershipModal extends Component { + @service ajax; + @service dropdown; + @service ghostPaths; + @service notifications; + @service store; + + @task({drop: true}) + *transferOwnershipTask() { + try { + const {user} = this.args.data; + + this.dropdown.closeDropdowns(); + + const response = yield this.ajax.put(url, { + data: { + owner: [{ + id: user.id + }] + } + }); + + // manually update the roles for the users that just changed roles + // because store.pushPayload is not working with embedded relations + if (isArray(response?.users)) { + response.users.forEach((userJSON) => { + const updatedUser = this.store.peekRecord('user', userJSON.id); + const role = this.store.peekRecord('role', userJSON.roles[0].id); + + updatedUser.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'}); + throw error; + } finally { + this.args.close(); + } + } +} diff --git a/ghost/admin/app/components/settings/staff/modals/unsuspend-user.hbs b/ghost/admin/app/components/settings/staff/modals/unsuspend-user.hbs new file mode 100644 index 0000000000..0cedd25509 --- /dev/null +++ b/ghost/admin/app/components/settings/staff/modals/unsuspend-user.hbs @@ -0,0 +1,46 @@ +{{#if this.hostLimitError}} +
+
+

Upgrade to un-suspend this user

+
+ + +
+

+ {{html-safe this.hostLimitError}} To give this user access to Ghost, upgrade to a different plan. +

+
+ +
+ + + +
+
+{{else}} +
+
+

Are you sure you want to un-suspend this user?

+
+ + +
+ WARNING: This user will be able to log in again and will have the same permissions they had previously. +
+ +
+ + +
+
+{{/if}} \ No newline at end of file diff --git a/ghost/admin/app/components/settings/staff/modals/unsuspend-user.js b/ghost/admin/app/components/settings/staff/modals/unsuspend-user.js new file mode 100644 index 0000000000..b654e4ce2a --- /dev/null +++ b/ghost/admin/app/components/settings/staff/modals/unsuspend-user.js @@ -0,0 +1,57 @@ +import Component from '@glimmer/component'; +import {action} from '@ember/object'; +import {inject as service} from '@ember/service'; +import {task} from 'ember-concurrency'; +import {tracked} from '@glimmer/tracking'; + +export default class UnsuspendUserModal extends Component { + @service limit; + @service notifications; + @service router; + + @tracked hostLimitError = null; + + constructor() { + super(...arguments); + this.checkHostLimitsTask.perform(); + } + + @action + upgrade() { + this.router.transitionTo('pro'); + this.args.close(); + } + + @task + *checkHostLimitsTask() { + if (this.args.data.user.role.name !== 'Contributor' && this.limit.limiter.isLimited('staff')) { + try { + yield this.limit.limiter.errorIfWouldGoOverLimit('staff'); + } catch (error) { + if (error.errorType === 'HostLimitError') { + this.hostLimitError = error.message; + } else { + this.notifications.showAPIError(error, {key: 'staff.limit'}); + this.args.close(); + } + } + } + } + + @task({drop: true}) + *unsuspendUserTask() { + try { + const {user, saveTask} = this.args.data; + + user.status = 'active'; + yield saveTask.perform(); + + this.notifications.closeAlerts('user.unsuspend'); + } catch (error) { + this.notifications.showAlert('The user could not be unsuspended. Please try again.', {type: 'error', key: 'user.unsuspend.failed'}); + throw error; + } finally { + this.args.close(); + } + } +} diff --git a/ghost/admin/app/components/settings/staff/modals/upload-image.hbs b/ghost/admin/app/components/settings/staff/modals/upload-image.hbs new file mode 100644 index 0000000000..fd638d619d --- /dev/null +++ b/ghost/admin/app/components/settings/staff/modals/upload-image.hbs @@ -0,0 +1,38 @@ +
+
+ {{#if this.url}} +
+
+ +
+ {{else}} + + {{/if}} +
+ +
+ + {{#if this.isUploading}} + + {{else}} + + {{/if}} +
+
\ No newline at end of file diff --git a/ghost/admin/app/components/settings/staff/modals/upload-image.js b/ghost/admin/app/components/settings/staff/modals/upload-image.js new file mode 100644 index 0000000000..345064967d --- /dev/null +++ b/ghost/admin/app/components/settings/staff/modals/upload-image.js @@ -0,0 +1,52 @@ +import Component from '@glimmer/component'; +import {action} from '@ember/object'; +import {inject as service} from '@ember/service'; +import {task} from 'ember-concurrency'; +import {tracked} from '@glimmer/tracking'; + +export default class UploadImageModal extends Component { + @service notifications; + + @tracked errorMessage; + @tracked isUploading = false; + @tracked url = ''; + + constructor() { + super(...arguments); + this.url = this._getModelProperty(); + } + + @action + fileUploaded(url) { + this.url = url; + } + + @action + removeImage() { + this.url = ''; + } + + @task({drop: true}) + *uploadImageTask() { + this._setModelProperty(this.url); + + try { + yield this.args.data.model.save(); + } catch (e) { + this.notifications.showAPIError(e, {key: 'image.upload'}); + } finally { + this.args.close(); + } + } + + _getModelProperty() { + const {model, modelProperty} = this.args.data; + return model[modelProperty]; + } + + _setModelProperty(url) { + const {model, modelProperty} = this.args.data; + model[modelProperty] = url; + return url; + } +} diff --git a/ghost/admin/app/controllers/settings/staff/user.js b/ghost/admin/app/controllers/settings/staff/user.js index 5172964ece..b2a94bba8e 100644 --- a/ghost/admin/app/controllers/settings/staff/user.js +++ b/ghost/admin/app/controllers/settings/staff/user.js @@ -1,4 +1,11 @@ import Controller from '@ember/controller'; +import DeleteUserModal from '../../../components/settings/staff/modals/delete-user'; +import RegenerateStaffTokenModal from '../../../components/settings/staff/modals/regenerate-staff-token'; +import SelectRoleModal from '../../../components/settings/staff/modals/select-role'; +import SuspendUserModal from '../../../components/settings/staff/modals/suspend-user'; +import TransferOwnershipModal from '../../../components/settings/staff/modals/transfer-ownership'; +import UnsuspendUserModal from '../../../components/settings/staff/modals/unsuspend-user'; +import UploadImageModal from '../../../components/settings/staff/modals/upload-image'; 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'; @@ -6,7 +13,6 @@ import validator from 'validator'; import windowProxy from 'ghost-admin/utils/window-proxy'; import {action, computed} from '@ember/object'; import {alias, and, not, or, readOnly} from '@ember/object/computed'; -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'; @@ -14,26 +20,17 @@ import {task, taskGroup, timeout} from 'ember-concurrency'; export default Controller.extend({ ajax: service(), config: service(), - dropdown: service(), ghostPaths: service(), - limit: service(), + membersUtils: service(), + modals: service(), notifications: service(), session: service(), slugGenerator: service(), utils: service(), - membersUtils: service(), personalToken: null, - limitErrorMessage: null, personalTokenRegenerated: false, dirtyAttributes: false, - showDeleteUserModal: false, - showSuspendUserModal: false, - showTransferOwnerModal: false, - showUploadCoverModal: false, - showUploadImageModal: false, - showRegenerateTokenModal: false, - showRoleSelectionModal: false, _scratchFacebook: null, _scratchTwitter: null, @@ -88,62 +85,6 @@ export default Controller.extend({ }), 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'); @@ -255,50 +196,6 @@ export default Controller.extend({ } }, - 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'}); - }); - }, - - 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) { @@ -317,28 +214,77 @@ export default Controller.extend({ 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'}); - }); } }, + deleteUser: action(async function () { + if (this.deleteUserActionIsVisible) { + await this.modals.open(DeleteUserModal, { + user: this.model + }); + } + }), + + suspendUser: action(async function () { + if (this.deleteUserActionIsVisible) { + await this.modals.open(SuspendUserModal, { + user: this.model, + saveTask: this.save + }); + } + }), + + unsuspendUser: action(async function () { + if (this.deleteUserActionIsVisible) { + await this.modals.open(UnsuspendUserModal, { + user: this.model, + saveTask: this.save + }); + } + }), + + transferOwnership: action(async function () { + if (this.canMakeOwner) { + await this.modals.open(TransferOwnershipModal, { + user: this.model + }); + } + }), + + regenerateStaffToken: action(async function () { + const apiToken = await this.modals.open(RegenerateStaffTokenModal); + + if (apiToken) { + this.set('personalToken', apiToken); + this.set('personalTokenRegenerated', true); + } + }), + + selectRole: action(async function () { + const newRole = await this.modals.open(SelectRoleModal, { + currentRole: this.model.role + }); + + if (newRole) { + this.user.role = newRole; + this.set('dirtyAttributes', true); + } + }), + + changeCoverImage: action(async function () { + await this.modals.open(UploadImageModal, { + model: this.model, + modelProperty: 'coverImage' + }); + }), + + changeProfileImage: action(async function () { + await this.modals.open(UploadImageModal, { + model: this.model, + modelProperty: 'profileImage' + }); + }), + reset: action(function () { this.user.rollbackAttributes(); this.user.password = ''; @@ -362,19 +308,6 @@ export default Controller.extend({ } }), - deleteUser: task(function *() { - try { - yield this.user.destroyRecord(); - - this.notifications.closeAlerts('user.delete'); - this.store.unloadAll('post'); - this.transitionToRoute('settings.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'); diff --git a/ghost/admin/app/templates/settings/staff/user.hbs b/ghost/admin/app/templates/settings/staff/user.hbs index cea9e3f01d..9440026dff 100644 --- a/ghost/admin/app/templates/settings/staff/user.hbs +++ b/ghost/admin/app/templates/settings/staff/user.hbs @@ -31,33 +31,27 @@ {{#if this.canMakeOwner}}
  • - - {{#if this.showTransferOwnerModal}} - - {{/if}}
    • {{/if}} {{#if this.deleteUserActionIsVisible}}
  • -
    • {{#if this.user.isActive}}
  • -
    • {{/if}} {{#if this.user.isSuspended}}
  • -
    • @@ -74,39 +68,6 @@ {{/if}} - - {{#if this.showDeleteUserModal}} - - {{/if}} - - {{#if this.showSuspendUserModal}} - - {{/if}} - - {{#if this.showUnsuspendUserModal}} - {{#if this.limitErrorMessage}} - - {{else}} - - {{/if}} - {{/if}} @@ -120,24 +81,12 @@