accounts-frontend/packages/app/components/ui/form/Captcha.tsx

83 lines
1.7 KiB
TypeScript

import React from 'react';
import clsx from 'clsx';
import { CaptchaID } from 'app/services/captcha';
import { Skin } from 'app/components/ui';
import captcha from 'app/services/captcha';
import logger from 'app/services/logger';
import { ComponentLoader } from 'app/components/ui/loader';
import styles from './form.scss';
import FormInputComponent from './FormInputComponent';
export default class Captcha extends FormInputComponent<
{
delay: number;
skin: Skin;
},
{
code: string;
}
> {
elRef = React.createRef<HTMLDivElement>();
captchaId: CaptchaID;
static defaultProps = {
skin: 'dark',
delay: 0,
};
componentDidMount() {
setTimeout(() => {
const { current: el } = this.elRef;
el &&
captcha
.render(el, {
skin: this.props.skin,
onSetCode: this.setCode,
})
.then((captchaId) => {
this.captchaId = captchaId;
})
.catch((error) => {
logger.error('Failed rendering captcha', {
error,
});
});
}, this.props.delay);
}
render() {
const { skin } = this.props;
return (
<div className={styles.captchaContainer}>
<div className={styles.captchaLoader}>
<ComponentLoader />
</div>
<div
ref={this.elRef}
className={clsx(styles.captcha, styles[`${skin}Captcha`])}
/>
{this.renderError()}
</div>
);
}
reset() {
captcha.reset(this.captchaId);
}
getValue() {
return this.state && this.state.code;
}
onFormInvalid() {
this.reset();
}
setCode = (code: string) => this.setState({ code });
}