ES-613 (mosip#55)

* UI: Signup, forgot password landing page

* add const for redirect route

---------

Co-authored-by: Sreang Rathanak <[email protected]>

Signed-off-by: Sreang Rathanak <[email protected]>

signup-ui/public/locales/en.json

@@ -1,4 +1,8 @@
 {
+  "reset_password": "Reset Password",
+  "register": "Register",
+  "landing_page_title": "Oops! The page you are looking for does not exist.",
+  "landing_page_description": "Please try navigating using the options below.",
   "enter_your_number": "Please enter your mobile number to continue",
   "enter_your_number_placeholder": "Enter 8-9 digit phone number",
   "fail_to_send_otp": "Failed to send OTP. Please provide a valid mobile number.",

signup-ui/public/locales/km.json

@@ -1,4 +1,8 @@
 {
+  "reset_password": "កំណត់ពាក្យសម្ងាត់ឡើងវិញ",
+  "register": "បង្កើតគណនី",
+  "landing_page_title": "សូមអភ័យទោស! ទំព័រដែលអ្នកស្វែងរកមិនមាននោះទេ។",
+  "landing_page_description": "អ្នកអាចស្វែងរកដោយប្រើជម្រើសខាងក្រោម។",
   "enter_your_number": "សូមបញ្ចូលលេខទូរសព្ទរបស់អ្នកដើម្បីបន្ត",
   "enter_your_number_placeholder": "បញ្ចូលលេខទូរស័ព្ទចំនួន 8-9 ខ្ទង់",
   "fail_to_send_otp": "មិនអាចផ្ញើលេខសម្ងាត់បានទេ! សូមពិនិត្យនិង ផ្ញើលេខទូរសព្ទរបស់អ្នកម្ដងទៀត។",

signup-ui/src/app/AppRouter.tsx

@@ -1,12 +1,13 @@
 import { lazy, ReactNode, Suspense, useEffect } from "react";
-import { Route, Routes, useNavigate } from "react-router-dom";
+import { Route, Routes, useNavigate, useLocation, Navigate } from "react-router-dom";
 
-import { SIGNUP_ROUTE, SOMETHING_WENT_WRONG } from "~constants/routes";
+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 { lazyRetry } from "~utils/lazyRetry";
 
 const SignUpPage = lazy(() => lazyRetry(() => import("~pages/SignUpPage")));
+const LandingPage = lazy(() => lazyRetry(() => import("~pages/LandingPage")));
 const UnderConstructionPage = lazy(() =>
   lazyRetry(() => import("~pages/UnderConstructionPage"))
 );
@@ -21,6 +22,14 @@ const WithSuspense = ({ children }: { children: ReactNode }) => (
 );
 
 export const AppRouter = () => {
+  const navigate = useNavigate();
+  const { hash: fromSignInHash } = useLocation();
+  const REDIRECT_ROUTE = `${ROOT_ROUTE}${fromSignInHash}`;
+
+  useEffect(() => {
+    setupResponseInterceptor(navigate);
+  }, [navigate]);
+
   return (
     <div className="min-h-screen flex flex-col sm:bg-white">
       <NavBar />
@@ -32,7 +41,12 @@ export const AppRouter = () => {
               path={SOMETHING_WENT_WRONG}
               element={<SomethingWentWrongPage />}
             />
-            <Route path="*" element={<UnderConstructionPage />} />
+            <Route
+              path={UNDER_CONSTRUCTION}
+              element={<UnderConstructionPage />}
+            />
+            <Route path={ROOT_ROUTE} element={<LandingPage />} />
+            <Route path="*" element={<Navigate to={REDIRECT_ROUTE} />} />
           </Routes>
         </WithSuspense>
         <Footer />

signup-ui/src/constants/routes.ts

@@ -1 +1,5 @@
+export const ROOT_ROUTE = "/";
 export const SIGNUP_ROUTE = "/signup";
+export const RESET_PASSWORD = "/reset-password";
+export const SOMETHING_WENT_WRONG = "/something-went-wrong";
+export const UNDER_CONSTRUCTION = "/under-construction";

signup-ui/src/pages/LandingPage/LandingPage.tsx

@@ -0,0 +1,44 @@
+import { useTranslation } from "react-i18next";
+import { useNavigate, useLocation } from "react-router-dom";
+
+import { SIGNUP_ROUTE, RESET_PASSWORD } from "~constants/routes";
+import { ReactComponent as SomethingWentWrongSvg } from "~assets/svg/something-went-wrong.svg";
+import { Button } from "~components/ui/button";
+
+export const LandingPage = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { hash: fromSignInHash } = useLocation();
+
+  const handleResetPassword = (e: any) => {
+    e.preventDefault();
+    navigate(`${RESET_PASSWORD}${fromSignInHash}`);
+  }
+
+  const handleRegister = (e: any) => {
+    e.preventDefault();
+    navigate(`${SIGNUP_ROUTE}${fromSignInHash}`);
+  }
+
+  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-8 rounded-xl shadow-lg md:shadow-none">
+        <SomethingWentWrongSvg/>
+        <div className="flex flex-col items-center gap-y-2">
+          <h1 className="text-center text-2xl">{t("landing_page_title")}</h1>
+          <p className="text-center text-gray-500">{t("landing_page_description")}</p>
+        </div>
+        <div className="flex flex-row sm:flex-col items-center gap-x-2 w-full items-center justify-center">
+          <Button className="h-[52px] w-[200px] border-primary border-[2px] text-primary hover:text-primary/80 bg-white sm:mb-3 sm:w-full"
+            variant="outline"
+            onClick={handleResetPassword}>
+            {t("reset_password")}
+          </Button>
+          <Button className="h-[52px] w-[200px] sm:w-full" onClick={handleRegister}>
+            {t("register")}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};

signup-ui/src/pages/LandingPage/index.ts

@@ -0,0 +1 @@
+export { LandingPage as default } from "./LandingPage";

signup-ui/src/resources.d.ts

@@ -1,5 +1,9 @@
 interface Resources {
   translation: {
+    reset_password: string;
+    register: string;
+    landing_page_title: string;
+    landing_page_description: string;
     enter_your_number: string;
     enter_your_number_placeholder: string;
     fail_to_send_otp: string;