✨ Added the "reset all passwords" user interface

issue https://github.com/TryGhost/Team/issues/750
pr https://github.com/TryGhost/Ghost/pull/13005

ghost/admin/app/components/modal-reset-all-passwords.hbs

@@ -0,0 +1,28 @@
+<header class="modal-header">
+    <h1>Reset all passwords</h1>
+</header>
+<a class="close" href="" role="button" title="Close" {{action "closeModal"}}>{{svg-jar "close"}}<span class="hidden">Close</span></a>
+
+<div class="modal-body">
+    <p>
+        You're about to end all active staff user sessions and trigger a password reset for everyone (including yourself). Are you sure?
+    </p>
+    <p style="display:flex; column-gap: 0.8em;">
+        <div>
+            <input type="checkbox" checked={{this.isChecked}} {{on "click" (action "toggleCheckbox")}} name="checkbox" data-test-checkbox="reset-all-passwords">
+        </div>
+        <div style="flex:1">
+            <div style="margin-bottom: 0.4em">
+                <b>Yes, end sessions and reset passwords for all users.</b>
+            </div>
+            <div>
+                Upon submission, you will be logged out. Please check your email to reset your password.
+            </div>
+        </div>
+    </p>
+</div>
+
+<div class="modal-footer">
+    <button {{action "closeModal"}} class="gh-btn"><span>Cancel</span></button>
+    <GhTaskButton @buttonText="Reset Passwords" @task={{this.resetPasswords}} @class="gh-btn gh-btn-red gh-btn-icon" disabled={{this.isConfirmDisabled}} />
+</div>

ghost/admin/app/components/modal-reset-all-passwords.js

@@ -0,0 +1,45 @@
+import ModalComponent from 'ghost-admin/components/modal-base';
+import {not} from '@ember/object/computed';
+import {inject as service} from '@ember/service';
+import {set} from '@ember/object';
+import {task} from 'ember-concurrency';
+
+export default ModalComponent.extend({
+    notifications: service(),
+
+    isChecked: false,
+    isConfirmDisabled: not('isChecked'),
+
+    actions: {
+        toggleCheckbox() {
+            set(this, 'isChecked', !this.isChecked);
+        },
+        confirm() {
+            this.deletePost.perform();
+        }
+    },
+
+    async _resetPasswords() {
+        const res = await fetch('/ghost/api/canary/admin/authentication/reset_all_passwords/', {
+            method: 'POST'
+        });
+        if (res.status < 200 || res.status >= 300) {
+            throw new Error('api failed ' + res.status + ' ' + res.statusText);
+        }
+    },
+
+    _failure(error) {
+        this.notifications.showAPIError(error, {key: 'user.resetAllPasswords.failed'});
+    },
+
+    resetPasswords: task(function* () {
+        try {
+            yield this._resetPasswords();
+            window.location = window.location.href.split('#')[0];
+        } catch (e) {
+            this._failure(e);
+        } finally {
+            this.send('closeModal');
+        }
+    }).drop()
+});

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

@@ -11,6 +11,7 @@ export default Controller.extend({
     store: service(),
 
     showInviteUserModal: false,
+    showResetAllPasswordsModal: false,
 
     inviteOrder: null,
     userOrder: null,
@@ -52,6 +53,9 @@ export default Controller.extend({
     actions: {
         toggleInviteUserModal() {
             this.toggleProperty('showInviteUserModal');
+        },
+        toggleResetAllPasswordsModal() {
+            this.toggleProperty('showResetAllPasswordsModal');
         }
     },
 

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

@@ -4,6 +4,36 @@
         {{!-- Do not show Invite user button to authors --}}
         {{#unless this.currentUser.isAuthorOrContributor}}
             <section class="view-actions">
+                {{#if (enable-developer-experiments)}}
+                    {{#if (gh-user-can-admin this.session.user)}}
+                    <span class="dropdown">
+                        <GhDropdownButton
+                            @dropdownName="staff-actions-menu"
+                            @classNames="gh-btn gh-btn-icon only-has-icon gh-actions-cog"
+                            @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 >
+                                {{!-- <LinkTo @route="staff['reset-all-passwords']" class="mr2" data-test-link="reset-all-passwords">
+                                </LinkTo> --}}
+                                <button {{on "click" (action "toggleResetAllPasswordsModal")}}>
+                                    <span>Reset all passwords</span>
+                                </button>
+                            </li>
+                        </GhDropdown>
+                    </span>
+                    {{/if}}
+                {{/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}}
@@ -15,6 +45,12 @@
             @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}}