diff --git a/src/@types/global.d.ts b/src/@types/global.d.ts index f485d753c5..46c23ff8d8 100644 --- a/src/@types/global.d.ts +++ b/src/@types/global.d.ts @@ -196,7 +196,7 @@ declare global { divId: string, options: { sitekey: string; - callback: () => void; + callback: (response: string) => void; } ) => string; isReady: () => boolean; diff --git a/src/components/views/auth/CaptchaForm.tsx b/src/components/views/auth/CaptchaForm.tsx index 878cedc13f..749d6dbd39 100644 --- a/src/components/views/auth/CaptchaForm.tsx +++ b/src/components/views/auth/CaptchaForm.tsx @@ -22,12 +22,12 @@ import { replaceableComponent } from "../../../utils/replaceableComponent"; const DIV_ID = 'mx_recaptcha'; interface ICaptchaFormProps { - sitePublicKey: string - onCaptchaResponse: () => void + sitePublicKey: string; + onCaptchaResponse: (response: string) => void; } interface ICaptchaFormState { - errorText: string | null + errorText: string | null; } @@ -37,19 +37,19 @@ interface ICaptchaFormState { @replaceableComponent("views.auth.CaptchaForm") export default class CaptchaForm extends React.Component { static defaultProps = { - onCaptchaResponse: () => { }, + onCaptchaResponse: () => {}, }; - private _captchaWidgetId: string | null = null; - private _recaptchaContainer: React.RefObject = createRef(); - - state = { - errorText: null, - }; + private captchaWidgetId: string | null = null; + private recaptchaContainer = createRef(); constructor(props: ICaptchaFormProps) { super(props); + this.state = { + errorText: null, + }; + CountlyAnalytics.instance.track("onboarding_grecaptcha_begin"); } @@ -58,30 +58,30 @@ export default class CaptchaForm extends React.Component { this._onCaptchaLoaded(); }; + window.mxOnRecaptchaLoaded = () => { this.onCaptchaLoaded(); }; const scriptTag = document.createElement('script'); scriptTag.setAttribute( 'src', `https://www.recaptcha.net/recaptcha/api.js?onload=mxOnRecaptchaLoaded&render=explicit`, ); - this._recaptchaContainer.current.appendChild(scriptTag); + this.recaptchaContainer.current.appendChild(scriptTag); } } componentWillUnmount() { - this._resetRecaptcha(); + this.resetRecaptcha(); } // Borrowed directly from: https://github.com/codeep/react-recaptcha-google/commit/e118fa5670fa268426969323b2e7fe77698376ba - private isRecaptchaReady() { + private isRecaptchaReady(): boolean { return typeof window !== "undefined" && typeof global.grecaptcha !== "undefined" && typeof global.grecaptcha.render === 'function'; } - private _renderRecaptcha(divId) { + private renderRecaptcha(divId: string) { if (!this.isRecaptchaReady()) { console.error("grecaptcha not loaded!"); throw new Error("Recaptcha did not load successfully"); @@ -96,22 +96,22 @@ export default class CaptchaForm extends React.Component +

{_t( "This homeserver would like to make sure you are not a robot.", )}

- {error} + { error }
); }