Add Registration Page

src/App/routes/index.tsx

@@ -177,6 +177,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 wrappedRoutes = {
     rootLayout,
@@ -190,6 +202,7 @@ const wrappedRoutes = {
     allSourcesFeeds,
     about,
     pageNotFound,
+    register,
 };
 
 export const unwrappedRoutes = unwrapRoute(Object.values(wrappedRoutes));

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

@@ -10,6 +10,7 @@ import { _cs } from '@togglecorp/fujs';
 import goLogo from '#assets/icons/go-logo-2020.svg';
 import Link from '#components/Link';
 import NavigationTab from '#components/NavigationTab';
+import useAuth from '#hooks/useAuth';
 
 import LangaugeDropdown from './LanguageDropdown';
 
@@ -22,6 +23,7 @@ interface Props {
 function Navbar(props: Props) {
     const { className } = props;
     const strings = useTranslation(i18n);
+    const { isAuthenticated } = useAuth();
     return (
         <nav className={_cs(styles.navbar, className)}>
             <PageContainer
@@ -60,13 +62,23 @@ function Navbar(props: Props) {
                     >
                         {strings.appResources}
                     </NavigationTab>
-                    <Button
-                        name={undefined}
-                        variant="primary"
-                        onClick={undefined}
-                    >
-                        {strings.appLogin}
-                    </Button>
+                    {!isAuthenticated && (
+                        <>
+                            <Button
+                                name={undefined}
+                                variant="primary"
+                                onClick={undefined}
+                            >
+                                {strings.appLogin}
+                            </Button>
+                            <Link
+                                to="register"
+                                variant="primary"
+                            >
+                                {strings.appRegister}
+                            </Link>
+                        </>
+                    )}
                 </NavigationTabList>
             </PageContainer>
             <PageContainer

src/views/Register/i18n.json

@@ -0,0 +1,28 @@
+{
+    "namespace": "register",
+    "strings": {
+        "registerTitle": "IFRC GO - Register",
+        "registerHeader": "Register",
+        "registerSubHeader": "Staff, members and volunteers of the Red Cross Red Crescent Movement (National Societies, the IFRC and the ICRC) are welcome to register for a user account on GO, to access information for the Membership. 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",
+        "registerDepartment": "Department",
+        "registerPosition": "Position",
+        "registerPhoneNumber": "Phone Number",
+        "registerPassword": "Password",
+        "registerConfirmPassword": "Confirm Password",
+        "registerJustification": "Justification",
+        "registerSubmit": "Register",
+        "registerAccountPresent": "Already have an account? {loginLink}",
+        "registerLogin": "Login",
+        "registrationFailure": "Sorry could not register new user right now!",
+        "registrationSuccess": "Successfully created a user!",
+        "requestAccess": "Request Access",
+        "registerJustify": "It appears you do not have an official Red Cross Red Crescent email, we will need to verify your status. Please note, this may take some time."
+    }
+}