85 lines
1.9 KiB
JavaScript
85 lines
1.9 KiB
JavaScript
import classNames from 'classnames';
|
|
import PropTypes from 'prop-types';
|
|
import React from 'react';
|
|
import ReCAPTCHA from 'react-google-recaptcha';
|
|
import Icon from 'Components/Icon';
|
|
import { icons } from 'Helpers/Props';
|
|
import FormInputButton from './FormInputButton';
|
|
import TextInput from './TextInput';
|
|
import styles from './CaptchaInput.css';
|
|
|
|
function CaptchaInput(props) {
|
|
const {
|
|
className,
|
|
name,
|
|
value,
|
|
hasError,
|
|
hasWarning,
|
|
refreshing,
|
|
siteKey,
|
|
secretToken,
|
|
onChange,
|
|
onRefreshPress,
|
|
onCaptchaChange
|
|
} = props;
|
|
|
|
return (
|
|
<div>
|
|
<div className={styles.captchaInputWrapper}>
|
|
<TextInput
|
|
className={classNames(
|
|
className,
|
|
styles.hasButton,
|
|
hasError && styles.hasError,
|
|
hasWarning && styles.hasWarning
|
|
)}
|
|
name={name}
|
|
value={value}
|
|
onChange={onChange}
|
|
/>
|
|
|
|
<FormInputButton
|
|
onPress={onRefreshPress}
|
|
>
|
|
<Icon
|
|
name={icons.REFRESH}
|
|
isSpinning={refreshing}
|
|
/>
|
|
</FormInputButton>
|
|
</div>
|
|
|
|
{
|
|
!!siteKey && !!secretToken &&
|
|
<div className={styles.recaptchaWrapper}>
|
|
<ReCAPTCHA
|
|
sitekey={siteKey}
|
|
stoken={secretToken}
|
|
onChange={onCaptchaChange}
|
|
/>
|
|
</div>
|
|
}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
CaptchaInput.propTypes = {
|
|
className: PropTypes.string.isRequired,
|
|
name: PropTypes.string.isRequired,
|
|
value: PropTypes.string.isRequired,
|
|
hasError: PropTypes.bool,
|
|
hasWarning: PropTypes.bool,
|
|
refreshing: PropTypes.bool.isRequired,
|
|
siteKey: PropTypes.string,
|
|
secretToken: PropTypes.string,
|
|
onChange: PropTypes.func.isRequired,
|
|
onRefreshPress: PropTypes.func.isRequired,
|
|
onCaptchaChange: PropTypes.func.isRequired
|
|
};
|
|
|
|
CaptchaInput.defaultProps = {
|
|
className: styles.input,
|
|
value: ''
|
|
};
|
|
|
|
export default CaptchaInput;
|