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

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

@@ -0,0 +1,368 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PasswordLoginForm = 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 _icons = require("@ant-design/icons");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _utils = require("../../../_utils");
+
+var _context3 = require("../../../context/global/context");
+
+var _constants = require("../../../../components/AuthingGuard/constants");
+
+var _types = require("../../../../components/AuthingGuard/types");
+
+var _LoginFormFooter = require("../../../../components/AuthingGuard/Forms/LoginFormFooter");
+
+var _reactI18next = require("react-i18next");
+
+var _http = require("../../../_utils/http");
+
+var PasswordLoginForm = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var onSuccess = _ref.onSuccess,
+      onValidateFail = _ref.onValidateFail,
+      onFail = _ref.onFail;
+
+  var _useGuardContext = (0, _context3.useGuardContext)(),
+      state = _useGuardContext.state,
+      getValue = _useGuardContext.getValue;
+
+  var _useTranslation = (0, _reactI18next.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() {
+    return "".concat(captchaUrl, "?r=").concat(+new Date());
+  };
+
+  var _Form$useForm = _antd.Form.useForm(),
+      _Form$useForm2 = (0, _slicedToArray2.default)(_Form$useForm, 1),
+      rawForm = _Form$useForm2[0];
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      needCaptcha = _useState2[0],
+      setNeedCaptcha = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(null),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      verifyCodeUrl = _useState4[0],
+      setVerifyCodeUrl = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      loading = _useState6[0],
+      setLoading = _useState6[1];
+
+  var onFinishFailed = function onFinishFailed(errorInfo) {
+    setLoading(false);
+    onValidateFail && onValidateFail(errorInfo);
+  };
+
+  var loginMethodsText = (0, _react.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 = (0, _react.useMemo)(function () {
+    var _config$passwordLogin;
+
+    return t('login.inputAccount', {
+      text: (_config$passwordLogin = config.passwordLoginMethods) === null || _config$passwordLogin === void 0 ? void 0 : _config$passwordLogin.map(function (item) {
+        return loginMethodsText[item];
+      }).sort(function (a, b) {
+        return a.sort - b.sort;
+      }).map(function (item) {
+        return item.t;
+      }).join(' / ')
+    });
+  }, [config.passwordLoginMethods, loginMethodsText, t]);
+  var identityRules = (0, _react.useMemo)(function () {
+    var rules = (0, _utils.getRequiredRules)(t('common.accNotNull'));
+    var loginMethods = config.passwordLoginMethods;
+
+    if (loginMethods !== null && loginMethods !== void 0 && loginMethods.includes('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 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(values) {
+      var identity, password, captchaCode, encrypt, _getValue, publicKey, autoRegister, _yield$requestClient$, code, data, message;
+
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              identity = values.identity && values.identity.trim();
+              password = values.password && values.password.trim();
+              captchaCode = values.captchaCode && values.captchaCode.trim();
+              encrypt = authClient.options.encryptFunction;
+              _getValue = getValue('config'), publicKey = _getValue.publicKey, autoRegister = _getValue.autoRegister;
+              _context.t0 = _http.requestClient;
+              _context.t1 = identity;
+              _context.next = 9;
+              return encrypt(password, publicKey);
+
+            case 9:
+              _context.t2 = _context.sent;
+              _context.t3 = captchaCode;
+              _context.t4 = (0, _utils.getUserRegisterParams)();
+              _context.t5 = autoRegister;
+              _context.t6 = {
+                account: _context.t1,
+                password: _context.t2,
+                captchaCode: _context.t3,
+                customData: _context.t4,
+                autoRegister: _context.t5
+              };
+              _context.t7 = {
+                headers: {
+                  'x-authing-userpool-id': userPoolId,
+                  'x-authing-app-id': appId
+                }
+              };
+              _context.next = 17;
+              return _context.t0.post.call(_context.t0, '/api/v2/login/account', _context.t6, _context.t7);
+
+            case 17:
+              _yield$requestClient$ = _context.sent;
+              code = _yield$requestClient$.code;
+              data = _yield$requestClient$.data;
+              message = _yield$requestClient$.message;
+
+              if (!(code === 200)) {
+                _context.next = 25;
+                break;
+              }
+
+              return _context.abrupt("return", data);
+
+            case 25:
+              _antd.message.error(message); // eslint-disable-next-line no-throw-literal
+
+
+              throw {
+                code: code,
+                message: message,
+                data: data
+              };
+
+            case 27:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function login(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var onFinish = /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(values) {
+      var canLogin, user;
+      return _regenerator.default.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              if (!guardEvents.onBeforeLogin) {
+                _context2.next = 15;
+                break;
+              }
+
+              _context2.prev = 1;
+              _context2.next = 4;
+              return guardEvents.onBeforeLogin({
+                type: _types.LoginMethods.Password,
+                data: {
+                  identity: values.identity,
+                  password: values.password,
+                  captchaCode: values.captchaCode
+                }
+              }, authClient);
+
+            case 4:
+              canLogin = _context2.sent;
+
+              if (canLogin) {
+                _context2.next = 8;
+                break;
+              }
+
+              setLoading(false);
+              return _context2.abrupt("return");
+
+            case 8:
+              _context2.next = 15;
+              break;
+
+            case 10:
+              _context2.prev = 10;
+              _context2.t0 = _context2["catch"](1);
+
+              if (typeof _context2.t0 === 'string') {
+                _antd.message.error(_context2.t0);
+              } else {
+                _antd.message.error(_context2.t0.message);
+              }
+
+              setLoading(false);
+              return _context2.abrupt("return");
+
+            case 15:
+              _context2.prev = 15;
+              _context2.next = 18;
+              return login(values);
+
+            case 18:
+              user = _context2.sent;
+              user && onSuccess && onSuccess(user);
+              _context2.next = 26;
+              break;
+
+            case 22:
+              _context2.prev = 22;
+              _context2.t1 = _context2["catch"](15);
+
+              if (_context2.t1.code === _constants.NEED_CAPTCHA && verifyCodeUrl === null) {
+                setNeedCaptcha(true);
+                setVerifyCodeUrl(getCaptchaUrl());
+              }
+
+              onFail && onFail(_context2.t1);
+
+            case 26:
+              _context2.prev = 26;
+              setLoading(false);
+              return _context2.finish(26);
+
+            case 29:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2, null, [[1, 10], [15, 22, 26, 29]]);
+    }));
+
+    return function onFinish(_x2) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return rawForm;
+  });
+  var formItems = [{
+    component: /*#__PURE__*/_react.default.createElement(_antd.Input, {
+      autoComplete: "email,username,tel",
+      size: "large",
+      placeholder: usernamePlaceholder,
+      prefix: /*#__PURE__*/_react.default.createElement(_icons.UserOutlined, {
+        style: {
+          color: '#ddd'
+        }
+      })
+    }),
+    name: 'identity',
+    rules: identityRules
+  }, {
+    component: /*#__PURE__*/_react.default.createElement(_antd.Input.Password, {
+      size: "large",
+      placeholder: t('login.inputLoginPwd'),
+      prefix: /*#__PURE__*/_react.default.createElement(_icons.LockOutlined, {
+        style: {
+          color: '#ddd'
+        }
+      })
+    }),
+    name: 'password',
+    rules: (0, _utils.getRequiredRules)(t('common.passwordNotNull'))
+  }, {
+    component: /*#__PURE__*/_react.default.createElement(_antd.Input, {
+      size: "large",
+      placeholder: t('login.inputCaptchaCode'),
+      addonAfter: /*#__PURE__*/_react.default.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: (0, _utils.getRequiredRules)(t('common.captchaCodeNotNull')),
+    hide: !needCaptcha
+  }];
+  return /*#__PURE__*/_react.default.createElement(_antd.Form, {
+    form: rawForm,
+    onSubmitCapture: function onSubmitCapture() {
+      return setLoading(true);
+    },
+    onFinishFailed: onFinishFailed,
+    onFinish: onFinish
+  }, autoRegister && /*#__PURE__*/_react.default.createElement(_antd.Alert, {
+    message: t('login.autoRegister'),
+    style: {
+      marginBottom: 24
+    }
+  }), formItems.map(function (item) {
+    return !item.hide && /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+      key: item.name,
+      name: item.name,
+      rules: item.rules
+    }, item.component);
+  }), /*#__PURE__*/_react.default.createElement(_LoginFormFooter.LoginFormFooter, {
+    needRegister: true,
+    needRestPwd: true,
+    loading: loading
+  }));
+});
+exports.PasswordLoginForm = PasswordLoginForm;

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

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

package/lib/AuthingGuard/Forms/PhoneCodeLoginForm/index.js

@@ -0,0 +1,217 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PhoneCodeLoginForm = 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 _react = _interopRequireWildcard(require("react"));
+
+var _antd = require("antd");
+
+var _icons = require("@ant-design/icons");
+
+var _utils = require("../../../_utils");
+
+var _context2 = require("../../../context/global/context");
+
+var _types = require("../../../../components/AuthingGuard/types");
+
+var _SendPhoneCode = require("../../../../components/AuthingGuard/Forms/SendPhoneCode");
+
+var _LoginFormFooter = require("../../../../components/AuthingGuard/Forms/LoginFormFooter");
+
+var _reactI18next = require("react-i18next");
+
+var PhoneCodeLoginForm = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var onSuccess = _ref.onSuccess,
+      onFail = _ref.onFail,
+      onValidateFail = _ref.onValidateFail;
+
+  var _useGuardContext = (0, _context2.useGuardContext)(),
+      _useGuardContext$stat = _useGuardContext.state,
+      authClient = _useGuardContext$stat.authClient,
+      config = _useGuardContext$stat.config,
+      guardEvents = _useGuardContext$stat.guardEvents;
+
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+      t = _useTranslation.t;
+
+  var rulesMap = {
+    phone: (0, _utils.getRequiredRules)(t('login.inputPhone')).concat({
+      pattern: _utils.VALIDATE_PATTERN.phone,
+      message: t('common.phoneFormateError')
+    }),
+    code: (0, _utils.getRequiredRules)(t('common.inputVerifyCode'))
+  };
+
+  var _Form$useForm = _antd.Form.useForm(),
+      _Form$useForm2 = (0, _slicedToArray2.default)(_Form$useForm, 1),
+      rawForm = _Form$useForm2[0];
+
+  var _useState = (0, _react.useState)(''),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      phone = _useState2[0],
+      setPhone = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      loading = _useState4[0],
+      setLoading = _useState4[1];
+
+  var onFinishFailed = function onFinishFailed(errorInfo) {
+    setLoading(false);
+    onValidateFail && onValidateFail(errorInfo);
+  };
+
+  var onFinish = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(values) {
+      var canLogin, _phone, code, user;
+
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!guardEvents.onBeforeLogin) {
+                _context.next = 15;
+                break;
+              }
+
+              _context.prev = 1;
+              _context.next = 4;
+              return guardEvents.onBeforeLogin({
+                type: _types.LoginMethods.PhoneCode,
+                data: {
+                  phone: values.phone,
+                  code: values.code
+                }
+              }, authClient);
+
+            case 4:
+              canLogin = _context.sent;
+
+              if (canLogin) {
+                _context.next = 8;
+                break;
+              }
+
+              setLoading(false);
+              return _context.abrupt("return");
+
+            case 8:
+              _context.next = 15;
+              break;
+
+            case 10:
+              _context.prev = 10;
+              _context.t0 = _context["catch"](1);
+
+              if (typeof _context.t0 === 'string') {
+                _antd.message.error(_context.t0);
+              } else {
+                _antd.message.error(_context.t0.message);
+              }
+
+              setLoading(false);
+              return _context.abrupt("return");
+
+            case 15:
+              _context.prev = 15;
+              _phone = values.phone, code = values.code;
+              _context.next = 19;
+              return authClient.loginByPhoneCode(_phone, code, {
+                params: (0, _utils.getUserRegisterParams)()
+              });
+
+            case 19:
+              user = _context.sent;
+              onSuccess && onSuccess(user);
+              _context.next = 26;
+              break;
+
+            case 23:
+              _context.prev = 23;
+              _context.t1 = _context["catch"](15);
+              onFail && onFail(_context.t1);
+
+            case 26:
+              _context.prev = 26;
+              setLoading(false);
+              return _context.finish(26);
+
+            case 29:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[1, 10], [15, 23, 26, 29]]);
+    }));
+
+    return function onFinish(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return rawForm;
+  });
+  return /*#__PURE__*/_react.default.createElement(_antd.Form, {
+    form: rawForm,
+    onSubmitCapture: function onSubmitCapture() {
+      return setLoading(true);
+    },
+    onFinishFailed: onFinishFailed,
+    onFinish: onFinish
+  }, config.autoRegister && /*#__PURE__*/_react.default.createElement(_antd.Alert, {
+    message: t('login.phoneAutoRegister'),
+    style: {
+      marginBottom: 24
+    }
+  }), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    name: "phone",
+    rules: rulesMap.phone
+  }, /*#__PURE__*/_react.default.createElement(_antd.Input, {
+    autoComplete: "tel",
+    onChange: function onChange(e) {
+      setPhone(e.target.value);
+    },
+    size: "large",
+    placeholder: t('login.inputPhone'),
+    prefix: /*#__PURE__*/_react.default.createElement(_icons.UserOutlined, {
+      style: {
+        color: '#ddd'
+      }
+    })
+  })), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    name: "code",
+    rules: rulesMap.code
+  }, /*#__PURE__*/_react.default.createElement(_antd.Input, {
+    size: "large",
+    placeholder: t('common.inputFourVerifyCode', {
+      length: 4
+    }),
+    prefix: /*#__PURE__*/_react.default.createElement(_icons.SafetyOutlined, {
+      style: {
+        color: '#ddd'
+      }
+    }),
+    suffix: /*#__PURE__*/_react.default.createElement(_SendPhoneCode.SendPhoneCode, {
+      phone: phone
+    })
+  })), /*#__PURE__*/_react.default.createElement(_LoginFormFooter.LoginFormFooter, {
+    needRestPwd: true,
+    needRegister: true,
+    loading: loading
+  }));
+});
+exports.PhoneCodeLoginForm = PhoneCodeLoginForm;

package/lib/AuthingGuard/Forms/PhoneRegisterForm/index.d.ts

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