Add Captcha for login page

src/components/Captcha/index.tsx

@@ -0,0 +1,87 @@
+import React, { useCallback } from 'react';
+import HCaptcha from '@hcaptcha/react-hcaptcha';
+import {
+    InputContainer,
+    InputContainerProps,
+} from '@ifrc-go/ui';
+
+export type HCaptchaProps<T> = Omit<InputContainerProps, 'input'> & {
+    name: T,
+    siteKey: string | undefined;
+    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,
+        siteKey,
+        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={siteKey && (
+                <HCaptcha
+                    ref={elementRef}
+                    // disabled={disabled || readOnly}
+                    sitekey={siteKey}
+                    onVerify={handleVerify}
+                    onError={handleError}
+                    onExpire={handleExpire}
+                />
+            )}
+        />
+    );
+}
+
+export default HCaptchaInput;

src/views/Login/index.tsx

@@ -1,4 +1,8 @@
-import { useMemo } from 'react';
+import {
+    useMemo,
+    useState,
+} from 'react';
+import HCaptcha from '@hcaptcha/react-hcaptcha';
 import {
     Button,
     PasswordInput,
@@ -30,13 +34,24 @@ export function Component() {
     const formValue = defaultFormValue;
     const fieldError: FormFields = {};
 
+    const [captchaToken, setCaptchaToken] = useState<string | null>(null);
+
     const handleFormSubmit = useMemo(
         () => (event: React.FormEvent) => {
             event.preventDefault();
+
+            if (!captchaToken) {
+                // Handle the case when captcha token is missing
+            }
         },
-        [],
+        [captchaToken],
     );
 
+    const handleCaptchaVerify = (token: string) => {
+        if (setCaptchaToken) {
+            setCaptchaToken(token);
+        }
+    };
     const signupInfo = resolveToComponent(
         strings.loginDontHaveAccount,
         {
@@ -99,6 +114,10 @@ export function Component() {
                     </Link>
                 </div>
                 <div className={styles.actions}>
+                    <HCaptcha
+                        sitekey="SiteKey"
+                        onVerify={handleCaptchaVerify}
+                    />
                     <Button
                         name={undefined}
                         type="submit"