@authing/react-ui-components 3.0.1-beta.4 → 3.0.1-rc.3

package/es/MFA/VerifyCodeInput/index.d.ts

@@ -1,13 +0,0 @@
-import React, { FC } from 'react';
-interface VerifyCodeInputProps extends React.HTMLAttributes<HTMLDivElement> {
-    length?: number;
-    size?: string;
-    gutter?: string;
-    onEenter?: Function;
-    showDivider?: boolean;
-    onChange?: any;
-    value?: Array<number | string>;
-    onFinish?: any;
-}
-export declare const VerifyCodeInput: FC<VerifyCodeInputProps>;
-export {};

package/es/MFA/VerifyCodeInput/index.js

@@ -1,175 +0,0 @@
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import "antd/lib/divider/style";
-import _Divider from "antd/lib/divider";
-import _toConsumableArray from "@babel/runtime-corejs3/helpers/esm/toConsumableArray";
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["length", "size", "gutter", "className", "onEenter", "showDivider", "onChange", "value", "onFinish"];
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _parseInt from "@babel/runtime-corejs3/core-js-stable/parse-int";
-import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import _fillInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/fill";
-import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react';
-import { InputNumber } from '../../InputNumber';
-export var VerifyCodeInput = function VerifyCodeInput(_ref) {
-  var _context2, _context3;
-
-  var _ref$length = _ref.length,
-      length = _ref$length === void 0 ? 4 : _ref$length,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? '46px' : _ref$size,
-      _ref$gutter = _ref.gutter,
-      gutter = _ref$gutter === void 0 ? length > 4 ? '14px' : '24px' : _ref$gutter,
-      className = _ref.className,
-      onEenter = _ref.onEenter,
-      showDivider = _ref.showDivider,
-      onChangeProps = _ref.onChange,
-      value = _ref.value,
-      onFinish = _ref.onFinish,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var inputRef = useRef([]);
-  var codeInputRef = useRef(null);
-
-  var _useState = useState(value !== null && value !== void 0 ? value : []),
-      _useState2 = _slicedToArray(_useState, 2),
-      verifyCode = _useState2[0],
-      setVerifyCode = _useState2[1];
-
-  var onChange = useCallback(function (codes) {
-    var filteredCodes = _filterInstanceProperty(codes).call(codes, function (code) {
-      return !!code;
-    });
-
-    setVerifyCode(filteredCodes);
-    onChangeProps === null || onChangeProps === void 0 ? void 0 : onChangeProps(filteredCodes);
-  }, [onChangeProps]);
-  var handleChange = useCallback(function () {
-    var _context;
-
-    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 = _toConsumableArray(verifyCode);
-
-    codes[index] = _sliceInstanceProperty(_context = val.split('')).call(_context, -1)[0] || '';
-    onChange(codes);
-
-    if (!!val && inputRef.current[index + 1]) {
-      inputRef.current[index + 1].focus();
-    } // 输入完验证码 直接 finish 提交
-
-
-    if (_filterInstanceProperty(codes).call(codes, function (code) {
-      return code;
-    }).length >= length) {
-      onFinish === null || onFinish === void 0 ? void 0 : onFinish();
-    }
-  }, [verifyCode, onChange, length, onFinish]);
-
-  var handleKeyDown = function handleKeyDown(evt, index) {
-    var currentVal = verifyCode[index];
-
-    switch (evt.key) {
-      case 'Backspace':
-        if (!currentVal && inputRef.current[index - 1]) {
-          handleChange('', index - 1);
-          inputRef.current[index - 1].focus();
-        }
-
-        break;
-
-      case 'Enter':
-        onEenter === null || onEenter === void 0 ? void 0 : onEenter();
-        break;
-
-      default:
-        break;
-    }
-  };
-
-  useEffect(function () {
-    var el = codeInputRef.current;
-
-    var pasteEvent = function pasteEvent(e) {
-      var _e$clipboardData;
-
-      e.preventDefault();
-      e.stopPropagation();
-      var paste = (_e$clipboardData = e.clipboardData) === null || _e$clipboardData === void 0 ? void 0 : _e$clipboardData.getData('text');
-
-      if (paste && !isNaN(_parseInt(paste))) {
-        if (paste.length < length) {
-          var data = _mapInstanceProperty(verifyCode).call(verifyCode, function (_i, index) {
-            var _paste$index;
-
-            return (_paste$index = paste === null || paste === void 0 ? void 0 : paste[index]) !== null && _paste$index !== void 0 ? _paste$index : '';
-          });
-
-          onChange(data);
-          inputRef.current[paste.length].focus();
-        } else {
-          var _data = _sliceInstanceProperty(paste).call(paste, 0, length).split('');
-
-          onChange(_data);
-          inputRef.current[length - 1].focus();
-        }
-      }
-    };
-
-    el === null || el === void 0 ? void 0 : el.addEventListener('paste', pasteEvent);
-    return function () {
-      el === null || el === void 0 ? void 0 : el.removeEventListener('paste', pasteEvent);
-    };
-  }, [length, onChange, setVerifyCode, verifyCode]);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: codeInputRef,
-    className: "authing-g2-code-input"
-  }, rest), _mapInstanceProperty(_context2 = _fillInstanceProperty(_context3 = new Array(length)).call(_context3, 0)).call(_context2, function (_, index) {
-    return /*#__PURE__*/React.createElement(Fragment, {
-      key: index
-    }, /*#__PURE__*/React.createElement(InputNumber, {
-      ref: function ref(el) {
-        return inputRef.current[index] = el;
-      },
-      style: {
-        width: size,
-        minWidth: size,
-        minHeight: size,
-        height: size,
-        lineHeight: size,
-        marginLeft: index === 0 ? 0 : gutter
-      },
-      className: "authing-g2-code-input-item",
-      size: "large",
-      autoFocus: index === 0,
-      onKeyDown: function onKeyDown(evt) {
-        return handleKeyDown(evt, index);
-      },
-      value: verifyCode[index],
-      maxLength: 1,
-      onChange: function onChange(evt) {
-        evt.persist(); // @ts-ignore
-
-        if (evt.nativeEvent.isComposing) {
-          return;
-        }
-
-        handleChange(evt.target.value, index);
-      },
-      pattern: "[0-9]*",
-      type: "tel"
-    }), showDivider && index === Math.floor(length / 2 - 1) && /*#__PURE__*/React.createElement(_Divider, {
-      className: "authing-g2-code-input-divider"
-    }));
-  }));
-};

package/es/MFA/codemap.d.ts

@@ -1,2 +0,0 @@
-import { GuardModuleAction } from '../Guard/module';
-export declare const codeMap: Record<number, GuardModuleAction>;

package/es/MFA/codemap.js

@@ -1,26 +0,0 @@
-import { GuardModuleType } from '../Guard/module';
-export var codeMap = {
-  // 待添加
-  2021: {
-    action: 'changeModule',
-    module: GuardModuleType.LOGIN
-  },
-  1700: {
-    action: 'insideFix',
-    message: 'verification failed, let components inside fix is fine.'
-  },
-  1701: {
-    action: 'insideFix',
-    message: 'verification failed, let components inside fix is fine.'
-  },
-  1702: {
-    action: 'insideFix',
-    message: 'verification failed, let components inside fix is fine.'
-  },
-  500: {
-    action: 'message'
-  },
-  6001: {
-    action: 'message'
-  }
-};

package/es/MFA/core/email.d.ts

@@ -1,23 +0,0 @@
-import React from 'react';
-import { MFAConfig } from '../interface';
-interface BindMFAEmailProps {
-    mfaToken: string;
-    onBind: (email: string) => void;
-    config: any;
-}
-export declare const BindMFAEmail: React.FC<BindMFAEmailProps>;
-interface VerifyMFAEmailProps {
-    email: string;
-    mfaToken: string;
-    onVerify: (code: number, data: any) => void;
-    sendCodeRef: React.RefObject<HTMLButtonElement>;
-    codeLength: number;
-}
-export declare const VerifyMFAEmail: React.FC<VerifyMFAEmailProps>;
-export declare const MFAEmail: React.FC<{
-    mfaToken: string;
-    email?: string;
-    mfaLogin: any;
-    config: MFAConfig;
-}>;
-export {};

package/es/MFA/core/email.js

@@ -1,302 +0,0 @@
-import "antd/lib/input/style";
-import _Input from "antd/lib/input";
-import "antd/lib/message/style";
-import _message from "antd/lib/message";
-import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
-import "antd/lib/form/style";
-import _Form from "antd/lib/form";
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
-import { EmailScene } from 'authing-js-sdk';
-import React, { useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { VerifyCodeInput } from '../VerifyCodeInput';
-import { useGuardAuthClient } from '../../Guard/authClient';
-import { SendCodeBtn } from '../../SendCode/SendCodeBtn';
-import SubmitButton from '../../SubmitButton';
-import CustomFormItem from '../../ValidatorRules';
-import { VerifyCodeFormItem } from '../VerifyCodeInput/VerifyCodeFormItem';
-import { IconFont } from '../../IconFont';
-import { mailDesensitization } from '../../_utils';
-export var BindMFAEmail = function BindMFAEmail(_ref) {
-  var mfaToken = _ref.mfaToken,
-      onBind = _ref.onBind,
-      config = _ref.config;
-  var submitButtonRef = useRef(null);
-
-  var _useTranslation = useTranslation(),
-      t = _useTranslation.t;
-
-  var _Form$useForm = _Form.useForm(),
-      _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
-      form = _Form$useForm2[0];
-
-  var ref = useRef(null);
-
-  var onFinish = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref2) {
-      var _submitButtonRef$curr;
-
-      var email, error, _submitButtonRef$curr2;
-
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              email = _ref2.email;
-              (_submitButtonRef$curr = submitButtonRef.current) === null || _submitButtonRef$curr === void 0 ? void 0 : _submitButtonRef$curr.onSpin(true);
-              _context.next = 4;
-              return form.validateFields();
-
-            case 4:
-              try {
-                onBind(email);
-              } catch (e) {
-                error = JSON.parse(e === null || e === void 0 ? void 0 : e.message);
-                submitButtonRef.current.onError();
-
-                _message.error(error.message);
-              } finally {
-                (_submitButtonRef$curr2 = submitButtonRef.current) === null || _submitButtonRef$curr2 === void 0 ? void 0 : _submitButtonRef$curr2.onSpin(false);
-              }
-
-            case 5:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
-
-    return function onFinish(_x) {
-      return _ref3.apply(this, arguments);
-    };
-  }();
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
-    className: "authing-g2-mfa-title"
-  }, t('common.bindEmail')), /*#__PURE__*/React.createElement("p", {
-    className: "authing-g2-mfa-tips"
-  }, t('common.bindEmailDoc')), /*#__PURE__*/React.createElement(_Form, {
-    form: form,
-    onFinish: onFinish,
-    onFinishFailed: function onFinishFailed() {
-      return submitButtonRef.current.onError();
-    },
-    onValuesChange: function onValuesChange(value) {
-      var _ref$current;
-
-      (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.check(value);
-    }
-  }, /*#__PURE__*/React.createElement(CustomFormItem.Email, {
-    className: "authing-g2-input-form",
-    name: "email",
-    form: form,
-    ref: ref,
-    checkRepeat: true,
-    required: true
-  }, /*#__PURE__*/React.createElement(_Input, {
-    className: "authing-g2-input",
-    autoComplete: "email",
-    size: "large",
-    placeholder: t('login.inputEmail'),
-    prefix: /*#__PURE__*/React.createElement(IconFont, {
-      type: "authing-a-mail-line3",
-      style: {
-        color: '#878A95'
-      }
-    })
-  })), /*#__PURE__*/React.createElement(SubmitButton, {
-    text: t('common.sure'),
-    ref: submitButtonRef
-  })));
-};
-export var VerifyMFAEmail = function VerifyMFAEmail(_ref4) {
-  var _context4;
-
-  var email = _ref4.email,
-      mfaToken = _ref4.mfaToken,
-      onVerify = _ref4.onVerify,
-      sendCodeRef = _ref4.sendCodeRef,
-      codeLength = _ref4.codeLength;
-  var authClient = useGuardAuthClient();
-  var submitButtonRef = useRef(null);
-
-  var _useTranslation2 = useTranslation(),
-      t = _useTranslation2.t;
-
-  var _Form$useForm3 = _Form.useForm(),
-      _Form$useForm4 = _slicedToArray(_Form$useForm3, 1),
-      form = _Form$useForm4[0];
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      sent = _useState2[0],
-      setSent = _useState2[1];
-
-  var sendVerifyCode = /*#__PURE__*/function () {
-    var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-      var errorMessage;
-      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              _context2.prev = 0;
-              _context2.next = 3;
-              return authClient.sendEmail(email, EmailScene.MfaVerify);
-
-            case 3:
-              setSent(true);
-              return _context2.abrupt("return", true);
-
-            case 7:
-              _context2.prev = 7;
-              _context2.t0 = _context2["catch"](0);
-
-              if (!(_context2.t0.code === 'ECONNABORTED')) {
-                _context2.next = 12;
-                break;
-              }
-
-              _message.error(t('login.sendCodeTimeout'));
-
-              return _context2.abrupt("return", false);
-
-            case 12:
-              errorMessage = JSON.parse(_context2.t0.message);
-
-              _message.error(errorMessage.message);
-
-              return _context2.abrupt("return", false);
-
-            case 15:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2, null, [[0, 7]]);
-    }));
-
-    return function sendVerifyCode() {
-      return _ref5.apply(this, arguments);
-    };
-  }();
-
-  var onFinish = /*#__PURE__*/function () {
-    var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(values) {
-      var _submitButtonRef$curr3;
-
-      var mfaCode, user, _submitButtonRef$curr4, error, _submitButtonRef$curr5;
-
-      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-        while (1) {
-          switch (_context3.prev = _context3.next) {
-            case 0:
-              (_submitButtonRef$curr3 = submitButtonRef.current) === null || _submitButtonRef$curr3 === void 0 ? void 0 : _submitButtonRef$curr3.onSpin(true);
-              mfaCode = form.getFieldValue('mfaCode');
-              _context3.prev = 2;
-              _context3.next = 5;
-              return authClient.mfa.verifyAppEmailMfa({
-                mfaToken: mfaToken,
-                email: email,
-                code: mfaCode.join('')
-              });
-
-            case 5:
-              user = _context3.sent;
-              onVerify(200, user);
-              _context3.next = 14;
-              break;
-
-            case 9:
-              _context3.prev = 9;
-              _context3.t0 = _context3["catch"](2);
-              error = JSON.parse(_context3.t0 === null || _context3.t0 === void 0 ? void 0 : _context3.t0.message);
-              (_submitButtonRef$curr4 = submitButtonRef.current) === null || _submitButtonRef$curr4 === void 0 ? void 0 : _submitButtonRef$curr4.onError();
-              onVerify(error.code, error);
-
-            case 14:
-              _context3.prev = 14;
-              (_submitButtonRef$curr5 = submitButtonRef.current) === null || _submitButtonRef$curr5 === void 0 ? void 0 : _submitButtonRef$curr5.onSpin(false);
-              return _context3.finish(14);
-
-            case 17:
-            case "end":
-              return _context3.stop();
-          }
-        }
-      }, _callee3, null, [[2, 9, 14, 17]]);
-    }));
-
-    return function onFinish(_x2) {
-      return _ref6.apply(this, arguments);
-    };
-  }();
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
-    className: "authing-g2-mfa-title"
-  }, t('login.inputEmailCode')), /*#__PURE__*/React.createElement("p", {
-    className: "authing-g2-mfa-tips"
-  }, sent ? _concatInstanceProperty(_context4 = "".concat(t('login.verifyCodeSended'), " ")).call(_context4, mailDesensitization(email)) : ''), /*#__PURE__*/React.createElement(_Form, {
-    form: form,
-    onFinish: onFinish,
-    onFinishFailed: function onFinishFailed() {
-      var _submitButtonRef$curr6;
-
-      return (_submitButtonRef$curr6 = submitButtonRef.current) === null || _submitButtonRef$curr6 === void 0 ? void 0 : _submitButtonRef$curr6.onError();
-    }
-  }, /*#__PURE__*/React.createElement(VerifyCodeFormItem, {
-    codeLength: codeLength,
-    ruleKeyword: t('common.captchaCode')
-  }, /*#__PURE__*/React.createElement(VerifyCodeInput, {
-    length: codeLength,
-    onFinish: onFinish
-  })), /*#__PURE__*/React.createElement(SendCodeBtn, {
-    btnRef: sendCodeRef,
-    setSent: setSent,
-    beforeSend: function beforeSend() {
-      return sendVerifyCode();
-    },
-    type: "link"
-  }), /*#__PURE__*/React.createElement(SubmitButton, {
-    text: t('common.sure'),
-    ref: submitButtonRef,
-    className: "g2-mfa-submit-button"
-  })));
-};
-export var MFAEmail = function MFAEmail(_ref7) {
-  var _config$__publicConfi;
-
-  var userEmail = _ref7.email,
-      mfaToken = _ref7.mfaToken,
-      mfaLogin = _ref7.mfaLogin,
-      config = _ref7.config;
-
-  var _useState3 = useState(userEmail),
-      _useState4 = _slicedToArray(_useState3, 2),
-      email = _useState4[0],
-      setEmail = _useState4[1];
-
-  var sendCodeRef = useRef(null);
-  var codeLength = (_config$__publicConfi = config.__publicConfig__) === null || _config$__publicConfi === void 0 ? void 0 : _config$__publicConfi.verifyCodeLength;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, email ? /*#__PURE__*/React.createElement(VerifyMFAEmail, {
-    mfaToken: mfaToken,
-    email: email,
-    onVerify: function onVerify(code, data) {
-      mfaLogin(code, data);
-    },
-    sendCodeRef: sendCodeRef,
-    codeLength: codeLength !== null && codeLength !== void 0 ? codeLength : 4
-  }) : /*#__PURE__*/React.createElement(BindMFAEmail, {
-    config: config,
-    mfaToken: mfaToken,
-    onBind: function onBind(email) {
-      var _sendCodeRef$current;
-
-      console.log('email', email);
-      setEmail(email);
-      (_sendCodeRef$current = sendCodeRef.current) === null || _sendCodeRef$current === void 0 ? void 0 : _sendCodeRef$current.click();
-    }
-  }));
-};

package/es/MFA/core/face.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const MFAFace: (props: any) => JSX.Element;