admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix signup submit disabled when waiting for captcha without provider (#9796)

Browse Source
This commit is contained in:
Weiko
2025-01-22 17:49:11 +01:00
committed by GitHub
parent d340605578
commit 5902dbd0b4
6 changed files with 35 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/twenty-front/src/modules/captcha/components/CaptchaProviderScriptLoaderEffect.tsx
View File

@ -3,23 +3,23 @@ import { useRecoilValue, useSetRecoilState } from 'recoil';
import { isCaptchaScriptLoadedState } from '@/captcha/states/isCaptchaScriptLoadedState';
import { getCaptchaUrlByProvider } from '@/captcha/utils/getCaptchaUrlByProvider';
import { captchaProviderState } from '@/client-config/states/captchaProviderState';
import { captchaState } from '@/client-config/states/captchaState';
import { CaptchaDriverType } from '~/generated/graphql';
export const CaptchaProviderScriptLoaderEffect = () => {
const captchaProvider = useRecoilValue(captchaProviderState);
const captcha = useRecoilValue(captchaState);
const setIsCaptchaScriptLoaded = useSetRecoilState(
isCaptchaScriptLoadedState,
);
useEffect(() => {
if (!captchaProvider?.provider || !captchaProvider.siteKey) {
if (!captcha?.provider || !captcha.siteKey) {
return;
}
const scriptUrl = getCaptchaUrlByProvider(
captchaProvider.provider,
captchaProvider.siteKey,
captcha.provider,
captcha.siteKey,
);
if (!scriptUrl) {
return;
@ -32,7 +32,7 @@ export const CaptchaProviderScriptLoaderEffect = () => {
scriptElement = document.createElement('script');
scriptElement.src = scriptUrl;
scriptElement.onload = () => {
if (captchaProvider.provider === CaptchaDriverType.GoogleRecaptcha) {
if (captcha.provider === CaptchaDriverType.GoogleRecaptcha) {
window.grecaptcha?.ready(() => {
setIsCaptchaScriptLoaded(true);
});
@ -42,11 +42,7 @@ export const CaptchaProviderScriptLoaderEffect = () => {
};
document.body.appendChild(scriptElement);
}
}, [
captchaProvider?.provider,
captchaProvider?.siteKey,
setIsCaptchaScriptLoaded,
]);
}, [captcha?.provider, captcha?.siteKey, setIsCaptchaScriptLoaded]);
return <></>;
};

14
packages/twenty-front/src/modules/captcha/hooks/useRequestFreshCaptchaToken.ts
View File

@ -2,7 +2,7 @@ import { useRecoilCallback, useSetRecoilState } from 'recoil';
import { captchaTokenState } from '@/captcha/states/captchaTokenState';
import { isRequestingCaptchaTokenState } from '@/captcha/states/isRequestingCaptchaTokenState';
import { captchaProviderState } from '@/client-config/states/captchaProviderState';
import { captchaState } from '@/client-config/states/captchaState';
import { CaptchaDriverType } from '~/generated-metadata/graphql';
import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
@ -22,11 +22,9 @@ export const useRequestFreshCaptchaToken = () => {
const requestFreshCaptchaToken = useRecoilCallback(
({ snapshot }) =>
async () => {
const captchaProvider = snapshot
.getLoadable(captchaProviderState)
.getValue();
const captcha = snapshot.getLoadable(captchaState).getValue();
if (isUndefinedOrNull(captchaProvider)) {
if (isUndefinedOrNull(captcha?.provider)) {
return;
}
@ -34,10 +32,10 @@ export const useRequestFreshCaptchaToken = () => {
let captchaWidget: any;
switch (captchaProvider.provider) {
switch (captcha.provider) {
case CaptchaDriverType.GoogleRecaptcha:
window.grecaptcha
.execute(captchaProvider.siteKey, {
.execute(captcha.siteKey, {
action: 'submit',
})
.then((token: string) => {
@ -49,7 +47,7 @@ export const useRequestFreshCaptchaToken = () => {
// TODO: fix workspace-no-hardcoded-colors rule
// eslint-disable-next-line @nx/workspace-no-hardcoded-colors
captchaWidget = window.turnstile.render('#captcha-widget', {
sitekey: captchaProvider.siteKey,
sitekey: captcha.siteKey,
});
window.turnstile.execute(captchaWidget, {
callback: (token: string) => {