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

package/lib/MFA/core/sms.js

@@ -0,0 +1,324 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VerifyMFASms = exports.MFASms = exports.BindMFASms = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _antd = require("antd");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactI18next = require("react-i18next");
+
+var _VerifyCodeInput = require("../VerifyCodeInput");
+
+var _authClient = require("../../Guard/authClient");
+
+var _SendCodeBtn = require("../../SendCode/SendCodeBtn");
+
+var _SubmitButton = _interopRequireDefault(require("../../SubmitButton"));
+
+var _ValidatorRules = _interopRequireDefault(require("../../ValidatorRules"));
+
+var _VerifyCodeFormItem = require("../VerifyCodeInput/VerifyCodeFormItem");
+
+var _InputNumber = require("../../InputNumber");
+
+var _IconFont = require("../../IconFont");
+
+var _utils = require("../../_utils");
+
+var BindMFASms = function BindMFASms(_ref) {
+  var mfaToken = _ref.mfaToken,
+      onBind = _ref.onBind,
+      config = _ref.config;
+  var submitButtonRef = (0, _react.useRef)(null);
+
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+      t = _useTranslation.t;
+
+  var _Form$useForm = _antd.Form.useForm(),
+      _Form$useForm2 = (0, _slicedToArray2.default)(_Form$useForm, 1),
+      form = _Form$useForm2[0];
+
+  var ref = (0, _react.useRef)(null);
+
+  var onFinish = /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(_ref2) {
+      var phone, _submitButtonRef$curr, _submitButtonRef$curr2;
+
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              phone = _ref2.phone;
+              submitButtonRef.current.onSpin(true);
+              _context.next = 4;
+              return form.validateFields();
+
+            case 4:
+              try {
+                onBind(phone);
+              } catch (e) {
+                // do nothing
+                (_submitButtonRef$curr = submitButtonRef.current) === null || _submitButtonRef$curr === void 0 ? void 0 : _submitButtonRef$curr.onError();
+              } 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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h3", {
+    className: "authing-g2-mfa-title"
+  }, t('common.bindPhone')), /*#__PURE__*/_react.default.createElement("p", {
+    className: "authing-g2-mfa-tips"
+  }, t('login.bindPhoneInfo')), /*#__PURE__*/_react.default.createElement(_antd.Form, {
+    form: form,
+    onFinish: onFinish,
+    onFinishFailed: function onFinishFailed() {
+      return submitButtonRef.current.onError();
+    },
+    onValuesChange: function onValuesChange(values) {
+      var _ref$current;
+
+      (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.check(values);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_ValidatorRules.default.Phone, {
+    className: "authing-g2-input-form",
+    name: "phone",
+    form: form,
+    ref: ref,
+    checkRepeat: true,
+    required: true
+  }, /*#__PURE__*/_react.default.createElement(_InputNumber.InputNumber, {
+    className: "authing-g2-input",
+    autoComplete: "tel",
+    size: "large",
+    placeholder: t('login.inputPhone'),
+    prefix: /*#__PURE__*/_react.default.createElement(_IconFont.IconFont, {
+      type: "authing-a-smartphone-line1",
+      style: {
+        color: '#878A95'
+      }
+    })
+  })), /*#__PURE__*/_react.default.createElement(_SubmitButton.default, {
+    text: t('common.sure'),
+    ref: submitButtonRef
+  })));
+};
+
+exports.BindMFASms = BindMFASms;
+
+var VerifyMFASms = function VerifyMFASms(_ref4) {
+  var mfaToken = _ref4.mfaToken,
+      phone = _ref4.phone,
+      onVerify = _ref4.onVerify,
+      sendCodeRef = _ref4.sendCodeRef,
+      _ref4$codeLength = _ref4.codeLength,
+      codeLength = _ref4$codeLength === void 0 ? 4 : _ref4$codeLength;
+  var authClient = (0, _authClient.useGuardAuthClient)();
+  var submitButtonRef = (0, _react.useRef)(null);
+
+  var _useTranslation2 = (0, _reactI18next.useTranslation)(),
+      t = _useTranslation2.t;
+
+  var _Form$useForm3 = _antd.Form.useForm(),
+      _Form$useForm4 = (0, _slicedToArray2.default)(_Form$useForm3, 1),
+      form = _Form$useForm4[0];
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      sent = _useState2[0],
+      setSent = _useState2[1];
+
+  var onFinish = /*#__PURE__*/function () {
+    var _ref5 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(values) {
+      var mfaCode, user, error, _submitButtonRef$curr3;
+
+      return _regenerator.default.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              submitButtonRef.current.onSpin(true);
+              mfaCode = form.getFieldValue('mfaCode');
+              _context2.prev = 2;
+              _context2.next = 5;
+              return authClient.mfa.verifyAppSmsMfa({
+                mfaToken: mfaToken,
+                phone: phone,
+                code: mfaCode.join('')
+              });
+
+            case 5:
+              user = _context2.sent;
+              // TODO
+              onVerify(200, user);
+              _context2.next = 14;
+              break;
+
+            case 9:
+              _context2.prev = 9;
+              _context2.t0 = _context2["catch"](2);
+              error = JSON.parse(_context2.t0.message);
+              submitButtonRef.current.onError();
+              onVerify(error.code, error);
+
+            case 14:
+              _context2.prev = 14;
+              (_submitButtonRef$curr3 = submitButtonRef.current) === null || _submitButtonRef$curr3 === void 0 ? void 0 : _submitButtonRef$curr3.onSpin(false);
+              return _context2.finish(14);
+
+            case 17:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2, null, [[2, 9, 14, 17]]);
+    }));
+
+    return function onFinish(_x2) {
+      return _ref5.apply(this, arguments);
+    };
+  }();
+
+  var tips = (0, _react.useMemo)(function () {
+    return sent ? "".concat(t('login.verifyCodeSended'), " ").concat((0, _utils.phoneDesensitization)(phone)) : '';
+  }, [phone, sent, t]);
+
+  var sendVerifyCode = /*#__PURE__*/function () {
+    var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
+      var errorMessage;
+      return _regenerator.default.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              _context3.prev = 0;
+              _context3.next = 3;
+              return authClient.sendSmsCode(phone);
+
+            case 3:
+              return _context3.abrupt("return", true);
+
+            case 6:
+              _context3.prev = 6;
+              _context3.t0 = _context3["catch"](0);
+
+              if (!(_context3.t0.code === 'ECONNABORTED')) {
+                _context3.next = 11;
+                break;
+              }
+
+              _antd.message.error(t('login.sendCodeTimeout'));
+
+              return _context3.abrupt("return", false);
+
+            case 11:
+              errorMessage = JSON.parse(_context3.t0.message);
+
+              _antd.message.error(errorMessage.message);
+
+              return _context3.abrupt("return", false);
+
+            case 14:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3, null, [[0, 6]]);
+    }));
+
+    return function sendVerifyCode() {
+      return _ref6.apply(this, arguments);
+    };
+  }();
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h3", {
+    className: "authing-g2-mfa-title"
+  }, t('login.inputPhoneCode')), /*#__PURE__*/_react.default.createElement("p", {
+    className: "authing-g2-mfa-tips"
+  }, tips), /*#__PURE__*/_react.default.createElement(_antd.Form, {
+    form: form,
+    onFinish: onFinish,
+    onFinishFailed: function onFinishFailed() {
+      return submitButtonRef.current.onError();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_VerifyCodeFormItem.VerifyCodeFormItem, {
+    codeLength: codeLength,
+    ruleKeyword: t('common.captchaCode')
+  }, /*#__PURE__*/_react.default.createElement(_VerifyCodeInput.VerifyCodeInput, {
+    length: codeLength,
+    onFinish: onFinish
+  })), /*#__PURE__*/_react.default.createElement(_SendCodeBtn.SendCodeBtn, {
+    btnRef: sendCodeRef,
+    beforeSend: function beforeSend() {
+      return sendVerifyCode();
+    },
+    type: "link",
+    setSent: setSent
+  }), /*#__PURE__*/_react.default.createElement(_SubmitButton.default, {
+    text: t('common.sure'),
+    ref: submitButtonRef,
+    className: "g2-mfa-submit-button"
+  })));
+};
+
+exports.VerifyMFASms = VerifyMFASms;
+
+var MFASms = function MFASms(_ref7) {
+  var _config$__publicConfi;
+
+  var userPhone = _ref7.phone,
+      mfaToken = _ref7.mfaToken,
+      mfaLogin = _ref7.mfaLogin,
+      config = _ref7.config;
+
+  var _useState3 = (0, _react.useState)(userPhone),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      phone = _useState4[0],
+      setPhone = _useState4[1];
+
+  var sendCodeRef = (0, _react.useRef)(null);
+  var codeLength = (_config$__publicConfi = config.__publicConfig__) === null || _config$__publicConfi === void 0 ? void 0 : _config$__publicConfi.verifyCodeLength;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, phone ? /*#__PURE__*/_react.default.createElement(VerifyMFASms, {
+    mfaToken: mfaToken,
+    phone: phone,
+    onVerify: function onVerify(code, data) {
+      mfaLogin(code, data);
+    },
+    codeLength: codeLength !== null && codeLength !== void 0 ? codeLength : 4,
+    sendCodeRef: sendCodeRef
+  }) : /*#__PURE__*/_react.default.createElement(BindMFASms, {
+    config: config,
+    mfaToken: mfaToken,
+    onBind: function onBind(phone) {
+      var _sendCodeRef$current;
+
+      setPhone(phone);
+      (_sendCodeRef$current = sendCodeRef.current) === null || _sendCodeRef$current === void 0 ? void 0 : _sendCodeRef$current.click();
+    }
+  }));
+};
+
+exports.MFASms = MFASms;

package/lib/MFA/core/totp.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { GuardMFAInitData, MFAConfig } from '../interface';
+export interface BindMFATotpProps {
+    initData: GuardMFAInitData;
+    changeModule: any;
+}
+export declare const BindMFATotp: React.FC<BindMFATotpProps>;
+export interface VerifyMFATotpProps {
+    mfaToken: string;
+    mfaLogin: any;
+}
+export declare const VerifyMFATotp: React.FC<VerifyMFATotpProps>;
+export interface MFATotpProps {
+    changeModule: any;
+    config: MFAConfig;
+    initData: GuardMFAInitData;
+    mfaLogin: any;
+}
+export declare const MFATotp: React.FC<MFATotpProps>;

package/lib/MFA/core/totp.js

@@ -0,0 +1,177 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VerifyMFATotp = exports.MFATotp = exports.BindMFATotp = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _antd = require("antd");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactI18next = require("react-i18next");
+
+var _reactUse = require("react-use");
+
+var _module = require("../../Guard/module");
+
+var _guradHttp = require("../../_utils/guradHttp");
+
+var _SubmitButton = _interopRequireDefault(require("../../SubmitButton"));
+
+var _VerifyCodeFormItem = require("../VerifyCodeInput/VerifyCodeFormItem");
+
+var _VerifyCodeInput = require("../VerifyCodeInput");
+
+var _IconFont = require("../../IconFont");
+
+var BindMFATotp = function BindMFATotp(_ref) {
+  var changeModule = _ref.changeModule,
+      initData = _ref.initData;
+
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+      t = _useTranslation.t;
+
+  var next = function next() {
+    return changeModule(_module.GuardModuleType.BIND_TOTP, initData);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", {
+    className: "authing-g2-mfa-title"
+  }, t('common.bindTotp')), /*#__PURE__*/_react.default.createElement("p", {
+    className: "authing-g2-mfa-tips"
+  }, t('common.otpText1')), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_IconFont.IconFont, {
+    type: "authing-otp",
+    style: {
+      width: 247,
+      height: 131
+    }
+  })), /*#__PURE__*/_react.default.createElement(_SubmitButton.default, {
+    text: t('common.sure'),
+    onClick: next,
+    className: "g2-mfa-submit-button bind-totp"
+  }));
+};
+
+exports.BindMFATotp = BindMFATotp;
+
+var VerifyMFATotp = function VerifyMFATotp(_ref2) {
+  var mfaToken = _ref2.mfaToken,
+      mfaLogin = _ref2.mfaLogin;
+
+  var _useTranslation2 = (0, _reactI18next.useTranslation)(),
+      t = _useTranslation2.t;
+
+  var _Form$useForm = _antd.Form.useForm(),
+      _Form$useForm2 = (0, _slicedToArray2.default)(_Form$useForm, 1),
+      form = _Form$useForm2[0];
+
+  var submitButtonRef = (0, _react.useRef)(null);
+
+  var _useGuardHttp = (0, _guradHttp.useGuardHttp)(),
+      post = _useGuardHttp.post;
+
+  var _useAsyncFn = (0, _reactUse.useAsyncFn)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+    var mfaCode, _yield$post, code, data, message;
+
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            submitButtonRef.current.onSpin(true);
+            mfaCode = form.getFieldValue('mfaCode');
+            _context.prev = 2;
+            _context.next = 5;
+            return post('/api/v2/mfa/totp/verify', {
+              totp: mfaCode.join('')
+            }, {
+              headers: {
+                authorization: mfaToken
+              }
+            });
+
+          case 5:
+            _yield$post = _context.sent;
+            code = _yield$post.code;
+            data = _yield$post.data;
+            message = _yield$post.message;
+
+            if (code !== 200) {
+              mfaLogin(code, {
+                message: message
+              });
+              submitButtonRef.current.onError();
+            } else {
+              mfaLogin(200, data);
+            }
+
+          case 10:
+            _context.prev = 10;
+            submitButtonRef.current.onSpin(false);
+            return _context.finish(10);
+
+          case 13:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, null, [[2,, 10, 13]]);
+  })), [mfaToken]),
+      _useAsyncFn2 = (0, _slicedToArray2.default)(_useAsyncFn, 2),
+      onFinish = _useAsyncFn2[1];
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", {
+    className: "authing-g2-mfa-title"
+  }, t('login.accPwdLoginVerify')), /*#__PURE__*/_react.default.createElement("p", {
+    className: "authing-g2-mfa-tips"
+  }, t('login.inputSixCode')), /*#__PURE__*/_react.default.createElement(_antd.Form, {
+    form: form,
+    onSubmitCapture: function onSubmitCapture() {},
+    onFinish: onFinish,
+    onFinishFailed: function onFinishFailed() {
+      return submitButtonRef.current.onError();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_VerifyCodeFormItem.VerifyCodeFormItem, {
+    codeLength: 6
+  }, /*#__PURE__*/_react.default.createElement(_VerifyCodeInput.VerifyCodeInput, {
+    length: 6,
+    showDivider: true,
+    gutter: '10px',
+    onFinish: onFinish
+  })), /*#__PURE__*/_react.default.createElement(_SubmitButton.default, {
+    text: t('common.sure'),
+    ref: submitButtonRef
+  })));
+};
+
+exports.VerifyMFATotp = VerifyMFATotp;
+
+var MFATotp = function MFATotp(_ref4) {
+  var changeModule = _ref4.changeModule,
+      initData = _ref4.initData,
+      mfaLogin = _ref4.mfaLogin;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, initData.totpMfaEnabled ? /*#__PURE__*/_react.default.createElement(VerifyMFATotp, {
+    mfaToken: initData.mfaToken,
+    mfaLogin: mfaLogin
+  }) : /*#__PURE__*/_react.default.createElement(BindMFATotp, {
+    initData: initData,
+    changeModule: changeModule
+  }));
+};
+
+exports.MFATotp = MFATotp;

package/lib/MFA/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { GuardMFAViewProps } from './interface';
+export declare const GuardMFAView: React.FC<GuardMFAViewProps>;