From 58ef59395284182409b25631d276fde7ce634c82 Mon Sep 17 00:00:00 2001 From: GurukiranP Date: Fri, 13 Dec 2024 15:05:27 +0530 Subject: [PATCH] [ES-1995] Clearing signup and reset password store while navigating from landing page in signup. Signed-off-by: GurukiranP --- signup-ui/public/theme/variables.css | 2 +- .../src/pages/LandingPage/LandingPage.tsx | 6 +++++ .../useResetPasswordStore.tsx | 22 ++++++++++------ .../src/pages/SignUpPage/useSignUpStore.tsx | 26 ++++++++++++------- 4 files changed, 37 insertions(+), 19 deletions(-) diff --git a/signup-ui/public/theme/variables.css b/signup-ui/public/theme/variables.css index 0554ab3a..ce09d36c 100644 --- a/signup-ui/public/theme/variables.css +++ b/signup-ui/public/theme/variables.css @@ -174,7 +174,7 @@ --brand-only-logo-url: url("/logo.png"); --brand-logo-url: url("/images/brand_logo.png"); - --signup-background: url("/images/section-bg.png") no-repeat; + --signup-background: #f7f9fd; --side-section-bg-with: 320px; --top-left-bg-logo-url: url("/images/top.png"); --top-left-bg-logo-display: none; diff --git a/signup-ui/src/pages/LandingPage/LandingPage.tsx b/signup-ui/src/pages/LandingPage/LandingPage.tsx index b12f5031..e4d67116 100644 --- a/signup-ui/src/pages/LandingPage/LandingPage.tsx +++ b/signup-ui/src/pages/LandingPage/LandingPage.tsx @@ -5,19 +5,25 @@ import { useLocation, useNavigate } from "react-router-dom"; import { ReactComponent as SomethingWentWrongSvg } from "~assets/svg/something-went-wrong.svg"; import { RESET_PASSWORD, SIGNUP_ROUTE } from "~constants/routes"; import { Button } from "~components/ui/button"; +import { useSignUpStore } from "~pages/SignUpPage/useSignUpStore"; +import { useResetPasswordStore } from "~pages/ResetPasswordPage/useResetPasswordStore"; export const LandingPage = () => { const { t } = useTranslation(); const navigate = useNavigate(); const { hash: fromSignInHash } = useLocation(); + const resetSignupStore = useSignUpStore.getState().reset; + const resetForgotPasswordStore = useResetPasswordStore.getState().reset; const handleResetPassword = (e: any) => { e.preventDefault(); + resetForgotPasswordStore(); navigate(`${RESET_PASSWORD}${fromSignInHash}`); }; const handleRegister = (e: any) => { e.preventDefault(); + resetSignupStore(); navigate(`${SIGNUP_ROUTE}${fromSignInHash}`); }; diff --git a/signup-ui/src/pages/ResetPasswordPage/useResetPasswordStore.tsx b/signup-ui/src/pages/ResetPasswordPage/useResetPasswordStore.tsx index 14eb5980..2bc87f0e 100644 --- a/signup-ui/src/pages/ResetPasswordPage/useResetPasswordStore.tsx +++ b/signup-ui/src/pages/ResetPasswordPage/useResetPasswordStore.tsx @@ -12,6 +12,13 @@ export enum ResetPasswordStep { ResetPasswordConfirmation, } +const initialState = { + step: ResetPasswordStep.UserInfo, + criticalError: null as Error | null, + resendOtp: false, + resendAttempts: null, +}; + export type ResetPasswordStore = { step: ResetPasswordStep; setStep: (step: ResetPasswordStep) => void; @@ -21,34 +28,33 @@ export type ResetPasswordStore = { setResendOtp: (resendOtp: boolean) => void; resendAttempts: any; setResendAttempts: (resendAttempts: any) => void; + reset: () => void; }; export const useResetPasswordStore = create()( devtools((set, get) => ({ - step: ResetPasswordStep.UserInfo, + ...initialState, setStep: (step: ResetPasswordStep) => { const current = get(); if (isEqual(current.step, step)) return; - set((state) => ({ step })); + set(() => ({ step })); }, - criticalError: null, setCriticalError: (criticalError: Error | null) => { const current = get(); if (isEqual(current.criticalError, criticalError)) return; - set((state) => ({ criticalError })); + set(() => ({ criticalError })); }, - resendOtp: false, setResendOtp: (resendOtp: boolean) => { const current = get(); if (isEqual(current.resendOtp, resendOtp)) return; - set((state) => ({ resendOtp })); + set(() => ({ resendOtp })); }, - resendAttempts: null, setResendAttempts: (resendAttempts: any) => { const current = get(); if (isEqual(current.resendAttempts, resendAttempts)) return; - set((state) => ({ resendAttempts })); + set(() => ({ resendAttempts })); }, + reset: () => set(() => initialState) })) ); diff --git a/signup-ui/src/pages/SignUpPage/useSignUpStore.tsx b/signup-ui/src/pages/SignUpPage/useSignUpStore.tsx index 2810d2da..e8818348 100644 --- a/signup-ui/src/pages/SignUpPage/useSignUpStore.tsx +++ b/signup-ui/src/pages/SignUpPage/useSignUpStore.tsx @@ -13,6 +13,14 @@ export enum SignUpStep { AccountRegistrationStatus, } +const initialState = { + step: SignUpStep.Phone, + criticalError: null as Error | null, + resendOtp: false, + resendAttempts: null, + verificationChallengeError: null as Error | null, +}; + export type SignUpStore = { step: SignUpStep; setStep: (step: SignUpStep) => void; @@ -24,35 +32,32 @@ export type SignUpStore = { setResendAttempts: (resendAttempts: any) => void; verificationChallengeError: Error | null; setVerificationChallengeError: (verificationChallengeError: any) => void; + reset: () => void; }; export const useSignUpStore = create()( devtools((set, get) => ({ - step: SignUpStep.Phone, + ...initialState, setStep: (step: SignUpStep) => { const current = get(); if (isEqual(current.step, step)) return; - set((state) => ({ step })); + set(() => ({ step })); }, - criticalError: null, setCriticalError: (criticalError: Error | null) => { const current = get(); if (isEqual(current.criticalError, criticalError)) return; - set((state) => ({ criticalError })); + set(() => ({ criticalError })); }, - resendOtp: false, setResendOtp: (resendOtp: boolean) => { const current = get(); if (isEqual(current.resendOtp, resendOtp)) return; - set((state) => ({ resendOtp })); + set(() => ({ resendOtp })); }, - resendAttempts: null, setResendAttempts: (resendAttempts: any) => { const current = get(); if (isEqual(current.resendAttempts, resendAttempts)) return; - set((state) => ({ resendAttempts })); + set(() => ({ resendAttempts })); }, - verificationChallengeError: null, setVerificationChallengeError: ( verificationChallengeError: Error | null ) => { @@ -61,8 +66,9 @@ export const useSignUpStore = create()( isEqual(current.verificationChallengeError, verificationChallengeError) ) return; - set((state) => ({ verificationChallengeError })); + set(() => ({ verificationChallengeError })); }, + reset: () => set(() => initialState) })) );