From 414ed513657de2bc1882303a5cad379c8473754e Mon Sep 17 00:00:00 2001 From: bunsy-0900 Date: Tue, 16 Jan 2024 14:33:23 +0700 Subject: [PATCH 1/2] fix: add missing imports Signed-off-by: bunsy-0900 --- signup-ui/src/app/AppRouter.tsx | 1 + .../SignUpPage/AccountSetup/AccountSetup.tsx | 22 ++++++++++++------- 2 files changed, 15 insertions(+), 8 deletions(-) diff --git a/signup-ui/src/app/AppRouter.tsx b/signup-ui/src/app/AppRouter.tsx index 97d171d7..47c0ef6c 100644 --- a/signup-ui/src/app/AppRouter.tsx +++ b/signup-ui/src/app/AppRouter.tsx @@ -16,6 +16,7 @@ import { UNDER_CONSTRUCTION, } from "~constants/routes"; import { lazyRetry } from "~utils/lazyRetry"; +import { setupResponseInterceptor } from "~services/api.service"; const SignUpPage = lazy(() => lazyRetry(() => import("~pages/SignUpPage"))); const ResetPasswordPage = lazy(() => diff --git a/signup-ui/src/pages/SignUpPage/AccountSetup/AccountSetup.tsx b/signup-ui/src/pages/SignUpPage/AccountSetup/AccountSetup.tsx index aabdf28f..cfbb146a 100644 --- a/signup-ui/src/pages/SignUpPage/AccountSetup/AccountSetup.tsx +++ b/signup-ui/src/pages/SignUpPage/AccountSetup/AccountSetup.tsx @@ -1,7 +1,7 @@ import { KeyboardEvent, useCallback, useMemo, useState } from "react"; import { PopoverTrigger } from "@radix-ui/react-popover"; import { UseFormReturn } from "react-hook-form"; -import { useTranslation } from "react-i18next"; +import { Trans, useTranslation } from "react-i18next"; import { Button } from "~components/ui/button"; import { Checkbox } from "~components/ui/checkbox"; @@ -63,7 +63,7 @@ export const AccountSetup = ({ settings, methods }: AccountSetupProps) => { const { registerMutation } = useRegister(); const [openTermConditionModal, setOpenTermConditionModal] = useState(false); - const [modalData, setModalData] = useState({title: "", content: ""}); + const [modalData, setModalData] = useState({ title: "", content: "" }); const disabledContinue = !isValid || @@ -121,20 +121,26 @@ export const AccountSetup = ({ settings, methods }: AccountSetupProps) => { const onModalToggle = () => { setOpenTermConditionModal(false); - setModalData({title: "", content: ""}); - } + setModalData({ title: "", content: "" }); + }; const onOpenTerm = (e: any) => { e.preventDefault(); - setModalData({title: t("terms_and_conditions_title"), content: t("terms_and_conditions_content")}); + setModalData({ + title: t("terms_and_conditions_title"), + content: t("terms_and_conditions_content"), + }); setOpenTermConditionModal(true); - } + }; const onOpenPrivacy = (e: any) => { e.preventDefault(); - setModalData({title: t("privacy_and_policy_title"), content: t("privacy_and_policy_content")}); + setModalData({ + title: t("privacy_and_policy_title"), + content: t("privacy_and_policy_content"), + }); setOpenTermConditionModal(true); - } + }; const handleFullNameInput = (event: KeyboardEvent) => handleInputFilter( From 74e3f999f1e16df313ecf093cf0b47c793362bd5 Mon Sep 17 00:00:00 2001 From: bunsy-0900 Date: Thu, 18 Jan 2024 15:35:24 +0700 Subject: [PATCH 2/2] fix: disable reload after the user filled in some inputs Signed-off-by: bunsy-0900 --- .../ResetPasswordPage/ResetPasswordPage.tsx | 19 +++++-- signup-ui/src/pages/SignUpPage/SignUpPage.tsx | 50 +++++++++++++++++-- 2 files changed, 59 insertions(+), 10 deletions(-) diff --git a/signup-ui/src/pages/ResetPasswordPage/ResetPasswordPage.tsx b/signup-ui/src/pages/ResetPasswordPage/ResetPasswordPage.tsx index c7ead3a6..72faedd9 100644 --- a/signup-ui/src/pages/ResetPasswordPage/ResetPasswordPage.tsx +++ b/signup-ui/src/pages/ResetPasswordPage/ResetPasswordPage.tsx @@ -1,5 +1,6 @@ import { useCallback, useEffect, useMemo } from "react"; import { yupResolver } from "@hookform/resolvers/yup"; +import { isEqual } from "lodash"; import { Resolver, useForm } from "react-hook-form"; import { useTranslation } from "react-i18next"; import * as yup from "yup"; @@ -69,7 +70,12 @@ export const ResetPasswordPage = ({ settings }: ResetPasswordPageProps) => { // Step 3 - ResetPassword yup.object({ newPassword: validatePassword(settings, t), - confirmNewPassword: validateConfirmPassword("newPassword", settings, t, false), + confirmNewPassword: validateConfirmPassword( + "newPassword", + settings, + t, + false + ), }), // Step 4 - ResetPasswordStatus yup.object({}), @@ -92,10 +98,13 @@ export const ResetPasswordPage = ({ settings }: ResetPasswordPageProps) => { }); const { + getValues, formState: { isDirty }, } = methods; useEffect(() => { + if (isEqual(resetPasswordFormDefaultValues, getValues())) return; + if ( step === ResetPasswordStep.ResetPasswordConfirmation || (criticalError && criticalError.errorCode === "invalid_transaction") @@ -115,7 +124,7 @@ export const ResetPasswordPage = ({ settings }: ResetPasswordPageProps) => { return () => { window.removeEventListener("beforeunload", handleTabBeforeUnload); }; - }, [step, criticalError]); + }, [step, criticalError, getValues()]); const getResetPasswordContent = (step: ResetPasswordStep) => { switch (step) { @@ -137,9 +146,9 @@ export const ResetPasswordPage = ({ settings }: ResetPasswordPageProps) => { return ( <> {criticalError && - ["invalid_transaction", "knowledgebase_mismatch"].includes(criticalError.errorCode) && ( - - )} + ["invalid_transaction", "knowledgebase_mismatch"].includes( + criticalError.errorCode + ) && }
{getResetPasswordContent(step)}
diff --git a/signup-ui/src/pages/SignUpPage/SignUpPage.tsx b/signup-ui/src/pages/SignUpPage/SignUpPage.tsx index cef187cd..b6412fa5 100644 --- a/signup-ui/src/pages/SignUpPage/SignUpPage.tsx +++ b/signup-ui/src/pages/SignUpPage/SignUpPage.tsx @@ -1,11 +1,14 @@ -import { useCallback, useMemo } from "react"; +import { useCallback, useEffect, useMemo } from "react"; import { yupResolver } from "@hookform/resolvers/yup"; +import { useMutationState } from "@tanstack/react-query"; +import { isEqual } from "lodash"; import { Resolver, useForm } from "react-hook-form"; import { useTranslation } from "react-i18next"; import * as yup from "yup"; import { Button } from "~components/ui/button"; import { Form } from "~components/ui/form"; +import { keys as mutationKeys } from "~pages/shared/mutations"; import { validateCaptchaToken, validateConfirmPassword, @@ -14,7 +17,7 @@ import { validatePassword, validateUsername, } from "~pages/shared/validation"; -import { SettingsDto } from "~typings/types"; +import { SettingsDto, VerifyChallengeResponseDto } from "~typings/types"; import { AccountRegistrationStatus } from "./AccountRegistrationStatus/AccountRegistrationStatus"; import AccountSetup from "./AccountSetup"; @@ -109,6 +112,43 @@ export const SignUpPage = ({ settings }: SignUpPageProps) => { mode: "onBlur", }); + const { getValues } = methods; + + const [challengeVerification] = useMutationState({ + filters: { + mutationKey: mutationKeys.challengeVerification, + status: "success", + }, + select: (mutation) => mutation.state.data as VerifyChallengeResponseDto, + }); + + useEffect(() => { + if (isEqual(signUpFormDefaultValues, getValues())) return; + + if ( + (step === SignUpStep.PhoneStatus && + challengeVerification.errors.length > 0 && + ["already-registered", "identifier_already_registered"].includes( + challengeVerification.errors[0].errorCode + )) || + step === SignUpStep.AccountRegistrationStatus || + (criticalError && criticalError.errorCode === "invalid_transaction") + ) + return; + + const handleTabBeforeUnload = (event: BeforeUnloadEvent) => { + event.preventDefault(); + + return (event.returnValue = t("reset_password_discontinue_prompt")); + }; + + window.addEventListener("beforeunload", handleTabBeforeUnload); + + return () => { + window.removeEventListener("beforeunload", handleTabBeforeUnload); + }; + }, [step, criticalError, getValues()]); + const getSignUpStepContent = (step: SignUpStep) => { switch (step) { case SignUpStep.Phone: @@ -131,9 +171,9 @@ export const SignUpPage = ({ settings }: SignUpPageProps) => { return ( <> {criticalError && - ["invalid_transaction", "identifier_already_registered"].includes(criticalError.errorCode) && ( - - )} + ["invalid_transaction", "identifier_already_registered"].includes( + criticalError.errorCode + ) && }
{getSignUpStepContent(step)}