mirror of
https://github.com/pyrohost/pyrodactyl.git
synced 2026-04-06 04:01:58 +02:00
Merge branch 'dev'
This commit is contained in:
naterfute
@@ -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);
|
||||
});
|
||||
};
|
||||
@@ -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'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 `}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user