Fix Hacptcha sitekey

env.ts

@@ -1,12 +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(),
-})
-
-// Hcaptcha
-export const hCaptchaKey = process.env.REACT_APP_HCATPCHA_SITEKEY || '10000000-ffff-ffff-ffff-000000000001';
+    APP_HCAPTCHA_SITEKEY: Schema.string.optional(),
+});

src/components/Captcha/index.tsx

@@ -5,9 +5,10 @@ import {
     InputContainerProps,
 } from '@ifrc-go/ui';
 
+import { hCaptchaKey } from '#config';
+
 export type HCaptchaProps<T> = Omit<InputContainerProps, 'input'> & {
     name: T,
-    siteKey: string | undefined;
     onChange: (value: string | undefined, name: T) => void;
     elementRef?: React.RefObject<HCaptcha>;
 };
@@ -27,9 +28,7 @@ function HCaptchaInput<T extends string>(props: HCaptchaProps<T>) {
         inputSectionClassName,
         label,
         readOnly,
-
         name,
-        siteKey,
         onChange,
         elementRef,
     } = props;
@@ -70,11 +69,10 @@ function HCaptchaInput<T extends string>(props: HCaptchaProps<T>) {
             inputSectionClassName={inputSectionClassName}
             label={label}
             readOnly={readOnly}
-            input={siteKey && (
+            input={hCaptchaKey && (
                 <HCaptcha
                     ref={elementRef}
-                    // disabled={disabled || readOnly}
-                    sitekey={siteKey}
+                    sitekey={hCaptchaKey}
                     onVerify={handleVerify}
                     onError={handleError}
                     onExpire={handleExpire}

src/components/Navbar/index.tsx

@@ -65,13 +65,6 @@ function Navbar(props: Props) {
                     >
                         {strings.appLogin}
                     </Link>
-                    {/* <Button
-                        name={undefined}
-                        variant="primary"
-                        onClick={undefined}
-                    >
-                        {strings.appLogin}
-                    </Button> */}
                 </NavigationTabList>
             </PageContainer>
             <PageContainer

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/Login/i18n.json

@@ -4,13 +4,13 @@
         "loginTitle":"IFRC GO - 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.",
-        "loginEmailUsername":"Email/Username",
+        "loginEmailUsername":"Email",
         "loginPassword":"Password",
         "loginRecoverTitle":"Recover password",
         "loginShowUsernameTitle":"Show me my username",
         "loginResendValidation":"Re-send validation email",
         "loginResendValidationTitle":"I didn't get my validation email",
-        "loginForgotUserPass":"Forgot your password/username?",
+        "loginForgotUserPass":"Forgot your password?",
         "loginInvalid":"Invalid username or password",
         "loginErrorMessage":"Error: {message}",
         "loginButton":"Login",

src/views/Login/index.tsx

@@ -1,9 +1,4 @@
-import {
-    useContext,
-    useMemo,
-    useState,
-} from 'react';
-import HCaptcha from '@hcaptcha/react-hcaptcha';
+import { useMemo } from 'react';
 import {
     Button,
     PasswordInput,
@@ -18,105 +13,69 @@ import {
     useForm,
 } from '@togglecorp/toggle-form';
 
+import HCaptcha from '#components/Captcha';
 import Link from '#components/Link';
 import Page from '#components/Page';
-import UserContext from '#contexts/user';
-import { getUserName } from '#utils/domain/user';
 
 import i18n from './i18n.json';
 import styles from './styles.module.css';
 
 interface FormFields {
-    username?: string;
-    password?: string;
+    email: string;
+    password: string;
+    captcha: string;
 }
-type FormSchema = ObjectSchema<FormFields>;
+type PartialFormFields = Partial<FormFields>;
+type FormSchema = ObjectSchema<PartialFormFields>;
 type FormSchemaFields = ReturnType<FormSchema['fields']>;
 
-const defaultFormValue: FormFields = {};
-
-const usersData = [
-    {
-        id: 1,
-        username: 'johndoe',
-        password: 'password123',
-        first: 'John',
-        last: 'Doe',
-        token: 'dummyToken123',
-        expires: '2024-12-31T23:59:59Z',
-    },
-    {
-        id: 2,
-        username: 'janedoe',
-        password: 'password456',
-        first: 'Jane',
-        last: 'Doe',
-        token: 'dummyToken456',
-        expires: '2025-01-31T23:59:59Z',
-    },
-];
+const defaultFormValue: PartialFormFields = {};
 
 const formSchema: FormSchema = {
     fields: (): FormSchemaFields => ({
-        username: {
+        email: {
             required: true,
             requiredValidation: requiredStringCondition,
         },
         password: {
             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 { setUserAuth: setUser } = useContext(UserContext);
     const {
         value: formValue,
         setFieldValue,
         setError,
         validate,
     } = useForm(formSchema, { value: defaultFormValue });
 
-    const fieldError: FormFields = {};
-    const [, setCaptchaToken] = useState<string | null>(null);
+    const fieldError: PartialFormFields = {};
 
     const handleFormSubmit = useMemo(
         () => createSubmitHandler(
             validate,
             setError,
-            () => {
-                const selectedUser = usersData[0];
-                setUser({
-                    id: selectedUser.id,
-                    username: selectedUser.username,
-                    firstName: selectedUser.first ?? undefined,
-                    lastName: selectedUser.last ?? undefined,
-                    displayName: getUserName({
-                        first_name: selectedUser.first,
-                        last_name: selectedUser.last,
-                        username: selectedUser.username,
-                    }),
-                    token: selectedUser.token,
-                    expires: selectedUser.expires,
-                });
-            },
+            // FIXME: Add form submission logic here
+            () => {},
         ),
-        [validate, setError, setUser],
+        [validate, setError],
     );
 
-    const handleCaptchaVerify = (token: string) => {
-        setCaptchaToken(token);
-    };
-
     const signupInfo = resolveToComponent(
         strings.loginDontHaveAccount,
         {
             signUpLink: (
                 <Link
-                    to="login" // Fixme :add signup
+                    to="login" // FIXME :add Register
                     withUnderline
                 >
                     {strings.loginSignUp}
@@ -139,10 +98,10 @@ export function Component() {
             >
                 <div className={styles.fields}>
                     <TextInput
-                        name="username"
+                        name="email"
                         label={strings.loginEmailUsername}
-                        value={formValue.username}
-                        error={fieldError?.username}
+                        value={formValue.email}
+                        error={fieldError?.email}
                         onChange={setFieldValue}
                         withAsterisk
                         autoFocus
@@ -158,14 +117,14 @@ export function Component() {
                 </div>
                 <div className={styles.utilityLinks}>
                     <Link
-                        to="login" // Note:Fixme:Forgotpassword
+                        to="login" // FIXME: ForgotPassword
                         title={strings.loginRecoverTitle}
                         withUnderline
                     >
                         {strings.loginForgotUserPass}
                     </Link>
                     <Link
-                        to="login" // Note:Fixme:Loginresendvalidation
+                        to="login" // FIXME :LoginResendValidation
                         title={strings.loginResendValidationTitle}
                         withUnderline
                     >
@@ -174,12 +133,13 @@ export function Component() {
                 </div>
                 <div className={styles.actions}>
                     <HCaptcha
-                        sitekey="10000000-ffff-ffff-ffff-000000000001"
-                        onVerify={handleCaptchaVerify}
+                        name="captcha"
+                        onChange={setFieldValue}
                     />
                     <Button
                         name={undefined}
                         type="submit"
+                        onClick={handleFormSubmit}
                     >
                         {strings.loginButton}
                     </Button>

vite.config.ts

@@ -9,6 +9,7 @@ import { ValidateEnv as validateEnv } from '@julr/vite-plugin-validate-env';
 import { VitePluginRadar } from 'vite-plugin-radar';
 
 import alertHubPackage from './package.json';
+import envConfig from './env';
 
 /* Get commit hash */
 const commitHash = execSync('git rev-parse --short HEAD').toString();
@@ -35,7 +36,7 @@ export default defineConfig(({ mode }) => {
             reactSwc(),
             tsconfigPaths(),
             webfontDownload(),
-            validateEnv(),
+            validateEnv(envConfig),
             isProd ? compression() : undefined,
             VitePluginRadar({
                 analytics: {