URGENT FIX(reset password page): remove old captcha implementation

resources/scripts/api/auth/requestPasswordResetEmail.ts

@@ -1,9 +0,0 @@
-import http from '@/api/http';
-
-export default (email: string, recaptchaData?: string): Promise<string> => {
-    return new Promise((resolve, reject) => {
-        http.post('/auth/password', { email, 'g-recaptcha-response': recaptchaData })
-            .then((response) => resolve(response.data.status || ''))
-            .catch(reject);
-    });
-};

resources/scripts/components/auth/ForgotPasswordContainer.tsx

@@ -1,11 +1,13 @@
+import HCaptcha from '@hcaptcha/react-hcaptcha';
+import { Turnstile } from '@marsidev/react-turnstile';
 import { useStoreState } from 'easy-peasy';
 import type { FormikHelpers } from 'formik';
 import { Formik } from 'formik';
 import { useEffect, useRef, useState } from 'react';
 import { Link } from 'react-router-dom';
-import Reaptcha from 'reaptcha';
 import { object, string } from 'yup';
 
+import FriendlyCaptcha from '@/components/FriendlyCaptcha';
 import LoginFormContainer from '@/components/auth/LoginFormContainer';
 import Button from '@/components/elements/Button';
 import ContentBox from '@/components/elements/ContentBox';
@@ -13,6 +15,7 @@ import Field from '@/components/elements/Field';
 
 import requestPasswordResetEmail from '@/api/auth/requestPasswordResetEmail';
 import { httpErrorToHuman } from '@/api/http';
+import http from '@/api/http';
 
 import useFlash from '@/plugins/useFlash';
 
@@ -23,47 +26,81 @@ interface Values {
 }
 
 export default () => {
-    const ref = useRef<Reaptcha>(null);
+    const turnstileRef = useRef(null);
+    const friendlyCaptchaRef = useRef<{ reset: () => void }>(null);
+    const hCaptchaRef = useRef<HCaptcha>(null);
+
     const [token, setToken] = useState('');
+    const [friendlyLoaded, setFriendlyLoaded] = useState(false);
 
     const { clearFlashes, addFlash } = useFlash();
-    const { enabled: recaptchaEnabled, siteKey } = useStoreState((state) => state.settings.data!.recaptcha);
+    const { captcha } = useStoreState((state) => state.settings.data!);
+    const isTurnstileEnabled = captcha.driver === 'turnstile' && captcha.turnstile?.siteKey;
+    const isFriendlyEnabled = captcha.driver === 'friendly' && captcha.friendly?.siteKey;
+    const isHCaptchaEnabled = captcha.driver === 'hcaptcha' && captcha.hcaptcha?.siteKey;
+    const isMCaptchaEnabled = captcha.driver === 'mcaptcha' && captcha.mcaptcha?.siteKey;
 
     useEffect(() => {
         clearFlashes();
+
+        if (isFriendlyEnabled && !window.friendlyChallenge) {
+            const script = document.createElement('script');
+            script.src = 'https://unpkg.com/friendly-challenge@0.9.12/widget.module.min.js';
+            script.async = true;
+            script.defer = true;
+            script.onload = () => setFriendlyLoaded(true);
+            document.body.appendChild(script);
+        } else if (isFriendlyEnabled) {
+            setFriendlyLoaded(true);
+        }
     }, []);
 
+    const handleCaptchaComplete = (response: string) => {
+        setToken(response);
+    };
+
+    const handleCaptchaError = (provider: string) => {
+        setToken('');
+        addFlash({ type: 'error', title: 'CAPTCHA Error', message: `${provider} challenge failed.` });
+    };
+
+    const handleCaptchaExpire = () => {
+        setToken('');
+    };
+
     const handleSubmission = ({ email }: Values, { setSubmitting, resetForm }: FormikHelpers<Values>) => {
         clearFlashes();
 
-        // If there is no token in the state yet, request the token and then abort this submit request
-        // since it will be re-submitted when the recaptcha data is returned by the component.
-        if (recaptchaEnabled && !token) {
-            ref.current!.execute().catch((error) => {
-                console.error(error);
-
-                setSubmitting(false);
-                addFlash({ type: 'error', title: 'Error', message: httpErrorToHuman(error) });
-            });
-
+        if ((isTurnstileEnabled || isFriendlyEnabled || isHCaptchaEnabled) && !token) {
+            addFlash({ type: 'error', title: 'Error', message: 'Please complete the CAPTCHA challenge.' });
+            setSubmitting(false);
             return;
         }
 
-        requestPasswordResetEmail(email, token)
+        const requestData: Record<string, string> = { email };
+
+        if (isTurnstileEnabled) {
+            requestData['cf-turnstile-response'] = token;
+        } else if (isHCaptchaEnabled) {
+            requestData['h-captcha-response'] = token;
+        } else if (isFriendlyEnabled) {
+            requestData['frc-captcha-response'] = token;
+        } else if (isMCaptchaEnabled) {
+            requestData['g-recaptcha-response'] = token; // Fallback or mCaptcha field
+        }
+
+        http.post('/auth/password', requestData)
             .then((response) => {
                 resetForm();
-                addFlash({ type: 'success', title: 'Success', message: response });
+                addFlash({ type: 'success', title: 'Success', message: response.data.status || 'Email sent!' });
             })
             .catch((error) => {
                 console.error(error);
                 addFlash({ type: 'error', title: 'Error', message: httpErrorToHuman(error) });
             })
-            .then(() => {
+            .finally(() => {
                 setToken('');
-                if (ref.current !== null) {
-                    void ref.current.reset();
-                }
-
+                // Reset CAPTCHAs...
                 setSubmitting(false);
             });
     };
@@ -74,12 +111,10 @@ export default () => {
                 onSubmit={handleSubmission}
                 initialValues={{ email: '' }}
                 validationSchema={object().shape({
-                    email: string()
-                        .email('Please enter your email address to reset your password.')
-                        .required('Please enter your email address to reset your password.'),
+                    email: string().email('Enter a valid email address.').required('Email is required.'),
                 })}
             >
-                {({ isSubmitting, setSubmitting, submitForm }) => (
+                {({ isSubmitting }) => (
                     <LoginFormContainer className={`w-full flex`}>
                         <Link to='/'>
                             <div className='flex h-12 mb-4 items-center w-full'>
@@ -92,36 +127,65 @@ export default () => {
                             We&apos;ll send you an email with a link to reset your password.
                         </div>
                         <Field id='email' label={'Email'} name={'email'} type={'email'} />
-                        <div className={`mt-6`}>
+
+                        {/* CAPTCHA Components */}
+                        {isTurnstileEnabled && (
+                            <div className='mt-6'>
+                                <Turnstile
+                                    ref={turnstileRef}
+                                    siteKey={captcha.turnstile.siteKey}
+                                    onSuccess={handleCaptchaComplete}
+                                    onError={() => handleCaptchaError('Turnstile')}
+                                    onExpire={handleCaptchaExpire}
+                                    options={{
+                                        theme: 'dark',
+                                        size: 'flexible',
+                                    }}
+                                />
+                            </div>
+                        )}
+                        {isFriendlyEnabled && friendlyLoaded && (
+                            <div className='mt-6 w-full'>
+                                <FriendlyCaptcha
+                                    ref={friendlyCaptchaRef}
+                                    sitekey={captcha.friendly.siteKey}
+                                    onComplete={handleCaptchaComplete}
+                                    onError={() => handleCaptchaError('FriendlyCaptcha')}
+                                    onExpire={handleCaptchaExpire}
+                                />
+                            </div>
+                        )}
+                        {isHCaptchaEnabled && (
+                            <div className='mt-6'>
+                                <HCaptcha
+                                    ref={hCaptchaRef}
+                                    sitekey={captcha.hcaptcha.siteKey}
+                                    onVerify={handleCaptchaComplete}
+                                    onError={() => handleCaptchaError('hCaptcha')}
+                                    onExpire={handleCaptchaExpire}
+                                    theme='dark'
+                                />
+                            </div>
+                        )}
+                        {isMCaptchaEnabled && (
+                            <div className='mt-6'>
+                                <p className='text-red-500'>mCaptcha implementation needed</p>
+                            </div>
+                        )}
+
+                        <div className='mt-6'>
                             <Button
                                 className={`w-full mt-4 rounded-full bg-brand border-0 ring-0 outline-hidden capitalize font-bold text-sm py-2`}
-                                type={'submit'}
-                                size={'xlarge'}
+                                type='submit'
+                                size='xlarge'
                                 isLoading={isSubmitting}
                                 disabled={isSubmitting}
                             >
                                 Send Email
                             </Button>
                         </div>
-                        {recaptchaEnabled && (
-                            <Reaptcha
-                                ref={ref}
-                                size={'invisible'}
-                                sitekey={siteKey || '_invalid_key'}
-                                onVerify={(response) => {
-                                    setToken(response);
-                                    setTimeout(() => {
-                                        submitForm();
-                                    }, 0);
-                                }}
-                                onExpire={() => {
-                                    setSubmitting(false);
-                                    setToken('');
-                                }}
-                            />
-                        )}
-                        <div aria-hidden className='my-8 bg-[#ffffff33] min-h-[1px]'></div>
 
+                        <div aria-hidden className='my-8 bg-[#ffffff33] min-h-[1px]'></div>
                         <div
                             className={`text-center w-full rounded-lg border-0 ring-0 outline-hidden capitalize font-bold text-sm py-2 `}
                         >