feat: Added hcaptcha and cloudfare turnstile

.cspell.json

@@ -7,6 +7,8 @@
 		" X",
 		" X ",
 		"hookform",
+		"HCAPTCHA",
+		"hcaptcha",
 		"accepte",
 		"Accordian",
 		"adipiscing",

apps/web/.env

@@ -37,6 +37,9 @@ TWITTER_CLIENT_SECRET=
 NEXT_PUBLIC_CAPTCHA_SITE_KEY=
 CAPTCHA_SECRET_KEY=
 
+# CAPTCHA type: google (default) | cloudflare | hcaptcha
+NEXT_PUBLIC_CAPTCHA_TYPE=
+
 # MEET_TYPE: LiveKit | Jitsi
 NEXT_PUBLIC_MEET_TYPE=Jitsi
 

apps/web/app/[locale]/auth/team/component.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { RECAPTCHA_SITE_KEY } from '@app/constants';
+import { CAPTCHA_TYPE, RECAPTCHA_SITE_KEY } from '@app/constants';
 import { useAuthenticationTeam, IStepProps } from '@app/hooks';
 import { IClassName } from '@app/interfaces';
 import { clsxm } from '@app/utils';
@@ -9,6 +9,8 @@ import { AuthLayout } from 'lib/layout';
 import { useState } from 'react';
 import { useTranslations } from 'next-intl';
 import SocialLogins from '../social-logins-buttons';
+import HCaptcha from '@hcaptcha/react-hcaptcha';
+import Turnstile from 'react-turnstile';
 
 function AuthTeam() {
 	const {
@@ -132,6 +134,43 @@ function FillUserDataForm({
 } & IClassName) {
 	const t = useTranslations();
 
+	const renderCaptcha = () => {
+		const handleCaptchaVerify = (token: string) => {
+			handleOnChange({ target: { name: 'recaptcha', value: token } });
+		};
+
+		const handleCaptchaError = () => {
+			handleOnChange({ target: { name: 'recaptcha', value: '' } });
+		};
+
+		switch (CAPTCHA_TYPE) {
+			case 'hcaptcha':
+				return (
+					<>
+						<HCaptcha
+								sitekey={RECAPTCHA_SITE_KEY.value ?? ''}
+								onVerify={(token) => handleCaptchaVerify(token)}
+								onError={() => handleCaptchaError()}
+						/>
+					</>
+				);
+			case 'cloudflare':
+				return (
+					<>
+						<Turnstile
+							sitekey={RECAPTCHA_SITE_KEY.value ?? ''}
+							onSuccess={(token) => handleCaptchaVerify(token)}
+							onError={() => handleCaptchaError()}
+							onLoad={() => handleOnChange({ target: { name: 'captchaToken', value: '' } })}
+						/>
+					</>
+				);
+			default:
+				return <ReCAPTCHA errors={errors} handleOnChange={handleOnChange} />;
+		}
+	};
+
+
 	return (
 		<Card className={clsxm('w-full dark:bg-[#25272D]', className)} shadow="bigger">
 			<div className="flex flex-col items-center justify-between h-full">
@@ -161,7 +200,7 @@ function FillUserDataForm({
 						onChange={handleOnChange}
 						autoComplete="off"
 					/>
-					<ReCAPTCHA errors={errors} handleOnChange={handleOnChange} />
+					{renderCaptcha()}
 				</div>
 
 				<div className="flex items-center justify-between w-full">
@@ -180,6 +219,7 @@ function ReCAPTCHA({ handleOnChange, errors }: { handleOnChange: any; errors: an
 	const t = useTranslations();
 	const [feedback, setFeedback] = useState<string>('');
 
+
 	const content = RECAPTCHA_SITE_KEY.value && (
 		<div className="w-full flex">
 			<div className="dark:invert-[0.88] dark:hue-rotate-180 scale-[1] origin-[0]">

apps/web/app/constants.ts

@@ -38,6 +38,7 @@ export const RECAPTCHA_SITE_KEY = getNextPublicEnv(
 	process.env.NEXT_PUBLIC_CAPTCHA_SITE_KEY
 );
 export const RECAPTCHA_SECRET_KEY = process.env.CAPTCHA_SECRET_KEY;
+export const CAPTCHA_TYPE = process.env.NEXT_PUBLIC_CAPTCHA_TYPE;
 let basePath = process.env.GAUZY_API_SERVER_URL ? process.env.GAUZY_API_SERVER_URL : 'https://api.ever.team';
 if (IS_DESKTOP_APP) {
 	const serverRuntimeConfig = getServerRuntimeConfig();

apps/web/package.json

@@ -35,6 +35,7 @@
 		"@fullcalendar/list": "^6.1.15",
 		"@fullcalendar/react": "^6.1.15",
 		"@fullcalendar/timegrid": "^6.1.15",
+		"@hcaptcha/react-hcaptcha": "^1.11.1",
 		"@headlessui/react": "^1.7.7",
 		"@heroicons/react": "^2.0.12",
 		"@hookform/resolvers": "^3.9.1",
@@ -125,6 +126,7 @@
 		"react-popper": "^2.3.0",
 		"react-popper-tooltip": "^4.4.2",
 		"react-resizable-panels": "^2.0.19",
+		"react-turnstile": "^1.1.4",
 		"recharts": "^2.15.0",
 		"sharp": "^0.33.4",
 		"slate": "^0.90.0",