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

package/es/AuthingGuard/Forms/MfaResetCodeForm/Step2.js

@@ -0,0 +1,44 @@
+import "antd/lib/button/style";
+import _Button from "antd/lib/button";
+import "antd/lib/form/style";
+import _Form from "antd/lib/form";
+import "antd/lib/checkbox/style";
+import _Checkbox from "antd/lib/checkbox";
+import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
+import React from 'react';
+import { CopyAbleText } from '../../../CopyAbleText';
+import { useTranslation } from 'react-i18next';
+export var MfaResetStep2 = function MfaResetStep2(_ref) {
+  var recoverCode = _ref.recoverCode,
+      onFinish = _ref.onFinish;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  return /*#__PURE__*/React.createElement(_Form, {
+    onFinish: onFinish
+  }, /*#__PURE__*/React.createElement(CopyAbleText, {
+    className: "authing-guard-secret-block"
+  }, recoverCode), /*#__PURE__*/React.createElement(_Form.Item, {
+    valuePropName: "checked",
+    rules: [{
+      validateTrigger: [],
+      validator: function validator(r, v) {
+        return new _Promise(function (resolve, reject) {
+          if (!v) {
+            reject(t('login.confirmSavedCode'));
+          }
+
+          resolve(true);
+        });
+      }
+    }],
+    name: "MfaCopyRecoverCode"
+  }, /*#__PURE__*/React.createElement(_Checkbox, null, t('login.rememberedSecret'))), /*#__PURE__*/React.createElement(_Button, {
+    className: "authing-guard-mfa-confirm-btn",
+    htmlType: "submit",
+    block: true,
+    type: "primary",
+    size: "large"
+  }, t('common.sure')));
+};

package/es/AuthingGuard/Forms/MfaResetCodeForm/index.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { MfaResetForm } from '../../types';
+export declare const MfaResetCodeForm: FC<MfaResetForm>;

package/es/AuthingGuard/Forms/MfaResetCodeForm/index.js

@@ -0,0 +1,58 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import { MfaResetStep1 } from './Step1';
+import { MfaResetStep2 } from './Step2';
+import { useGuardContext } from '../../../context/global/context';
+import { useTranslation } from 'react-i18next';
+export var MfaResetCodeForm = function MfaResetCodeForm(_ref) {
+  var goVerify = _ref.goVerify,
+      onSuccess = _ref.onSuccess,
+      onFail = _ref.onFail;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  var _useGuardContext = useGuardContext(),
+      mfaToken = _useGuardContext.state.mfaData.mfaToken;
+
+  var _useState = useState(1),
+      _useState2 = _slicedToArray(_useState, 2),
+      step = _useState2[0],
+      setStep = _useState2[1];
+
+  var _useState3 = useState(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      user = _useState4[0],
+      setUser = _useState4[1];
+
+  var _useState5 = useState(''),
+      _useState6 = _slicedToArray(_useState5, 2),
+      recoverCode = _useState6[0],
+      setRecoverCode = _useState6[1];
+
+  var onReset = function onReset(user) {
+    setStep(2);
+    setUser(user);
+    setRecoverCode(user.recoveryCode);
+  };
+
+  var stepMap = {
+    1: /*#__PURE__*/React.createElement(MfaResetStep1, {
+      onFail: onFail,
+      goVerify: goVerify,
+      onSuccess: onReset,
+      mfaToken: mfaToken
+    }),
+    2: /*#__PURE__*/React.createElement(MfaResetStep2, {
+      onFinish: function onFinish() {
+        return onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(user);
+      },
+      recoverCode: recoverCode
+    })
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h2", {
+    className: "authing-guard-mfa-reset-title"
+  }, t('common.useRecoverCode')), /*#__PURE__*/React.createElement("p", {
+    className: "authing-guard-mfa-reset-tips"
+  }, t('login.mfaAfterReset')), stepMap[step]);
+};

package/es/AuthingGuard/Forms/MfaVerifyForm/index.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { MfaVerifyForm } from '../../types';
+export declare const MFAVerifyForm: FC<MfaVerifyForm>;

package/es/AuthingGuard/Forms/MfaVerifyForm/index.js

@@ -0,0 +1,137 @@
+import "antd/lib/button/style";
+import _Button from "antd/lib/button";
+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 _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _fillInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/fill";
+import _someInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/some";
+import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
+import React, { useState } from 'react';
+import { VerifyCodeInput } from '../../../VerifyCodeInput';
+import { useGuardContext } from '../../../context/global/context';
+import { useTranslation } from 'react-i18next';
+var CODE_LEN = 6;
+export var MFAVerifyForm = function MFAVerifyForm(_ref) {
+  var _context;
+
+  var onSuccess = _ref.onSuccess,
+      onFail = _ref.onFail,
+      goReset = _ref.goReset;
+
+  var _useGuardContext = useGuardContext(),
+      _useGuardContext$stat = _useGuardContext.state,
+      authClient = _useGuardContext$stat.authClient,
+      mfaToken = _useGuardContext$stat.mfaData.mfaToken;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  var _Form$useForm = _Form.useForm(),
+      _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+      rawForm = _Form$useForm2[0];
+
+  var _useState = useState(_fillInstanceProperty(_context = new Array(CODE_LEN)).call(_context, '')),
+      _useState2 = _slicedToArray(_useState, 2),
+      MfaCode = _useState2[0],
+      setMFACode = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      loading = _useState4[0],
+      setLoading = _useState4[1];
+
+  var onFinish = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(values) {
+      var user;
+      return _regeneratorRuntime.wrap(function _callee$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.prev = 0;
+              _context2.next = 3;
+              return authClient.mfa.verifyTotpMfa({
+                mfaToken: mfaToken,
+                totp: MfaCode.join('')
+              });
+
+            case 3:
+              user = _context2.sent;
+              onSuccess && onSuccess(user);
+              _context2.next = 10;
+              break;
+
+            case 7:
+              _context2.prev = 7;
+              _context2.t0 = _context2["catch"](0);
+              onFail === null || onFail === void 0 ? void 0 : onFail(_context2.t0);
+
+            case 10:
+              _context2.prev = 10;
+              setLoading(false);
+              return _context2.finish(10);
+
+            case 13:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee, null, [[0, 7, 10, 13]]);
+    }));
+
+    return function onFinish(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h3", {
+    className: "authing-guard-mfa-title"
+  }, t('login.accPwdLoginVerify')), /*#__PURE__*/React.createElement("p", {
+    className: "authing-guard-mfa-tips"
+  }, t('login.inputSixCode')), /*#__PURE__*/React.createElement(_Form, {
+    form: rawForm,
+    onSubmitCapture: function onSubmitCapture() {
+      return setLoading(true);
+    },
+    onFinish: onFinish,
+    onFinishFailed: function onFinishFailed() {
+      return setLoading(false);
+    }
+  }, /*#__PURE__*/React.createElement(_Form.Item, {
+    name: "mfaCode",
+    rules: [{
+      validateTrigger: [],
+      validator: function validator() {
+        if (_someInstanceProperty(MfaCode).call(MfaCode, function (item) {
+          return !item;
+        })) {
+          return _Promise.reject(t('login.inputFullMfaCode'));
+        }
+
+        return _Promise.resolve();
+      }
+    }]
+  }, /*#__PURE__*/React.createElement(VerifyCodeInput, {
+    verifyCode: MfaCode,
+    setVerifyCode: setMFACode
+  })), /*#__PURE__*/React.createElement(_Button, {
+    className: "authing-guard-mfa-confirm-btn",
+    loading: loading,
+    block: true,
+    htmlType: "submit",
+    type: "primary",
+    size: "large"
+  }, t('common.sure')), /*#__PURE__*/React.createElement("div", {
+    className: "authing-guard-form-actions"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "authing-guard-tip-btn-comb"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "authing-guard-tip"
+  }, t('common.hasLooseSaftyCode')), /*#__PURE__*/React.createElement(_Button, {
+    htmlType: "button",
+    onClick: goReset,
+    className: "authing-guard-text-btn",
+    type: "text"
+  }, t('common.useRecoverCode'))))));
+};

package/es/AuthingGuard/Forms/PasswordLoginForm/index.d.ts

@@ -0,0 +1,4 @@
+import { FormInstance } from 'antd/lib/form';
+import React from 'react';
+import { PasswordLoginFormProps } from '../../types';
+export declare const PasswordLoginForm: React.ForwardRefExoticComponent<PasswordLoginFormProps & React.RefAttributes<FormInstance<any>>>;

package/es/AuthingGuard/Forms/PasswordLoginForm/index.js

@@ -0,0 +1,359 @@
+import "antd/lib/alert/style";
+import _Alert from "antd/lib/alert";
+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 _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _sortInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/sort";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/trim";
+import { UserOutlined, LockOutlined } from '@ant-design/icons';
+import React, { forwardRef, useImperativeHandle, useMemo, useState } from 'react';
+import { getRequiredRules, getUserRegisterParams } from '../../../_utils';
+import { useGuardContext } from '../../../context/global/context';
+import { NEED_CAPTCHA } from '../../constants';
+import { LoginMethods } from '../../types';
+import { LoginFormFooter } from '../LoginFormFooter';
+import { useTranslation } from 'react-i18next';
+import { requestClient } from '../../../_utils/http';
+export var PasswordLoginForm = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var onSuccess = _ref.onSuccess,
+      onValidateFail = _ref.onValidateFail,
+      onFail = _ref.onFail;
+
+  var _useGuardContext = useGuardContext(),
+      state = _useGuardContext.state,
+      getValue = _useGuardContext.getValue;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  var config = state.config,
+      authClient = state.authClient,
+      realHost = state.realHost,
+      userPoolId = state.userPoolId,
+      appId = state.appId,
+      guardEvents = state.guardEvents;
+  var autoRegister = config.autoRegister;
+  var captchaUrl = "".concat(realHost, "/api/v2/security/captcha");
+
+  var getCaptchaUrl = function getCaptchaUrl() {
+    var _context;
+
+    return _concatInstanceProperty(_context = "".concat(captchaUrl, "?r=")).call(_context, +new Date());
+  };
+
+  var _Form$useForm = _Form.useForm(),
+      _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+      rawForm = _Form$useForm2[0];
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      needCaptcha = _useState2[0],
+      setNeedCaptcha = _useState2[1];
+
+  var _useState3 = useState(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      verifyCodeUrl = _useState4[0],
+      setVerifyCodeUrl = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      loading = _useState6[0],
+      setLoading = _useState6[1];
+
+  var onFinishFailed = function onFinishFailed(errorInfo) {
+    setLoading(false);
+    onValidateFail && onValidateFail(errorInfo);
+  };
+
+  var loginMethodsText = useMemo(function () {
+    return {
+      'email-password': {
+        t: t('common.email'),
+        sort: 2
+      },
+      'phone-password': {
+        t: t('common.phoneNumber'),
+        sort: 1
+      },
+      'username-password': {
+        t: t('common.username'),
+        sort: 0
+      }
+    };
+  }, [t]);
+  var usernamePlaceholder = useMemo(function () {
+    var _config$passwordLogin, _context2, _context3;
+
+    return t('login.inputAccount', {
+      text: (_config$passwordLogin = config.passwordLoginMethods) === null || _config$passwordLogin === void 0 ? void 0 : _mapInstanceProperty(_context2 = _sortInstanceProperty(_context3 = _mapInstanceProperty(_config$passwordLogin).call(_config$passwordLogin, function (item) {
+        return loginMethodsText[item];
+      })).call(_context3, function (a, b) {
+        return _sortInstanceProperty(a) - _sortInstanceProperty(b);
+      })).call(_context2, function (item) {
+        return item.t;
+      }).join(' / ')
+    });
+  }, [config.passwordLoginMethods, loginMethodsText, t]);
+  var identityRules = useMemo(function () {
+    var rules = getRequiredRules(t('common.accNotNull'));
+    var loginMethods = config.passwordLoginMethods;
+
+    if (loginMethods !== null && loginMethods !== void 0 && _includesInstanceProperty(loginMethods).call(loginMethods, 'email-password') && (loginMethods === null || loginMethods === void 0 ? void 0 : loginMethods.length) === 1) {
+      rules.push({
+        type: 'email',
+        message: t('common.emailFormatError')
+      });
+    }
+
+    return rules;
+  }, [config, t]);
+
+  var login = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(values) {
+      var _context4, _context5, _context6;
+
+      var identity, password, captchaCode, encrypt, _getValue, publicKey, autoRegister, _yield$requestClient$, code, data, message;
+
+      return _regeneratorRuntime.wrap(function _callee$(_context7) {
+        while (1) {
+          switch (_context7.prev = _context7.next) {
+            case 0:
+              identity = values.identity && _trimInstanceProperty(_context4 = values.identity).call(_context4);
+              password = values.password && _trimInstanceProperty(_context5 = values.password).call(_context5);
+              captchaCode = values.captchaCode && _trimInstanceProperty(_context6 = values.captchaCode).call(_context6);
+              encrypt = authClient.options.encryptFunction;
+              _getValue = getValue('config'), publicKey = _getValue.publicKey, autoRegister = _getValue.autoRegister;
+              _context7.t0 = requestClient;
+              _context7.t1 = identity;
+              _context7.next = 9;
+              return encrypt(password, publicKey);
+
+            case 9:
+              _context7.t2 = _context7.sent;
+              _context7.t3 = captchaCode;
+              _context7.t4 = getUserRegisterParams();
+              _context7.t5 = autoRegister;
+              _context7.t6 = {
+                account: _context7.t1,
+                password: _context7.t2,
+                captchaCode: _context7.t3,
+                customData: _context7.t4,
+                autoRegister: _context7.t5
+              };
+              _context7.t7 = {
+                headers: {
+                  'x-authing-userpool-id': userPoolId,
+                  'x-authing-app-id': appId
+                }
+              };
+              _context7.next = 17;
+              return _context7.t0.post.call(_context7.t0, '/api/v2/login/account', _context7.t6, _context7.t7);
+
+            case 17:
+              _yield$requestClient$ = _context7.sent;
+              code = _yield$requestClient$.code;
+              data = _yield$requestClient$.data;
+              message = _yield$requestClient$.message;
+
+              if (!(code === 200)) {
+                _context7.next = 25;
+                break;
+              }
+
+              return _context7.abrupt("return", data);
+
+            case 25:
+              _message.error(message); // eslint-disable-next-line no-throw-literal
+
+
+              throw {
+                code: code,
+                message: message,
+                data: data
+              };
+
+            case 27:
+            case "end":
+              return _context7.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function login(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var onFinish = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(values) {
+      var canLogin, user;
+      return _regeneratorRuntime.wrap(function _callee2$(_context8) {
+        while (1) {
+          switch (_context8.prev = _context8.next) {
+            case 0:
+              if (!guardEvents.onBeforeLogin) {
+                _context8.next = 15;
+                break;
+              }
+
+              _context8.prev = 1;
+              _context8.next = 4;
+              return guardEvents.onBeforeLogin({
+                type: LoginMethods.Password,
+                data: {
+                  identity: values.identity,
+                  password: values.password,
+                  captchaCode: values.captchaCode
+                }
+              }, authClient);
+
+            case 4:
+              canLogin = _context8.sent;
+
+              if (canLogin) {
+                _context8.next = 8;
+                break;
+              }
+
+              setLoading(false);
+              return _context8.abrupt("return");
+
+            case 8:
+              _context8.next = 15;
+              break;
+
+            case 10:
+              _context8.prev = 10;
+              _context8.t0 = _context8["catch"](1);
+
+              if (typeof _context8.t0 === 'string') {
+                _message.error(_context8.t0);
+              } else {
+                _message.error(_context8.t0.message);
+              }
+
+              setLoading(false);
+              return _context8.abrupt("return");
+
+            case 15:
+              _context8.prev = 15;
+              _context8.next = 18;
+              return login(values);
+
+            case 18:
+              user = _context8.sent;
+              user && onSuccess && onSuccess(user);
+              _context8.next = 26;
+              break;
+
+            case 22:
+              _context8.prev = 22;
+              _context8.t1 = _context8["catch"](15);
+
+              if (_context8.t1.code === NEED_CAPTCHA && verifyCodeUrl === null) {
+                setNeedCaptcha(true);
+                setVerifyCodeUrl(getCaptchaUrl());
+              }
+
+              onFail && onFail(_context8.t1);
+
+            case 26:
+              _context8.prev = 26;
+              setLoading(false);
+              return _context8.finish(26);
+
+            case 29:
+            case "end":
+              return _context8.stop();
+          }
+        }
+      }, _callee2, null, [[1, 10], [15, 22, 26, 29]]);
+    }));
+
+    return function onFinish(_x2) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  useImperativeHandle(ref, function () {
+    return rawForm;
+  });
+  var formItems = [{
+    component: /*#__PURE__*/React.createElement(_Input, {
+      autoComplete: "email,username,tel",
+      size: "large",
+      placeholder: usernamePlaceholder,
+      prefix: /*#__PURE__*/React.createElement(UserOutlined, {
+        style: {
+          color: '#ddd'
+        }
+      })
+    }),
+    name: 'identity',
+    rules: identityRules
+  }, {
+    component: /*#__PURE__*/React.createElement(_Input.Password, {
+      size: "large",
+      placeholder: t('login.inputLoginPwd'),
+      prefix: /*#__PURE__*/React.createElement(LockOutlined, {
+        style: {
+          color: '#ddd'
+        }
+      })
+    }),
+    name: 'password',
+    rules: getRequiredRules(t('common.passwordNotNull'))
+  }, {
+    component: /*#__PURE__*/React.createElement(_Input, {
+      size: "large",
+      placeholder: t('login.inputCaptchaCode'),
+      addonAfter: /*#__PURE__*/React.createElement("img", {
+        src: verifyCodeUrl !== null && verifyCodeUrl !== void 0 ? verifyCodeUrl : '',
+        alt: t('login.captchaCode'),
+        style: {
+          height: '2em',
+          cursor: 'pointer'
+        },
+        onClick: function onClick() {
+          return setVerifyCodeUrl(getCaptchaUrl());
+        }
+      })
+    }),
+    name: 'captchaCode',
+    rules: getRequiredRules(t('common.captchaCodeNotNull')),
+    hide: !needCaptcha
+  }];
+  return /*#__PURE__*/React.createElement(_Form, {
+    form: rawForm,
+    onSubmitCapture: function onSubmitCapture() {
+      return setLoading(true);
+    },
+    onFinishFailed: onFinishFailed,
+    onFinish: onFinish
+  }, autoRegister && /*#__PURE__*/React.createElement(_Alert, {
+    message: t('login.autoRegister'),
+    style: {
+      marginBottom: 24
+    }
+  }), _mapInstanceProperty(formItems).call(formItems, function (item) {
+    return !item.hide && /*#__PURE__*/React.createElement(_Form.Item, {
+      key: item.name,
+      name: item.name,
+      rules: item.rules
+    }, item.component);
+  }), /*#__PURE__*/React.createElement(LoginFormFooter, {
+    needRegister: true,
+    needRestPwd: true,
+    loading: loading
+  }));
+});

package/es/AuthingGuard/Forms/PhoneCodeLoginForm/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { FormInstance } from 'antd/lib/form';
+import { PhoneCodeLoginFormProps } from '../../types';
+export declare const PhoneCodeLoginForm: React.ForwardRefExoticComponent<PhoneCodeLoginFormProps & React.RefAttributes<FormInstance<any>>>;