From 8c10d23868b0af97559ee299ab3871ddf072422b Mon Sep 17 00:00:00 2001
From: bunsy-0900 <148200748+bunsy-0900@users.noreply.github.com>
Date: Wed, 27 Dec 2023 10:23:39 +0700
Subject: [PATCH] ES-559 - UI Forgot Password Landing Page (#49)

* feat: implement forgot password landing page

* fix: remove popover for fullname

* fix: fix fullname in specific lng validation

* fix: fix phone number validation

* fix: fix username label

* fix: fix generate challenge payload

* fix: add continue loading state

---------

Co-authored-by: Bunsy <bunsy2014@gmail.com>
Signed-off-by: Sreang Rathanak <sreangrathanajk@yahoo.com>
---
 signup-ui/public/locales/en.json              |   4 +
 signup-ui/public/locales/km.json              |   4 +
 signup-ui/src/App.tsx                         |   2 +-
 signup-ui/src/app/AppRouter.tsx               |  61 +++--
 ...{active-message.tsx => action-message.tsx} |   8 +-
 signup-ui/src/components/ui/nav-bar.tsx       |   2 +-
 signup-ui/src/components/ui/step.tsx          |   2 +-
 signup-ui/src/layouts/AppLayout.tsx           |  16 ++
 signup-ui/src/layouts/PageLayout.tsx          |  21 ++
 .../src/pages/ResetPasswordPage/Otp/Otp.tsx   |   3 +
 .../src/pages/ResetPasswordPage/Otp/index.tsx |   1 +
 .../ResetPassword/ResetPassword.tsx           |   3 +
 .../ResetPasswordPage/ResetPassword/index.tsx |   1 +
 .../ResetPasswordConfirmation.tsx             |   3 +
 .../ResetPasswordConfirmation/index.tsx       |   1 +
 .../ResetPasswordPage/ResetPasswordPage.tsx   | 143 ++++++++++
 .../ResetPasswordPageContainer.tsx            |  29 ++
 .../ResetPasswordPopover.tsx                  |  72 +++++
 .../ResetPasswordStatus.tsx                   |   3 +
 .../ResetPasswordStatus/index.tsx             |   1 +
 .../ResetPasswordPage/UserInfo/UserInfo.tsx   | 256 ++++++++++++++++++
 .../ResetPasswordPage/UserInfo/index.tsx      |   1 +
 .../src/pages/ResetPasswordPage/index.tsx     |   1 +
 .../useResetPasswordStore.tsx                 |  53 ++++
 .../AccountRegistrationStatus.tsx             |   4 +-
 .../AccountRegistrationStatusLayout.tsx       |   8 +-
 .../SignUpPage/AccountSetup/AccountSetup.tsx  |   4 +-
 .../AccountSetupStatus/AccountSetupStatus.tsx |   4 +-
 signup-ui/src/pages/SignUpPage/Otp/Otp.tsx    |  15 +-
 .../src/pages/SignUpPage/Phone/Phone.tsx      |  17 +-
 .../SignUpPage/PhoneStatus/PhoneStatus.tsx    |  10 +-
 signup-ui/src/pages/SignUpPage/SignUpPage.tsx |  14 +-
 .../pages/SignUpPage/SignUpPageContainer.tsx  |  22 +-
 .../src/pages/SignUpPage/SignUpPopover.tsx    |  10 +-
 .../pages/{SignUpPage => shared}/mutations.ts |   0
 .../pages/{SignUpPage => shared}/queries.ts   |   0
 .../pages/{SignUpPage => shared}/service.ts   |   0
 signup-ui/src/resources.d.ts                  |   4 +
 .../ErrorPageTemplate/ErrorPageTemplate.tsx   |   2 +-
 signup-ui/src/typings/types.ts                |  40 ++-
 signup-ui/tsconfig.paths.json                 |   5 +-
 41 files changed, 760 insertions(+), 90 deletions(-)
 rename signup-ui/src/components/ui/{active-message.tsx => action-message.tsx} (70%)
 create mode 100644 signup-ui/src/layouts/AppLayout.tsx
 create mode 100644 signup-ui/src/layouts/PageLayout.tsx
 create mode 100644 signup-ui/src/pages/ResetPasswordPage/Otp/Otp.tsx
 create mode 100644 signup-ui/src/pages/ResetPasswordPage/Otp/index.tsx
 create mode 100644 signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx
 create mode 100644 signup-ui/src/pages/ResetPasswordPage/ResetPassword/index.tsx
 create mode 100644 signup-ui/src/pages/ResetPasswordPage/ResetPasswordConfirmation/ResetPasswordConfirmation.tsx
 create mode 100644 signup-ui/src/pages/ResetPasswordPage/ResetPasswordConfirmation/index.tsx
 create mode 100644 signup-ui/src/pages/ResetPasswordPage/ResetPasswordPage.tsx
 create mode 100644 signup-ui/src/pages/ResetPasswordPage/ResetPasswordPageContainer.tsx
 create mode 100644 signup-ui/src/pages/ResetPasswordPage/ResetPasswordPopover.tsx
 create mode 100644 signup-ui/src/pages/ResetPasswordPage/ResetPasswordStatus/ResetPasswordStatus.tsx
 create mode 100644 signup-ui/src/pages/ResetPasswordPage/ResetPasswordStatus/index.tsx
 create mode 100644 signup-ui/src/pages/ResetPasswordPage/UserInfo/UserInfo.tsx
 create mode 100644 signup-ui/src/pages/ResetPasswordPage/UserInfo/index.tsx
 create mode 100644 signup-ui/src/pages/ResetPasswordPage/index.tsx
 create mode 100644 signup-ui/src/pages/ResetPasswordPage/useResetPasswordStore.tsx
 rename signup-ui/src/pages/{SignUpPage => shared}/mutations.ts (100%)
 rename signup-ui/src/pages/{SignUpPage => shared}/queries.ts (100%)
 rename signup-ui/src/pages/{SignUpPage => shared}/service.ts (100%)

diff --git a/signup-ui/public/locales/en.json b/signup-ui/public/locales/en.json
index e81b5bea..61998739 100644
--- a/signup-ui/public/locales/en.json
+++ b/signup-ui/public/locales/en.json
@@ -41,13 +41,17 @@
   "login": "Login",
   "okay": "Okay",
   "continue": "Continue",
+  "forgot_password": "Forgot Password?",
+  "forgot_password_description": "Please enter your 8-9 digit registered mobile number and full name.",
   "page_under_construction": "Page Under Construction!",
   "page_under_construction_detail": "Our experts are working hard to make this page available. Meanwhile, we request you to please visit after some time.",
   "something_went_wrong": "Something went wrong!",
   "something_went_wrong_detail": "Our experts are working hard to make things working again.",
   "attempts_left": "{attemptLeft} of {totalAttempt} attempts left",
   "captcha_token_validation": "Please verify that you are a human.",
+  "username_validation": "Please enter a valid username",
   "full_name_validation": "Please enter a valid name",
+  "full_name_in_lng_validation": "Full Name has to be in Khmer only.",
   "password_validation": "Please enter a valid password",
   "password_validation_must_match": "Passwords must match",
   "terms_and_conditions_validation": "You must accept the terms and conditions",
diff --git a/signup-ui/public/locales/km.json b/signup-ui/public/locales/km.json
index e0ebc735..afc4e1a8 100644
--- a/signup-ui/public/locales/km.json
+++ b/signup-ui/public/locales/km.json
@@ -41,13 +41,17 @@
   "login": "ចូលគណនី",
   "okay": "យល់ព្រម",
   "continue": "បន្ត",
+  "forgot_password": "ភ្លេចលេខសម្ងាត់?",
+  "forgot_password_description": "សូមបញ្ចូលលេខទូរសព្ទដែលបានចុះឈ្មោះ 8-9 ខ្ទង់ និងឈ្មោះពេញរបស់អ្នក",
   "page_under_construction": "ទំព័រកំពុងសាងសង់!",
   "page_under_construction_detail": "អ្នកជំនាញកំពុងធ្វើការដើម្បីឱ្យទំព័រនេះអាចប្រើប្រាស់បាន។ សូមចូលម្ដងទៀតនៅពេលក្រោយ។",
   "something_went_wrong": "មានអ្វីមួយខុសប្រក្រតី!",
   "something_went_wrong_detail": "អ្នកជំនាញកំពុងធ្វើការដើម្បីឱ្យអ្វីៗដំណើរការឡើងវិញ។",
   "attempts_left": "ការព្យាយាមនៅសល់ {attemptLeft} នៃ {totalAttempt}",
   "captcha_token_validation": "សូមបញ្ជាក់ថាអ្នកជាមនុស្ស",
+  "username_validation": "សូមបញ្ចូលឈ្មោះអ្នកប្រើប្រាស់ត្រឹមត្រូវ",
   "full_name_validation": "សូមបញ្ចូលគោត្តនាម-នាមឱ្យបានត្រឹមត្រូវ",
+  "full_name_in_lng_validation": "គោត្តនាម-នាមត្រូវតែមានតែអក្សរខ្មែរ",
   "password_validation": "សូមបញ្ចូលលេខសម្ងាត់ឱ្យបានត្រឹមត្រូវ",
   "password_validation_must_match": "លេខចម្ងាត់ត្រូវតែដូចគ្នា",
   "terms_and_conditions_validation": "អ្នកត្រូវយល់ព្រមតាមលក្ខខណ្ឌ និងគោលការណ៍",
diff --git a/signup-ui/src/App.tsx b/signup-ui/src/App.tsx
index 8699a971..eb0e5fa3 100644
--- a/signup-ui/src/App.tsx
+++ b/signup-ui/src/App.tsx
@@ -18,7 +18,7 @@ import Footer from "~components/ui/footer";
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
-      staleTime: Infinity,
+      staleTime: 60 * 1000, // set to one minutes
       retry: (failureCount, error) => {
         // Do not retry on 4xx error codes
         if (error instanceof HttpError && String(error.code).startsWith("4")) {
diff --git a/signup-ui/src/app/AppRouter.tsx b/signup-ui/src/app/AppRouter.tsx
index d7be722b..97d171d7 100644
--- a/signup-ui/src/app/AppRouter.tsx
+++ b/signup-ui/src/app/AppRouter.tsx
@@ -1,12 +1,26 @@
 import { lazy, ReactNode, Suspense, useEffect } from "react";
-import { Route, Routes, useNavigate, useLocation, Navigate } from "react-router-dom";
+import { AppLayout } from "~layouts/AppLayout";
+import {
+  Navigate,
+  Route,
+  Routes,
+  useLocation,
+  useNavigate,
+} from "react-router-dom";
 
-import { ROOT_ROUTE, SIGNUP_ROUTE, SOMETHING_WENT_WRONG, UNDER_CONSTRUCTION } from "~constants/routes";
-import Footer from "~components/ui/footer";
-import NavBar from "~components/ui/nav-bar";
+import {
+  RESET_PASSWORD,
+  ROOT_ROUTE,
+  SIGNUP_ROUTE,
+  SOMETHING_WENT_WRONG,
+  UNDER_CONSTRUCTION,
+} from "~constants/routes";
 import { lazyRetry } from "~utils/lazyRetry";
 
 const SignUpPage = lazy(() => lazyRetry(() => import("~pages/SignUpPage")));
+const ResetPasswordPage = lazy(() =>
+  lazyRetry(() => import("~pages/ResetPasswordPage"))
+);
 const LandingPage = lazy(() => lazyRetry(() => import("~pages/LandingPage")));
 const UnderConstructionPage = lazy(() =>
   lazyRetry(() => import("~pages/UnderConstructionPage"))
@@ -31,26 +45,23 @@ export const AppRouter = () => {
   }, [navigate]);
 
   return (
-    <div className="min-h-screen flex flex-col sm:bg-white">
-      <NavBar />
-      <div className="relative flex flex-grow flex-col">
-        <WithSuspense>
-          <Routes>
-            <Route path={SIGNUP_ROUTE} element={<SignUpPage />} />
-            <Route
-              path={SOMETHING_WENT_WRONG}
-              element={<SomethingWentWrongPage />}
-            />
-            <Route
-              path={UNDER_CONSTRUCTION}
-              element={<UnderConstructionPage />}
-            />
-            <Route path={ROOT_ROUTE} element={<LandingPage />} />
-            <Route path="*" element={<Navigate to={REDIRECT_ROUTE} />} />
-          </Routes>
-        </WithSuspense>
-        <Footer />
-      </div>
-    </div>
+    <WithSuspense>
+      <Routes>
+        <Route element={<AppLayout />}>
+          <Route path={SIGNUP_ROUTE} element={<SignUpPage />} />
+          <Route path={RESET_PASSWORD} element={<ResetPasswordPage />} />
+          <Route
+            path={SOMETHING_WENT_WRONG}
+            element={<SomethingWentWrongPage />}
+          />
+          <Route
+            path={UNDER_CONSTRUCTION}
+            element={<UnderConstructionPage />}
+          />
+          <Route path={ROOT_ROUTE} element={<LandingPage />} />
+          <Route path="*" element={<Navigate to={REDIRECT_ROUTE} />} />
+        </Route>
+      </Routes>
+    </WithSuspense>
   );
 };
diff --git a/signup-ui/src/components/ui/active-message.tsx b/signup-ui/src/components/ui/action-message.tsx
similarity index 70%
rename from signup-ui/src/components/ui/active-message.tsx
rename to signup-ui/src/components/ui/action-message.tsx
index f20d033a..68c031be 100644
--- a/signup-ui/src/components/ui/active-message.tsx
+++ b/signup-ui/src/components/ui/action-message.tsx
@@ -2,10 +2,10 @@ import * as React from "react";
 
 import { cn } from "~utils/cn";
 
-export interface ActiveMessageProps
+export interface ActionMessageProps
   extends React.HTMLAttributes<HTMLDivElement> {}
 
-const ActiveMessage = React.forwardRef<HTMLDivElement, ActiveMessageProps>(
+const ActionMessage = React.forwardRef<HTMLDivElement, ActionMessageProps>(
   ({ className, hidden, children, ...props }, ref) => (
     <div
       ref={ref}
@@ -22,6 +22,6 @@ const ActiveMessage = React.forwardRef<HTMLDivElement, ActiveMessageProps>(
   )
 );
 
-ActiveMessage.displayName = "ActiveMessage";
+ActionMessage.displayName = "ActionMessage";
 
-export { ActiveMessage };
+export { ActionMessage };
diff --git a/signup-ui/src/components/ui/nav-bar.tsx b/signup-ui/src/components/ui/nav-bar.tsx
index a25d3378..f1b302e2 100644
--- a/signup-ui/src/components/ui/nav-bar.tsx
+++ b/signup-ui/src/components/ui/nav-bar.tsx
@@ -4,7 +4,7 @@ import { Language } from "~components/language";
 
 const NavBar = () => {
   return (
-    <nav className="sticky top-0 z-40 h-[70px] w-full border-gray-500 bg-white px-2 sm:px-0 py-2 shadow-md">
+    <nav className="sticky top-0 z-40 h-[70px] w-full border-gray-500 bg-white px-2 py-2 shadow-md sm:px-0">
       <div className="container flex h-full items-center justify-between">
         <div className="ltr:ml-1 rtl:mr-1 ltr:sm:ml-8 rtl:sm:mr-8">
           <span className="text-2xl font-bold tracking-normal text-primary">
diff --git a/signup-ui/src/components/ui/step.tsx b/signup-ui/src/components/ui/step.tsx
index 97c24be4..7132828d 100644
--- a/signup-ui/src/components/ui/step.tsx
+++ b/signup-ui/src/components/ui/step.tsx
@@ -9,7 +9,7 @@ const Step = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "container max-w-lg sm:max-w-none rounded-2xl bg-white px-0 shadow-lg sm:rounded-none sm:shadow-none",
+      "container max-w-lg rounded-2xl bg-white px-0 shadow-lg sm:max-w-none sm:rounded-none sm:shadow-none",
       className
     )}
     {...props}
diff --git a/signup-ui/src/layouts/AppLayout.tsx b/signup-ui/src/layouts/AppLayout.tsx
new file mode 100644
index 00000000..59f922d4
--- /dev/null
+++ b/signup-ui/src/layouts/AppLayout.tsx
@@ -0,0 +1,16 @@
+import { Outlet } from "react-router-dom";
+
+import Footer from "~components/ui/footer";
+import NavBar from "~components/ui/nav-bar";
+
+export const AppLayout = () => {
+  return (
+    <div className="flex min-h-screen flex-col">
+      <NavBar />
+      <div className="relative flex flex-grow flex-col">
+        <Outlet />
+        <Footer />
+      </div>
+    </div>
+  );
+};
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 (
+    <div className="relative flex flex-1 items-center justify-center">
+      <img
+        className="absolute left-1 top-1"
+        src="/images/top.png"
+        alt="top left background"
+      />
+      <div className="z-10 w-full">{children}</div>
+      <img
+        className="absolute bottom-1 right-1"
+        src="/images/bottom.png"
+        alt="bottom right background"
+      />
+    </div>
+  );
+};
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 <div>Otp</div>;
+};
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 <div>ResetPassword</div>;
+};
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 <div>ResetPasswordConfirmation</div>;
+};
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<ResetPasswordForm>({
+    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 <UserInfo methods={methods} settings={settings} />;
+      case ResetPasswordStep.Otp:
+        return <Otp />;
+      case ResetPasswordStep.ResetPassword:
+        return <ResetPassword />;
+      case ResetPasswordStep.ResetPasswordStatus:
+        return <ResetPasswordStatus />;
+      case ResetPasswordStep.ResetPasswordConfirmation:
+        return <ResetPasswordConfirmation />;
+      default:
+        return "unknown step";
+    }
+  };
+
+  return (
+    <>
+      {criticalError &&
+        ["invalid_transaction"].includes(criticalError.errorCode) && (
+          <ResetPasswordPopover />
+        )}
+      <Form {...methods}>
+        <form>{getResetPasswordContent(step)}</form>
+      </Form>
+    </>
+  );
+};
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 (
+      <PageLayout>
+        <Step>
+          <StepContent className="flex h-40 items-center justify-center">
+            <Icons.loader className="animate-spin text-primary" />
+          </StepContent>
+        </Step>
+      </PageLayout>
+    );
+  }
+
+  return (
+    <PageLayout>
+      <ResetPasswordPage settings={settings} />
+    </PageLayout>
+  );
+};
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 (
+    <AlertDialog open={!!criticalError}>
+      <AlertDialogContent>
+        <AlertDialogHeader className="m-2">
+          <AlertDialogTitle className="flex flex-col items-center justify-center gap-y-4">
+            <>
+              <FailedIconSvg />
+              {t("error")}
+            </>
+          </AlertDialogTitle>
+          <AlertDialogDescription className="break-all text-center text-muted-dark-gray">
+            {criticalError && t(`error_response.${criticalError.errorCode}`)}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogAction
+            onClick={handleAction}
+            className="w-full bg-primary"
+          >
+            {t("okay")}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
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 <div>ResetPasswordStatus</div>;
+};
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<ResetPasswordForm, any, undefined>;
+  settings: SettingsDto;
+}
+
+export const UserInfo = ({ settings, methods }: UserInfoProps) => {
+  const { i18n, t } = useTranslation();
+
+  const _reCaptchaRef = useRef<ReCAPTCHA>(null);
+  const { hash: fromSignInHash } = useLocation();
+  const { control, setValue, getValues } = useFormContext();
+  const [challengeGenerationError, setChallengeGenerationError] =
+    useState<Error | null>(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<HTMLButtonElement>) => {
+      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 (
+    <div className="my-10">
+      <Step>
+        <StepHeader>
+          <StepTitle className="relative flex w-full items-center justify-center gap-x-4 text-[26px] font-semibold">
+            {!!fromSignInHash && (
+              <a
+                href={getSignInRedirectURL(
+                  settings?.response.configs["signin.redirect-url"],
+                  fromSignInHash,
+                  SIGNUP_ROUTE
+                )}
+                className="absolute left-0 cursor-pointer"
+              >
+                <Icons.back />
+              </a>
+            )}
+            <div className="text-center font-semibold tracking-normal">
+              {t("forgot_password")}
+            </div>
+          </StepTitle>
+          <StepDescription>{t("forgot_password_description")}</StepDescription>
+        </StepHeader>
+        <StepDivider />
+        <StepAlert className="relative">
+          {/* Error message */}
+          <ActionMessage hidden={!challengeGenerationError}>
+            <p className="truncate text-xs text-destructive">
+              {challengeGenerationError &&
+                t(`error_response.${challengeGenerationError.errorCode}`)}
+            </p>
+            <Icons.close
+              className="h-4 w-4 cursor-pointer text-destructive"
+              onClick={() => {
+                setChallengeGenerationError(null);
+              }}
+            />
+          </ActionMessage>
+        </StepAlert>
+        <StepContent>
+          {/* Phone and reCAPTCHA inputs */}
+          <div className="flex flex-col gap-y-6 px-6">
+            <div className="flex flex-col gap-y-6">
+              {/* Phone number input */}
+              <FormField
+                name="username"
+                control={control}
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>{t("username")}</FormLabel>
+                    <div className="relative w-full rounded-md">
+                      <FormControl>
+                        <div
+                          className={cn(
+                            "flex h-[52px] rounded-md border-[1px] border-input",
+                            UserInfoFormErrors.username && "border-destructive"
+                          )}
+                        >
+                          <span className="flex self-center border-r-[1px] border-input px-3 text-muted-foreground/60">
+                            {settings.response.configs["identifier.prefix"]}
+                          </span>
+                          <div className="w-full">
+                            <Input
+                              {...field}
+                              id="phone_input"
+                              type="tel"
+                              placeholder={t("enter_your_number_placeholder")}
+                              className="h-[inherit] border-none outline-none"
+                            />
+                          </div>
+                        </div>
+                      </FormControl>
+                      <FormMessage className="w-full" />
+                    </div>
+                  </FormItem>
+                )}
+              />
+              {/* Full Name */}
+              <FormField
+                control={control}
+                name="fullname"
+                render={({ field }) => (
+                  <FormItem className="space-y-0">
+                    <div className="space-y-2">
+                      <div className="flex items-center gap-1">
+                        <FormLabel>{t("full_name")}</FormLabel>
+                      </div>
+                      <FormControl>
+                        <Input
+                          placeholder={t("full_name_placeholder")}
+                          className={cn(
+                            "h-[52px] py-6",
+                            UserInfoFormErrors.fullname && "border-destructive"
+                          )}
+                          {...field}
+                        />
+                      </FormControl>
+                    </div>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              {/* ReCaptcha */}
+              <div id="captcha" className="flex items-center justify-center">
+                <ReCAPTCHA
+                  ref={_reCaptchaRef}
+                  onChange={handleReCaptchaChange}
+                  onExpired={handleReCaptchaExpired}
+                  className="recaptcha"
+                  sitekey={settings.response.configs["captcha.site.key"] ?? ""}
+                />
+              </div>
+            </div>
+            <Button
+              onClick={handleContinue}
+              isLoading={generateChallengeMutation.isPending}
+              disabled={!isUserInfoValid || generateChallengeMutation.isPending}
+            >
+              {t("continue")}
+            </Button>
+          </div>
+        </StepContent>
+      </Step>
+    </div>
+  );
+};
diff --git a/signup-ui/src/pages/ResetPasswordPage/UserInfo/index.tsx b/signup-ui/src/pages/ResetPasswordPage/UserInfo/index.tsx
new file mode 100644
index 00000000..4b25324f
--- /dev/null
+++ b/signup-ui/src/pages/ResetPasswordPage/UserInfo/index.tsx
@@ -0,0 +1 @@
+export { UserInfo as default } from "./UserInfo";
diff --git a/signup-ui/src/pages/ResetPasswordPage/index.tsx b/signup-ui/src/pages/ResetPasswordPage/index.tsx
new file mode 100644
index 00000000..a9fdcc56
--- /dev/null
+++ b/signup-ui/src/pages/ResetPasswordPage/index.tsx
@@ -0,0 +1 @@
+export { ResetPasswordPageContainer as default } from "./ResetPasswordPageContainer";
diff --git a/signup-ui/src/pages/ResetPasswordPage/useResetPasswordStore.tsx b/signup-ui/src/pages/ResetPasswordPage/useResetPasswordStore.tsx
new file mode 100644
index 00000000..0bf75b0c
--- /dev/null
+++ b/signup-ui/src/pages/ResetPasswordPage/useResetPasswordStore.tsx
@@ -0,0 +1,53 @@
+import { isEqual } from "lodash";
+import { create } from "zustand";
+import { devtools } from "zustand/middleware";
+
+import { Error } from "~typings/types";
+
+export enum ResetPasswordStep {
+  UserInfo,
+  Otp,
+  ResetPassword,
+  ResetPasswordStatus,
+  ResetPasswordConfirmation,
+}
+
+export type ResetPasswordStore = {
+  step: ResetPasswordStep;
+  setStep: (step: ResetPasswordStep) => void;
+  criticalError: Error | null;
+  setCriticalError: (criticalError: Error | null) => void;
+};
+
+export const useResetPasswordStore = create<ResetPasswordStore>()(
+  devtools((set, get) => ({
+    step: ResetPasswordStep.UserInfo,
+    setStep: (step: ResetPasswordStep) => {
+      const current = get();
+      if (isEqual(current.step, step)) return;
+      set((state) => ({ step }));
+    },
+    criticalError: null,
+    setCriticalError: (criticalError: Error | null) => {
+      const current = get();
+      if (isEqual(current.criticalError, criticalError)) return;
+      set((state) => ({ criticalError }));
+    },
+  }))
+);
+
+export const stepSelector = (
+  state: ResetPasswordStore
+): ResetPasswordStore["step"] => state.step;
+
+export const setStepSelector = (
+  state: ResetPasswordStore
+): ResetPasswordStore["setStep"] => state.setStep;
+
+export const criticalErrorSelector = (
+  state: ResetPasswordStore
+): ResetPasswordStore["criticalError"] => state.criticalError;
+
+export const setCriticalErrorSelector = (
+  state: ResetPasswordStore
+): ResetPasswordStore["setCriticalError"] => state.setCriticalError;
diff --git a/signup-ui/src/pages/SignUpPage/AccountRegistrationStatus/AccountRegistrationStatus.tsx b/signup-ui/src/pages/SignUpPage/AccountRegistrationStatus/AccountRegistrationStatus.tsx
index d394dc04..1e3ff228 100644
--- a/signup-ui/src/pages/SignUpPage/AccountRegistrationStatus/AccountRegistrationStatus.tsx
+++ b/signup-ui/src/pages/SignUpPage/AccountRegistrationStatus/AccountRegistrationStatus.tsx
@@ -2,8 +2,8 @@ import { useMutationState, useQueryClient } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
 
-import { keys as mutationKeys } from "~pages/SignUpPage/mutations";
-import { keys as queryKeys } from "~pages/SignUpPage/queries";
+import { keys as mutationKeys } from "~pages/shared/mutations";
+import { keys as queryKeys } from "~pages/shared/queries";
 import {
   RegistrationResponseDto,
   RegistrationStatus,
diff --git a/signup-ui/src/pages/SignUpPage/AccountRegistrationStatus/components/AccountRegistrationStatusLayout.tsx b/signup-ui/src/pages/SignUpPage/AccountRegistrationStatus/components/AccountRegistrationStatusLayout.tsx
index 7e4535b6..03d4a9b9 100644
--- a/signup-ui/src/pages/SignUpPage/AccountRegistrationStatus/components/AccountRegistrationStatusLayout.tsx
+++ b/signup-ui/src/pages/SignUpPage/AccountRegistrationStatus/components/AccountRegistrationStatusLayout.tsx
@@ -5,8 +5,8 @@ import { ReactComponent as FailedIconSvg } from "~assets/svg/failed-icon.svg";
 import { ReactComponent as SuccessIconSvg } from "~assets/svg/success-icon.svg";
 import { Button } from "~components/ui/button";
 import { Step, StepContent } from "~components/ui/step";
-import { useSettings } from "~pages/SignUpPage/queries";
 import { getSignInRedirectURL } from "~utils/link";
+import { useSettings } from "~pages/shared/queries";
 
 interface AccountRegistrationStatusLayoutProps {
   status: "success" | "failed";
@@ -23,7 +23,11 @@ export const AccountRegistrationStatusLayout = ({
 
   const handleAction = (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"
+    );
   };
 
   return (
diff --git a/signup-ui/src/pages/SignUpPage/AccountSetup/AccountSetup.tsx b/signup-ui/src/pages/SignUpPage/AccountSetup/AccountSetup.tsx
index 4a913d16..7e5b7366 100644
--- a/signup-ui/src/pages/SignUpPage/AccountSetup/AccountSetup.tsx
+++ b/signup-ui/src/pages/SignUpPage/AccountSetup/AccountSetup.tsx
@@ -24,9 +24,9 @@ import {
   StepTitle,
 } from "~components/ui/step";
 import { cn } from "~utils/cn";
+import { useRegister } from "~pages/shared/mutations";
 import { RegistrationRequestDto, SettingsDto } from "~typings/types";
 
-import { useRegister } from "../mutations";
 import { SignUpForm } from "../SignUpPage";
 import {
   setCriticalErrorSelector,
@@ -133,7 +133,7 @@ export const AccountSetup = ({ settings, methods }: AccountSetupProps) => {
           <StepDescription>{t("complete_your_registration")}</StepDescription>
         </StepHeader>
         <StepDivider />
-        <StepContent className="px-10 py-8 sm:px-[18px] sm:pt-[22px] sm:pb-[70px]">
+        <StepContent className="px-10 py-8 sm:px-[18px] sm:pb-[70px] sm:pt-[22px]">
           <div className="flex flex-col gap-y-6">
             <FormField
               control={control}
diff --git a/signup-ui/src/pages/SignUpPage/AccountSetupStatus/AccountSetupStatus.tsx b/signup-ui/src/pages/SignUpPage/AccountSetupStatus/AccountSetupStatus.tsx
index 89325d04..e3e877f8 100644
--- a/signup-ui/src/pages/SignUpPage/AccountSetupStatus/AccountSetupStatus.tsx
+++ b/signup-ui/src/pages/SignUpPage/AccountSetupStatus/AccountSetupStatus.tsx
@@ -5,7 +5,8 @@ import { useTranslation } from "react-i18next";
 
 import { Icons } from "~components/ui/icons";
 import { Step, StepContent } from "~components/ui/step";
-import { keys as mutationKeys } from "~pages/SignUpPage/mutations";
+import { keys as mutationKeys } from "~pages/shared/mutations";
+import { useRegistrationStatus } from "~pages/shared/queries";
 import {
   RegistrationResponseDto,
   RegistrationStatus,
@@ -13,7 +14,6 @@ import {
   SettingsDto,
 } from "~typings/types";
 
-import { useRegistrationStatus } from "../queries";
 import { SignUpForm } from "../SignUpPage";
 import { setStepSelector, SignUpStep, useSignUpStore } from "../useSignUpStore";
 
diff --git a/signup-ui/src/pages/SignUpPage/Otp/Otp.tsx b/signup-ui/src/pages/SignUpPage/Otp/Otp.tsx
index c683e543..f4733863 100644
--- a/signup-ui/src/pages/SignUpPage/Otp/Otp.tsx
+++ b/signup-ui/src/pages/SignUpPage/Otp/Otp.tsx
@@ -4,7 +4,7 @@ import { Trans, useTranslation } from "react-i18next";
 import PinInput from "react-pin-input";
 import { useTimer } from "react-timer-hook";
 
-import { ActiveMessage } from "~components/ui/active-message";
+import { ActionMessage } from "~components/ui/action-message";
 import { Button } from "~components/ui/button";
 import { FormControl, FormField, FormItem } from "~components/ui/form";
 import { Icons } from "~components/ui/icons";
@@ -17,10 +17,13 @@ import {
   StepHeader,
   StepTitle,
 } from "~components/ui/step";
-import { cn } from "~utils/cn";
 import { getLocale } from "~utils/language";
 import { maskPhoneNumber } from "~utils/phone";
 import { convertTime, getTimeoutTime } from "~utils/timer";
+import {
+  useGenerateChallenge,
+  useVerifyChallenge,
+} from "~pages/shared/mutations";
 import {
   Error,
   GenerateChallengeRequestDto,
@@ -28,7 +31,6 @@ import {
   VerifyChallengeRequestDto,
 } from "~typings/types";
 
-import { useGenerateChallenge, useVerifyChallenge } from "../mutations";
 import { SignUpForm } from "../SignUpPage";
 import {
   setCriticalErrorSelector,
@@ -114,6 +116,7 @@ export const Otp = ({ methods, settings }: OtpProps) => {
             captchaToken: getValues("captchaToken"),
             locale: getLocale(i18n.language),
             regenerate: true,
+            purpose: "REGISTRATION",
           },
         };
 
@@ -229,7 +232,7 @@ export const Otp = ({ methods, settings }: OtpProps) => {
       <StepDivider />
       <StepAlert>
         {/* Error message */}
-        <ActiveMessage hidden={!challengeVerificationError}>
+        <ActionMessage hidden={!challengeVerificationError}>
           <p className="truncate text-xs text-destructive">
             {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)}
           />
-        </ActiveMessage>
+        </ActionMessage>
       </StepAlert>
       <StepContent>
         {/* OTP inputs */}
@@ -296,7 +299,7 @@ export const Otp = ({ methods, settings }: OtpProps) => {
           >
             {t("verify")}
           </Button>
-          <div className="mx-12 sm:mx-0 flex flex-col items-center">
+          <div className="mx-12 flex flex-col items-center sm:mx-0">
             <div className="flex gap-x-1 text-center">
               <Trans
                 i18nKey="resend_otp_detail"
diff --git a/signup-ui/src/pages/SignUpPage/Phone/Phone.tsx b/signup-ui/src/pages/SignUpPage/Phone/Phone.tsx
index ab558013..2cb07e9a 100644
--- a/signup-ui/src/pages/SignUpPage/Phone/Phone.tsx
+++ b/signup-ui/src/pages/SignUpPage/Phone/Phone.tsx
@@ -4,7 +4,7 @@ import { useFormContext, UseFormReturn } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
 
-import { ActiveMessage } from "~components/ui/active-message";
+import { ActionMessage } from "~components/ui/action-message";
 import { Button } from "~components/ui/button";
 import {
   FormControl,
@@ -25,13 +25,13 @@ import {
 import { cn } from "~utils/cn";
 import { getLocale } from "~utils/language";
 import { getSignInRedirectURL } from "~utils/link";
+import { useGenerateChallenge } from "~pages/shared/mutations";
 import {
   Error,
   GenerateChallengeRequestDto,
   SettingsDto,
 } from "~typings/types";
 
-import { useGenerateChallenge } from "../mutations";
 import { SignUpForm } from "../SignUpPage";
 import {
   setCriticalErrorSelector,
@@ -102,6 +102,7 @@ export const Phone = ({ settings, methods }: PhoneProps) => {
             captchaToken: getValues("captchaToken"),
             locale: getLocale(i18n.language),
             regenerate: false,
+            purpose: "REGISTRATION",
           },
         };
 
@@ -135,7 +136,11 @@ export const Phone = ({ settings, methods }: PhoneProps) => {
         <StepTitle className="relative flex w-full items-center justify-center gap-x-4 text-base font-semibold leading-5">
           {!!fromSignInHash && (
             <a
-              href={getSignInRedirectURL(settings?.response.configs["signin.redirect-url"], fromSignInHash, "/signup")}
+              href={getSignInRedirectURL(
+                settings?.response.configs["signin.redirect-url"],
+                fromSignInHash,
+                "/signup"
+              )}
               className="absolute left-0 ml-6 cursor-pointer"
             >
               <Icons.back />
@@ -149,7 +154,7 @@ export const Phone = ({ settings, methods }: PhoneProps) => {
       <StepDivider />
       <StepAlert className="relative">
         {/* Error message */}
-        <ActiveMessage hidden={!hasError}>
+        <ActionMessage hidden={!hasError}>
           <p className="truncate text-xs text-destructive">
             {error && t(`error_response.${error.errorCode}`)}
           </p>
@@ -159,7 +164,7 @@ export const Phone = ({ settings, methods }: PhoneProps) => {
               setHasError(false);
             }}
           />
-        </ActiveMessage>
+        </ActionMessage>
       </StepAlert>
       <StepContent>
         {/* Phone and reCAPTCHA inputs */}
@@ -175,7 +180,7 @@ export const Phone = ({ settings, methods }: PhoneProps) => {
                     <FormControl>
                       <div
                         className={cn(
-                          "flex input rounded-md border-[1px] border-input",
+                          "input flex rounded-md border-[1px] border-input",
                           formError.phone && "border-destructive"
                         )}
                       >
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<SignUpForm, any, undefined>;
@@ -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<VerifyChallengeResponseDto>({
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 (
-    <div className="relative flex flex-1 items-center justify-center sm:flex-none">
-      <img
-        className="absolute left-1 top-1 block sm:hidden"
-        src="/images/top.png"
-        alt="top left background"
-      />
-      <div className="z-10 w-full">
-        <SignUpPage settings={settings} />
-      </div>
-      <img
-        className="absolute bottom-1 right-1 block sm:hidden"
-        src="/images/bottom.png"
-        alt="bottom right background"
-      />
-    </div>
+    <PageLayout>
+      <SignUpPage settings={settings} />
+    </PageLayout>
   );
 };
diff --git a/signup-ui/src/pages/SignUpPage/SignUpPopover.tsx b/signup-ui/src/pages/SignUpPage/SignUpPopover.tsx
index 47f8c513..d95bc0ee 100644
--- a/signup-ui/src/pages/SignUpPage/SignUpPopover.tsx
+++ b/signup-ui/src/pages/SignUpPage/SignUpPopover.tsx
@@ -13,14 +13,14 @@ import {
   AlertDialogTitle,
 } from "~components/ui/alert-dialog";
 import { getSignInRedirectURL } from "~utils/link";
+import { useSettings } from "~pages/shared/queries";
 
-import { useSettings } from "./queries";
 import { criticalErrorSelector, useSignUpStore } from "./useSignUpStore";
 
 export const SignUpPopover = () => {
   const { t } = useTranslation();
-  const { data: settings } = useSettings();
 
+  const { data: settings } = useSettings();
   const { criticalError } = useSignUpStore(
     useCallback(
       (state) => ({
@@ -33,7 +33,11 @@ export const SignUpPopover = () => {
 
   const handleAction = (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"
+    );
   };
 
   return (
diff --git a/signup-ui/src/pages/SignUpPage/mutations.ts b/signup-ui/src/pages/shared/mutations.ts
similarity index 100%
rename from signup-ui/src/pages/SignUpPage/mutations.ts
rename to signup-ui/src/pages/shared/mutations.ts
diff --git a/signup-ui/src/pages/SignUpPage/queries.ts b/signup-ui/src/pages/shared/queries.ts
similarity index 100%
rename from signup-ui/src/pages/SignUpPage/queries.ts
rename to signup-ui/src/pages/shared/queries.ts
diff --git a/signup-ui/src/pages/SignUpPage/service.ts b/signup-ui/src/pages/shared/service.ts
similarity index 100%
rename from signup-ui/src/pages/SignUpPage/service.ts
rename to signup-ui/src/pages/shared/service.ts
diff --git a/signup-ui/src/resources.d.ts b/signup-ui/src/resources.d.ts
index 4fa2c795..931eb5fb 100644
--- a/signup-ui/src/resources.d.ts
+++ b/signup-ui/src/resources.d.ts
@@ -42,13 +42,17 @@ interface Resources {
     login: string;
     okay: string;
     continue: string;
+    forgot_password: string;
+    forgot_password_description: string;
     page_under_construction: string;
     page_under_construction_detail: string;
     something_went_wrong: string;
     something_went_wrong_detail: string;
     attempts_left: string;
     captcha_token_validation: string;
+    username_validation: string;
     full_name_validation: string;
+    full_name_in_lng_validation: string;
     password_validation: string;
     password_validation_must_match: string;
     terms_and_conditions_validation: string;
diff --git a/signup-ui/src/templates/ErrorPageTemplate/ErrorPageTemplate.tsx b/signup-ui/src/templates/ErrorPageTemplate/ErrorPageTemplate.tsx
index a97a2fbc..79edc54d 100644
--- a/signup-ui/src/templates/ErrorPageTemplate/ErrorPageTemplate.tsx
+++ b/signup-ui/src/templates/ErrorPageTemplate/ErrorPageTemplate.tsx
@@ -11,7 +11,7 @@ export const ErrorPageTemplate = ({
 }: ErrorPageTemplateProps) => {
   return (
     <div className="flex h-[calc(100vh-14vh)] w-full items-center justify-center p-16 px-32 sm:px-[30px]">
-      <div className="h-full bg-white flex w-full flex-col items-center justify-center gap-y-12 rounded-xl shadow-lg sm:shadow-none">
+      <div className="flex h-full w-full flex-col items-center justify-center gap-y-12 rounded-xl bg-white shadow-lg sm:shadow-none">
         {image}
         <div className="flex flex-col items-center gap-y-2">
           <h1 className="text-center text-2xl">{title}</h1>
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
+}