refactor(react-user): refactor user login and signup page (#1528)

* refactor: replace toast message with Message component for login error

* refactor: update signup error

* refactor: dynamic translation logic

* refactor: login and signup error message

* refactor: update the width of first user signup page

* refactor: update signup first user page

* fix: fix issue to login app user using first signup form in admin app

* style: fix coding standard

* style: fix coding standard

Author: bishalshrestha013

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

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

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

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

packages/user/src/api/user/index.ts

@@ -28,7 +28,7 @@ export const signUpFirstUser = async (
     withCredentials: true,
   });
 
-  if (response.data.status === "ERROR") {
+  if (response.data.status === "EMAIL_ALREADY_EXISTS_ERROR") {
     throw new Error(response.data.message);
   } else {
     return response.data;

packages/user/src/components/Login/LoginWrapper.tsx

@@ -1,4 +1,5 @@
 import { useTranslation } from "@prefabs.tech/react-i18n";
+import { Message } from "@prefabs.tech/react-ui";
 import { FC, useState } from "react";
 import { toast } from "react-toastify";
 
@@ -34,6 +35,9 @@ export const LoginWrapper: FC<IProperties> = ({
   const { setUser } = useUser();
   const config = useConfig();
   const [loginLoading, setLoginLoading] = useState<boolean>(false);
+  const [loginError, setLoginError] = useState<
+    null | "invalidCredentials" | "other"
+  >(null);
 
   const links: Array<LinkType> = [
     {
@@ -70,19 +74,36 @@ export const LoginWrapper: FC<IProperties> = ({
           }
         })
         .catch(async (error) => {
-          const errorMessage = `errors.${error.message}`;
-
           onLoginFailed && (await onLoginFailed(error));
 
-          toast.error(t(errorMessage, { ns: "errors" }));
+          if (error.message === "401") {
+            setLoginError("invalidCredentials");
+          } else {
+            setLoginError("other");
+          }
         });
 
       setLoginLoading(false);
     }
   };
 
+  const message =
+    loginError === "invalidCredentials"
+      ? t("errors.401", { ns: "errors" })
+      : t("errors.otherErrors", { ns: "errors" });
+
   return (
     <>
+      {loginError && (
+        <Message
+          enableClose={true}
+          message={message}
+          onClose={() => {
+            setLoginError(null);
+          }}
+          severity="danger"
+        />
+      )}
       <LoginForm
         handleSubmit={handleLoginSubmit}
         loading={handleSubmit ? loading : loginLoading}

packages/user/src/components/Signup/SignupWrapper.tsx

@@ -1,4 +1,5 @@
 import { useTranslation } from "@prefabs.tech/react-i18n";
+import { Message } from "@prefabs.tech/react-ui";
 import React, { useState } from "react";
 import { toast } from "react-toastify";
 
@@ -33,6 +34,10 @@ export const SignupWrapper: React.FC<IProperties> = ({
 }) => {
   const { t } = useTranslation("user");
   const [signupLoading, setSignupLoading] = useState<boolean>(false);
+  const [signupError, setSignupError] = useState<
+    null | "emailAlreadyExists" | "other"
+  >(null);
+
   const { setUser } = useUser();
   const config = useConfig();
 
@@ -84,24 +89,39 @@ export const SignupWrapper: React.FC<IProperties> = ({
           }
         })
         .catch(async (error) => {
-          const errorMessage = t("errors.otherErrors", { ns: "errors" });
-
           onSignupFailed && (await onSignupFailed(error));
 
-          if (error.status === "FIELD_ERROR") {
-            throw error as Error;
+          if (error.message.includes("email already exists")) {
+            setSignupError("emailAlreadyExists");
+
+            return;
           }
 
-          toast.error(error.message || errorMessage);
+          setSignupError("other");
         })
         .finally(() => {
           setSignupLoading(false);
         });
     }
   };
 
+  const message =
+    signupError === "emailAlreadyExists"
+      ? t("errors.emailAlreadyExists", { ns: "errors" })
+      : t("errors.otherErrors", { ns: "errors" });
+
   return (
     <>
+      {signupError && (
+        <Message
+          enableClose={true}
+          message={message}
+          onClose={() => {
+            setSignupError(null);
+          }}
+          severity="danger"
+        />
+      )}
       <SignupForm
         handleSubmit={handleSignupSubmit}
         loading={handleSubmit ? loading : signupLoading}

packages/user/src/views/SignupFirstUser.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from "@prefabs.tech/react-i18n";
-import { Card, CardBody, Page } from "@prefabs.tech/react-ui";
+import { AuthPage, Message } from "@prefabs.tech/react-ui";
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
@@ -74,38 +74,40 @@ export const SignUpFirstUser = ({
       })
       .catch(() => {
         setSignUpFirstUserLoading(false);
-        toast.error(`${t("firstUser.signup.messages.error")}`);
+        setIsError(true);
       });
   };
 
   const renderPageContent = () => {
-    if (isError) {
-      return (
-        <Card>
-          <CardBody>
-            <p>{t(`errors:errors.otherErrors`)}</p>
-          </CardBody>
-        </Card>
-      );
-    }
-
     return (
-      <SignupForm
-        email={""}
-        handleSubmit={handleSubmit}
-        loading={signUpFirstUserLoading}
-      />
+      <>
+        {isError && (
+          <Message
+            enableClose={true}
+            message={t("firstUser.signup.messages.error")}
+            onClose={() => {
+              setIsError(false);
+            }}
+            severity="danger"
+          />
+        )}
+        <SignupForm
+          email={""}
+          handleSubmit={handleSubmit}
+          loading={signUpFirstUserLoading}
+        />
+      </>
     );
   };
 
   return (
-    <Page
+    <AuthPage
+      centered={centered}
       className="signup"
-      title={t("firstUser.title")}
       loading={loading || loginLoading}
-      centered={centered}
+      title={t("firstUser.title")}
     >
       {renderPageContent()}
-    </Page>
+    </AuthPage>
   );
 };