revite/src/pages/login/forms/CaptchaBlock.tsx

39 lines
1.1 KiB
TypeScript
Raw Normal View History

2021-06-18 15:21:54 -04:00
import { Text } from "preact-i18n";
import styles from "../Login.module.scss";
import HCaptcha from "@hcaptcha/react-hcaptcha";
import { useContext, useEffect } from "preact/hooks";
2021-06-18 15:21:54 -04:00
import Preloader from "../../../components/ui/Preloader";
import { AppContext } from "../../../context/revoltjs/RevoltClient";
2021-06-18 15:21:54 -04:00
export interface CaptchaProps {
onSuccess: (token?: string) => void;
onCancel: () => void;
}
export function CaptchaBlock(props: CaptchaProps) {
const { client } = useContext(AppContext);
2021-06-18 15:21:54 -04:00
useEffect(() => {
if (!client.configuration?.features.captcha.enabled) {
2021-06-18 15:21:54 -04:00
props.onSuccess();
}
}, []);
if (!client.configuration?.features.captcha.enabled)
2021-06-18 15:21:54 -04:00
return <Preloader />;
return (
<div>
<HCaptcha
sitekey={client.configuration.features.captcha.key}
2021-06-18 15:21:54 -04:00
onVerify={token => props.onSuccess(token)}
/>
<div className={styles.footer}>
<a onClick={props.onCancel}>
<Text id="login.cancel" />
</a>
</div>
</div>
);
}