Move reset password to react-query

coder · BrunoQuaresma · Oct 2, 2023 · Sep 28, 2023 · Sep 28, 2023 · Sep 29, 2023
commit 44d8de64af67217fe3e6659061f243f51a1d328c
diff --git a/site/src/pages/UsersPage/UsersPage.test.tsx b/site/src/pages/UsersPage/UsersPage.test.tsx
@@ -338,7 +338,7 @@ describe("UsersPage", () => {
         });
 
         // Check if the success message is displayed
-        await screen.findByText(usersXServiceLanguage.resetUserPasswordSuccess);
+        await screen.findByText("Password reset");
 
         // Check if the API was called correctly
         expect(API.updateUserPassword).toBeCalledTimes(1);
@@ -357,7 +357,7 @@ describe("UsersPage", () => {
         });
 
         // Check if the error message is displayed
-        await screen.findByText(usersXServiceLanguage.resetUserPasswordError);
+        await screen.findByText("Error resetting password");
 
         // Check if the API was called correctly
         expect(API.updateUserPassword).toBeCalledTimes(1);

diff --git a/site/src/pages/UsersPage/UsersPage.tsx b/site/src/pages/UsersPage/UsersPage.tsx
@@ -26,9 +26,11 @@ import {
   suspendUser,
   activateUser,
   deleteUser,
+  updatePassword,
 } from "api/queries/users";
 import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
 import { getErrorMessage } from "api/errors";
+import { generateRandomString } from "utils/random";
 
 export const Language = {
   suspendDialogTitle: "Suspend user",
@@ -39,9 +41,6 @@ export const Language = {
   activateDialogMessagePrefix: "Do you want to activate the user",
 };
 
-const getSelectedUser = (id: string, users?: User[]) =>
-  users?.find((u) => u.id === id);
-
 export const UsersPage: FC<{ children?: ReactNode }> = () => {
   const queryClient = useQueryClient();
   const navigate = useNavigate();
@@ -60,7 +59,6 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
       offset: pagination.offset,
     }),
   );
-  const { userIdToResetPassword, newUserPassword } = usersState.context;
   const { updateUsers: canEditUsers, viewDeploymentValues } = usePermissions();
   const rolesQuery = useQuery({ ...roles(), enabled: canEditUsers });
   const { data: deploymentValues } = useQuery({
@@ -104,6 +102,12 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
   // Delete
   const [confirmDeleteUser, setConfirmDeleteUser] = useState<User>();
   const deleteUserMutation = useMutation(deleteUser(queryClient));
+  // Reset password
+  const [confirmResetPassword, setConfirmResetPassword] = useState<{
+    user: User;
+    newPassword: string;
+  }>();
+  const updatePasswordMutation = useMutation(updatePassword());
 
   return (
     <>
@@ -130,7 +134,10 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
         onSuspendUser={setConfirmSuspendUser}
         onActivateUser={setConfirmActivateUser}
         onResetUserPassword={(user) => {
-          usersSend({ type: "RESET_USER_PASSWORD", userId: user.id });
+          setConfirmResetPassword({
+            user,
+            newPassword: generateRandomString(12),
+          });
         }}
         onUpdateUserRoles={(user, roles) => {
           usersSend({
@@ -232,23 +239,29 @@ export const UsersPage: FC<{ children?: ReactNode }> = () => {
         }
       />
 
-      {userIdToResetPassword && (
-        <ResetPasswordDialog
-          open={
-            usersState.matches("confirmUserPasswordReset") ||
-            usersState.matches("resettingUserPassword")
+      <ResetPasswordDialog
+        key={confirmResetPassword?.user.username}
+        open={confirmResetPassword !== undefined}
+        loading={updatePasswordMutation.isLoading}
+        user={confirmResetPassword?.user}
+        newPassword={confirmResetPassword?.newPassword}
+        onClose={() => {
+          setConfirmResetPassword(undefined);
+        }}
+        onConfirm={async () => {
+          try {
+            await updatePasswordMutation.mutateAsync({
+              userId: confirmResetPassword!.user.id,
+              password: confirmResetPassword!.newPassword,
+              old_password: "",
+            });
+            setConfirmResetPassword(undefined);
+            displaySuccess("Password reset");
+          } catch (e) {
+            displayError(getErrorMessage(e, "Error resetting password"));
           }
-          loading={usersState.matches("resettingUserPassword")}
-          user={getSelectedUser(userIdToResetPassword, usersQuery.data?.users)}
-          newPassword={newUserPassword}
-          onClose={() => {
-            usersSend("CANCEL_USER_PASSWORD_RESET");
-          }}
-          onConfirm={() => {
-            usersSend("CONFIRM_USER_PASSWORD_RESET");
-          }}
-        />
-      )}
+        }}
+      />
     </>
   );
 };

diff --git a/site/src/xServices/users/usersXService.ts b/site/src/xServices/users/usersXService.ts
@@ -2,37 +2,26 @@ import { assign, createMachine } from "xstate";
 import * as API from "api/api";
 import { getErrorMessage } from "api/errors";
 import * as TypesGen from "api/typesGenerated";
-import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
-import { generateRandomString } from "utils/random";
+import { displayError } from "components/GlobalSnackbar/utils";
 
 export const Language = {
-  resetUserPasswordSuccess: "Successfully updated the user password.",
-  resetUserPasswordError: "Error on resetting the user password.",
   updateUserRolesSuccess: "Successfully updated the user roles.",
   updateUserRolesError: "Error on updating the user roles.",
 };
 
 export interface UsersContext {
-  // Reset user password
-  userIdToResetPassword?: TypesGen.User["id"];
-  resetUserPasswordError?: unknown;
-  newUserPassword?: string;
   // Update user roles
   userIdToUpdateRoles?: TypesGen.User["id"];
   updateUserRolesError?: unknown;
 }
 
 export type UsersEvent =
-  // Reset password events
-  | { type: "RESET_USER_PASSWORD"; userId: TypesGen.User["id"] }
-  | { type: "CONFIRM_USER_PASSWORD_RESET" }
-  | { type: "CANCEL_USER_PASSWORD_RESET" }
   // Update roles events
-  | {
-      type: "UPDATE_USER_ROLES";
-      userId: TypesGen.User["id"];
-      roles: TypesGen.Role["name"][];
-    };
+  {
+    type: "UPDATE_USER_ROLES";
+    userId: TypesGen.User["id"];
+    roles: TypesGen.Role["name"][];
+  };
 
 export const usersMachine =
   /** @xstate-layout N4IgpgJg5mDOIC5QFdZgE6wMoBcCGOYAdLPujgJYB2UACnlNQRQPZUDEA2gAwC6ioAA4tYFSmwEgAHogC0ARgBMigBxEAnCoCsAdhWrdK9QBYdAGhABPRPO7ruRAMzdj3HYuNbFANm5b1AL4BFqgY2PiERDA4lDQAqmiY7BBsxNQAbiwA1sTRCWE8-EggwqLiVJIyCArc8upOxt6K-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-j-ITHPcS7DXhWc1XMTT-qATGa4jxDoK5kxWjeL0mqIJ5NczwUEIAA */
@@ -43,21 +32,6 @@ export const usersMachine =
         context: {} as UsersContext,
         events: {} as UsersEvent,
         services: {} as {
-          createUser: {
-            data: TypesGen.User;
-          };
-          suspendUser: {
-            data: TypesGen.User;
-          };
-          deleteUser: {
-            data: undefined;
-          };
-          activateUser: {
-            data: TypesGen.User;
-          };
-          updateUserPassword: {
-            data: undefined;
-          };
           updateUserRoles: {
             data: TypesGen.User;
           };
@@ -70,51 +44,12 @@ export const usersMachine =
         idle: {
           entry: "clearSelectedUser",
           on: {
-            RESET_USER_PASSWORD: {
-              target: "confirmUserPasswordReset",
-              actions: [
-                "assignUserIdToResetPassword",
-                "generateRandomPassword",
-              ],
-            },
             UPDATE_USER_ROLES: {
               target: "updatingUserRoles",
               actions: "assignUserIdToUpdateRoles",
             },
           },
         },
-        confirmUserPasswordReset: {
-          on: {
-            CONFIRM_USER_PASSWORD_RESET: {
-              target: "resettingUserPassword",
-            },
-            CANCEL_USER_PASSWORD_RESET: {
-              target: "idle",
-            },
-          },
-        },
-        resettingUserPassword: {
-          entry: "clearResetUserPasswordError",
-          invoke: {
-            src: "resetUserPassword",
-            id: "resetUserPassword",
-            onDone: [
-              {
-                target: "idle",
-                actions: "displayResetPasswordSuccess",
-              },
-            ],
-            onError: [
-              {
-                target: "idle",
-                actions: [
-                  "assignResetUserPasswordError",
-                  "displayResetPasswordErrorMessage",
-                ],
-              },
-            ],
-          },
-        },
         updatingUserRoles: {
           entry: "clearUpdateUserRolesError",
           invoke: {
@@ -141,20 +76,6 @@ export const usersMachine =
     },
     {
       services: {
-        resetUserPassword: (context) => {
-          if (!context.userIdToResetPassword) {
-            throw new Error("userIdToResetPassword is undefined");
-          }
-
-          if (!context.newUserPassword) {
-            throw new Error("newUserPassword not generated");
-          }
-
-          return API.updateUserPassword(context.userIdToResetPassword, {
-            password: context.newUserPassword,
-            old_password: "",
-          });
-        },
         updateUserRoles: (context, event) => {
           if (!context.userIdToUpdateRoles) {
             throw new Error("userIdToUpdateRoles is undefined");
@@ -166,51 +87,27 @@ export const usersMachine =
 
       actions: {
         clearSelectedUser: assign({
-          userIdToResetPassword: (_) => undefined,
           userIdToUpdateRoles: (_) => undefined,
         }),
 
-        assignUserIdToResetPassword: assign({
-          userIdToResetPassword: (_, event) => event.userId,
-        }),
         assignUserIdToUpdateRoles: assign({
           userIdToUpdateRoles: (_, event) => event.userId,
         }),
 
-        assignResetUserPasswordError: assign({
-          resetUserPasswordError: (_, event) => event.data,
-        }),
         assignUpdateRolesError: assign({
           updateUserRolesError: (_, event) => event.data,
         }),
 
-        clearResetUserPasswordError: assign({
-          resetUserPasswordError: (_) => undefined,
-        }),
         clearUpdateUserRolesError: assign({
           updateUserRolesError: (_) => undefined,
         }),
-
-        displayResetPasswordSuccess: () => {
-          displaySuccess(Language.resetUserPasswordSuccess);
-        },
-        displayResetPasswordErrorMessage: (context) => {
-          const message = getErrorMessage(
-            context.resetUserPasswordError,
-            Language.resetUserPasswordError,
-          );
-          displayError(message);
-        },
         displayUpdateRolesErrorMessage: (context) => {
           const message = getErrorMessage(
             context.updateUserRolesError,
             Language.updateUserRolesError,
           );
           displayError(message);
         },
-        generateRandomPassword: assign({
-          newUserPassword: (_) => generateRandomString(12),
-        }),
         updateUserRolesInTheList: assign({
           // users: ({ users }, event) => {
           //   if (!users) {