mirror of
https://github.com/elyby/accounts-frontend.git
synced 2024-12-13 08:49:01 +05:30
83 lines
1.7 KiB
TypeScript
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 });
|
|
}
|