auth0-lock 11.34.2 → 12.0.0-beta.0

package/lib/ui/input/captcha_input.js

@@ -1,195 +1,176 @@
-'use strict';
-
-exports.__esModule = true;
-
-var _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; };
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _input_wrap = require('./input_wrap');
-
-var _input_wrap2 = _interopRequireDefault(_input_wrap);
-
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _input_wrap = _interopRequireDefault(require("./input_wrap"));
+var _excluded = ["lockId", "image", "value", "placeholder", "onReload", "invalidHint", "isValid"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var InputIconSvg = _react2.default.createElement(
-  'svg',
-  {
-    className: 'auth0-lock-icon auth0-lock-icon-box',
-    width: '21',
-    height: '20',
-    viewBox: '0 0 21 20',
-    fill: 'none',
-    xmlns: 'http://www.w3.org/2000/svg'
-  },
-  _react2.default.createElement(
-    'g',
-    { id: 'icon/key' },
-    _react2.default.createElement('path', {
-      id: 'Shape',
-      fillRule: 'evenodd',
-      clipRule: 'evenodd',
-      d: 'M16.3884 11.0145C14.4508 12.9522 11.3948 13.0447 9.32094 11.3401L7.20872 13.2642L9.60904 15.6697L8.83354 16.4466L6.39631 14.0048L4.88251 15.3832L7.39496 17.89L6.61586 18.6666L3.5 15.5587L3.53914 15.5198C3.47446 15.3363 3.51554 15.1287 3.67514 14.983L8.54211 10.5496C6.89425 8.47691 7.005 5.46384 8.92209 3.54636C10.9841 1.48455 14.3267 1.48455 16.3884 3.54636C18.4501 5.60846 18.4501 8.95239 16.3884 11.0145ZM15.6048 4.33856C13.98 2.71309 11.3454 2.71309 9.72062 4.33856C8.0958 5.9632 8.0958 8.59793 9.72062 10.2226C11.3454 11.8478 13.98 11.8478 15.6048 10.2226C17.2297 8.59793 17.2297 5.96292 15.6048 4.33856Z',
-      fill: '#888888'
-    })
-  )
-);
-
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+var InputIconSvg = /*#__PURE__*/_react.default.createElement("svg", {
+  className: "auth0-lock-icon auth0-lock-icon-box",
+  width: "21",
+  height: "20",
+  viewBox: "0 0 21 20",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/_react.default.createElement("g", {
+  id: "icon/key"
+}, /*#__PURE__*/_react.default.createElement("path", {
+  id: "Shape",
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M16.3884 11.0145C14.4508 12.9522 11.3948 13.0447 9.32094 11.3401L7.20872 13.2642L9.60904 15.6697L8.83354 16.4466L6.39631 14.0048L4.88251 15.3832L7.39496 17.89L6.61586 18.6666L3.5 15.5587L3.53914 15.5198C3.47446 15.3363 3.51554 15.1287 3.67514 14.983L8.54211 10.5496C6.89425 8.47691 7.005 5.46384 8.92209 3.54636C10.9841 1.48455 14.3267 1.48455 16.3884 3.54636C18.4501 5.60846 18.4501 8.95239 16.3884 11.0145ZM15.6048 4.33856C13.98 2.71309 11.3454 2.71309 9.72062 4.33856C8.0958 5.9632 8.0958 8.59793 9.72062 10.2226C11.3454 11.8478 13.98 11.8478 15.6048 10.2226C17.2297 8.59793 17.2297 5.96292 15.6048 4.33856Z",
+  fill: "#888888"
+})));
 var RefreshIconSvg = function RefreshIconSvg() {
-  return _react2.default.createElement(
-    'svg',
-    { width: '20', height: '20', viewBox: '0 0 20 20', fill: 'none', xmlns: 'http://www.w3.org/2000/svg' },
-    _react2.default.createElement('path', {
-      fillRule: 'evenodd',
-      clipRule: 'evenodd',
-      d: 'M17.5496 8.77262C17.007 5.01122 13.8021 2.11002 9.88989 2.11002C6.79596 2.11002 4.14611 3.93257 2.896 6.55065H7.11154C7.41852 6.55065 7.66749 6.79935 7.66749 7.10579C7.66749 7.41251 7.41879 7.66205 7.11154 7.66205H2.47938H1.30282C1.30781 7.64318 1.3092 7.62291 1.3142 7.60404C1.23426 7.56296 1.16987 7.50217 1.11824 7.42889C1.10325 7.40918 1.09048 7.39086 1.07827 7.36977C1.04746 7.3112 1.02998 7.24791 1.02193 7.17935C1.01776 7.15326 1 7.133 1 7.10552C1 7.08997 1.00722 7.0772 1.00888 7.06166V1.5582C1.00888 1.25176 1.25757 1.0025 1.56427 1.0025C1.87125 1.0025 2.11994 1.25148 2.11994 1.5582V5.61994C3.6293 2.87224 6.53311 1 9.88989 1C14.4182 1 18.1481 4.39195 18.6951 8.77235H17.5496V8.77262ZM9.88989 17.655C12.9841 17.655 15.6337 15.833 16.8841 13.2152H12.6685C12.3615 13.2152 12.1128 12.967 12.1128 12.6595C12.1128 12.3525 12.3615 12.1043 12.6685 12.1043H17.3004C17.3004 12.1041 17.3007 12.1035 17.3007 12.1032H18.4775C18.4725 12.1221 18.4709 12.1424 18.4659 12.161C18.5461 12.2021 18.6105 12.2631 18.6621 12.3367C18.6774 12.3564 18.6893 12.3744 18.7018 12.3955C18.7326 12.4541 18.7504 12.5174 18.7584 12.5859C18.7626 12.612 18.7803 12.632 18.7803 12.6598C18.7803 12.675 18.7728 12.6881 18.7717 12.7031V18.2076C18.7717 18.5144 18.523 18.7628 18.2161 18.7628C17.9091 18.7628 17.6604 18.5144 17.6604 18.2076V14.1451C16.151 16.8928 13.2469 18.765 9.89017 18.765C5.36209 18.765 1.63255 15.3739 1.08493 10.9935H2.23041C2.77331 14.7549 5.97799 17.655 9.88989 17.655Z',
-      fill: 'black'
-    }),
-    _react2.default.createElement(
-      'mask',
-      {
-        id: 'mask0',
-        'mask-type': 'alpha',
-        maskUnits: 'userSpaceOnUse',
-        x: '1',
-        y: '1',
-        width: '18',
-        height: '18'
-      },
-      _react2.default.createElement('path', {
-        fillRule: 'evenodd',
-        clipRule: 'evenodd',
-        d: 'M17.5496 8.77262C17.007 5.01122 13.8021 2.11002 9.88989 2.11002C6.79596 2.11002 4.14611 3.93257 2.896 6.55065H7.11154C7.41852 6.55065 7.66749 6.79935 7.66749 7.10579C7.66749 7.41251 7.41879 7.66205 7.11154 7.66205H2.47938H1.30282C1.30781 7.64318 1.3092 7.62291 1.3142 7.60404C1.23426 7.56296 1.16987 7.50217 1.11824 7.42889C1.10325 7.40918 1.09048 7.39086 1.07827 7.36977C1.04746 7.3112 1.02998 7.24791 1.02193 7.17935C1.01776 7.15326 1 7.133 1 7.10552C1 7.08997 1.00722 7.0772 1.00888 7.06166V1.5582C1.00888 1.25176 1.25757 1.0025 1.56427 1.0025C1.87125 1.0025 2.11994 1.25148 2.11994 1.5582V5.61994C3.6293 2.87224 6.53311 1 9.88989 1C14.4182 1 18.1481 4.39195 18.6951 8.77235H17.5496V8.77262ZM9.88989 17.655C12.9841 17.655 15.6337 15.833 16.8841 13.2152H12.6685C12.3615 13.2152 12.1128 12.967 12.1128 12.6595C12.1128 12.3525 12.3615 12.1043 12.6685 12.1043H17.3004C17.3004 12.1041 17.3007 12.1035 17.3007 12.1032H18.4775C18.4725 12.1221 18.4709 12.1424 18.4659 12.161C18.5461 12.2021 18.6105 12.2631 18.6621 12.3367C18.6774 12.3564 18.6893 12.3744 18.7018 12.3955C18.7326 12.4541 18.7504 12.5174 18.7584 12.5859C18.7626 12.612 18.7803 12.632 18.7803 12.6598C18.7803 12.675 18.7728 12.6881 18.7717 12.7031V18.2076C18.7717 18.5144 18.523 18.7628 18.2161 18.7628C17.9091 18.7628 17.6604 18.5144 17.6604 18.2076V14.1451C16.151 16.8928 13.2469 18.765 9.89017 18.765C5.36209 18.765 1.63255 15.3739 1.08493 10.9935H2.23041C2.77331 14.7549 5.97799 17.655 9.88989 17.655Z',
-        fill: 'white'
-      })
-    ),
-    _react2.default.createElement('g', { mask: 'url(#mask0)' })
-  );
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M17.5496 8.77262C17.007 5.01122 13.8021 2.11002 9.88989 2.11002C6.79596 2.11002 4.14611 3.93257 2.896 6.55065H7.11154C7.41852 6.55065 7.66749 6.79935 7.66749 7.10579C7.66749 7.41251 7.41879 7.66205 7.11154 7.66205H2.47938H1.30282C1.30781 7.64318 1.3092 7.62291 1.3142 7.60404C1.23426 7.56296 1.16987 7.50217 1.11824 7.42889C1.10325 7.40918 1.09048 7.39086 1.07827 7.36977C1.04746 7.3112 1.02998 7.24791 1.02193 7.17935C1.01776 7.15326 1 7.133 1 7.10552C1 7.08997 1.00722 7.0772 1.00888 7.06166V1.5582C1.00888 1.25176 1.25757 1.0025 1.56427 1.0025C1.87125 1.0025 2.11994 1.25148 2.11994 1.5582V5.61994C3.6293 2.87224 6.53311 1 9.88989 1C14.4182 1 18.1481 4.39195 18.6951 8.77235H17.5496V8.77262ZM9.88989 17.655C12.9841 17.655 15.6337 15.833 16.8841 13.2152H12.6685C12.3615 13.2152 12.1128 12.967 12.1128 12.6595C12.1128 12.3525 12.3615 12.1043 12.6685 12.1043H17.3004C17.3004 12.1041 17.3007 12.1035 17.3007 12.1032H18.4775C18.4725 12.1221 18.4709 12.1424 18.4659 12.161C18.5461 12.2021 18.6105 12.2631 18.6621 12.3367C18.6774 12.3564 18.6893 12.3744 18.7018 12.3955C18.7326 12.4541 18.7504 12.5174 18.7584 12.5859C18.7626 12.612 18.7803 12.632 18.7803 12.6598C18.7803 12.675 18.7728 12.6881 18.7717 12.7031V18.2076C18.7717 18.5144 18.523 18.7628 18.2161 18.7628C17.9091 18.7628 17.6604 18.5144 17.6604 18.2076V14.1451C16.151 16.8928 13.2469 18.765 9.89017 18.765C5.36209 18.765 1.63255 15.3739 1.08493 10.9935H2.23041C2.77331 14.7549 5.97799 17.655 9.88989 17.655Z",
+    fill: "black"
+  }), /*#__PURE__*/_react.default.createElement("mask", {
+    id: "mask0",
+    "mask-type": "alpha",
+    maskUnits: "userSpaceOnUse",
+    x: "1",
+    y: "1",
+    width: "18",
+    height: "18"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M17.5496 8.77262C17.007 5.01122 13.8021 2.11002 9.88989 2.11002C6.79596 2.11002 4.14611 3.93257 2.896 6.55065H7.11154C7.41852 6.55065 7.66749 6.79935 7.66749 7.10579C7.66749 7.41251 7.41879 7.66205 7.11154 7.66205H2.47938H1.30282C1.30781 7.64318 1.3092 7.62291 1.3142 7.60404C1.23426 7.56296 1.16987 7.50217 1.11824 7.42889C1.10325 7.40918 1.09048 7.39086 1.07827 7.36977C1.04746 7.3112 1.02998 7.24791 1.02193 7.17935C1.01776 7.15326 1 7.133 1 7.10552C1 7.08997 1.00722 7.0772 1.00888 7.06166V1.5582C1.00888 1.25176 1.25757 1.0025 1.56427 1.0025C1.87125 1.0025 2.11994 1.25148 2.11994 1.5582V5.61994C3.6293 2.87224 6.53311 1 9.88989 1C14.4182 1 18.1481 4.39195 18.6951 8.77235H17.5496V8.77262ZM9.88989 17.655C12.9841 17.655 15.6337 15.833 16.8841 13.2152H12.6685C12.3615 13.2152 12.1128 12.967 12.1128 12.6595C12.1128 12.3525 12.3615 12.1043 12.6685 12.1043H17.3004C17.3004 12.1041 17.3007 12.1035 17.3007 12.1032H18.4775C18.4725 12.1221 18.4709 12.1424 18.4659 12.161C18.5461 12.2021 18.6105 12.2631 18.6621 12.3367C18.6774 12.3564 18.6893 12.3744 18.7018 12.3955C18.7326 12.4541 18.7504 12.5174 18.7584 12.5859C18.7626 12.612 18.7803 12.632 18.7803 12.6598C18.7803 12.675 18.7728 12.6881 18.7717 12.7031V18.2076C18.7717 18.5144 18.523 18.7628 18.2161 18.7628C17.9091 18.7628 17.6604 18.5144 17.6604 18.2076V14.1451C16.151 16.8928 13.2469 18.765 9.89017 18.765C5.36209 18.765 1.63255 15.3739 1.08493 10.9935H2.23041C2.77331 14.7549 5.97799 17.655 9.88989 17.655Z",
+    fill: "white"
+  })), /*#__PURE__*/_react.default.createElement("g", {
+    mask: "url(#mask0)"
+  }));
 };
-
-var CaptchaInput = function (_React$Component) {
+var CaptchaInput = /*#__PURE__*/function (_React$Component) {
   _inherits(CaptchaInput, _React$Component);
-
+  var _super = _createSuper(CaptchaInput);
   function CaptchaInput(props) {
+    var _this;
     _classCallCheck(this, CaptchaInput);
-
-    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
-
+    _this = _super.call(this, props);
     _this.state = {};
     return _this;
   }
-
-  CaptchaInput.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
-    var _props = this.props,
-        isValid = _props.isValid,
-        value = _props.value,
-        image = _props.image,
-        placeholder = _props.placeholder;
-    var focused = this.state.focused;
-
-
-    return isValid != nextProps.isValid || value != nextProps.value || focused != nextState.focused || image != nextState.image || placeholder != nextState.placeholder;
-  };
-
-  CaptchaInput.prototype.render = function render() {
-    var _props2 = this.props,
-        lockId = _props2.lockId,
-        image = _props2.image,
-        value = _props2.value,
-        placeholder = _props2.placeholder,
-        onReload = _props2.onReload,
-        invalidHint = _props2.invalidHint,
-        isValid = _props2.isValid,
-        props = _objectWithoutProperties(_props2, ['lockId', 'image', 'value', 'placeholder', 'onReload', 'invalidHint', 'isValid']);
-
-    var focused = this.state.focused;
-
-
-    return _react2.default.createElement(
-      'div',
-      null,
-      _react2.default.createElement(
-        'div',
-        { className: 'auth0-lock-captcha' },
-        _react2.default.createElement('div', {
-          className: 'auth0-lock-captcha-image',
-          style: { backgroundImage: 'url(' + image + ')' }
-        }),
-        _react2.default.createElement(
-          'button',
-          {
-            type: 'button',
-            onClick: this.handleReload.bind(this),
-            className: 'auth0-lock-captcha-refresh'
-          },
-          _react2.default.createElement(RefreshIconSvg, null)
-        )
-      ),
-      _react2.default.createElement(
-        _input_wrap2.default,
-        {
-          focused: focused,
-          invalidHint: '',
-          isValid: isValid,
-          name: 'captcha',
-          icon: InputIconSvg
-        },
-        _react2.default.createElement('input', _extends({
-          id: lockId + '-captcha',
-          ref: 'input',
-          type: 'text',
-          inputMode: 'text',
-          name: 'captcha',
-          className: 'auth0-lock-input',
-          placeholder: placeholder,
-          autoComplete: 'off',
-          autoCapitalize: 'off',
-          autoCorrect: 'off',
-          spellCheck: 'false',
-          onChange: this.handleOnChange.bind(this),
-          onFocus: this.handleFocus.bind(this),
-          onBlur: this.handleBlur.bind(this),
-          'aria-label': 'Email',
-          'aria-invalid': !isValid,
-          'aria-describedby': !isValid && invalidHint ? 'auth0-lock-error-msg-email' : undefined,
-          value: value
-        }, props))
-      )
-    );
-  };
-
-  CaptchaInput.prototype.handleOnChange = function handleOnChange(e) {
-    if (this.props.onChange) {
-      this.props.onChange(e);
+  _createClass(CaptchaInput, [{
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(nextProps, nextState) {
+      var _this$props = this.props,
+        isValid = _this$props.isValid,
+        value = _this$props.value,
+        image = _this$props.image,
+        placeholder = _this$props.placeholder;
+      var focused = this.state.focused;
+      return isValid != nextProps.isValid || value != nextProps.value || focused != nextState.focused || image != nextState.image || placeholder != nextState.placeholder;
     }
-  };
-
-  CaptchaInput.prototype.handleReload = function handleReload(e) {
-    if (this.props.onReload) {
-      e.preventDefault();
-      this.props.onReload(e);
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+        lockId = _this$props2.lockId,
+        image = _this$props2.image,
+        value = _this$props2.value,
+        placeholder = _this$props2.placeholder,
+        onReload = _this$props2.onReload,
+        invalidHint = _this$props2.invalidHint,
+        isValid = _this$props2.isValid,
+        props = _objectWithoutProperties(_this$props2, _excluded);
+      var focused = this.state.focused;
+      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+        className: "auth0-lock-captcha"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "auth0-lock-captcha-image",
+        style: {
+          backgroundImage: "url(".concat(image, ")")
+        }
+      }), /*#__PURE__*/_react.default.createElement("button", {
+        type: "button",
+        onClick: this.handleReload.bind(this),
+        className: "auth0-lock-captcha-refresh"
+      }, /*#__PURE__*/_react.default.createElement(RefreshIconSvg, null))), /*#__PURE__*/_react.default.createElement(_input_wrap.default, {
+        focused: focused,
+        invalidHint: "",
+        isValid: isValid,
+        name: "captcha",
+        icon: InputIconSvg
+      }, /*#__PURE__*/_react.default.createElement("input", _extends({
+        id: "".concat(lockId, "-captcha"),
+        ref: "input",
+        type: "text",
+        inputMode: "text",
+        name: "captcha",
+        className: "auth0-lock-input",
+        placeholder: placeholder,
+        autoComplete: "off",
+        autoCapitalize: "off",
+        autoCorrect: "off",
+        spellCheck: "false",
+        onChange: this.handleOnChange.bind(this),
+        onFocus: this.handleFocus.bind(this),
+        onBlur: this.handleBlur.bind(this),
+        "aria-label": "Email",
+        "aria-invalid": !isValid,
+        "aria-describedby": !isValid && invalidHint ? "auth0-lock-error-msg-email" : undefined,
+        value: value
+      }, props))));
     }
-  };
-
-  CaptchaInput.prototype.handleFocus = function handleFocus() {
-    this.setState({ focused: true });
-  };
-
-  CaptchaInput.prototype.handleBlur = function handleBlur() {
-    this.setState({ focused: false });
-  };
-
+  }, {
+    key: "handleOnChange",
+    value: function handleOnChange(e) {
+      if (this.props.onChange) {
+        this.props.onChange(e);
+      }
+    }
+  }, {
+    key: "handleReload",
+    value: function handleReload(e) {
+      if (this.props.onReload) {
+        e.preventDefault();
+        this.props.onReload(e);
+      }
+    }
+  }, {
+    key: "handleFocus",
+    value: function handleFocus() {
+      this.setState({
+        focused: true
+      });
+    }
+  }, {
+    key: "handleBlur",
+    value: function handleBlur() {
+      this.setState({
+        focused: false
+      });
+    }
+  }]);
   return CaptchaInput;
-}(_react2.default.Component);
-
+}(_react.default.Component);
 exports.default = CaptchaInput;

package/lib/ui/input/checkbox_input.js

@@ -1,70 +1,68 @@
 "use strict";
 
-exports.__esModule = true;
-
-var _react = require("react");
-
-var _react2 = _interopRequireDefault(_react);
-
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var CheckboxInput = function (_React$Component) {
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+var CheckboxInput = /*#__PURE__*/function (_React$Component) {
   _inherits(CheckboxInput, _React$Component);
-
+  var _super = _createSuper(CheckboxInput);
   function CheckboxInput() {
     _classCallCheck(this, CheckboxInput);
-
-    return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
+    return _super.apply(this, arguments);
   }
-
-  CheckboxInput.prototype.render = function render() {
-    var _props = this.props,
-        lockId = _props.lockId,
-        name = _props.name,
-        ariaLabel = _props.ariaLabel,
-        placeholder = _props.placeholder,
-        checked = _props.checked,
-        placeholderHTML = _props.placeholderHTML;
-
-    return _react2.default.createElement(
-      "div",
-      { className: "auth0-lock-input-checkbox" },
-      _react2.default.createElement(
-        "label",
-        null,
-        _react2.default.createElement("input", {
-          id: lockId + "-" + name,
-          type: "checkbox",
-          checked: checked === 'true',
-          onChange: this.handleOnChange.bind(this),
-          name: name,
-          "aria-label": ariaLabel || name
-        }),
-        placeholderHTML ?
-        // placeholderHTML allows raw HTML
-        // eslint-disable-next-line react/no-danger
-        _react2.default.createElement("span", { dangerouslySetInnerHTML: { __html: placeholderHTML } }) : _react2.default.createElement(
-          "span",
-          null,
-          placeholder
-        )
-      )
-    );
-  };
-
-  CheckboxInput.prototype.handleOnChange = function handleOnChange(e) {
-    if (this.props.onChange) {
-      this.props.onChange(e);
+  _createClass(CheckboxInput, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        lockId = _this$props.lockId,
+        name = _this$props.name,
+        ariaLabel = _this$props.ariaLabel,
+        placeholder = _this$props.placeholder,
+        checked = _this$props.checked,
+        placeholderHTML = _this$props.placeholderHTML;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "auth0-lock-input-checkbox"
+      }, /*#__PURE__*/_react.default.createElement("label", null, /*#__PURE__*/_react.default.createElement("input", {
+        id: "".concat(lockId, "-").concat(name),
+        type: "checkbox",
+        checked: checked === 'true',
+        onChange: this.handleOnChange.bind(this),
+        name: name,
+        "aria-label": ariaLabel || name
+      }), placeholderHTML ?
+      /*#__PURE__*/
+      // placeholderHTML allows raw HTML
+      // eslint-disable-next-line react/no-danger
+      _react.default.createElement("span", {
+        dangerouslySetInnerHTML: {
+          __html: placeholderHTML
+        }
+      }) : /*#__PURE__*/_react.default.createElement("span", null, placeholder)));
     }
-  };
-
+  }, {
+    key: "handleOnChange",
+    value: function handleOnChange(e) {
+      if (this.props.onChange) {
+        this.props.onChange(e);
+      }
+    }
+  }]);
   return CheckboxInput;
-}(_react2.default.Component);
-
+}(_react.default.Component);
 exports.default = CheckboxInput;