From bc047169748f46b8d48b0122bb6e55a5514ce530 Mon Sep 17 00:00:00 2001
From: roshni73 <roshani.poudel@togglecorp.com>
Date: Tue, 12 Nov 2024 12:18:14 +0545
Subject: [PATCH] Add Validation Email page

---
 src/App/routes/index.tsx                      |  13 ++
 src/views/Login/index.tsx                     |   2 +-
 src/views/ResendValidationEmail/i18n.json     |  10 ++
 src/views/ResendValidationEmail/index.tsx     | 111 ++++++++++++++++++
 .../ResendValidationEmail/styles.module.css   |  21 ++++
 5 files changed, 156 insertions(+), 1 deletion(-)
 create mode 100644 src/views/ResendValidationEmail/i18n.json
 create mode 100644 src/views/ResendValidationEmail/index.tsx
 create mode 100644 src/views/ResendValidationEmail/styles.module.css

diff --git a/src/App/routes/index.tsx b/src/App/routes/index.tsx
index 8859e41..adfd2fe 100644
--- a/src/App/routes/index.tsx
+++ b/src/App/routes/index.tsx
@@ -217,6 +217,18 @@ const recoverAccount = customWrapRoute({
         visibility: 'is-not-authenticated',
     },
 });
+const resendValidationEmail = customWrapRoute({
+    parent: rootLayout,
+    path: 'resend-validation-email',
+    component: {
+        render: () => import('#views/ResendValidationEmail'),
+        props: {},
+    },
+    context: {
+        title: 'Resend Validation Email',
+        visibility: 'is-not-authenticated',
+    },
+});
 
 const wrappedRoutes = {
     rootLayout,
@@ -232,6 +244,7 @@ const wrappedRoutes = {
     pageNotFound,
     login,
     recoverAccount,
+    resendValidationEmail,
     mySubscription,
 };
 
diff --git a/src/views/Login/index.tsx b/src/views/Login/index.tsx
index 3ac7eda..6ae0dd8 100644
--- a/src/views/Login/index.tsx
+++ b/src/views/Login/index.tsx
@@ -124,7 +124,7 @@ export function Component() {
                         {strings.loginForgotUserPass}
                     </Link>
                     <Link
-                        to="login" // FIXME :LoginResendValidation
+                        to="resendValidationEmail"
                         title={strings.loginResendValidationTitle}
                         withUnderline
                     >
diff --git a/src/views/ResendValidationEmail/i18n.json b/src/views/ResendValidationEmail/i18n.json
new file mode 100644
index 0000000..df3c494
--- /dev/null
+++ b/src/views/ResendValidationEmail/i18n.json
@@ -0,0 +1,10 @@
+{
+    "namespace": "resendValidationEmail",
+    "strings": {
+        "pageTitle": "IFRC Alert-Hub - Resend Validation Email",
+        "pageHeading": "Resend Validation Email",
+        "pageDescription": "Enter the email you used during registration",
+        "emailInputLabel": "Email",
+        "submitButtonLabel": "Resend"
+    }
+}
diff --git a/src/views/ResendValidationEmail/index.tsx b/src/views/ResendValidationEmail/index.tsx
new file mode 100644
index 0000000..ff6308f
--- /dev/null
+++ b/src/views/ResendValidationEmail/index.tsx
@@ -0,0 +1,111 @@
+import { useMemo } from 'react';
+import {
+    Button,
+    TextInput,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    createSubmitHandler,
+    getErrorObject,
+    type ObjectSchema,
+    requiredStringCondition,
+    useForm,
+} from '@togglecorp/toggle-form';
+
+import HCaptcha from '#components/Captcha';
+import Page from '#components/Page';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+interface FormFields {
+    email?: string;
+    captcha?:string;
+}
+
+const defaultFormValue: FormFields = {
+};
+
+type FormSchema = ObjectSchema<FormFields>;
+type FormSchemaFields = ReturnType<FormSchema['fields']>
+
+const formSchema: FormSchema = {
+    fields: (): FormSchemaFields => ({
+        email: {
+            required: true,
+            requiredValidation: requiredStringCondition,
+        },
+        captcha: {
+            required: true,
+            requiredValidation: requiredStringCondition,
+        },
+    }),
+};
+
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+    const strings = useTranslation(i18n);
+
+    const {
+        value: formValue,
+        error: formError,
+        setFieldValue,
+        setError,
+        validate,
+    } = useForm(formSchema, { value: defaultFormValue });
+
+    const handleFormSubmit = useMemo(
+        () => createSubmitHandler(
+            validate,
+            setError,
+            // FIXME: Add Submit logic here
+            () => {},
+        ),
+        [validate, setError],
+    );
+
+    const fieldError = getErrorObject(formError);
+
+    return (
+        <Page
+            className={styles.resendValidationEmail}
+            title={strings.pageTitle}
+            heading={strings.pageHeading}
+            description={strings.pageDescription}
+        >
+            <form
+                className={styles.form}
+                onSubmit={handleFormSubmit}
+            >
+
+                <TextInput
+                    name="email"
+                    label={strings.emailInputLabel}
+                    value={formValue.email}
+                    onChange={setFieldValue}
+                    error={fieldError?.email}
+                    disabled={false}
+                    withAsterisk
+                    autoFocus
+                />
+                <div className={styles.actions}>
+                    <HCaptcha
+                        name="captcha"
+                        onChange={setFieldValue}
+                    />
+                    <Button
+                        name={undefined}
+                        type="submit"
+                        className={styles.submitButton}
+                        disabled={false}
+                    >
+                        {strings.submitButtonLabel}
+                    </Button>
+                </div>
+
+            </form>
+        </Page>
+    );
+}
+
+Component.displayName = 'ResendValidationEmail';
diff --git a/src/views/ResendValidationEmail/styles.module.css b/src/views/ResendValidationEmail/styles.module.css
new file mode 100644
index 0000000..813c615
--- /dev/null
+++ b/src/views/ResendValidationEmail/styles.module.css
@@ -0,0 +1,21 @@
+.resend-validation-email {
+    .form {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        gap: var(--go-ui-spacing-lg);
+        margin: 0 auto;
+        max-width: var(--go-ui-width-content-max);
+
+        .submit-button {
+            align-self: center;
+        }
+
+        .actions {
+            display: flex;
+            flex-direction: column;
+            gap: var(--go-ui-spacing-lg);
+            align-items: center;
+        }
+    }
+}