Merge pull request #612 from reportportal/develop

Release

Author: maria-hambardzumian

.github/workflows/deploy-dev.yml

@@ -36,6 +36,8 @@ on:
         required: true
       CONTENTFUL_SPACE_ID_DEV:
         required: true
+      RECAPTCHA_SITE_KEY:
+        required: true
     inputs:
       CONTENTFUL_ENV_ID:
         description: 'Contentful environment to use'
@@ -106,6 +108,7 @@ jobs:
           echo CONTACT_US_URL=$CONTACT_US_URL >> .env.production
           echo DOCUMENTATION_URL=$DOCUMENTATION_URL >> .env.production
           echo GATSBY_MAILCHIMP_LIST_ID=$GATSBY_MAILCHIMP_LIST_ID >> .env.production
+          echo RECAPTCHA_SITE_KEY=${{ secrets.RECAPTCHA_SITE_KEY }} >> .env.production
 
       - name: Build the source code
         run: npm run build

.github/workflows/deploy-prod.yml

@@ -59,6 +59,7 @@ jobs:
           echo CONTACT_US_URL=${{ env.CONTACT_US_URL }} >> .env.production
           echo DOCUMENTATION_URL=${{ env.DOCUMENTATION_URL }} >> .env.production
           echo GATSBY_MAILCHIMP_LIST_ID=${{ env.GATSBY_MAILCHIMP_LIST_ID }} >> .env.production
+          echo RECAPTCHA_SITE_KEY=${{ secrets.RECAPTCHA_SITE_KEY }} >> .env.production
 
       - name: Build the source code
         run: npm run build

src/components/Layout/Navigation/NavMenu/CommunityMenu/CommunityMenu.tsx

@@ -42,7 +42,7 @@ export const CommunityMenu: FC<MenuProps> = ({ isDesktop = true, isOpen, menuCon
   );
 
   const footer = (
-    <div className={classNames(getBlocksWith('__footer'), 'temporary-hide')}>
+    <div className={classNames(getBlocksWith('__footer'))}>
       <div className={getBlocksWith('__footer-container')}>
         <SubscriptionForm />
       </div>

src/components/SubscriptionBanner/SubscriptionBanner.tsx

@@ -27,9 +27,6 @@ export const SubscriptionBanner: FC<PropsWithAnimation> = ({ isAnimationEnabled
     isAnimationEnabled,
   );
 
-  // temporary hidden
-  return null;
-
   return (
     <div ref={ref}>
       <FooterContent>

src/components/SubscriptionForm/SubscriptionForm.scss

@@ -108,4 +108,12 @@
       text-decoration: underline;
     }
   }
+
+  .subscription-form__recaptcha-error {
+    @include m.font-poppins();
+    @include m.font-scale(small);
+
+    margin-bottom: 16px;
+    color: var(--graphics-coral);
+  }
 }

src/components/SubscriptionForm/SubscriptionForm.tsx

@@ -3,12 +3,14 @@ import Icon from '@ant-design/icons';
 import { Input, Form } from 'antd';
 import { Link } from '@app/components/Link';
 import { createBemBlockBuilder, EMAIL_VALIDATION_REGEX } from '@app/utils';
+import { useRecaptcha } from '@app/hooks/useRecaptcha';
 
 import { EnvelopeIcon } from './icons';
 import { SubscriptionFormCard } from './SubscriptionFormCard';
 import { subscribeUser } from './utils';
 
 import './SubscriptionForm.scss';
+import '../../containers/ContactUsPage/ContactUsPage.scss';
 
 const getBlocksWith = createBemBlockBuilder(['subscription-form']);
 
@@ -28,10 +30,12 @@ export const SubscriptionForm: FC = () => {
   }>({
     isValid: true,
   });
+  const [isLoading, setIsLoading] = useState(false);
   const email = Form.useWatch('email', form);
+  const { executeRecaptcha, recaptchaError, clearError } = useRecaptcha();
 
-  const handleSubscribeUser = (emailToSubscribe: string) => {
-    subscribeUser(emailToSubscribe)
+  const handleSubscribeUser = async (emailToSubscribe: string, recaptchaToken: string | null) => {
+    return subscribeUser(emailToSubscribe, recaptchaToken)
       .then(response => {
         setValidation({
           isValid: true,
@@ -64,7 +68,7 @@ export const SubscriptionForm: FC = () => {
       });
   };
 
-  const handleFinish = () => {
+  const handleFinish = async () => {
     const isLengthValid = email?.length <= 128;
     const isFormatValid = EMAIL_VALIDATION_REGEX.test(email);
 
@@ -73,11 +77,32 @@ export const SubscriptionForm: FC = () => {
         isValid: false,
         message: 'Please use a valid email format',
       });
-
       return;
     }
 
-    handleSubscribeUser(email);
+    try {
+      setIsLoading(true);
+      clearError();
+
+      const recaptchaToken = await executeRecaptcha();
+
+      if (recaptchaError) {
+        setValidation({
+          isValid: false,
+          message: 'Security verification failed. Please try again.',
+        });
+        return;
+      }
+
+      await handleSubscribeUser(email, recaptchaToken);
+      setIsLoading(false);
+    } catch (error) {
+      setIsLoading(false);
+      setValidation({
+        isValid: false,
+        message: 'Subscription failed. Please try again.',
+      });
+    }
   };
 
   useEffect(() => {
@@ -138,11 +163,12 @@ export const SubscriptionForm: FC = () => {
         <button
           type="submit"
           className="btn btn--primary"
-          disabled={form.isFieldsTouched(true) && !validation.isValid}
+          disabled={(form.isFieldsTouched(true) && !validation.isValid) || isLoading}
         >
-          Subscribe
+          {isLoading ? 'Subscribing...' : 'Subscribe'}
         </button>
       </Form.Item>
+      {recaptchaError && <div className="recaptcha-error">{recaptchaError}</div>}
       <span className={getBlocksWith('__form-info')}>
         By subscribing, you agree to receive marketing emails from ReportPortal team and associated
         partners and accept our{' '}

src/components/SubscriptionForm/utils.ts

@@ -2,5 +2,11 @@ import axios, { AxiosPromise } from 'axios';
 
 import { SUBSCRIPTION_URL } from './constants';
 
-export const subscribeUser = (email: string): AxiosPromise =>
-  axios.post(SUBSCRIPTION_URL, { email_address: email });
+export const subscribeUser = (email: string, recaptchaToken: string | null): AxiosPromise => {
+  const headers = {
+    'Content-Type': 'application/json',
+    ...(recaptchaToken && { 'RP-Recaptcha-Token': recaptchaToken }),
+  };
+
+  return axios.post(SUBSCRIPTION_URL, { email_address: email }, { headers });
+};

src/containers/ContactUsPage/ContactUsForm/ContactUsForm.tsx

@@ -1,10 +1,11 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState } from 'react';
 import { FormikProvider, useFormik } from 'formik';
 import { useBoolean } from 'ahooks';
 import isEmpty from 'lodash/isEmpty';
 import { Link } from '@app/components/Link';
-// import { subscribeUser } from '@app/components/SubscriptionForm/utils';
-import { createBemBlockBuilder } from '@app/utils';
+import { subscribeUser } from '@app/components/SubscriptionForm/utils';
+import { createBemBlockBuilder, CONTACT_US_URL } from '@app/utils';
+import { useRecaptcha } from '@app/hooks/useRecaptcha';
 import axios from 'axios';
 
 import { validate, getBaseSalesForceValues } from './utils';
@@ -19,16 +20,11 @@ import '../ContactUsPage.scss';
 
 const getBlocksWith = createBemBlockBuilder(['contact-us-form']);
 
-const MIN_FORM_INTERACTION_TIME = 3000;
-
 export const ContactUsForm = ({ title, options, isDiscussFieldShown }) => {
   const [isFeedbackFormVisible, { setTrue: showFeedbackForm }] = useBoolean(false);
   const [isLoading, setIsLoading] = useState(false);
-  const formMountTimeRef = useRef<number | null>(null);
-
-  useEffect(() => {
-    formMountTimeRef.current = Date.now();
-  }, []);
+  const [customError, setCustomError] = useState<string | null>(null);
+  const { executeRecaptcha, recaptchaError, clearError } = useRecaptcha();
   const formik = useFormik({
     initialValues: {
       first_name: '',
@@ -37,54 +33,67 @@ export const ContactUsForm = ({ title, options, isDiscussFieldShown }) => {
       company: '',
       termsAgree: false,
       wouldLikeToReceiveAds: false,
-      website: '', // Honeypot field - should remain empty
       ...(isDiscussFieldShown && { discuss: '' }),
     },
     validateOnBlur: false,
     validateOnChange: false,
     validate,
     onSubmit: async values => {
-      // Bot detection: Check honeypot field
-      if (values.website) {
-        console.warn('Bot detected: honeypot field filled');
+      if (isLoading) {
+        return;
+      }
+
+      const errors = await validateForm();
+
+      if (!isEmpty(errors)) {
         return;
       }
 
-      // Bot detection: Check if form was submitted too quickly
-      if (formMountTimeRef.current !== null) {
-        const timeSinceMount = Date.now() - formMountTimeRef.current;
-        if (timeSinceMount < MIN_FORM_INTERACTION_TIME) {
-          console.warn('Bot detected: form submitted too quickly');
+      try {
+        setIsLoading(true);
+        clearError();
+        setCustomError(null);
+
+        const contactRecaptchaToken = await executeRecaptcha();
+        if (!contactRecaptchaToken || recaptchaError) {
           return;
         }
-      }
 
-      validateForm().then(errors => {
-        if (isEmpty(errors)) {
-          setIsLoading(true);
-
-          const baseSalesForceValues = getBaseSalesForceValues(options);
-          // Remove honeypot field before submitting
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { website, ...cleanValues } = values;
-          const postData = {
-            ...cleanValues,
-            ...baseSalesForceValues,
-          };
-
-          // if (values.wouldLikeToReceiveAds) {
-          //   subscribeUser(values.email).catch(console.error);
-          // }
-
-          axios
-            .post(`${process.env.CONTACT_US_URL}`, postData)
-            .catch(console.error)
-            .finally(() => {
-              showFeedbackForm();
-              setIsLoading(false);
-            });
+        const baseSalesForceValues = getBaseSalesForceValues(options);
+        const postData = {
+          ...values,
+          ...baseSalesForceValues,
+        };
+
+        if (values.wouldLikeToReceiveAds) {
+          const subscribeRecaptchaToken = await executeRecaptcha();
+          if (subscribeRecaptchaToken) {
+            subscribeUser(values.email, subscribeRecaptchaToken).catch(console.error);
+          }
+        }
+
+        const headers = {
+          'Content-Type': 'application/json',
+          'RP-Recaptcha-Action': 'contact_us',
+          ...(contactRecaptchaToken && { 'RP-Recaptcha-Token': contactRecaptchaToken }),
+        };
+
+        const response = await axios.post(CONTACT_US_URL, postData, { headers });
+
+        let responseData = response.data;
+        if (typeof responseData === 'string') {
+          responseData = JSON.parse(responseData);
+        }
+
+        if (responseData.success) {
+          showFeedbackForm();
+        } else {
+          setIsLoading(false);
         }
-      });
+      } catch (error) {
+        setCustomError('Request failed. Please try again.');
+        setIsLoading(false);
+      }
     },
   });
   const { getFieldProps, validateForm } = formik;
@@ -107,20 +116,6 @@ export const ContactUsForm = ({ title, options, isDiscussFieldShown }) => {
             maxLength={80}
           />
           <FormInput name="company" label="Company name" placeholder="ABC" maxLength={MAX_LENGTH} />
-          {/* Honeypot field - hidden from users but visible to bots */}
-          <div
-            style={{ position: 'absolute', left: '-9999px', opacity: 0, pointerEvents: 'none' }}
-            aria-hidden="true"
-          >
-            <FormInput
-              name="website"
-              label="Website"
-              placeholder="https://example.com"
-              maxLength={MAX_LENGTH}
-              tabIndex={-1}
-              autoComplete="off"
-            />
-          </div>
           {isDiscussFieldShown && (
             <FormInput
               name="discuss"
@@ -130,9 +125,9 @@ export const ContactUsForm = ({ title, options, isDiscussFieldShown }) => {
               maxLength={MAX_LENGTH}
             />
           )}
-          {/* <FormFieldWrapper name="wouldLikeToReceiveAds"> */}
-          {/*   <CustomCheckbox label="Subscribe to ReportPortal newsletter" /> */}
-          {/* </FormFieldWrapper> */}
+          <FormFieldWrapper name="wouldLikeToReceiveAds">
+            <CustomCheckbox label="Subscribe to ReportPortal newsletter" />
+          </FormFieldWrapper>
           <FormFieldWrapper name="termsAgree">
             <CustomCheckbox
               label={
@@ -146,13 +141,16 @@ export const ContactUsForm = ({ title, options, isDiscussFieldShown }) => {
               }
             />
           </FormFieldWrapper>
+          {(recaptchaError || customError) && (
+            <div className="recaptcha-error">{recaptchaError || customError}</div>
+          )}
           <button
             className="btn btn--primary btn--large"
             type="submit"
             data-gtm="send_request"
             disabled={!getFieldProps('termsAgree').value || isLoading}
           >
-            Send request
+            {isLoading ? 'Sending...' : 'Send request'}
           </button>
         </form>
       </div>

src/containers/ContactUsPage/ContactUsForm/FormFieldWrapper/FormFieldWrapper.tsx

@@ -9,8 +9,6 @@ export interface BaseFieldProps {
   maxLength?: number;
   value?: string;
   InputElement?: 'input' | 'textarea';
-  tabIndex?: number;
-  autoComplete?: string;
 }
 
 export const FormFieldWrapper: FC<{ name: string; children: ReactElement }> = ({

src/containers/ContactUsPage/ContactUsForm/FormInput/FormInput.tsx

@@ -3,7 +3,7 @@ import React, { FC } from 'react';
 import { BaseFieldProps, FormFieldWrapper } from '../FormFieldWrapper';
 import { InputField } from './InputField';
 
-export interface FormInputProps extends BaseFieldProps {
+interface FormInputProps extends BaseFieldProps {
   type?: string;
 }