Merge pull request #155 from IFRCGo/feature/login-page

Add login page

env.ts

@@ -1,9 +1,9 @@
 import { defineConfig, Schema } from '@julr/vite-plugin-validate-env';
 
-// TODO: Integrate .env for CI and remove optional() call on required fields
 export default defineConfig({
     APP_TITLE: Schema.string.optional(),
     APP_MAPBOX_ACCESS_TOKEN: Schema.string(),
     APP_GRAPHQL_ENDPOINT: Schema.string.optional(),
     APP_GOOGLE_ANALYTICS_ID: Schema.string.optional(),
-})
+    APP_HCAPTCHA_SITEKEY: Schema.string.optional(),
+});

package.json

@@ -22,13 +22,15 @@
     "@apollo/client": "^3.9.9",
     "@graphql-codegen/introspection": "^4.0.3",
     "@graphql-codegen/typescript-operations": "^4.2.0",
+    "@hcaptcha/react-hcaptcha": "^1.11.0",
     "@ifrc-go/icons": "^1.3.3",
     "@ifrc-go/ui": "^1.1.2",
     "@mapbox/mapbox-gl-draw": "^1.4.3",
     "@placemarkio/geo-viewport": "^1.0.2",
     "@sentry/react": "^7.81.1",
     "@togglecorp/fujs": "^2.1.1",
     "@togglecorp/re-map": "^0.2.0-beta-6",
+    "@togglecorp/toggle-form": "^2.0.4",
     "@turf/bbox": "^6.5.0",
     "@turf/circle": "^6.5.0",
     "graphql": "^16.8.1",

src/App/routes/index.tsx

@@ -57,6 +57,20 @@ const homeLayout = customWrapRoute({
     },
 });
 
+const mySubscription = customWrapRoute({
+    parent: rootLayout,
+    path: 'subscriptions',
+    component: {
+        render: () => import('#views/MySubscription'),
+        props: {},
+    },
+    context: {
+        title: 'My Subscriptions',
+        // TODO: Change visibility after login feature
+        visibility: 'anything',
+    },
+});
+
 const homeIndex = customWrapRoute({
     parent: homeLayout,
     index: true,
@@ -178,6 +192,19 @@ const pageNotFound = customWrapRoute({
     },
 });
 
+const login = customWrapRoute({
+    parent: rootLayout,
+    path: 'login',
+    component: {
+        render: () => import('#views/Login'),
+        props: {},
+    },
+    context: {
+        title: 'Login',
+        visibility: 'is-not-authenticated',
+    },
+});
+
 const wrappedRoutes = {
     rootLayout,
     homeLayout,
@@ -190,6 +217,12 @@ const wrappedRoutes = {
     allSourcesFeeds,
     about,
     pageNotFound,
+<<<<<<< HEAD
+    login,
+||||||| parent of 3c22e5c (Add my subscription page)
+=======
+    mySubscription,
+>>>>>>> 3c22e5c (Add my subscription page)
 };
 
 export const unwrappedRoutes = unwrapRoute(Object.values(wrappedRoutes));

src/components/Captcha/index.tsx

@@ -0,0 +1,85 @@
+import React, { useCallback } from 'react';
+import HCaptcha from '@hcaptcha/react-hcaptcha';
+import {
+    InputContainer,
+    InputContainerProps,
+} from '@ifrc-go/ui';
+
+import { hCaptchaKey } from '#config';
+
+export type HCaptchaProps<T> = Omit<InputContainerProps, 'input'> & {
+    name: T,
+    onChange: (value: string | undefined, name: T) => void;
+    elementRef?: React.RefObject<HCaptcha>;
+};
+
+function HCaptchaInput<T extends string>(props: HCaptchaProps<T>) {
+    const {
+        actions,
+        actionsContainerClassName,
+        className,
+        disabled,
+        error,
+        errorContainerClassName,
+        hint,
+        hintContainerClassName,
+        icons,
+        iconsContainerClassName,
+        inputSectionClassName,
+        label,
+        readOnly,
+        name,
+        onChange,
+        elementRef,
+    } = props;
+
+    const handleVerify = useCallback(
+        (token: string) => {
+            onChange(token, name);
+        },
+        [onChange, name],
+    );
+    const handleError = useCallback(
+        (err: string) => {
+            // eslint-disable-next-line no-console
+            console.error(err);
+            onChange(undefined, name);
+        },
+        [onChange, name],
+    );
+    const handleExpire = useCallback(
+        () => {
+            onChange(undefined, name);
+        },
+        [onChange, name],
+    );
+
+    return (
+        <InputContainer
+            actions={actions}
+            actionsContainerClassName={actionsContainerClassName}
+            className={className}
+            disabled={disabled}
+            error={error}
+            errorContainerClassName={errorContainerClassName}
+            hint={hint}
+            hintContainerClassName={hintContainerClassName}
+            icons={icons}
+            iconsContainerClassName={iconsContainerClassName}
+            inputSectionClassName={inputSectionClassName}
+            label={label}
+            readOnly={readOnly}
+            input={hCaptchaKey && (
+                <HCaptcha
+                    ref={elementRef}
+                    sitekey={hCaptchaKey}
+                    onVerify={handleVerify}
+                    onError={handleError}
+                    onExpire={handleExpire}
+                />
+            )}
+        />
+    );
+}
+
+export default HCaptchaInput;

src/components/Navbar/i18n.json

@@ -6,6 +6,6 @@
         "appAbout": "About",
         "appResources": "Resources",
         "headerMenuHome": "Home",
-        "headerMenuMySubscription": "My Subscription"
+        "headerMenuMySubscription": "My Subscriptions"
     }
 }

src/components/Navbar/index.tsx

@@ -1,5 +1,4 @@
 import {
-    Button,
     Heading,
     NavigationTabList,
     PageContainer,
@@ -60,13 +59,12 @@ function Navbar(props: Props) {
                     >
                         {strings.appResources}
                     </NavigationTab>
-                    <Button
-                        name={undefined}
+                    <Link
                         variant="primary"
-                        onClick={undefined}
+                        to="login"
                     >
                         {strings.appLogin}
-                    </Button>
+                    </Link>
                 </NavigationTabList>
             </PageContainer>
             <PageContainer
@@ -81,9 +79,15 @@ function Navbar(props: Props) {
                     >
                         {strings.headerMenuHome}
                     </NavigationTab>
+                    <NavigationTab
+                        to="mySubscription"
+                    >
+                        {strings.headerMenuMySubscription}
+                    </NavigationTab>
                 </NavigationTabList>
             </PageContainer>
         </nav>
     );
 }
+
 export default Navbar;

src/components/Navbar/styles.module.css

@@ -50,7 +50,6 @@
         }
 
         .menu-item:hover {
-            text-decoration: underline;
             color: var(--go-ui-color-primary-red);
         }
 

src/config.ts

@@ -5,11 +5,13 @@ const {
     APP_TITLE,
     APP_COMMIT_HASH,
     APP_VERSION,
+    APP_HCAPTCHA_SITEKEY,
 } = import.meta.env;
 
 export const environment = APP_ENVIRONMENT;
 export const appTitle = APP_TITLE;
 export const api = APP_GRAPHQL_API_ENDPOINT;
 export const mapboxToken = APP_MAPBOX_ACCESS_TOKEN;
+export const hCaptchaKey = APP_HCAPTCHA_SITEKEY;
 export const appCommitHash = APP_COMMIT_HASH;
 export const appVersion = APP_VERSION;

src/views/Home/AlertFilters/index.tsx

@@ -55,65 +55,65 @@ const categoryLabelSelector = (category: Category) => category.label;
 const ALERT_ENUMS = gql`
 query AlertEnums {
     enums {
-      AlertInfoCertainty {
-        key
-        label
-      }
-      AlertInfoUrgency {
-        label
-        key
-      }
-      AlertInfoSeverity {
-        key
-        label
-      }
-      AlertInfoCategory {
-        key
-        label
-      }
+        AlertInfoCertainty {
+            key
+            label
+        }
+        AlertInfoUrgency {
+            label
+            key
+        }
+        AlertInfoSeverity {
+            key
+            label
+        }
+        AlertInfoCategory {
+            key
+            label
+        }
     }
 }`;
 
 const ADMIN_LIST = gql`
 query FilteredAdminList($filters:Admin1Filter, $pagination: OffsetPaginationInput) {
     public {
-      id
-      admin1s(filters: $filters, pagination: $pagination) {
-        items {
-          id
-          name
-          countryId
-          alertCount
+        id
+        admin1s(filters: $filters, pagination: $pagination) {
+            items {
+                id
+                name
+                countryId
+                alertCount
+            }
         }
-      }
     }
-  }
+}
 `;
 
 const REGION_LIST = gql`
 query RegionList {
     public {
         id
-      regions {
-        items {
-          id
-          name
-          ifrcGoId
+        regions {
+            items {
+                id
+                name
+                ifrcGoId
+            }
         }
-      }
     }
-  }
+}
 `;
 
 const ALL_COUNTRY_LIST = gql`
 query AllCountryList {
-  public {
-    id
-    allCountries {
-      name
-      id
+    public {
+        id
+        allCountries {
+            name
+            id
+        }
     }
-  }
 }
 `;
 

src/views/Home/AlertsMap/Sidebar/CountryDetail/index.tsx

@@ -36,23 +36,23 @@ import styles from './styles.module.css';
 
 const COUNTRY_DETAIL = gql`
 query CountryDetail($countryId: ID!) {
-  public {
-    id
-    country(pk: $countryId) {
-      id
-      bbox
-      name
-      iso3
-      ifrcGoId
-      alertCount
-      admin1s {
+    public {
         id
-        countryId
-        filteredAlertCount
-        name
-      }
+        country(pk: $countryId) {
+            id
+            bbox
+            name
+            iso3
+            ifrcGoId
+            alertCount
+            admin1s {
+                id
+                countryId
+                filteredAlertCount
+                name
+            }
+        }
     }
-  }
 }
 `;
 

src/views/Home/AlertsMap/i18n.json

@@ -6,6 +6,7 @@
         "ongoingAlertCountries": "Ongoing Alert Countries",
         "backToAlertsLabel": "Back to Alerts",
         "alertViewDetails": "View Details",
-        "alertInfo": "The IFRC AlertHub shows current warnings from official alerting agencies. These warnings have a start time (when the event might happen) and an end time (when it's expected to be over). The IFRC Alert Hub shows warnings that are happening right now (their start time has already passed) but aren't finished yet (their end time hasn't come yet)."
+        "alertInfo": "The IFRC AlertHub shows current warnings from official alerting agencies. These warnings have a start time (when the event might happen) and an end time (when it's expected to be over). The IFRC Alert Hub shows warnings that are happening right now (their start time has already passed) but aren't finished yet (their end time hasn't come yet).",
+        "alertNewSubscription": "New Subscription"
     }
 }