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

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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,175 @@
+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

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

package/es/MFA/codemap.js

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,302 @@
+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

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