From 06c42858b3efbd8e6d2c0b13ce62ab7491a550f3 Mon Sep 17 00:00:00 2001 From: Golden Mac-Eteli <92793710+maceteligolden@users.noreply.github.com> Date: Thu, 26 Oct 2023 08:16:03 +0100 Subject: [PATCH] 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 --- apps/web/app/helpers/validations.ts | 10 +++--- .../app/hooks/auth/useAuthenticationTeam.ts | 24 ++++++++++--- apps/web/app/interfaces/IUserData.ts | 2 +- apps/web/pages/api/auth/register.ts | 23 ++++++++---- apps/web/pages/auth/team.tsx | 36 ++++++++++--------- 5 files changed, 62 insertions(+), 33 deletions(-) diff --git a/apps/web/app/helpers/validations.ts b/apps/web/app/helpers/validations.ts index d9bfd929c..045ef0156 100644 --- 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 index b73314a3c..785c03145 100644 --- 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(FIRST_STEP); @@ -36,8 +43,17 @@ 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; @@ -45,7 +61,7 @@ export function useAuthenticationTeam() { 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 index 55632d764..5dd121419 100644 --- 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 index 58fe4e297..55b40f051 100644 --- 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 index 9c4b0776b..22f984cd5 100644 --- 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" /> - -
-
- { - handleOnChange({ target: { name: 'recaptcha', value: res } }); - setFeedback(''); - }} - onErrored={() => setFeedback(t('errors.NETWORK_ISSUE'))} - /> - {(errors['recaptcha'] || feedback) && ( - - {errors['recaptcha'] || feedback} - - )} + { RECAPTCHA_SITE_KEY && +
+
+ { + handleOnChange({ target: { name: 'recaptcha', value: res } }); + setFeedback(''); + }} + onErrored={() => setFeedback(t('errors.NETWORK_ISSUE'))} + /> + {(errors['recaptcha'] || feedback) && ( + + {errors['recaptcha'] || feedback} + + )} +
-
+ }