refactor(user): display error message instead of toast message on password change form (#1537)

* refactor: display error message instead of toast on error

* refactor: change old password field name to current password

Author: bishalshrestha013

packages/i18n/src/locales/en/user.json

@@ -10,17 +10,17 @@
       "newPassword": {
         "label": "New password"
       },
-      "oldPassword": {
-        "label": "Old password"
+      "currentPassword": {
+        "label": "Current password"
       }
     },
     "messages": {
       "success": "You have successfully changed your password.",
       "validation": {
         "confirmPassword": "Confirm password.",
+        "currentPassword": "Current password is required.",
         "mustMatch": "Passwords must match.",
-        "newPassword": "New password is required.",
-        "oldPassword": "Old password is required."
+        "newPassword": "New password is required."
       }
     },
     "title": "Change password"

packages/i18n/src/locales/fr/user.json

@@ -7,20 +7,20 @@
       "confirmPassword": {
         "label": "Confirm password (fr)"
       },
+      "currentPassword": {
+        "label": "Current password (fr)"
+      },
       "newPassword": {
         "label": "New password (fr)"
-      },
-      "oldPassword": {
-        "label": "Old password (fr)"
       }
     },
     "messages": {
       "success": "You have successfully changed your password. (fr)",
       "validation": {
         "confirmPassword": "Confirm password is required. (fr)",
+        "currentPassword": "Current password is required. (fr)",
         "mustMatch": "Passwords must match. (fr)",
-        "newPassword": "New password is required. (fr)",
-        "oldPassword": "Old password is required. (fr)"
+        "newPassword": "New password is required. (fr)"
       }
     },
     "title": "Change password (fr)"

packages/user/src/components/ChangePasswordForm/ChangePasswordFormFields.tsx

@@ -24,7 +24,7 @@ const ChangePasswordFormFields = ({ loading }: Properties) => {
     <>
       <Password
         autoComplete="current-password"
-        label={t("changePassword.form.oldPassword.label")}
+        label={t("changePassword.form.currentPassword.label")}
         name="oldPassword"
         register={register}
         getFieldState={getFieldState}

packages/user/src/components/ChangePasswordForm/index.tsx

@@ -23,7 +23,7 @@ export const ChangePasswordForm = ({ handleSubmit, loading }: Properties) => {
     .object({
       oldPassword: zod
         .string()
-        .nonempty(t("changePassword.messages.validation.oldPassword")),
+        .nonempty(t("changePassword.messages.validation.currentPassword")),
       ...PasswordConfirmationSchema({
         passwordValidationMessage: t(
           "changePassword.messages.validation.mustContain",

packages/user/src/components/__test__/ChangePasswordForm.test.tsx

@@ -24,7 +24,7 @@ test("validation error message is displayed when input field is empty", async ()
 
   await waitFor(() => {
     expect(
-      screen.getByText("changePassword.messages.validation.oldPassword"),
+      screen.getByText("changePassword.messages.validation.currentPassword"),
     ).toBeDefined();
   });
   await waitFor(() => {
@@ -45,8 +45,8 @@ test("validation error message is displayed for unmatched confirm password", asy
   const handleSubmit = vi.fn();
   const { user } = setup(<ChangePasswordForm handleSubmit={handleSubmit} />);
 
-  const oldPassword = screen.getByLabelText(
-    "changePassword.form.oldPassword.label",
+  const currentPassword = screen.getByLabelText(
+    "changePassword.form.currentPassword.label",
   );
   const newPassword = screen.getByLabelText(
     "changePassword.form.newPassword.label",
@@ -57,7 +57,7 @@ test("validation error message is displayed for unmatched confirm password", asy
   const submitButton = screen.getByText("changePassword.form.actions.submit");
 
   await act(async () => {
-    await user.type(oldPassword, "Test@123");
+    await user.type(currentPassword, "Test@123");
     await user.type(newPassword, "Test@12345");
     await user.type(confirmPassword, "Test@12");
   });
@@ -81,8 +81,8 @@ test("form is successfully submitted", async () => {
   const handleSubmit = vi.fn();
   const { user } = setup(<ChangePasswordForm handleSubmit={handleSubmit} />);
 
-  const oldPassword = screen.getByLabelText(
-    "changePassword.form.oldPassword.label",
+  const currentPassword = screen.getByLabelText(
+    "changePassword.form.currentPassword.label",
   );
   const newPassword = screen.getByLabelText(
     "changePassword.form.newPassword.label",
@@ -93,7 +93,7 @@ test("form is successfully submitted", async () => {
   const submitButton = screen.getByText("changePassword.form.actions.submit");
 
   await act(async () => {
-    await user.type(oldPassword, "Test@123");
+    await user.type(currentPassword, "Test@123");
     await user.type(newPassword, "Test@12345");
     await user.type(confirmPassword, "Test@12345");
 

packages/user/src/components/__test__/__snapshots__/ChangePasswordForm.snapshot.test.tsx.snap

@@ -12,7 +12,7 @@ exports[`Component matches snapshot 1`] = `
       <label
         for="oldPassword"
       >
-        changePassword.form.oldPassword.label
+        changePassword.form.currentPassword.label
       </label>
       <div
         class="input-field-password"

packages/user/src/supertokens/change-password.ts

@@ -1,14 +1,10 @@
-import { toast } from "react-toastify";
-
 import client from "@/api/axios";
 
 export const changePassword = async (
   oldPassword: string,
   newPassword: string,
   apiBaseUrl: string,
-): Promise<boolean | undefined> => {
-  let success = false;
-
+) => {
   try {
     const response = await client(apiBaseUrl).post(
       "/change_password",
@@ -18,18 +14,17 @@ export const changePassword = async (
       },
     );
 
-    if (response.data.status === "OK") {
-      success = true;
-    } else {
-      toast.error(response.data.message);
-    }
+    return response.data;
   } catch (err) {
     let errorMessage = "Oops! Something went wrong.";
+
     if (err instanceof Error) {
       errorMessage = err.message;
     }
-    toast.error(errorMessage);
-  }
 
-  return success;
+    return {
+      status: "ERROR",
+      message: errorMessage,
+    };
+  }
 };

packages/user/src/views/ChangePassword.tsx

@@ -1,6 +1,6 @@
 import { FormSubmitOptions } from "@prefabs.tech/react-form";
 import { useTranslation } from "@prefabs.tech/react-i18n";
-import { AuthPage } from "@prefabs.tech/react-ui";
+import { AuthPage, Message } from "@prefabs.tech/react-ui";
 import React, { useState } from "react";
 import { toast } from "react-toastify";
 
@@ -18,35 +18,58 @@ export const ChangePassword = ({ centered = true }: { centered?: boolean }) => {
   const { t } = useTranslation("user");
   const config = useConfig();
   const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<"incorrectPassword" | "other" | null>(
+    null,
+  );
 
   const handleSubmit = async (
     data: ChangePasswordFormData,
     options?: FormSubmitOptions,
   ) => {
     setLoading(true);
 
-    const success = await changePassword(
+    const response = await changePassword(
       data.oldPassword,
       data.password,
       config.apiBaseUrl,
     );
 
-    if (success) {
+    if (response.status === "OK") {
       toast.success(t("changePassword.messages.success"));
+
       if (options && options.reset) {
         options.reset();
       }
+    } else if (response.status === "INVALID_PASSWORD") {
+      setError("incorrectPassword");
+    } else {
+      setError("other");
     }
 
     setLoading(false);
   };
 
+  const errorMessage =
+    error === "incorrectPassword"
+      ? t("errors.incorrectPassword", { ns: "errors" })
+      : t("errors.otherErrors", { ns: "errors" });
+
   return (
     <AuthPage
       className="change-password"
       title={t("changePassword.title")}
       centered={centered}
     >
+      {error && (
+        <Message
+          enableClose={true}
+          message={errorMessage}
+          onClose={() => {
+            setError(null);
+          }}
+          severity="danger"
+        />
+      )}
       <ChangePasswordForm handleSubmit={handleSubmit} loading={loading} />
     </AuthPage>
   );