{
+ return (
+
+ );
+};
diff --git a/signup-ui/src/layouts/PageLayout.tsx b/signup-ui/src/layouts/PageLayout.tsx
new file mode 100644
index 00000000..0c93ebb0
--- /dev/null
+++ b/signup-ui/src/layouts/PageLayout.tsx
@@ -0,0 +1,21 @@
+interface PageLayoutProps {
+ children: React.ReactNode;
+}
+
+export const PageLayout = ({ children }: PageLayoutProps) => {
+ return (
+
+
+
{children}
+
+
+ );
+};
diff --git a/signup-ui/src/pages/ResetPasswordPage/Otp/Otp.tsx b/signup-ui/src/pages/ResetPasswordPage/Otp/Otp.tsx
new file mode 100644
index 00000000..c1dae859
--- /dev/null
+++ b/signup-ui/src/pages/ResetPasswordPage/Otp/Otp.tsx
@@ -0,0 +1,3 @@
+export const Otp = () => {
+ return
Otp
;
+};
diff --git a/signup-ui/src/pages/ResetPasswordPage/Otp/index.tsx b/signup-ui/src/pages/ResetPasswordPage/Otp/index.tsx
new file mode 100644
index 00000000..efcdce5b
--- /dev/null
+++ b/signup-ui/src/pages/ResetPasswordPage/Otp/index.tsx
@@ -0,0 +1 @@
+export { Otp as default } from "./Otp";
diff --git a/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx b/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx
new file mode 100644
index 00000000..37275446
--- /dev/null
+++ b/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx
@@ -0,0 +1,3 @@
+export const ResetPassword = () => {
+ return
ResetPassword
;
+};
diff --git a/signup-ui/src/pages/ResetPasswordPage/ResetPassword/index.tsx b/signup-ui/src/pages/ResetPasswordPage/ResetPassword/index.tsx
new file mode 100644
index 00000000..95eb915d
--- /dev/null
+++ b/signup-ui/src/pages/ResetPasswordPage/ResetPassword/index.tsx
@@ -0,0 +1 @@
+export { ResetPassword as default } from "./ResetPassword";
diff --git a/signup-ui/src/pages/ResetPasswordPage/ResetPasswordConfirmation/ResetPasswordConfirmation.tsx b/signup-ui/src/pages/ResetPasswordPage/ResetPasswordConfirmation/ResetPasswordConfirmation.tsx
new file mode 100644
index 00000000..b11fe0eb
--- /dev/null
+++ b/signup-ui/src/pages/ResetPasswordPage/ResetPasswordConfirmation/ResetPasswordConfirmation.tsx
@@ -0,0 +1,3 @@
+export const ResetPasswordConfirmation = () => {
+ return
ResetPasswordConfirmation
;
+};
diff --git a/signup-ui/src/pages/ResetPasswordPage/ResetPasswordConfirmation/index.tsx b/signup-ui/src/pages/ResetPasswordPage/ResetPasswordConfirmation/index.tsx
new file mode 100644
index 00000000..fa2334cc
--- /dev/null
+++ b/signup-ui/src/pages/ResetPasswordPage/ResetPasswordConfirmation/index.tsx
@@ -0,0 +1 @@
+export { ResetPasswordConfirmation as default } from "./ResetPasswordConfirmation";
diff --git a/signup-ui/src/pages/ResetPasswordPage/ResetPasswordPage.tsx b/signup-ui/src/pages/ResetPasswordPage/ResetPasswordPage.tsx
new file mode 100644
index 00000000..1e730a2a
--- /dev/null
+++ b/signup-ui/src/pages/ResetPasswordPage/ResetPasswordPage.tsx
@@ -0,0 +1,143 @@
+import { useCallback, useMemo } from "react";
+import { yupResolver } from "@hookform/resolvers/yup";
+import { Resolver, useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import * as yup from "yup";
+
+import { Form } from "~components/ui/form";
+import { ResetPasswordForm, SettingsDto } from "~typings/types";
+
+import Otp from "./Otp";
+import ResetPassword from "./ResetPassword";
+import ResetPasswordConfirmation from "./ResetPasswordConfirmation";
+import { ResetPasswordPopover } from "./ResetPasswordPopover";
+import ResetPasswordStatus from "./ResetPasswordStatus";
+import {
+ criticalErrorSelector,
+ ResetPasswordStep,
+ stepSelector,
+ useResetPasswordStore,
+} from "./useResetPasswordStore";
+import UserInfo from "./UserInfo";
+
+interface ResetPasswordPageProps {
+ settings: SettingsDto;
+}
+
+export const ResetPasswordPage = ({ settings }: ResetPasswordPageProps) => {
+ const { t } = useTranslation();
+
+ const { step, criticalError } = useResetPasswordStore(
+ useCallback(
+ (state) => ({
+ step: stepSelector(state),
+ criticalError: criticalErrorSelector(state),
+ }),
+ []
+ )
+ );
+
+ const validationSchema = useMemo(
+ () => [
+ // Step 1 - UserInfo
+ yup.object({
+ username: yup
+ .string()
+ .required(t("username_validation"))
+ .matches(/^[^0].*$/, t("username_validation"))
+ .matches(
+ new RegExp(settings.response.configs["identifier.pattern"]),
+ t("username_validation")
+ ),
+ fullname: yup
+ .string()
+ .required(t("full_name_validation"))
+ .matches(
+ new RegExp(settings.response.configs["fullname.pattern"]),
+ t("full_name_in_lng_validation")
+ ),
+ captchaToken: yup.string().required(t("captcha_token_validation")),
+ }),
+ // Step 2 - Otp
+ yup.object({
+ otp: yup
+ .string()
+ .matches(
+ new RegExp(`^\\d{${settings.response.configs["otp.length"]}}$`)
+ ),
+ }),
+ // Step 3 - ResetPassword
+ yup.object({
+ newPassword: yup
+ .string()
+ .required(t("password_validation"))
+ .matches(
+ new RegExp(settings.response.configs["password.pattern"]),
+ t("password_validation")
+ ),
+ confirmNewPassword: yup
+ .string()
+ .matches(
+ new RegExp(settings.response.configs["password.pattern"]),
+ t("password_validation")
+ )
+ .oneOf([yup.ref("password")], t("password_validation_must_match")),
+ }),
+ // Step 4 - ResetPasswordStatus
+ yup.object({}),
+ // Step 5 - ResetPasswordConfirmation
+ yup.object({}),
+ ],
+ [settings, t]
+ );
+
+ const currentValidationSchema = validationSchema[step];
+
+ const resetPasswordFormDefaultValues: ResetPasswordForm = {
+ username: "",
+ fullname: "",
+ captchaToken: "",
+ otp: "",
+ newPassword: "",
+ confirmNewPassword: "",
+ };
+
+ const methods = useForm
({
+ shouldUnregister: false,
+ defaultValues: resetPasswordFormDefaultValues,
+ resolver: yupResolver(currentValidationSchema) as unknown as Resolver<
+ ResetPasswordForm,
+ any
+ >,
+ mode: "onBlur",
+ });
+
+ const getResetPasswordContent = (step: ResetPasswordStep) => {
+ switch (step) {
+ case ResetPasswordStep.UserInfo:
+ return ;
+ case ResetPasswordStep.Otp:
+ return ;
+ case ResetPasswordStep.ResetPassword:
+ return ;
+ case ResetPasswordStep.ResetPasswordStatus:
+ return ;
+ case ResetPasswordStep.ResetPasswordConfirmation:
+ return ;
+ default:
+ return "unknown step";
+ }
+ };
+
+ return (
+ <>
+ {criticalError &&
+ ["invalid_transaction"].includes(criticalError.errorCode) && (
+
+ )}
+
+
+
+ );
+};
diff --git a/signup-ui/src/pages/ResetPasswordPage/ResetPasswordPageContainer.tsx b/signup-ui/src/pages/ResetPasswordPage/ResetPasswordPageContainer.tsx
new file mode 100644
index 00000000..b556e163
--- /dev/null
+++ b/signup-ui/src/pages/ResetPasswordPage/ResetPasswordPageContainer.tsx
@@ -0,0 +1,29 @@
+import { PageLayout } from "~layouts/PageLayout";
+
+import { Icons } from "~components/ui/icons";
+import { Step, StepContent } from "~components/ui/step";
+import { useSettings } from "~pages/shared/queries";
+
+import { ResetPasswordPage } from "./ResetPasswordPage";
+
+export const ResetPasswordPageContainer = () => {
+ const { data: settings, isLoading } = useSettings();
+
+ if (isLoading || !settings) {
+ return (
+
+
+
+
+
+
+
+ );
+ }
+
+ return (
+
+
+
+ );
+};
diff --git a/signup-ui/src/pages/ResetPasswordPage/ResetPasswordPopover.tsx b/signup-ui/src/pages/ResetPasswordPage/ResetPasswordPopover.tsx
new file mode 100644
index 00000000..78555ba7
--- /dev/null
+++ b/signup-ui/src/pages/ResetPasswordPage/ResetPasswordPopover.tsx
@@ -0,0 +1,72 @@
+import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { useLocation } from "react-router-dom";
+
+import { ReactComponent as FailedIconSvg } from "~assets/svg/failed-icon.svg";
+import { SIGNUP_ROUTE } from "~constants/routes";
+import {
+ AlertDialog,
+ AlertDialogAction,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogTitle,
+} from "~components/ui/alert-dialog";
+import { getSignInRedirectURL } from "~utils/link";
+import { useSettings } from "~pages/shared/queries";
+
+import {
+ criticalErrorSelector,
+ useResetPasswordStore,
+} from "./useResetPasswordStore";
+
+export const ResetPasswordPopover = () => {
+ const { t } = useTranslation();
+ const { data: settings } = useSettings();
+
+ const { criticalError } = useResetPasswordStore(
+ useCallback(
+ (state) => ({
+ criticalError: criticalErrorSelector(state),
+ }),
+ []
+ )
+ );
+ const { hash: fromSignInHash } = useLocation();
+
+ const handleAction = (e: any) => {
+ e.preventDefault();
+ window.location.href = getSignInRedirectURL(
+ settings?.response.configs["signin.redirect-url"],
+ fromSignInHash,
+ SIGNUP_ROUTE
+ );
+ };
+
+ return (
+
+
+
+
+ <>
+
+ {t("error")}
+
+
+
+ {criticalError && t(`error_response.${criticalError.errorCode}`)}
+
+
+
+
+ {t("okay")}
+
+
+
+
+ );
+};
diff --git a/signup-ui/src/pages/ResetPasswordPage/ResetPasswordStatus/ResetPasswordStatus.tsx b/signup-ui/src/pages/ResetPasswordPage/ResetPasswordStatus/ResetPasswordStatus.tsx
new file mode 100644
index 00000000..2ea58013
--- /dev/null
+++ b/signup-ui/src/pages/ResetPasswordPage/ResetPasswordStatus/ResetPasswordStatus.tsx
@@ -0,0 +1,3 @@
+export const ResetPasswordStatus = () => {
+ return ResetPasswordStatus
;
+};
diff --git a/signup-ui/src/pages/ResetPasswordPage/ResetPasswordStatus/index.tsx b/signup-ui/src/pages/ResetPasswordPage/ResetPasswordStatus/index.tsx
new file mode 100644
index 00000000..4151b92a
--- /dev/null
+++ b/signup-ui/src/pages/ResetPasswordPage/ResetPasswordStatus/index.tsx
@@ -0,0 +1 @@
+export { ResetPasswordStatus as default } from "./ResetPasswordStatus";
diff --git a/signup-ui/src/pages/ResetPasswordPage/UserInfo/UserInfo.tsx b/signup-ui/src/pages/ResetPasswordPage/UserInfo/UserInfo.tsx
new file mode 100644
index 00000000..13c92f0a
--- /dev/null
+++ b/signup-ui/src/pages/ResetPasswordPage/UserInfo/UserInfo.tsx
@@ -0,0 +1,256 @@
+import { MouseEvent, useCallback, useRef, useState } from "react";
+import ReCAPTCHA from "react-google-recaptcha";
+import { useFormContext, UseFormReturn } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { useLocation } from "react-router-dom";
+
+import { SIGNUP_ROUTE } from "~constants/routes";
+import { ActionMessage } from "~components/ui/action-message";
+import { Button } from "~components/ui/button";
+import {
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "~components/ui/form";
+import { Icons } from "~components/ui/icons";
+import { Input } from "~components/ui/input";
+import {
+ Popover,
+ PopoverArrow,
+ PopoverContent,
+ PopoverTrigger,
+} from "~components/ui/popover";
+import {
+ Step,
+ StepAlert,
+ StepContent,
+ StepDescription,
+ StepDivider,
+ StepHeader,
+ StepTitle,
+} from "~components/ui/step";
+import { cn } from "~utils/cn";
+import { getLocale } from "~utils/language";
+import { getSignInRedirectURL } from "~utils/link";
+import { useGenerateChallenge } from "~pages/shared/mutations";
+import {
+ Error,
+ GenerateChallengeRequestDto,
+ ResetPasswordForm,
+ SettingsDto,
+} from "~typings/types";
+
+import {
+ ResetPasswordStep,
+ setCriticalErrorSelector,
+ setStepSelector,
+ useResetPasswordStore,
+} from "../useResetPasswordStore";
+
+interface UserInfoProps {
+ methods: UseFormReturn;
+ settings: SettingsDto;
+}
+
+export const UserInfo = ({ settings, methods }: UserInfoProps) => {
+ const { i18n, t } = useTranslation();
+
+ const _reCaptchaRef = useRef(null);
+ const { hash: fromSignInHash } = useLocation();
+ const { control, setValue, getValues } = useFormContext();
+ const [challengeGenerationError, setChallengeGenerationError] =
+ useState(null);
+
+ const {
+ trigger,
+ formState: { errors: UserInfoFormErrors, isValid: isUserInfoValid },
+ } = methods;
+
+ const { setStep, setCriticalError } = useResetPasswordStore(
+ useCallback(
+ (state) => ({
+ setStep: setStepSelector(state),
+ setCriticalError: setCriticalErrorSelector(state),
+ }),
+ []
+ )
+ );
+ const { generateChallengeMutation } = useGenerateChallenge();
+
+ const handleReCaptchaChange = (token: string | null) => {
+ setValue("captchaToken", token ?? "", { shouldValidate: true });
+ };
+
+ const handleReCaptchaExpired = () => {
+ setValue("captchaToken", "", { shouldValidate: true });
+ };
+
+ const handleContinue = useCallback(
+ async (e: MouseEvent) => {
+ e.preventDefault();
+ const isStepValid = await trigger();
+
+ if (isStepValid) {
+ const generateChallengeRequestDto: GenerateChallengeRequestDto = {
+ requestTime: new Date().toISOString(),
+ request: {
+ identifier: `${
+ settings.response.configs["identifier.prefix"]
+ }${getValues("username")}`,
+ fullname: getValues("fullname"),
+ captchaToken: getValues("captchaToken"),
+ locale: getLocale(i18n.language),
+ regenerate: false,
+ purpose: "RESET_PASSWORD",
+ },
+ };
+
+ return generateChallengeMutation.mutate(generateChallengeRequestDto, {
+ onSuccess: ({ response, errors }) => {
+ if (errors.length > 0) {
+ if (errors[0].errorCode === "invalid_transaction") {
+ setCriticalError(errors[0]);
+ } else {
+ setChallengeGenerationError(errors[0]);
+ }
+ }
+
+ if (response && errors.length === 0) {
+ setValue("otp", "", { shouldValidate: true });
+ setStep(ResetPasswordStep.Otp);
+ }
+ },
+ });
+ }
+ },
+ []
+ );
+
+ return (
+
+
+
+
+ {!!fromSignInHash && (
+
+
+
+ )}
+
+ {t("forgot_password")}
+
+
+ {t("forgot_password_description")}
+
+
+
+ {/* Error message */}
+
+
+ {challengeGenerationError &&
+ t(`error_response.${challengeGenerationError.errorCode}`)}
+
+ {
+ setChallengeGenerationError(null);
+ }}
+ />
+
+
+
+ {/* Phone and reCAPTCHA inputs */}
+
+
+ {/* Phone number input */}
+
(
+
+ {t("username")}
+
+
+
+
+ {settings.response.configs["identifier.prefix"]}
+
+
+
+
+
+
+
+
+ {t("full_name")}
+
+
+
+
+
+
+
+
+
+
+
{
captchaToken: getValues("captchaToken"),
locale: getLocale(i18n.language),
regenerate: true,
+ purpose: "REGISTRATION",
},
};
@@ -229,7 +232,7 @@ export const Otp = ({ methods, settings }: OtpProps) => {
{/* Error message */}
-
+
{challengeVerificationError &&
t(`error_response.${challengeVerificationError.errorCode}`)}
@@ -238,7 +241,7 @@ export const Otp = ({ methods, settings }: OtpProps) => {
className="h-4 w-4 cursor-pointer text-destructive"
onClick={() => setChallengeVerificationError(null)}
/>
-
+
{/* OTP inputs */}
@@ -296,7 +299,7 @@ export const Otp = ({ methods, settings }: OtpProps) => {
>
{t("verify")}
-
+
{
captchaToken: getValues("captchaToken"),
locale: getLocale(i18n.language),
regenerate: false,
+ purpose: "REGISTRATION",
},
};
@@ -135,7 +136,11 @@ export const Phone = ({ settings, methods }: PhoneProps) => {
{!!fromSignInHash && (
@@ -149,7 +154,7 @@ export const Phone = ({ settings, methods }: PhoneProps) => {
{/* Error message */}
-
+
{error && t(`error_response.${error.errorCode}`)}
@@ -159,7 +164,7 @@ export const Phone = ({ settings, methods }: PhoneProps) => {
setHasError(false);
}}
/>
-
+
{/* Phone and reCAPTCHA inputs */}
@@ -175,7 +180,7 @@ export const Phone = ({ settings, methods }: PhoneProps) => {
diff --git a/signup-ui/src/pages/SignUpPage/PhoneStatus/PhoneStatus.tsx b/signup-ui/src/pages/SignUpPage/PhoneStatus/PhoneStatus.tsx
index b3ebd1ee..745696be 100644
--- a/signup-ui/src/pages/SignUpPage/PhoneStatus/PhoneStatus.tsx
+++ b/signup-ui/src/pages/SignUpPage/PhoneStatus/PhoneStatus.tsx
@@ -9,12 +9,12 @@ import { ReactComponent as SuccessIconSvg } from "~assets/svg/success-icon.svg";
import { Button } from "~components/ui/button";
import { Step, StepContent } from "~components/ui/step";
import { getSignInRedirectURL } from "~utils/link";
-import { keys as mutationKeys } from "~pages/SignUpPage/mutations";
+import { keys as mutationKeys } from "~pages/shared/mutations";
+import { useSettings } from "~pages/shared/queries";
import { VerifyChallengeResponseDto } from "~typings/types";
import { SignUpForm } from "../SignUpPage";
import { setStepSelector, SignUpStep, useSignUpStore } from "../useSignUpStore";
-import { useSettings } from "../queries";
interface PhoneStatusProps {
methods: UseFormReturn
;
@@ -44,7 +44,11 @@ export const PhoneStatus = ({ methods }: PhoneStatusProps) => {
const handleChallengeVerificationErrorRedirect = (e: any) => {
e.preventDefault();
- window.location.href = getSignInRedirectURL(settings?.response.configs["signin.redirect-url"], fromSignInHash, "/signup");
+ window.location.href = getSignInRedirectURL(
+ settings?.response.configs["signin.redirect-url"],
+ fromSignInHash,
+ "/signup"
+ );
};
const [challengeVerification] = useMutationState({
diff --git a/signup-ui/src/pages/SignUpPage/SignUpPage.tsx b/signup-ui/src/pages/SignUpPage/SignUpPage.tsx
index 9d695dfa..e97663ff 100644
--- a/signup-ui/src/pages/SignUpPage/SignUpPage.tsx
+++ b/signup-ui/src/pages/SignUpPage/SignUpPage.tsx
@@ -57,14 +57,12 @@ export const SignUpPage = ({ settings }: SignUpPageProps) => {
yup.object({
phone: yup
.string()
- .required()
- .min(1, t("fail_to_send_otp"))
- .test("is-phone-number", t("fail_to_send_otp"), (phone) => {
- const asYouType = new AsYouType();
- asYouType.input(settings.response.configs["identifier.prefix"]);
-
- return isValidPhoneNumber(phone, asYouType.country);
- }),
+ .required(t("username_validation"))
+ .matches(/^[^0].*$/, t("username_validation"))
+ .matches(
+ new RegExp(settings.response.configs["identifier.pattern"]),
+ t("username_validation")
+ ),
captchaToken: yup.string().required(t("captcha_token_validation")),
}),
// Step 2 - OTP Validation
diff --git a/signup-ui/src/pages/SignUpPage/SignUpPageContainer.tsx b/signup-ui/src/pages/SignUpPage/SignUpPageContainer.tsx
index 85826eec..a61f59ae 100644
--- a/signup-ui/src/pages/SignUpPage/SignUpPageContainer.tsx
+++ b/signup-ui/src/pages/SignUpPage/SignUpPageContainer.tsx
@@ -1,6 +1,8 @@
+import { PageLayout } from "~layouts/PageLayout";
+
import { Icons } from "~components/ui/icons";
+import { useSettings } from "~pages/shared/queries";
-import { useSettings } from "./queries";
import { SignUpPage } from "./SignUpPage";
export const SignUpPageContainer = () => {
@@ -15,20 +17,8 @@ export const SignUpPageContainer = () => {
}
return (
-
-
-
-
-
-
-
-
+
{image}
{title}
diff --git a/signup-ui/src/typings/types.ts b/signup-ui/src/typings/types.ts
index 3bec146b..e6b21734 100644
--- a/signup-ui/src/typings/types.ts
+++ b/signup-ui/src/typings/types.ts
@@ -1,3 +1,12 @@
+export interface ResetPasswordForm {
+ username: string;
+ fullname: string;
+ captchaToken: string;
+ otp: string;
+ newPassword: string;
+ confirmNewPassword: string;
+}
+
const GenerateChallengePossibleErrors = [
"invalid_transaction",
"invalid_otp_channel",
@@ -84,13 +93,32 @@ export type SettingsDto = BaseResponseDto & {
errors: Error[] | null;
};
-export type GenerateChallengeRequestDto = BaseRequestDto & {
- request: {
- identifier: string;
- captchaToken: string;
- locale: string;
- regenerate: boolean;
+const ChallengeGenerationPurposes = ["REGISTRATION", "RESET_PASSWORD"] as const;
+
+export type ChallengeGenerationPurpose =
+ (typeof ChallengeGenerationPurposes)[number];
+
+type BaseChallengeGenerationRequest = {
+ identifier: string;
+ captchaToken: string;
+ locale: string;
+ regenerate: boolean;
+};
+
+type RegistrationChallengeGenerationRequest = BaseChallengeGenerationRequest & {
+ purpose: "REGISTRATION";
+};
+
+type ResetPasswordChallengeGenerationRequest =
+ BaseChallengeGenerationRequest & {
+ fullname: string;
+ purpose: "RESET_PASSWORD";
};
+
+export type GenerateChallengeRequestDto = BaseRequestDto & {
+ request:
+ | RegistrationChallengeGenerationRequest
+ | ResetPasswordChallengeGenerationRequest;
};
export type GenerateChallengeResponseDto = BaseResponseDto & {
diff --git a/signup-ui/tsconfig.paths.json b/signup-ui/tsconfig.paths.json
index a0d2e9e5..c11dabc6 100644
--- a/signup-ui/tsconfig.paths.json
+++ b/signup-ui/tsconfig.paths.json
@@ -14,6 +14,9 @@
"~components/*": [
"./src/components/*"
],
+ "~layouts/*": [
+ "./src/layouts/*"
+ ],
"~templates/*": [
"./src/templates/*"
],
@@ -43,4 +46,4 @@
]
}
}
-}
\ No newline at end of file
+}