From 353326b6c29286edecbcd28fe93eeea54d6827ab Mon Sep 17 00:00:00 2001
From: Aditya Khatri <aditya.khatri@togglecorp.com>
Date: Tue, 12 Nov 2024 11:49:11 +0545
Subject: [PATCH 1/2] Add register page

Remove unnecessary required fields
---
 src/App/routes/index.tsx             |  13 ++
 src/components/Navbar/i18n.json      |   1 +
 src/components/Navbar/index.tsx      |  18 ++
 src/views/Login/i18n.json            |   2 +-
 src/views/Register/i18n.json         |  20 ++
 src/views/Register/index.tsx         | 292 +++++++++++++++++++++++++++
 src/views/Register/styles.module.css |  40 ++++
 7 files changed, 385 insertions(+), 1 deletion(-)
 create mode 100644 src/views/Register/i18n.json
 create mode 100644 src/views/Register/index.tsx
 create mode 100644 src/views/Register/styles.module.css

diff --git a/src/App/routes/index.tsx b/src/App/routes/index.tsx
index f0f856f2..2ba87eb8 100644
--- a/src/App/routes/index.tsx
+++ b/src/App/routes/index.tsx
@@ -214,6 +214,18 @@ const pageNotFound = customWrapRoute({
         visibility: 'anything',
     },
 });
+const register = customWrapRoute({
+    parent: rootLayout,
+    path: 'register',
+    component: {
+        render: () => import('#views/Register'),
+        props: {},
+    },
+    context: {
+        title: 'Register',
+        visibility: 'is-not-authenticated',
+    },
+});
 
 const login = customWrapRoute({
     parent: rootLayout,
@@ -288,6 +300,7 @@ const wrappedRoutes = {
     resendValidationEmail,
     mySubscription,
     cookiePolicy,
+    register,
     historicalAlerts,
     subscriptionDetail,
 };
diff --git a/src/components/Navbar/i18n.json b/src/components/Navbar/i18n.json
index 117178a3..97ad5041 100644
--- a/src/components/Navbar/i18n.json
+++ b/src/components/Navbar/i18n.json
@@ -3,6 +3,7 @@
     "strings": {
         "headerLogoAltText": "Alert Hub logo",
         "appLogin": "Login",
+        "appRegister":"Register",
         "appAbout": "About",
         "appResources": "Resources",
         "headerMenuHome": "Home",
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index 06221e83..e9ab985f 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -19,6 +19,7 @@ import UserContext from '#contexts/user';
 import { LogoutMutation } from '#generated/types/graphql';
 import useAuth from '#hooks/domain/useAuth';
 import useAlert from '#hooks/useAlert';
+import useAuth from '#hooks/useAuth';
 
 import LangaugeDropdown from './LanguageDropdown';
 
@@ -76,6 +77,7 @@ function Navbar(props: Props) {
         },
     );
 
+    const { isAuthenticated } = useAuth();
     return (
         <nav className={_cs(styles.navbar, className)}>
             <PageContainer
@@ -132,6 +134,22 @@ function Navbar(props: Props) {
                             {strings.userLogout}
                         </Button>
                     )}
+                    {!isAuthenticated && (
+                        <>
+                            <Link
+                                variant="primary"
+                                to="login"
+                            >
+                                {strings.appLogin}
+                            </Link>
+                            <Link
+                                to="register"
+                                variant="primary"
+                            >
+                                {strings.appRegister}
+                            </Link>
+                        </>
+                    )}
                 </NavigationTabList>
             </PageContainer>
             <PageContainer
diff --git a/src/views/Login/i18n.json b/src/views/Login/i18n.json
index 56c5a2f3..98a1f050 100644
--- a/src/views/Login/i18n.json
+++ b/src/views/Login/i18n.json
@@ -3,7 +3,7 @@
     "strings": {
         "loginTitle":"IFRC Alert-Hub - Login",
         "loginHeader":"Login",
-        "loginSubHeader":"If you are staff, member or volunteer of the Red Cross Red Crescent Movement (National Societies, the IFRC and the ICRC) login with you email and password.",
+        "loginSubHeader":"If you are staff, member or volunteer of the Red Cross Red Crescent Movement (National Societies, the IFRC and the ICRC) login with your IFRC AlertHub account email and password.",
         "loginEmailUsername":"Email",
         "loginPassword":"Password",
         "loginRecoverTitle":"Recover password",
diff --git a/src/views/Register/i18n.json b/src/views/Register/i18n.json
new file mode 100644
index 00000000..edf53516
--- /dev/null
+++ b/src/views/Register/i18n.json
@@ -0,0 +1,20 @@
+{
+    "namespace": "register",
+    "strings": {
+        "registerTitle": "IFRC Alert-Hub - Register",
+        "registerHeader": "Register",
+        "registerSubHeader": "The IFRC Alert Hub platform is designed for staff, members, and volunteers of the Red Cross Red Crescent Movement (National Societies, the IFRC and the ICRC). Please register for a user account to access information for logged in users. Other responders and members of the public may browse the public areas of the site without registering for an account.",
+        "registerFirstName": "First Name",
+        "registerLastName": "Last Name",
+        "registerEmail": "Email",
+        "registerCountry": "Country",
+        "registerCity": "City",
+        "registerOrganizationType": "Organization Type",
+        "registerOrganizationName": "Organization Name",
+        "registerPassword": "Password",
+        "registerConfirmPassword": "Confirm Password",
+        "registerSubmit": "Register",
+        "registerAccountPresent": "Already have an account? {loginLink}",
+        "registerLogin": "Login"
+    }
+}
diff --git a/src/views/Register/index.tsx b/src/views/Register/index.tsx
new file mode 100644
index 00000000..ef9f6f77
--- /dev/null
+++ b/src/views/Register/index.tsx
@@ -0,0 +1,292 @@
+import { useState } from 'react';
+import {
+    Button,
+    SelectInput,
+    TextInput,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import { resolveToComponent } from '@ifrc-go/ui/utils';
+import { isTruthyString } from '@togglecorp/fujs';
+import {
+    addCondition,
+    createSubmitHandler,
+    emailCondition,
+    type ObjectSchema,
+    requiredStringCondition,
+    undefinedValue,
+    useForm,
+} from '@togglecorp/toggle-form';
+
+import HCaptcha from '#components/Captcha';
+import Link from '#components/Link';
+import Page from '#components/Page';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+interface DefaultFormValue {
+    first_name: string;
+    last_name: string;
+    email: string;
+    password: string;
+    confirm_password: string;
+    country: string;
+    city: string;
+    organization: string;
+    organization_type: string;
+    captcha?:string;
+}
+
+function getPasswordMatchCondition(referenceVal: string | undefined) {
+    return (val: string | undefined) => (
+        isTruthyString(val) && isTruthyString(referenceVal) && val !== referenceVal
+            ? 'Passwords do not match'
+            : undefined
+    );
+}
+
+const organizationTypes = [
+    { id: '101', key: 'NTLS', value: 'National Society' },
+    { id: '102', key: 'NGO', value: 'Non-Governmental Organization' },
+    { id: '103', key: 'UN', value: 'United Nations Agency' },
+];
+const nationalSocietyOptions = [
+    { id: '201', society_name: 'Red Cross Society' },
+    { id: '202', society_name: 'Red Crescent Society' },
+];
+const countryOptions = [
+    { id: '301', value: 'United States' },
+    { id: '302', value: 'Canada' },
+    { id: '303', value: 'United Kingdom' },
+];
+const whitelistedDomains = [
+    'example.com',
+    'anotherdomain.org',
+    'somedomain.net',
+];
+
+type FormFields = DefaultFormValue;
+
+const keySelector = (option: { id?: string }): string => option.id || '';
+const labelSelector = (option: { value?: string }): string => option.value || '';
+
+type PartialFormFields = Partial<FormFields>;
+type FormSchema = ObjectSchema<PartialFormFields>;
+type FormSchemaFields = ReturnType<FormSchema['fields']>;
+
+const isWhitelistedEmail = (email: string): boolean => {
+    const domain = email.split('@')[1];
+    return whitelistedDomains.includes(domain);
+};
+
+const emailWhitelistValidation = (value: string | undefined) => {
+    if (!isWhitelistedEmail(value || '')) {
+        return 'Email not allowed';
+    }
+    return undefined;
+};
+
+const formSchema: FormSchema = {
+    fields: (value): FormSchemaFields => {
+        let fields: FormSchemaFields = {
+            first_name: {
+                required: true,
+                requiredValidation: requiredStringCondition,
+            },
+            last_name: {
+                required: true,
+                requiredValidation: requiredStringCondition,
+            },
+            email: {
+                required: true,
+                requiredValidation: requiredStringCondition,
+                validations: [emailCondition, emailWhitelistValidation],
+            },
+            password: {
+                required: true,
+                requiredValidation: requiredStringCondition,
+            },
+            confirm_password: {
+                required: true,
+                requiredValidation: requiredStringCondition,
+                forceValue: undefinedValue,
+                validations: [getPasswordMatchCondition(value?.password)],
+            },
+            captcha: {
+                required: true,
+                requiredValidation: requiredStringCondition,
+            },
+        };
+        fields = addCondition(
+            fields,
+            value,
+            ['password'],
+            ['confirm_password'],
+            (val) => ({
+                confirm_password: {
+                    required: true,
+                    requiredValidation: requiredStringCondition,
+                    forceValue: undefinedValue,
+                    validations: [getPasswordMatchCondition(val?.password)],
+                },
+            }),
+        );
+
+        return fields;
+    },
+};
+
+// eslint-disable-next-line import/prefer-default-export
+export function Component() {
+    const strings = useTranslation(i18n);
+    const [formValue] = useState<PartialFormFields>({});
+
+    const {
+        value,
+        setFieldValue,
+        setError,
+        validate,
+    } = useForm(formSchema, {
+        value: formValue,
+    });
+    const fieldError: PartialFormFields = {};
+    const handleFormSubmit = createSubmitHandler(
+        validate,
+        setError,
+        // FIXME: Add Submit logic here
+        () => {},
+    );
+    const isNationalSociety = formValue?.organization_type === 'NTLS';
+
+    const loginInfo = resolveToComponent(strings.registerAccountPresent, {
+        loginLink: (
+            <Link
+                to="login"
+                withUnderline
+            >
+                {strings.registerLogin}
+            </Link>
+        ),
+    });
+
+    return (
+        <Page
+            className={styles.register}
+            title={strings.registerTitle}
+            heading={strings.registerHeader}
+            description={strings.registerSubHeader}
+            mainSectionClassName={styles.mainSection}
+        >
+            <div className={styles.form}>
+                <TextInput
+                    name="first_name"
+                    label={strings.registerFirstName}
+                    value={value.first_name}
+                    onChange={setFieldValue}
+                    error={fieldError?.first_name}
+                    withAsterisk
+                />
+                <TextInput
+                    name="last_name"
+                    label={strings.registerLastName}
+                    value={value.last_name}
+                    onChange={setFieldValue}
+                    error={fieldError?.last_name}
+                    withAsterisk
+                />
+                <TextInput
+                    className={styles.fullSizeInput}
+                    name="email"
+                    label={strings.registerEmail}
+                    value={value.email}
+                    onChange={setFieldValue}
+                    error={fieldError?.email}
+                    withAsterisk
+                />
+                <TextInput
+                    name="password"
+                    type="password"
+                    label={strings.registerPassword}
+                    value={value.password}
+                    onChange={setFieldValue}
+                    error={fieldError?.password}
+                    withAsterisk
+                />
+                <TextInput
+                    name="confirm_password"
+                    type="password"
+                    label={strings.registerConfirmPassword}
+                    value={value.confirm_password}
+                    onChange={setFieldValue}
+                    error={fieldError?.confirm_password}
+                    withAsterisk
+                />
+                <div className={styles.formBorder} />
+                <SelectInput
+                    label={strings.registerOrganizationType}
+                    name="organization_type"
+                    options={organizationTypes}
+                    keySelector={keySelector}
+                    labelSelector={labelSelector}
+                    value={value.organization_type}
+                    onChange={setFieldValue}
+                    error={fieldError?.organization_type}
+                />
+                <SelectInput
+                    label={strings.registerCountry}
+                    name="country"
+                    options={countryOptions}
+                    keySelector={keySelector}
+                    labelSelector={labelSelector}
+                    value={value.country}
+                    onChange={setFieldValue}
+                    error={fieldError?.country}
+                />
+                <TextInput
+                    name="city"
+                    label={strings.registerCity}
+                    value={value.city}
+                    onChange={setFieldValue}
+                    error={fieldError?.city}
+                />
+                {isNationalSociety ? (
+                    <SelectInput
+                        label={strings.registerOrganizationName}
+                        name="organization"
+                        options={nationalSocietyOptions}
+                        keySelector={keySelector}
+                        labelSelector={keySelector}
+                        value={value.organization}
+                        onChange={setFieldValue}
+                        error={fieldError?.organization}
+                    />
+                ) : (
+                    <TextInput
+                        name="organization"
+                        label={strings.registerOrganizationName}
+                        value={value.organization}
+                        onChange={setFieldValue}
+                        error={fieldError?.organization}
+                    />
+                )}
+            </div>
+            <div className={styles.actions}>
+                <HCaptcha
+                    name="captcha"
+                    onChange={setFieldValue}
+                />
+                <Button
+                    name={undefined}
+                    onClick={handleFormSubmit}
+                >
+                    {strings.registerSubmit}
+                </Button>
+                <div className={styles.login}>
+                    {loginInfo}
+                </div>
+            </div>
+        </Page>
+    );
+}
+
+Component.displayName = 'Register';
diff --git a/src/views/Register/styles.module.css b/src/views/Register/styles.module.css
new file mode 100644
index 00000000..5c4e38fe
--- /dev/null
+++ b/src/views/Register/styles.module.css
@@ -0,0 +1,40 @@
+.register {
+    .main-section {
+        display: flex;
+        flex-direction: column;
+        gap: var(--go-ui-spacing-2xl);
+        align-items: center;
+
+        .form {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+            grid-gap: var(--go-ui-spacing-lg);
+            background-color: var(--go-ui-color-white);
+            width: 100%;
+            max-width: var(--go-ui-width-content-max);
+
+            .full-size-input {
+                grid-column: 1 / -1;
+            }
+
+            .form-border {
+                grid-column: 1 / -1;
+                background-color: var(--go-ui-color-separator);
+                height: var(--go-ui-width-separator-sm);
+            }
+        }
+
+        .actions {
+            display: flex;
+            flex-direction: column;
+            gap: var(--go-ui-spacing-md);
+            align-items: center;
+
+            .login {
+                display: flex;
+                gap: var(--go-ui-spacing-xs);
+                align-items: center;
+            }
+        }
+    }
+}

From 8f84b5806305df52d0f62075c9d84001792d5fc3 Mon Sep 17 00:00:00 2001
From: roshni73 <roshani.poudel@togglecorp.com>
Date: Wed, 20 Nov 2024 16:39:07 +0545
Subject: [PATCH 2/2] Add mutation for register

---
 src/components/Navbar/index.tsx               |  31 +--
 src/components/NonFiledError/i18n.json        |   6 +
 src/components/NonFiledError/index.tsx        |  65 +++++
 .../NonFiledError/styles.module.css           |  21 ++
 src/utils/errorTransform.ts                   |  86 ++++++
 src/utils/user.ts                             |  31 ---
 src/views/Register/i18n.json                  |   4 +-
 src/views/Register/index.tsx                  | 246 ++++++++----------
 src/views/Register/styles.module.css          |  10 -
 9 files changed, 304 insertions(+), 196 deletions(-)
 create mode 100644 src/components/NonFiledError/i18n.json
 create mode 100644 src/components/NonFiledError/index.tsx
 create mode 100644 src/components/NonFiledError/styles.module.css
 create mode 100644 src/utils/errorTransform.ts
 delete mode 100644 src/utils/user.ts

diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
index e9ab985f..ca9ac0e5 100644
--- a/src/components/Navbar/index.tsx
+++ b/src/components/Navbar/index.tsx
@@ -19,7 +19,6 @@ import UserContext from '#contexts/user';
 import { LogoutMutation } from '#generated/types/graphql';
 import useAuth from '#hooks/domain/useAuth';
 import useAlert from '#hooks/useAlert';
-import useAuth from '#hooks/useAuth';
 
 import LangaugeDropdown from './LanguageDropdown';
 
@@ -76,8 +75,6 @@ function Navbar(props: Props) {
             },
         },
     );
-
-    const { isAuthenticated } = useAuth();
     return (
         <nav className={_cs(styles.navbar, className)}>
             <PageContainer
@@ -116,24 +113,6 @@ function Navbar(props: Props) {
                     >
                         {strings.appResources}
                     </NavigationTab>
-                    {!isAuthenticated && (
-                        <Link
-                            variant="primary"
-                            to="login"
-                        >
-                            {strings.appLogin}
-                        </Link>
-                    )}
-                    {isAuthenticated && (
-                        <Button
-                            name={undefined}
-                            variant="primary"
-                            onClick={triggerLogout}
-                            disabled={logoutPending}
-                        >
-                            {strings.userLogout}
-                        </Button>
-                    )}
                     {!isAuthenticated && (
                         <>
                             <Link
@@ -150,6 +129,16 @@ function Navbar(props: Props) {
                             </Link>
                         </>
                     )}
+                    {isAuthenticated && (
+                        <Button
+                            name={undefined}
+                            variant="primary"
+                            onClick={triggerLogout}
+                            disabled={logoutPending}
+                        >
+                            {strings.userLogout}
+                        </Button>
+                    )}
                 </NavigationTabList>
             </PageContainer>
             <PageContainer
diff --git a/src/components/NonFiledError/i18n.json b/src/components/NonFiledError/i18n.json
new file mode 100644
index 00000000..557f515b
--- /dev/null
+++ b/src/components/NonFiledError/i18n.json
@@ -0,0 +1,6 @@
+{
+    "namespace": "common",
+    "strings": {
+        "fallbackMessage":"Please correct all the errors before submission!"
+    }
+}
diff --git a/src/components/NonFiledError/index.tsx b/src/components/NonFiledError/index.tsx
new file mode 100644
index 00000000..8602c693
--- /dev/null
+++ b/src/components/NonFiledError/index.tsx
@@ -0,0 +1,65 @@
+import { useMemo } from 'react';
+import { AlertLineIcon } from '@ifrc-go/icons';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    _cs,
+    isFalsyString,
+    isNotDefined,
+} from '@togglecorp/fujs';
+import {
+    analyzeErrors,
+    Error,
+    getErrorObject,
+    nonFieldError,
+} from '@togglecorp/toggle-form';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+export interface Props<T> {
+    className?: string;
+    error?: Error<T>;
+    withFallbackError?: boolean;
+}
+
+function NonFieldError<T>(props: Props<T>) {
+    const {
+        className,
+        error,
+        withFallbackError,
+    } = props;
+
+    const strings = useTranslation(i18n);
+    const errorObject = useMemo(() => getErrorObject(error), [error]);
+
+    if (isNotDefined(errorObject)) {
+        return null;
+    }
+
+    const hasError = analyzeErrors(errorObject);
+    if (!hasError) {
+        return null;
+    }
+
+    const stringError = errorObject?.[nonFieldError] || (
+        withFallbackError ? strings.fallbackMessage : undefined);
+
+    if (isFalsyString(stringError)) {
+        return null;
+    }
+
+    return (
+        <div className={_cs(
+            styles.nonFieldError,
+            className,
+        )}
+        >
+            <AlertLineIcon className={styles.icon} />
+            <div>
+                {stringError}
+            </div>
+        </div>
+    );
+}
+
+export default NonFieldError;
diff --git a/src/components/NonFiledError/styles.module.css b/src/components/NonFiledError/styles.module.css
new file mode 100644
index 00000000..b3e469f0
--- /dev/null
+++ b/src/components/NonFiledError/styles.module.css
@@ -0,0 +1,21 @@
+.non-field-error {
+    display: inline-flex;
+    gap: var(--go-ui-spacing-sm);
+    align-items: baseline;
+    animation: flash var(--go-ui-duration-animation-fast) ease-in-out;
+    animation-delay: var(--go-ui-duration-animation-slow);
+    color: var(--go-ui-color-red);
+    font-size: var(--go-ui-font-size-lg);
+    font-weight: var(--go-ui-font-weight-medium);
+
+    .icon {
+        flex-shrink: 0;
+        /* font-size: var(--go-ui-height-icon-multiplier); */
+    }
+}
+
+@keyframes flash {
+    0% { opacity: 1; }
+    50% { opacity: 0.7; }
+    100% { opacity: 1; }
+}
diff --git a/src/utils/errorTransform.ts b/src/utils/errorTransform.ts
new file mode 100644
index 00000000..a8a15385
--- /dev/null
+++ b/src/utils/errorTransform.ts
@@ -0,0 +1,86 @@
+import {
+    isDefined,
+    isNotDefined,
+    listToMap,
+} from '@togglecorp/fujs';
+import { nonFieldError } from '@togglecorp/toggle-form';
+
+export interface Error {
+    [ nonFieldError]?: string | undefined;
+    [key: string]: string | Error | undefined;
+}
+
+export interface ObjectError {
+    // clientId is sent by the server for bulk updates
+    clientId: string | undefined;
+
+    field: string;
+    messages?: string;
+    objectErrors?: ObjectError[];
+    arrayErrors?: (ArrayError | null)[];
+}
+
+interface ArrayError {
+    clientId: string;
+    messages?: string;
+    objectErrors?: ObjectError[];
+}
+
+function transformObject(errors: ObjectError[] | undefined): Error | undefined {
+    if (isNotDefined(errors)) {
+        return undefined;
+    }
+
+    const topLevelError = errors.find((error) => error.field === 'nonFieldErrors');
+    const finalNonFieldErrors = topLevelError?.messages;
+
+    const fieldErrors = errors.filter((error) => error.field !== 'nonFieldErrors');
+    const finalFieldErrors: Error = listToMap(
+        fieldErrors,
+        (error) => error.field,
+        (error) => {
+            if (isDefined(error.messages)) {
+                return error.messages;
+            }
+            const objectErrors = isDefined(error.objectErrors)
+                ? transformObject(error.objectErrors)
+                : undefined;
+
+            const arrayErrors = isDefined(isDefined(error.arrayErrors))
+                // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                ? transformArray(error.arrayErrors)
+                : undefined;
+
+            if (!objectErrors && !arrayErrors) {
+                return undefined;
+            }
+            return { ...objectErrors, ...arrayErrors };
+        },
+    );
+
+    return {
+        [nonFieldError]: finalNonFieldErrors,
+        ...finalFieldErrors,
+    };
+}
+
+function transformArray(errors: (ArrayError | null)[] | undefined): Error | undefined {
+    if (isNotDefined(errors)) {
+        return undefined;
+    }
+    const filteredErrors = errors.filter(isDefined);
+
+    const topLevelError = filteredErrors.find((error) => error.clientId === 'nonMemberErrors');
+    const memberErrors = filteredErrors.filter((error) => error.clientId !== 'nonMemberErrors');
+
+    return {
+        [nonFieldError]: topLevelError?.messages,
+        ...listToMap(
+            memberErrors,
+            (error) => error.clientId,
+            (error) => transformObject(error.objectErrors),
+        ),
+    };
+}
+
+export const transformToFormError = transformObject;
diff --git a/src/utils/user.ts b/src/utils/user.ts
deleted file mode 100644
index 59f9315a..00000000
--- a/src/utils/user.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import {
-    isNotDefined,
-    isTruthyString,
-} from '@togglecorp/fujs';
-
-interface User {
-    firstName: string | undefined | null;
-    lastName: string | undefined | null;
-    displayName: string;
-}
-
-// eslint-disable-next-line import/prefer-default-export
-export function getUserName(user: User | undefined) {
-    if (isNotDefined(user)) {
-        return 'Unknown user';
-    }
-
-    const name = [user.firstName, user.lastName].filter(isTruthyString).join(' ');
-    if (isTruthyString(name)) {
-        return name;
-    }
-
-    // NOTE: Username can also be email
-    // so stripping out the domain part
-    const index = user.displayName.indexOf('@');
-    if (index === -1) {
-        return user.displayName;
-    }
-
-    return user.displayName.substring(0, index);
-}
diff --git a/src/views/Register/i18n.json b/src/views/Register/i18n.json
index edf53516..5d3b31b5 100644
--- a/src/views/Register/i18n.json
+++ b/src/views/Register/i18n.json
@@ -15,6 +15,8 @@
         "registerConfirmPassword": "Confirm Password",
         "registerSubmit": "Register",
         "registerAccountPresent": "Already have an account? {loginLink}",
-        "registerLogin": "Login"
+        "registerLogin": "Login",
+        "registrationSuccess": "Successfully created a user!",
+        "registrationFailure": "Sorry could not register new user right now!"
     }
 }
diff --git a/src/views/Register/index.tsx b/src/views/Register/index.tsx
index ef9f6f77..d196a229 100644
--- a/src/views/Register/index.tsx
+++ b/src/views/Register/index.tsx
@@ -1,7 +1,11 @@
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+    gql,
+    useMutation,
+} from '@apollo/client';
 import {
     Button,
-    SelectInput,
     TextInput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
@@ -11,7 +15,10 @@ import {
     addCondition,
     createSubmitHandler,
     emailCondition,
+    getErrorObject,
+    nonFieldError,
     type ObjectSchema,
+    removeNull,
     requiredStringCondition,
     undefinedValue,
     useForm,
@@ -19,99 +26,65 @@ import {
 
 import HCaptcha from '#components/Captcha';
 import Link from '#components/Link';
+import NonFieldError from '#components/NonFiledError';
 import Page from '#components/Page';
+import {
+    RegisterMutation,
+    RegisterMutationVariables,
+    UserRegisterInput,
+} from '#generated/types/graphql';
+import useAlert from '#hooks/useAlert';
+import { transformToFormError } from '#utils/errorTransform';
 
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
-interface DefaultFormValue {
-    first_name: string;
-    last_name: string;
-    email: string;
-    password: string;
-    confirm_password: string;
-    country: string;
-    city: string;
-    organization: string;
-    organization_type: string;
-    captcha?:string;
-}
+const REGISTER_MUTATION = gql`
+    mutation Register($data: UserRegisterInput!) {
+        public {
+            register(data: $data){
+                errors
+                ok
+            }
+        }
+    }
+`;
 
 function getPasswordMatchCondition(referenceVal: string | undefined) {
-    return (val: string | undefined) => (
-        isTruthyString(val) && isTruthyString(referenceVal) && val !== referenceVal
-            ? 'Passwords do not match'
-            : undefined
-    );
-}
-
-const organizationTypes = [
-    { id: '101', key: 'NTLS', value: 'National Society' },
-    { id: '102', key: 'NGO', value: 'Non-Governmental Organization' },
-    { id: '103', key: 'UN', value: 'United Nations Agency' },
-];
-const nationalSocietyOptions = [
-    { id: '201', society_name: 'Red Cross Society' },
-    { id: '202', society_name: 'Red Crescent Society' },
-];
-const countryOptions = [
-    { id: '301', value: 'United States' },
-    { id: '302', value: 'Canada' },
-    { id: '303', value: 'United Kingdom' },
-];
-const whitelistedDomains = [
-    'example.com',
-    'anotherdomain.org',
-    'somedomain.net',
-];
-
-type FormFields = DefaultFormValue;
+    function passwordMatchCondition(val: string | undefined) {
+        if (isTruthyString(val) && isTruthyString(referenceVal) && val !== referenceVal) {
+            return 'Passwords do not match';
+        }
+        return undefined;
+    }
 
-const keySelector = (option: { id?: string }): string => option.id || '';
-const labelSelector = (option: { value?: string }): string => option.value || '';
+    return passwordMatchCondition;
+}
 
-type PartialFormFields = Partial<FormFields>;
+type PartialFormFields = Partial<UserRegisterInput & { confirmPassword: string }>;
 type FormSchema = ObjectSchema<PartialFormFields>;
 type FormSchemaFields = ReturnType<FormSchema['fields']>;
 
-const isWhitelistedEmail = (email: string): boolean => {
-    const domain = email.split('@')[1];
-    return whitelistedDomains.includes(domain);
-};
-
-const emailWhitelistValidation = (value: string | undefined) => {
-    if (!isWhitelistedEmail(value || '')) {
-        return 'Email not allowed';
-    }
-    return undefined;
-};
-
 const formSchema: FormSchema = {
     fields: (value): FormSchemaFields => {
         let fields: FormSchemaFields = {
-            first_name: {
+            firstName: {
                 required: true,
                 requiredValidation: requiredStringCondition,
             },
-            last_name: {
+            lastName: {
                 required: true,
                 requiredValidation: requiredStringCondition,
             },
             email: {
                 required: true,
                 requiredValidation: requiredStringCondition,
-                validations: [emailCondition, emailWhitelistValidation],
+                validations: [emailCondition],
             },
             password: {
                 required: true,
                 requiredValidation: requiredStringCondition,
             },
-            confirm_password: {
-                required: true,
-                requiredValidation: requiredStringCondition,
-                forceValue: undefinedValue,
-                validations: [getPasswordMatchCondition(value?.password)],
-            },
             captcha: {
                 required: true,
                 requiredValidation: requiredStringCondition,
@@ -121,9 +94,9 @@ const formSchema: FormSchema = {
             fields,
             value,
             ['password'],
-            ['confirm_password'],
+            ['confirmPassword'],
             (val) => ({
-                confirm_password: {
+                confirmPassword: {
                     required: true,
                     requiredValidation: requiredStringCondition,
                     forceValue: undefinedValue,
@@ -139,25 +112,79 @@ const formSchema: FormSchema = {
 // eslint-disable-next-line import/prefer-default-export
 export function Component() {
     const strings = useTranslation(i18n);
+    const alert = useAlert();
+    const navigate = useNavigate();
     const [formValue] = useState<PartialFormFields>({});
-
     const {
         value,
         setFieldValue,
         setError,
         validate,
+        error: fieldError,
     } = useForm(formSchema, {
         value: formValue,
     });
-    const fieldError: PartialFormFields = {};
+
+    const error = getErrorObject(fieldError);
+    const [
+        triggerRegister,
+        {
+            loading: registerPending,
+        },
+    ] = useMutation<RegisterMutation, RegisterMutationVariables>(REGISTER_MUTATION, {
+        onCompleted: (response) => {
+            const { public: publicRes } = response;
+            if (!publicRes) {
+                return;
+            }
+            const { register: registerRes } = publicRes;
+            if (!registerRes) {
+                return;
+            }
+            const { errors, ok } = registerRes;
+
+            if (errors) {
+                const formError = transformToFormError(removeNull(
+                    errors,
+                ));
+                setError(formError);
+            } else if (ok) {
+                navigate('/login');
+                alert.show(
+                    strings.registrationSuccess,
+                    { variant: 'success' },
+                );
+            }
+        },
+        onError: (errors) => {
+            setError({
+                [nonFieldError]: errors.message,
+            });
+            alert.show(
+                strings.registrationFailure,
+                { variant: 'danger' },
+            );
+        },
+    });
+
     const handleFormSubmit = createSubmitHandler(
         validate,
         setError,
-        // FIXME: Add Submit logic here
-        () => {},
+        (finalValue) => {
+            const val = finalValue as UserRegisterInput;
+            triggerRegister({
+                variables: {
+                    data: {
+                        captcha: val.captcha,
+                        email: val.email,
+                        firstName: val.firstName,
+                        lastName: val.lastName,
+                        password: val.password,
+                    },
+                },
+            });
+        },
     );
-    const isNationalSociety = formValue?.organization_type === 'NTLS';
-
     const loginInfo = resolveToComponent(strings.registerAccountPresent, {
         loginLink: (
             <Link
@@ -178,29 +205,29 @@ export function Component() {
             mainSectionClassName={styles.mainSection}
         >
             <div className={styles.form}>
+                <NonFieldError error={error} />
                 <TextInput
-                    name="first_name"
+                    name="firstName"
                     label={strings.registerFirstName}
-                    value={value.first_name}
+                    value={value.firstName}
                     onChange={setFieldValue}
-                    error={fieldError?.first_name}
+                    error={error?.firstName}
                     withAsterisk
                 />
                 <TextInput
-                    name="last_name"
+                    name="lastName"
                     label={strings.registerLastName}
-                    value={value.last_name}
+                    value={value.lastName}
                     onChange={setFieldValue}
-                    error={fieldError?.last_name}
+                    error={error?.lastName}
                     withAsterisk
                 />
                 <TextInput
-                    className={styles.fullSizeInput}
                     name="email"
                     label={strings.registerEmail}
                     value={value.email}
                     onChange={setFieldValue}
-                    error={fieldError?.email}
+                    error={error?.email}
                     withAsterisk
                 />
                 <TextInput
@@ -209,66 +236,18 @@ export function Component() {
                     label={strings.registerPassword}
                     value={value.password}
                     onChange={setFieldValue}
-                    error={fieldError?.password}
+                    error={error?.password}
                     withAsterisk
                 />
                 <TextInput
-                    name="confirm_password"
+                    name="confirmPassword"
                     type="password"
                     label={strings.registerConfirmPassword}
-                    value={value.confirm_password}
+                    value={value.confirmPassword}
                     onChange={setFieldValue}
-                    error={fieldError?.confirm_password}
+                    error={error?.confirmPassword}
                     withAsterisk
                 />
-                <div className={styles.formBorder} />
-                <SelectInput
-                    label={strings.registerOrganizationType}
-                    name="organization_type"
-                    options={organizationTypes}
-                    keySelector={keySelector}
-                    labelSelector={labelSelector}
-                    value={value.organization_type}
-                    onChange={setFieldValue}
-                    error={fieldError?.organization_type}
-                />
-                <SelectInput
-                    label={strings.registerCountry}
-                    name="country"
-                    options={countryOptions}
-                    keySelector={keySelector}
-                    labelSelector={labelSelector}
-                    value={value.country}
-                    onChange={setFieldValue}
-                    error={fieldError?.country}
-                />
-                <TextInput
-                    name="city"
-                    label={strings.registerCity}
-                    value={value.city}
-                    onChange={setFieldValue}
-                    error={fieldError?.city}
-                />
-                {isNationalSociety ? (
-                    <SelectInput
-                        label={strings.registerOrganizationName}
-                        name="organization"
-                        options={nationalSocietyOptions}
-                        keySelector={keySelector}
-                        labelSelector={keySelector}
-                        value={value.organization}
-                        onChange={setFieldValue}
-                        error={fieldError?.organization}
-                    />
-                ) : (
-                    <TextInput
-                        name="organization"
-                        label={strings.registerOrganizationName}
-                        value={value.organization}
-                        onChange={setFieldValue}
-                        error={fieldError?.organization}
-                    />
-                )}
             </div>
             <div className={styles.actions}>
                 <HCaptcha
@@ -278,6 +257,7 @@ export function Component() {
                 <Button
                     name={undefined}
                     onClick={handleFormSubmit}
+                    disabled={registerPending}
                 >
                     {strings.registerSubmit}
                 </Button>
diff --git a/src/views/Register/styles.module.css b/src/views/Register/styles.module.css
index 5c4e38fe..a4a53686 100644
--- a/src/views/Register/styles.module.css
+++ b/src/views/Register/styles.module.css
@@ -12,16 +12,6 @@
             background-color: var(--go-ui-color-white);
             width: 100%;
             max-width: var(--go-ui-width-content-max);
-
-            .full-size-input {
-                grid-column: 1 / -1;
-            }
-
-            .form-border {
-                grid-column: 1 / -1;
-                background-color: var(--go-ui-color-separator);
-                height: var(--go-ui-width-separator-sm);
-            }
         }
 
         .actions {