From f8a443d6a6b8e7897160fbc6b21f34d0835a346e Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Mon, 20 May 2024 14:50:11 +0530
Subject: [PATCH] chore: reset password error handling (#4523)

---
 web/helpers/authentication.helper.tsx |  2 +-
 web/pages/accounts/reset-password.tsx | 25 ++++++++++++++++++++++---
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/web/helpers/authentication.helper.tsx b/web/helpers/authentication.helper.tsx
index f6bbe7788..0e05fb0f5 100644
--- a/web/helpers/authentication.helper.tsx
+++ b/web/helpers/authentication.helper.tsx
@@ -248,7 +248,7 @@ const errorCodeMessages: {
   // Reset Password
   [EAuthenticationErrorCodes.INVALID_PASSWORD_TOKEN]: {
     title: `Invalid password token`,
-    message: () => `Invalid password token. Please try again.`,
+    message: () => `Invalid password token.`,
   },
   [EAuthenticationErrorCodes.EXPIRED_PASSWORD_TOKEN]: {
     title: `Expired password token`,
diff --git a/web/pages/accounts/reset-password.tsx b/web/pages/accounts/reset-password.tsx
index ee076c6c8..6e1af074a 100644
--- a/web/pages/accounts/reset-password.tsx
+++ b/web/pages/accounts/reset-password.tsx
@@ -7,10 +7,16 @@ import { Eye, EyeOff } from "lucide-react";
 // ui
 import { Button, Input } from "@plane/ui";
 // components
-import { PasswordStrengthMeter } from "@/components/account";
+import { AuthBanner, PasswordStrengthMeter } from "@/components/account";
 import { PageHead } from "@/components/core";
 // helpers
-import { EPageTypes } from "@/helpers/authentication.helper";
+import {
+  EAuthenticationErrorCodes,
+  EErrorAlertType,
+  EPageTypes,
+  TAuthErrorInfo,
+  authErrorHandler,
+} from "@/helpers/authentication.helper";
 import { API_BASE_URL } from "@/helpers/common.helper";
 import { getPasswordStrength } from "@/helpers/password.helper";
 // layouts
@@ -43,7 +49,7 @@ const authService = new AuthService();
 const ResetPasswordPage: NextPageWithLayout = () => {
   // router
   const router = useRouter();
-  const { uidb64, token, email } = router.query;
+  const { uidb64, token, email, error_code } = router.query;
   // states
   const [showPassword, setShowPassword] = useState({
     password: false,
@@ -56,6 +62,7 @@ const ResetPasswordPage: NextPageWithLayout = () => {
   const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
   const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
   const [isRetryPasswordInputFocused, setIsRetryPasswordInputFocused] = useState(false);
+  const [errorInfo, setErrorInfo] = useState<TAuthErrorInfo | undefined>(undefined);
 
   // hooks
   const { resolvedTheme } = useTheme();
@@ -81,6 +88,15 @@ const ResetPasswordPage: NextPageWithLayout = () => {
     [resetFormData]
   );
 
+  useEffect(() => {
+    if (error_code) {
+      const errorhandler = authErrorHandler(error_code?.toString() as EAuthenticationErrorCodes);
+      if (errorhandler) {
+        setErrorInfo(errorhandler);
+      }
+    }
+  }, [error_code]);
+
   return (
     <div className="relative w-screen h-screen overflow-hidden">
       <PageHead title="Reset Password" />
@@ -106,6 +122,9 @@ const ResetPasswordPage: NextPageWithLayout = () => {
               </h3>
               <p className="font-medium text-onboarding-text-400">Secure your account with a strong password</p>
             </div>
+            {errorInfo && errorInfo?.type === EErrorAlertType.BANNER_ALERT && (
+              <AuthBanner bannerData={errorInfo} handleBannerData={(value) => setErrorInfo(value)} />
+            )}
             <form
               className="mt-5 space-y-4"
               method="POST"