refactor: display error message instead of toast on error

Author: bishalshrestha013

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

@@ -1,6 +1,8 @@
 {
   "errors": {
     "401": "The credentials you input are invalid.",
+    "emailAlreadyExists": "This email already exists. Please sign in instead.",
+    "invalidPassword": "Invalid password.",
     "otherErrors": "Oops! Something went wrong."
   }
 }

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

@@ -1,6 +1,8 @@
 {
   "errors": {
     "401": "The credentials you input are invalid (fr).",
+    "emailAlreadyExists": "This email already exists. Please sign in instead. (fr)",
+    "invalidPassword": "Invalid password. (fr)",
     "otherErrors": "Oops! Something went wrong (fr)."
   }
 }

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 "@dzangolab/react-form";
 import { useTranslation } from "@dzangolab/react-i18n";
-import { AuthPage } from "@dzangolab/react-ui";
+import { AuthPage, Message } from "@dzangolab/react-ui";
 import React, { useState } from "react";
 import { toast } from "react-toastify";
 
@@ -18,35 +18,56 @@ export const ChangePassword = ({ centered = true }: { centered?: boolean }) => {
   const { t } = useTranslation("user");
   const config = useConfig();
   const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<"invalidPassword" | "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("invalidPassword");
+    } else {
+      setError("other");
     }
 
     setLoading(false);
   };
 
+  const errorMessage =
+    error === "invalidPassword"
+      ? t("errors.invalidPassword", { 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>
   );