accounts-frontend/src/components/ui/form/Captcha.js

77 lines
1.8 KiB
JavaScript
Raw Normal View History

// @flow
import React from 'react';
2016-08-05 11:28:24 +05:30
import classNames from 'classnames';
import type { CaptchaID } from 'services/captcha';
import type { Skin } from 'components/ui';
import captcha from 'services/captcha';
2018-02-13 02:24:56 +05:30
import logger from 'services/logger';
import { ComponentLoader } from '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() {
2016-08-05 11:28:24 +05:30
const {skin} = this.props;
return (
<div className={styles.captchaContainer}>
<div className={styles.captchaLoader}>
<ComponentLoader />
</div>
<div ref={this.elRef} className={classNames(
2016-08-05 11:28:24 +05:30
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});
}