Modal for user password reset (#1121)

* #431 added modal for user password reset

* Update frontend/pages/admin/UserManagementPage/components/ResetPasswordModal/_styles.scss

Co-authored-by: noahtalerman <47070608+noahtalerman@users.noreply.github.com>

Co-authored-by: noahtalerman <47070608+noahtalerman@users.noreply.github.com>

frontend/pages/admin/UserManagementPage/UserManagementPage.jsx

@@ -26,6 +26,7 @@ import UserForm from "./components/UserForm";
 import EmptyUsers from "./components/EmptyUsers";
 import { generateTableHeaders, combineDataSets } from "./UsersTableConfig";
 import DeleteUserForm from "./components/DeleteUserForm";
+import ResetPasswordModal from "./components/ResetPasswordModal";
 
 const baseClass = "user-management";
 
@@ -78,6 +79,7 @@ export class UserManagementPage extends Component {
       showCreateUserModal: false,
       showEditUserModal: false,
       showDeleteUserModal: false,
+      showResetPasswordModal: false,
       userEditing: null,
       usersEditing: [],
     };
@@ -248,8 +250,8 @@ export class UserManagementPage extends Component {
     const {
       toggleEditUserModal,
       toggleDeleteUserModal,
-      resetPassword,
       goToUserSettingsPage,
+      toggleResetPasswordUserModal,
     } = this;
     switch (action) {
       case "edit":
@@ -259,7 +261,7 @@ export class UserManagementPage extends Component {
         toggleDeleteUserModal(user);
         break;
       case "passwordReset":
-        resetPassword(user);
+        toggleResetPasswordUserModal(user);
         break;
       case "editMyAccount":
         goToUserSettingsPage();
@@ -304,23 +306,33 @@ export class UserManagementPage extends Component {
     });
   };
 
+  toggleResetPasswordUserModal = (user) => {
+    const { showResetPasswordModal } = this.state;
+    this.setState({
+      showResetPasswordModal: !showResetPasswordModal,
+      userEditing: !showResetPasswordModal ? user : null,
+    });
+  };
+
   combineUsersAndInvites = memoize((users, invites, currentUserId) => {
     return combineDataSets(users, invites, currentUserId);
   });
 
   resetPassword = (user) => {
     const { dispatch } = this.props;
+    const { toggleResetPasswordUserModal } = this;
     const { requirePasswordReset } = userActions;
 
     return dispatch(requirePasswordReset(user.id, { require: true })).then(
       () => {
-        return dispatch(
+        dispatch(
           renderFlash(
             "success",
             "User required to reset password",
             requirePasswordReset(user.id, { require: false }) // this is an undo action.
           )
         );
+        toggleResetPasswordUserModal();
       }
     );
   };
@@ -436,6 +448,22 @@ export class UserManagementPage extends Component {
     );
   };
 
+  renderResetPasswordModal = () => {
+    const { showResetPasswordModal, userEditing } = this.state;
+    const { toggleResetPasswordUserModal, resetPassword } = this;
+
+    if (!showResetPasswordModal) return null;
+
+    return (
+      <ResetPasswordModal
+        user={userEditing}
+        modalBaseClass={baseClass}
+        onResetConfirm={resetPassword}
+        onResetCancel={toggleResetPasswordUserModal}
+      />
+    );
+  };
+
   renderSmtpWarning = () => {
     const { appConfigLoading, config } = this.props;
     const { goToAppConfigPage } = this;
@@ -470,6 +498,7 @@ export class UserManagementPage extends Component {
       renderCreateUserModal,
       renderEditUserModal,
       renderDeleteUserModal,
+      renderResetPasswordModal,
       renderSmtpWarning,
       toggleCreateUserModal,
       onTableQueryChange,
@@ -518,6 +547,7 @@ export class UserManagementPage extends Component {
         {renderCreateUserModal()}
         {renderEditUserModal()}
         {renderDeleteUserModal()}
+        {renderResetPasswordModal()}
       </div>
     );
   }

frontend/pages/admin/UserManagementPage/components/ResetPasswordModal/ResetPasswordModal.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { IUser } from "interfaces/user";
+import Modal from "components/modals/Modal";
+import Button from "components/buttons/Button";
+
+const baseClass = "reset-password-modal";
+
+interface IResetPasswordModal {
+  user: IUser;
+  modalBaseClass: string;
+  onResetConfirm: (user: IUser) => void;
+  onResetCancel: () => void;
+}
+
+const ResetPasswordModal = ({
+  user,
+  modalBaseClass,
+  onResetConfirm,
+  onResetCancel,
+}: IResetPasswordModal): JSX.Element => {
+  return (
+    <Modal
+      title="Require password reset"
+      onExit={onResetCancel}
+      className={`${modalBaseClass}__${baseClass}`}
+    >
+      <div className={baseClass}>
+        <p>
+          This user will be asked to reset their password after their next
+          successful log in to Fleet.
+          <br />
+          This will revoke all active Fleet API tokens for this user.
+        </p>
+        <div className={`${baseClass}__btn-wrap`}>
+          <Button
+            className={`${baseClass}__btn`}
+            type="button"
+            variant="brand"
+            onClick={() => onResetConfirm(user)}
+          >
+            Confirm
+          </Button>
+          <Button
+            className={`${baseClass}__btn`}
+            onClick={onResetCancel}
+            variant="inverse"
+          >
+            Cancel
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default ResetPasswordModal;

frontend/pages/admin/UserManagementPage/components/ResetPasswordModal/_styles.scss

@@ -0,0 +1,22 @@
+.reset-password-modal {
+  margin-top: $pad-large;
+
+  p {
+    margin-bottom: 40px;
+    font-size: $small;
+  }
+
+  &__btn-wrap {
+    display: flex;
+    flex-direction: row-reverse;
+  }
+
+  &__btn {
+    font-size: $small;
+    height: 38px;
+    margin-bottom: 5px;
+    margin-left: 15px;
+    padding: 0;
+    width: 120px;
+  }
+}

frontend/pages/admin/UserManagementPage/components/ResetPasswordModal/index.ts

@@ -0,0 +1 @@
+export { default } from "./ResetPasswordModal";