@authing/react-ui-components 3.0.1-alpha → 3.0.1-beta.0

package/lib/ValidatorRules/ValidatorFormItem.js

@@ -0,0 +1,262 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UserNameFormItem = exports.PhoneFormItem = exports.EmailFormItem = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _antd = require("antd");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _utils = require("../_utils");
+
+var _guradHttp = require("../_utils/guradHttp");
+
+var _reactI18next = require("react-i18next");
+
+var _hooks = require("../_utils/hooks");
+
+var _context4 = require("../_utils/context");
+
+var _excluded = ["form", "checkRepeat", "method", "name", "required"];
+
+var checkError = function checkError(message) {
+  return Promise.reject(new Error(message));
+};
+
+var checkSuccess = function checkSuccess(message) {
+  return Promise.resolve(message !== null && message !== void 0 ? message : '');
+};
+
+var ValidatorFormItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _formItemProps$rules;
+
+  var form = props.form,
+      _props$checkRepeat = props.checkRepeat,
+      checkRepeat = _props$checkRepeat === void 0 ? false : _props$checkRepeat,
+      method = props.method,
+      name = props.name,
+      required = props.required,
+      formItemProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var publicConfig = (0, _context4.usePublicConfig)();
+
+  var _useGuardHttp = (0, _guradHttp.useGuardHttp)(),
+      get = _useGuardHttp.get;
+
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+      t = _useTranslation.t;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      checked = _useState2[0],
+      setChecked = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      isReady = _useState4[0],
+      setIsReady = _useState4[1];
+
+  var methodContent = (0, _react.useMemo)(function () {
+    if (method === 'email') return {
+      field: t('common.emailLabel'),
+      checkErrorMessage: t('common.checkEmail'),
+      formatErrorMessage: t('common.emailFormatError'),
+      pattern: _utils.VALIDATE_PATTERN.email
+    };else if (method === 'username') {
+      return {
+        field: t('common.username'),
+        checkErrorMessage: t('common.checkUserName'),
+        formatErrorMessage: t('common.usernameFormatError'),
+        pattern: _utils.VALIDATE_PATTERN.username
+      };
+    } else return {
+      field: t('common.phone'),
+      checkErrorMessage: t('common.checkPhone'),
+      formatErrorMessage: t('common.phoneFormateError'),
+      pattern: _utils.VALIDATE_PATTERN.phone
+    };
+  }, [method, t]);
+  var checkField = (0, _hooks.useDebounce)( /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(value) {
+      var _yield$get, data;
+
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (value && methodContent.pattern.test(value)) {
+                _context.next = 3;
+                break;
+              }
+
+              setIsReady(true);
+              return _context.abrupt("return");
+
+            case 3:
+              _context.next = 5;
+              return get("/api/v2/users/find", {
+                userPoolId: publicConfig === null || publicConfig === void 0 ? void 0 : publicConfig.userPoolId,
+                key: value,
+                type: method
+              });
+
+            case 5:
+              _yield$get = _context.sent;
+              data = _yield$get.data;
+              setChecked(Boolean(data));
+              form === null || form === void 0 ? void 0 : form.validateFields([name !== null && name !== void 0 ? name : method]);
+              setIsReady(true);
+
+            case 10:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function (_x) {
+      return _ref.apply(this, arguments);
+    };
+  }(), 500);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      check: function check(values) {
+        setChecked(false); // @ts-ignore
+
+        if (values[name !== null && name !== void 0 ? name : method]) {
+          setIsReady(false); // @ts-ignore
+
+          checkField(values[name !== null && name !== void 0 ? name : method]);
+        }
+      }
+    };
+  });
+  var checkReady = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+    return _regenerator.default.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            if (!isReady) {
+              _context2.next = 2;
+              break;
+            }
+
+            return _context2.abrupt("return", true);
+
+          case 2:
+            _context2.next = 4;
+            return (0, _utils.sleep)(100);
+
+          case 4:
+            if (!isReady) {
+              _context2.next = 2;
+              break;
+            }
+
+          case 5:
+            return _context2.abrupt("return", true);
+
+          case 6:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })), [isReady]);
+  var validator = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
+    return _regenerator.default.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            _context3.next = 2;
+            return checkReady();
+
+          case 2:
+            _context3.t0 = _context3.sent;
+
+            if (!_context3.t0) {
+              _context3.next = 5;
+              break;
+            }
+
+            _context3.t0 = checked;
+
+          case 5:
+            if (!_context3.t0) {
+              _context3.next = 9;
+              break;
+            }
+
+            return _context3.abrupt("return", checkError(methodContent.checkErrorMessage));
+
+          case 9:
+            return _context3.abrupt("return", checkSuccess());
+
+          case 10:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })), [checkReady, checked, methodContent.checkErrorMessage]);
+  var rules = (0, _react.useMemo)(function () {
+    var rules = required ? (0, _toConsumableArray2.default)((0, _utils.fieldRequiredRule)(methodContent.field)) : [];
+    rules.push({
+      validateTrigger: 'onBlur',
+      pattern: methodContent.pattern,
+      message: methodContent.formatErrorMessage
+    });
+    checkRepeat && Boolean(publicConfig) && rules.push({
+      validator: validator
+    });
+    return rules;
+  }, [required, methodContent, checkRepeat, publicConfig, validator]);
+  return /*#__PURE__*/_react.default.createElement(_antd.Form.Item, (0, _extends2.default)({
+    validateFirst: true,
+    validateTrigger: ['onBlur', 'onChange'],
+    rules: [].concat((0, _toConsumableArray2.default)(rules), (0, _toConsumableArray2.default)((_formItemProps$rules = formItemProps === null || formItemProps === void 0 ? void 0 : formItemProps.rules) !== null && _formItemProps$rules !== void 0 ? _formItemProps$rules : [])),
+    name: name !== null && name !== void 0 ? name : method
+  }, formItemProps));
+});
+var EmailFormItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return /*#__PURE__*/_react.default.createElement(ValidatorFormItem, (0, _extends2.default)({
+    ref: ref
+  }, props, {
+    method: "email"
+  }));
+});
+exports.EmailFormItem = EmailFormItem;
+var PhoneFormItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return /*#__PURE__*/_react.default.createElement(ValidatorFormItem, (0, _extends2.default)({
+    ref: ref
+  }, props, {
+    method: "phone"
+  }));
+});
+exports.PhoneFormItem = PhoneFormItem;
+var UserNameFormItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return /*#__PURE__*/_react.default.createElement(ValidatorFormItem, (0, _extends2.default)({
+    ref: ref
+  }, props, {
+    method: "username"
+  }));
+});
+exports.UserNameFormItem = UserNameFormItem;

package/lib/ValidatorRules/index.d.ts

@@ -0,0 +1,27 @@
+import { FormInstance, FormItemProps } from 'antd/lib/form';
+import FormItem from 'antd/lib/form/FormItem';
+import { PasswordFormItem } from './PasswordFormItem';
+import { EmailFormItem, PhoneFormItem, UserNameFormItem } from './ValidatorFormItem';
+export interface ValidatorFormItemProps extends FormItemProps {
+    form?: FormInstance;
+    checkRepeat?: boolean;
+}
+export interface ValidatorFormItemMetaProps extends ValidatorFormItemProps {
+    form?: FormInstance;
+    checkRepeat?: boolean;
+    method: 'email' | 'phone' | 'username';
+}
+export interface PasswordFormItemProps extends FormItemProps {
+}
+export interface ICheckProps {
+    check: (values: any) => void;
+}
+declare type InternalFormItemType = typeof FormItem;
+interface FormItemInterface extends InternalFormItemType {
+    Password: typeof PasswordFormItem;
+    Email: typeof EmailFormItem;
+    Phone: typeof PhoneFormItem;
+    UserName: typeof UserNameFormItem;
+}
+declare const CustomFormItem: FormItemInterface;
+export default CustomFormItem;

package/lib/ValidatorRules/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _FormItem = _interopRequireDefault(require("antd/lib/form/FormItem"));
+
+var _PasswordFormItem = require("./PasswordFormItem");
+
+var _ValidatorFormItem = require("./ValidatorFormItem");
+
+var CustomFormItem = _FormItem.default;
+CustomFormItem.Password = _PasswordFormItem.PasswordFormItem;
+CustomFormItem.Email = _ValidatorFormItem.EmailFormItem;
+CustomFormItem.Phone = _ValidatorFormItem.PhoneFormItem;
+CustomFormItem.UserName = _ValidatorFormItem.UserNameFormItem;
+var _default = CustomFormItem;
+exports.default = _default;

package/lib/VerifyCodeInput/index.d.ts

@@ -0,0 +1,9 @@
+import React, { FC } from 'react';
+interface VerifyCodeInputProps extends React.HTMLAttributes<HTMLDivElement> {
+    verifyCode: string[];
+    setVerifyCode: (code: string[]) => void;
+    length?: number;
+    onEnter?: Function;
+}
+export declare const VerifyCodeInput: FC<VerifyCodeInputProps>;
+export {};

package/lib/VerifyCodeInput/index.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VerifyCodeInput = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _antd = require("antd");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var VerifyCodeInput = function VerifyCodeInput(_ref) {
+  var verifyCode = _ref.verifyCode,
+      setVerifyCode = _ref.setVerifyCode,
+      _ref$length = _ref.length,
+      length = _ref$length === void 0 ? 6 : _ref$length,
+      onEnter = _ref.onEnter;
+  var inputRef = (0, _react.useRef)([]);
+
+  var handleChange = function handleChange() {
+    var val = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    var index = arguments.length > 1 ? arguments[1] : undefined;
+    var num = parseInt(val);
+
+    if (isNaN(num)) {
+      val = '';
+    } else {
+      val = String(num);
+    }
+
+    var codes = (0, _toConsumableArray2.default)(verifyCode);
+    codes[index] = val.split('').slice(-1)[0] || '';
+    setVerifyCode(codes);
+
+    if (val && inputRef.current[index + 1]) {
+      inputRef.current[index + 1].focus();
+    }
+  };
+
+  var handleKeyDown = function handleKeyDown(evt, index) {
+    var currentVal = verifyCode[index];
+
+    switch (evt.keyCode) {
+      case 8:
+        if (!currentVal && inputRef.current[index - 1]) {
+          handleChange('', index - 1);
+          inputRef.current[index - 1].focus();
+        }
+
+        break;
+
+      case 13:
+        onEnter === null || onEnter === void 0 ? void 0 : onEnter();
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "authing-code-input"
+  }, new Array(length).fill(0).map(function (_, index) {
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+      key: index
+    }, /*#__PURE__*/_react.default.createElement(_antd.Input, {
+      ref: function ref(el) {
+        return inputRef.current[index] = el;
+      },
+      className: "authing-code-input-item",
+      size: "large",
+      autoFocus: index === 0,
+      onKeyDown: function onKeyDown(evt) {
+        return handleKeyDown(evt, index);
+      },
+      value: verifyCode[index],
+      onChange: function onChange(evt) {
+        return handleChange(evt.target.value, index);
+      }
+    }), index === Math.floor(length / 2 - 1) && /*#__PURE__*/_react.default.createElement(_antd.Divider, {
+      className: "authing-code-input-divider"
+    }));
+  }));
+};
+
+exports.VerifyCodeInput = VerifyCodeInput;

package/lib/VerifyCodeInput/style/css.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./index.css");

package/lib/VerifyCodeInput/style/index.css

@@ -0,0 +1 @@
+.authing-code-input-item{text-align:center;width:40px;min-width:40px;min-height:40px;height:40px;line-height:40px}.authing-code-input-item:not(:first-child){margin-left:18px}.authing-code-input-item input{text-align:center}.authing-code-input-divider{width:14px;min-width:14px;max-width:14px;margin-left:18px}.authing-code-input{display:flex;align-items:center}

package/lib/VerifyCodeInput/style/index.d.ts

@@ -0,0 +1 @@
+import './index.less';

package/lib/VerifyCodeInput/style/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./index.less");

package/lib/VerifyCodeInput/style/index.less

@@ -0,0 +1,24 @@
+.authing-code-input-item {
+  text-align: center;
+  width: 40px;
+  min-width: 40px;
+  min-height: 40px;
+  height: 40px;
+  line-height: 40px;
+  &:not(:first-child) {
+    margin-left: 18px;
+  }
+  input {
+    text-align: center;
+  }
+}
+.authing-code-input-divider {
+  width: 14px;
+  min-width: 14px;
+  max-width: 14px;
+  margin-left: 18px;
+}
+.authing-code-input {
+  display: flex;
+  align-items: center;
+}

package/lib/_utils/GuardErrorCode.d.ts

@@ -0,0 +1,9 @@
+export declare enum ErrorCode {
+    OTP_MFA_CODE = 1635,
+    APP_MFA_CODE = 1636,
+    INPUT_CAPTCHACODE = 2000,
+    USER_EXISTENCE = 2026,
+    LOGIN_INVALID = 2021,
+    PASSWORD_ERROR = 2333,
+    USER_NOT_EXIST = 2004
+}

package/lib/_utils/GuardErrorCode.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ErrorCode = void 0;
+var ErrorCode;
+exports.ErrorCode = ErrorCode;
+
+(function (ErrorCode) {
+  ErrorCode[ErrorCode["OTP_MFA_CODE"] = 1635] = "OTP_MFA_CODE";
+  ErrorCode[ErrorCode["APP_MFA_CODE"] = 1636] = "APP_MFA_CODE";
+  ErrorCode[ErrorCode["INPUT_CAPTCHACODE"] = 2000] = "INPUT_CAPTCHACODE";
+  ErrorCode[ErrorCode["USER_EXISTENCE"] = 2026] = "USER_EXISTENCE";
+  ErrorCode[ErrorCode["LOGIN_INVALID"] = 2021] = "LOGIN_INVALID";
+  ErrorCode[ErrorCode["PASSWORD_ERROR"] = 2333] = "PASSWORD_ERROR";
+  ErrorCode[ErrorCode["USER_NOT_EXIST"] = 2004] = "USER_NOT_EXIST";
+})(ErrorCode || (exports.ErrorCode = ErrorCode = {}));

package/lib/_utils/clipboard.d.ts

@@ -0,0 +1 @@
+export declare const copyToClipboard: (str: string) => void;

package/lib/_utils/clipboard.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.copyToClipboard = void 0;
+
+var _locales = require("./locales");
+
+// https://juejin.im/post/6844903857290477582
+var copyToClipboard = function copyToClipboard(str) {
+  var el = document.createElement('textarea'); // 创建一个 <textarea> 元素
+
+  el.value = str; // 设置它的值为你想复制的字符串
+
+  el.setAttribute('readonly', ''); // 设置为只读以防止干扰
+
+  el.style.position = 'absolute';
+  el.style.left = '-9999px'; // 移出屏幕外以使其不可见
+
+  document.body.appendChild(el); // 插入 <textarea> 元素到 HTML 文档中
+
+  try {
+    var selected = document.getSelection().rangeCount > 0 // 检查是否之前曾选中过内容
+    ? document.getSelection().getRangeAt(0) // 如果找到，则保存选中
+    : false; // 标记为  false 以表示不存在之前选中的内容
+
+    el.select(); // 选中 <textarea> 的内容
+
+    document.execCommand('copy'); // 复制 - 仅当作为用户操作的响应结果时才可以工作(比如，点击事件)
+
+    document.body.removeChild(el); // 移除 <textarea> 元素
+
+    if (selected) {
+      // 如果在复制前已存在选中的内容
+      document.getSelection().removeAllRanges(); // 取消 HTML 文档中所有的选中部分
+
+      document.getSelection().addRange(selected); // 恢复原来的选中
+    }
+  } catch (e) {
+    console.warn(_locales.i18n.t('common.copyFailed'));
+  }
+};
+
+exports.copyToClipboard = copyToClipboard;

package/lib/_utils/config.d.ts

@@ -0,0 +1,7 @@
+import { IG2Config } from '../Type';
+import { ApplicationConfig } from '../AuthingGuard/api';
+import { GuardLocalConfig } from '../Guard/config';
+export declare const initConfig: (appId: string, config: Partial<IG2Config>, defaultConfig: IG2Config) => Promise<{
+    config: GuardLocalConfig;
+    publicConfig: ApplicationConfig;
+}>;