Update/make recaptcha optional (#1647)

* feat:make validation optional for recaptcha * update:make recatcha optional in iteamprops * update:recaptchaverification is optional * chore:comment codes * update:add condtion to recaptcha validation * update:add recpatcha condition to authteam hook * update:adding conditional form fields * update:show recaptcha conditionally * chore:remove unused import
ever-co · Oct 26, 2023 · 06c4285 · 06c4285
1 parent 5823b74
commit 06c4285
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 33 deletions.
diff --git a/apps/web/app/helpers/validations.ts b/apps/web/app/helpers/validations.ts
@@ -1,4 +1,4 @@
-import { smtpConfiguration } from '@app/constants';
+import { RECAPTCHA_SITE_KEY, smtpConfiguration } from '@app/constants';
 import { IRegisterDataAPI } from '@app/interfaces/IAuthentication';
 import { I_SMTPRequest } from '@app/interfaces/ISmtp';
 import { PHONE_REGEX, URL_REGEX } from './regex';
@@ -23,8 +23,11 @@ export const authFormValidate = (keys: (keyof IRegisterDataAPI)[], values: IRegi
 				}
 				break;
 			case 'recaptcha':
-				if (values['recaptcha'].trim().length < 2) {
-					err['recaptcha'] = 'Please check the ReCaptcha checkbox before continue';
+				if(RECAPTCHA_SITE_KEY) {
+					if (!values['recaptcha'] || values['recaptcha'].trim().length < 2) {
+						err['recaptcha'] =
+							'Please check the ReCaptcha checkbox before continue';
+					}
 				}
 				break;
 			case 'team':
@@ -39,7 +42,6 @@ export const authFormValidate = (keys: (keyof IRegisterDataAPI)[], values: IRegi
 				break;
 		}
 	});
-
 	return {
 		valid: Object.keys(err).length === 0,
 		errors: err

diff --git a/apps/web/app/hooks/auth/useAuthenticationTeam.ts b/apps/web/app/hooks/auth/useAuthenticationTeam.ts
@@ -5,6 +5,7 @@ import { registerUserTeamAPI } from '@app/services/client/api';
 import { AxiosError } from 'axios';
 import { useCallback, useState } from 'react';
 import { useQuery } from '../useQuery';
+import { RECAPTCHA_SITE_KEY } from '@app/constants';
 
 const FIRST_STEP = 'STEP1' as const;
 const SECOND_STEP = 'STEP2' as const;
@@ -14,12 +15,18 @@ export interface IStepProps {
 	form: IRegisterDataAPI;
 }
 
-const initialValues: IRegisterDataAPI = {
+const initialValues: IRegisterDataAPI = RECAPTCHA_SITE_KEY  ? {
 	name: '',
 	email: '',
 	team: '',
 	recaptcha: ''
-};
+} :
+{
+	name: '',
+	email: '',
+	team: ''
+}
+;
 
 export function useAuthenticationTeam() {
 	const [step, setStep] = useState<typeof FIRST_STEP | typeof SECOND_STEP>(FIRST_STEP);
@@ -36,16 +43,25 @@ export function useAuthenticationTeam() {
 			return;
 		}
 
-		const { errors, valid } = authFormValidate(['name', 'email', 'recaptcha'], formValues);
+		const noRecaptchaArray = ['email', 'name'];
 
+		const withRecaptchaArray = [...noRecaptchaArray, 'recaptcha'];
+
+		const validationFields = RECAPTCHA_SITE_KEY ? withRecaptchaArray : noRecaptchaArray;
+
+		const { errors, valid } = authFormValidate(
+			validationFields,
+			formValues
+		);
+
 		if (!valid) {
 			setErrors(errors as any);
 			return;
 		}
 
 		formValues['timezone'] = userTimezone();
 		infiniteLoading.current = true;
-
+		
 		queryCall(formValues)
 			.then(() => window.location.reload())
 			.catch((err: AxiosError) => {

diff --git a/apps/web/app/interfaces/IUserData.ts b/apps/web/app/interfaces/IUserData.ts
@@ -5,7 +5,7 @@ export interface ITeamProps {
 	email: string;
 	name: string;
 	team: string;
-	recaptcha: string;
+	recaptcha?: string;
 }
 
 export interface IUser {

diff --git a/apps/web/pages/api/auth/register.ts b/apps/web/pages/api/auth/register.ts
@@ -1,7 +1,6 @@
 import { generateToken } from '@app/helpers/generate-token';
 import { authFormValidate } from '@app/helpers/validations';
 import { IRegisterDataAPI } from '@app/interfaces/IAuthentication';
-// import { recaptchaVerification } from "@app/services/server/recaptcha";
 import {
 	createEmployeeFromUser,
 	createOrganizationRequest,
@@ -26,21 +25,31 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
 	const body = req.body as IRegisterDataAPI;
 
-	const { errors, valid: formValid } = authFormValidate(['email', 'name', 'recaptcha', 'team'], body);
+	const noRecaptchaArray = ['email', 'name', 'team'];
+
+	const withRecaptchaArray = [...noRecaptchaArray, "recaptcha"];
+
+	const validationFields = RECAPTCHA_SECRET_KEY ? withRecaptchaArray : noRecaptchaArray
+
+	const { errors, valid: formValid } = authFormValidate(
+		validationFields,
+		body
+	);
 
 	if (!formValid) {
 		return res.status(400).json({ errors });
 	}
 
-	const { success } = await recaptchaVerification({
-		secret: RECAPTCHA_SECRET_KEY || '',
-		response: body.recaptcha
-	});
+	if(RECAPTCHA_SECRET_KEY) {
+		const { success } = await recaptchaVerification({
+			secret: RECAPTCHA_SECRET_KEY || '',
+			response: body.recaptcha ? body.recaptcha : ''
+		});
 
 	if (!success) {
 		return res.status(400).json({ errors: { recaptcha: 'Invalid reCAPTCHA. Please try again' } });
 	}
-
+	}
 	/**
 	 * Verify if the SMTP has been configured
 	 */

diff --git a/apps/web/pages/auth/team.tsx b/apps/web/pages/auth/team.tsx
@@ -1,4 +1,5 @@
-import { IStepProps, useAuthenticationTeam } from '@app/hooks';
+import { RECAPTCHA_SITE_KEY } from '@app/constants';
+import { useAuthenticationTeam, IStepProps } from '@app/hooks';
 import { IClassName } from '@app/interfaces';
 import { clsxm } from '@app/utils';
 import { BackButton, BackdropLoader, Button, Card, InputField, SiteReCAPTCHA, Text } from 'lib/components';
@@ -152,23 +153,24 @@ function FillUserDataForm({
 						onChange={handleOnChange}
 						autoComplete="off"
 					/>
-
-					<div className="flex w-full">
-						<div className="dark:invert-[0.88] dark:hue-rotate-180 scale-[1] origin-[0]">
-							<SiteReCAPTCHA
-								onChange={(res) => {
-									handleOnChange({ target: { name: 'recaptcha', value: res } });
-									setFeedback('');
-								}}
-								onErrored={() => setFeedback(t('errors.NETWORK_ISSUE'))}
-							/>
-							{(errors['recaptcha'] || feedback) && (
-								<Text.Error className="self-start justify-self-start">
-									{errors['recaptcha'] || feedback}
-								</Text.Error>
-							)}
+					{ RECAPTCHA_SITE_KEY && 
+						<div className="w-full flex">
+							<div className="dark:invert-[0.88] dark:hue-rotate-180 scale-[1] origin-[0]">
+								<SiteReCAPTCHA
+									onChange={(res) => {
+										handleOnChange({ target: { name: 'recaptcha', value: res } });
+										setFeedback('');
+									}}
+									onErrored={() => setFeedback(t('errors.NETWORK_ISSUE'))}
+								/>
+								{(errors['recaptcha'] || feedback) && (
+									<Text.Error className="self-start justify-self-start">
+										{errors['recaptcha'] || feedback}
+									</Text.Error>
+								)}
+							</div>
 						</div>
-					</div>
+					}
 				</div>
 
 				<div className="flex items-center justify-between w-full">