react-google-recaptcha-enterprise
Version:
React Component Wrapper for Google Enterprise reCAPTCHA
203 lines (168 loc) • 6.78 kB
JavaScript
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
/* eslint-disable prettier/prettier */
import * as React from "react";
import PropTypes from "prop-types";
var ReCAPTCHA = /*#__PURE__*/function (_React$Component) {
_inheritsLoose(ReCAPTCHA, _React$Component);
function ReCAPTCHA() {
var _this;
_this = _React$Component.call(this) || this;
_this.handleExpired = _this.handleExpired.bind(_assertThisInitialized(_this));
_this.handleErrored = _this.handleErrored.bind(_assertThisInitialized(_this));
_this.handleChange = _this.handleChange.bind(_assertThisInitialized(_this));
_this.handleRecaptchaRef = _this.handleRecaptchaRef.bind(_assertThisInitialized(_this));
return _this;
}
var _proto = ReCAPTCHA.prototype;
_proto.getValue = function getValue() {
if (this.props.grecaptcha && this._widgetId !== undefined) {
return this.props.grecaptcha.enterprise.getResponse(this._widgetId);
}
return null;
};
_proto.getWidgetId = function getWidgetId() {
if (this.props.grecaptcha && this._widgetId !== undefined) {
return this._widgetId;
}
return null;
};
_proto.execute = function execute() {
var grecaptcha = this.props.grecaptcha;
if (grecaptcha && this._widgetId !== undefined) {
return grecaptcha.enterprise.execute(this._widgetId);
} else {
this._executeRequested = true;
}
};
_proto.executeAsync = function executeAsync() {
var _this2 = this;
return new Promise(function (resolve, reject) {
_this2.executionResolve = resolve;
_this2.executionReject = reject;
_this2.execute();
});
};
_proto.reset = function reset() {
if (this.props.grecaptcha && this._widgetId !== undefined) {
this.props.grecaptcha.enterprise.reset(this._widgetId);
}
};
_proto.forceReset = function forceReset() {
if (this.props.grecaptcha) {
this.props.grecaptcha.enterprise.reset();
}
};
_proto.handleExpired = function handleExpired() {
if (this.props.onExpired) {
this.props.onExpired();
} else {
this.handleChange(null);
}
};
_proto.handleErrored = function handleErrored() {
if (this.props.onErrored) {
this.props.onErrored();
}
if (this.executionReject) {
this.executionReject();
delete this.executionResolve;
delete this.executionReject;
}
};
_proto.handleChange = function handleChange(token) {
if (this.props.onChange) {
this.props.onChange(token);
}
if (this.executionResolve) {
this.executionResolve(token);
delete this.executionReject;
delete this.executionResolve;
}
};
_proto.explicitRender = function explicitRender() {
// eslint-disable-next-line prettier/prettier
if (this.props.grecaptcha && this.props.grecaptcha.enterprise && this.props.grecaptcha.enterprise.render && this._widgetId === undefined) {
var wrapper = document.createElement("div");
this._widgetId = this.props.grecaptcha.enterprise.render(wrapper, {
sitekey: this.props.sitekey,
callback: this.handleChange,
theme: this.props.theme,
type: this.props.type,
tabindex: this.props.tabindex,
"expired-callback": this.handleExpired,
"error-callback": this.handleErrored,
size: this.props.size,
stoken: this.props.stoken,
hl: this.props.hl,
badge: this.props.badge,
isolated: this.props.isolated
});
this.captcha.appendChild(wrapper);
}
if (this._executeRequested && this.props.grecaptcha && this._widgetId !== undefined) {
this._executeRequested = false;
this.execute();
}
};
_proto.componentDidMount = function componentDidMount() {
this.explicitRender();
};
_proto.componentDidUpdate = function componentDidUpdate() {
this.explicitRender();
};
_proto.handleRecaptchaRef = function handleRecaptchaRef(elem) {
this.captcha = elem;
};
_proto.render = function render() {
// consume properties owned by the reCATPCHA, pass the rest to the div so the user can style it.
/* eslint-disable no-unused-vars */
var _this$props = this.props,
sitekey = _this$props.sitekey,
onChange = _this$props.onChange,
theme = _this$props.theme,
type = _this$props.type,
tabindex = _this$props.tabindex,
onExpired = _this$props.onExpired,
onErrored = _this$props.onErrored,
size = _this$props.size,
stoken = _this$props.stoken,
grecaptcha = _this$props.grecaptcha,
badge = _this$props.badge,
hl = _this$props.hl,
isolated = _this$props.isolated,
childProps = _objectWithoutPropertiesLoose(_this$props, ["sitekey", "onChange", "theme", "type", "tabindex", "onExpired", "onErrored", "size", "stoken", "grecaptcha", "badge", "hl", "isolated"]);
/* eslint-enable no-unused-vars */
return /*#__PURE__*/React.createElement("div", _extends({}, childProps, {
ref: this.handleRecaptchaRef
}));
};
return ReCAPTCHA;
}(React.Component);
export { ReCAPTCHA as default };
ReCAPTCHA.displayName = "ReCAPTCHA";
ReCAPTCHA.propTypes = {
sitekey: PropTypes.string.isRequired,
onChange: PropTypes.func,
grecaptcha: PropTypes.object,
theme: PropTypes.oneOf(["dark", "light"]),
type: PropTypes.oneOf(["image", "audio"]),
tabindex: PropTypes.number,
onExpired: PropTypes.func,
onErrored: PropTypes.func,
size: PropTypes.oneOf(["compact", "normal", "invisible"]),
stoken: PropTypes.string,
hl: PropTypes.string,
badge: PropTypes.oneOf(["bottomright", "bottomleft", "inline"]),
isolated: PropTypes.bool
};
ReCAPTCHA.defaultProps = {
onChange: function onChange() {},
theme: "light",
type: "image",
tabindex: 0,
size: "normal",
badge: "bottomright"
};