Add Registration Page

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,
 };

src/components/Navbar/i18n.json

@@ -3,6 +3,7 @@
     "strings": {
         "headerLogoAltText": "Alert Hub logo",
         "appLogin": "Login",
+        "appRegister":"Register",
         "appAbout": "About",
         "appResources": "Resources",
         "headerMenuHome": "Home",

src/components/Navbar/index.tsx

@@ -75,7 +75,6 @@ function Navbar(props: Props) {
             },
         },
     );
-
     return (
         <nav className={_cs(styles.navbar, className)}>
             <PageContainer
@@ -115,12 +114,20 @@ function Navbar(props: Props) {
                         {strings.appResources}
                     </NavigationTab>
                     {!isAuthenticated && (
-                        <Link
-                            variant="primary"
-                            to="login"
-                        >
-                            {strings.appLogin}
-                        </Link>
+                        <>
+                            <Link
+                                variant="primary"
+                                to="login"
+                            >
+                                {strings.appLogin}
+                            </Link>
+                            <Link
+                                to="register"
+                                variant="primary"
+                            >
+                                {strings.appRegister}
+                            </Link>
+                        </>
                     )}
                     {isAuthenticated && (
                         <Button

src/components/NonFiledError/i18n.json

@@ -0,0 +1,6 @@
+{
+    "namespace": "common",
+    "strings": {
+        "fallbackMessage":"Please correct all the errors before submission!"
+    }
+}

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;

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; }
+}

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;

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",

src/views/Register/i18n.json

@@ -0,0 +1,22 @@
+{
+    "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",
+        "registrationSuccess": "Successfully created a user!",
+        "registrationFailure": "Sorry could not register new user right now!"
+    }
+}