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

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

@@ -0,0 +1,258 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmailRegisterForm = 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 _RegisterFormFooter = require("../../../../components/AuthingGuard/Forms/RegisterFormFooter");
+
+var _reactI18next = require("react-i18next");
+
+var _Agreements = require("../Agreements");
+
+var EmailRegisterForm = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var onSuccess = _ref.onSuccess,
+      onFail = _ref.onFail,
+      onValidateFail = _ref.onValidateFail;
+
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+      t = _useTranslation.t;
+
+  var _useGuardContext = (0, _context2.useGuardContext)(),
+      _useGuardContext$stat = _useGuardContext.state,
+      authClient = _useGuardContext$stat.authClient,
+      config = _useGuardContext$stat.config,
+      guardEvents = _useGuardContext$stat.guardEvents;
+
+  var agreements = config.agreements,
+      agreementEnabled = config.agreementEnabled;
+
+  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),
+      loading = _useState2[0],
+      setLoading = _useState2[1];
+
+  var onFinishFailed = function onFinishFailed(errorInfo) {
+    setLoading(false);
+    onValidateFail && onValidateFail(errorInfo);
+  };
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      acceptedAgreements = _useState4[0],
+      setAcceptedAgreements = _useState4[1];
+  /** 表单是否被提交校验过 */
+
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      validated = _useState6[0],
+      setValidated = _useState6[1];
+
+  var onFinish = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(values) {
+      var canRegister, email, password, user;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!guardEvents.onBeforeRegister) {
+                _context.next = 15;
+                break;
+              }
+
+              _context.prev = 1;
+              _context.next = 4;
+              return guardEvents.onBeforeRegister({
+                type: _types.RegisterMethods.Email,
+                data: {
+                  email: values.email,
+                  password: values.password
+                }
+              }, authClient);
+
+            case 4:
+              canRegister = _context.sent;
+
+              if (canRegister) {
+                _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;
+              _context.next = 18;
+              return rawForm.validateFields();
+
+            case 18:
+              setValidated(true);
+
+              if (!(agreementEnabled && agreements !== null && agreements !== void 0 && agreements.length && !acceptedAgreements)) {
+                _context.next = 21;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 21:
+              email = values.email, password = values.password; // 注册并获取登录态
+
+              _context.next = 24;
+              return authClient.registerByEmail(email, password, {
+                browser: typeof navigator !== 'undefined' ? navigator.userAgent : null,
+                device: (0, _utils.getDeviceName)()
+              }, {
+                generateToken: true,
+                params: (0, _utils.getUserRegisterParams)()
+              });
+
+            case 24:
+              user = _context.sent;
+              onSuccess && onSuccess(user);
+              _context.next = 31;
+              break;
+
+            case 28:
+              _context.prev = 28;
+              _context.t1 = _context["catch"](15);
+              onFail && onFail(_context.t1);
+
+            case 31:
+              _context.prev = 31;
+              setLoading(false);
+              return _context.finish(31);
+
+            case 34:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[1, 10], [15, 28, 31, 34]]);
+    }));
+
+    return function onFinish(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return rawForm;
+  });
+  var formItems = [{
+    component: /*#__PURE__*/_react.default.createElement(_antd.Input, {
+      autoComplete: "email",
+      size: "large",
+      placeholder: t('login.inputEmail'),
+      prefix: /*#__PURE__*/_react.default.createElement(_icons.UserOutlined, {
+        style: {
+          color: '#ddd'
+        }
+      })
+    }),
+    name: 'email',
+    rules: (0, _utils.getRequiredRules)(t('common.emailNotNull')).concat({
+      pattern: _utils.VALIDATE_PATTERN.email,
+      message: t('login.emailError')
+    })
+  }, {
+    component: /*#__PURE__*/_react.default.createElement(_antd.Input.Password, {
+      size: "large",
+      placeholder: t('common.setPassword'),
+      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.Password, {
+      size: "large",
+      placeholder: t('login.inputPwdAgain'),
+      prefix: /*#__PURE__*/_react.default.createElement(_icons.LockOutlined, {
+        style: {
+          color: '#ddd'
+        }
+      })
+    }),
+    name: 'new-password',
+    rules: (0, _utils.getRequiredRules)(t('common.repeatPassword')).concat({
+      validator: function validator(rule, value) {
+        if (value !== rawForm.getFieldValue('password')) {
+          return Promise.reject(t('common.repeatPasswordDoc'));
+        } else {
+          return Promise.resolve();
+        }
+      }
+    })
+  }];
+  return /*#__PURE__*/_react.default.createElement(_antd.Form, {
+    form: rawForm,
+    onFinish: onFinish,
+    onSubmitCapture: function onSubmitCapture() {
+      return setLoading(true);
+    },
+    onFinishFailed: onFinishFailed
+  }, formItems.map(function (item) {
+    return /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+      key: item.name,
+      name: item.name,
+      rules: item.rules
+    }, item.component);
+  }), config.agreementEnabled && Boolean(agreements === null || agreements === void 0 ? void 0 : agreements.length) && /*#__PURE__*/_react.default.createElement(_Agreements.Agreements, {
+    onChange: setAcceptedAgreements,
+    agreements: agreements,
+    showError: validated
+  }), /*#__PURE__*/_react.default.createElement(_RegisterFormFooter.RegisterFormFooter, {
+    loading: loading
+  }));
+});
+exports.EmailRegisterForm = EmailRegisterForm;

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

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

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

@@ -0,0 +1,255 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LdapLoginForm = 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 _context2 = 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 LdapLoginForm = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var onSuccess = _ref.onSuccess,
+      onValidateFail = _ref.onValidateFail,
+      onFail = _ref.onFail;
+
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+      t = _useTranslation.t;
+
+  var _useGuardContext = (0, _context2.useGuardContext)(),
+      state = _useGuardContext.state;
+
+  var authClient = state.authClient,
+      realHost = state.realHost,
+      guardEvents = state.guardEvents; // const autoRegister = config.autoRegister
+
+  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 captchaUrl = "".concat(realHost, "/api/v2/security/captcha");
+
+  var getCaptchaUrl = function getCaptchaUrl() {
+    return "".concat(captchaUrl, "?r=").concat(+new Date());
+  };
+
+  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, identity, password, user, errorData;
+      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.LDAP,
+                data: {
+                  identity: values.identity,
+                  password: values.password,
+                  captchaCode: values.captchaCode
+                }
+              }, 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;
+              identity = values.identity && values.identity.trim();
+              password = values.password && values.password.trim(); // const captchaCode = values.captchaCode && values.captchaCode.trim()
+
+              _context.next = 20;
+              return authClient.loginByLdap(identity, password);
+
+            case 20:
+              user = _context.sent;
+              onSuccess && onSuccess(user);
+              _context.next = 37;
+              break;
+
+            case 24:
+              _context.prev = 24;
+              _context.t1 = _context["catch"](15);
+
+              if (!(typeof _context.t1.message === 'string')) {
+                _context.next = 35;
+                break;
+              }
+
+              _context.prev = 27;
+              errorData = JSON.parse(_context.t1.message);
+              onFail && onFail(errorData);
+              return _context.abrupt("return");
+
+            case 33:
+              _context.prev = 33;
+              _context.t2 = _context["catch"](27);
+
+            case 35:
+              if (_context.t1.code === _constants.NEED_CAPTCHA && verifyCodeUrl === null) {
+                setNeedCaptcha(true);
+                setVerifyCodeUrl(getCaptchaUrl());
+              }
+
+              onFail && onFail(_context.t1);
+
+            case 37:
+              _context.prev = 37;
+              setLoading(false);
+              return _context.finish(37);
+
+            case 40:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[1, 10], [15, 24, 37, 40], [27, 33]]);
+    }));
+
+    return function onFinish(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return rawForm;
+  });
+  var formItems = [{
+    component: /*#__PURE__*/_react.default.createElement(_antd.Input, {
+      autoComplete: "ldap,username",
+      size: "large",
+      placeholder: t('login.inputLdapUsername'),
+      prefix: /*#__PURE__*/_react.default.createElement(_icons.UserOutlined, {
+        style: {
+          color: '#ddd'
+        }
+      })
+    }),
+    name: 'identity',
+    rules: (0, _utils.getRequiredRules)(t('common.LDAPAccountNotNull'))
+  }, {
+    component: /*#__PURE__*/_react.default.createElement(_antd.Input.Password, {
+      size: "large",
+      placeholder: t('login.inputLdapPwd'),
+      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
+  }, 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, {
+    loading: loading
+  }));
+});
+exports.LdapLoginForm = LdapLoginForm;

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

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+export interface LoginFormFooterProps {
+    loading: boolean;
+    needRestPwd?: boolean;
+    needRegister?: boolean;
+}
+export declare const LoginFormFooter: FC<LoginFormFooterProps>;

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

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LoginFormFooter = void 0;
+
+var _antd = require("antd");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _context = require("../../../context/global/context");
+
+var _types = require("../../../../components/AuthingGuard/types");
+
+var _reactI18next = require("react-i18next");
+
+var LoginFormFooter = function LoginFormFooter(_ref) {
+  var _config$text, _config$text$loginBtn, _config$text2, _config$text2$loginBt, _config$text3, _config$text3$loginBt, _config$text4, _config$text4$loginBt;
+
+  var loading = _ref.loading,
+      _ref$needRestPwd = _ref.needRestPwd,
+      needRestPwd = _ref$needRestPwd === void 0 ? false : _ref$needRestPwd,
+      _ref$needRegister = _ref.needRegister,
+      needRegister = _ref$needRegister === void 0 ? false : _ref$needRegister;
+
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+      t = _useTranslation.t;
+
+  var _useGuardContext = (0, _context.useGuardContext)(),
+      setValue = _useGuardContext.setValue,
+      config = _useGuardContext.state.config;
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    htmlType: "submit",
+    className: "authing-guard-form-submit-btn",
+    size: "large",
+    type: "primary",
+    loading: loading,
+    block: true
+  }, loading ? t("map.".concat((_config$text = config.text) === null || _config$text === void 0 ? void 0 : (_config$text$loginBtn = _config$text.loginBtn) === null || _config$text$loginBtn === void 0 ? void 0 : _config$text$loginBtn.loading), (_config$text2 = config.text) === null || _config$text2 === void 0 ? void 0 : (_config$text2$loginBt = _config$text2.loginBtn) === null || _config$text2$loginBt === void 0 ? void 0 : _config$text2$loginBt.loading) : t("map.".concat((_config$text3 = config.text) === null || _config$text3 === void 0 ? void 0 : (_config$text3$loginBt = _config$text3.loginBtn) === null || _config$text3$loginBt === void 0 ? void 0 : _config$text3$loginBt.normal), (_config$text4 = config.text) === null || _config$text4 === void 0 ? void 0 : (_config$text4$loginBt = _config$text4.loginBtn) === null || _config$text4$loginBt === void 0 ? void 0 : _config$text4$loginBt.normal)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "authing-guard-form-actions"
+  }, needRestPwd && !config.disableResetPwd && /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    onClick: function onClick() {
+      return setValue('guardScenes', _types.GuardScenes.RestPassword);
+    },
+    className: "authing-guard-text-btn",
+    type: "text"
+  }, t('common.hasForgotPwd')), needRestPwd && needRegister && !config.disableResetPwd && !config.disableRegister && /*#__PURE__*/_react.default.createElement(_antd.Divider, {
+    type: "vertical"
+  }), needRegister && !config.disableRegister && /*#__PURE__*/_react.default.createElement("div", {
+    className: "authing-guard-tip-btn-comb"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "authing-guard-tip"
+  }, t('common.noAccYet')), /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    onClick: function onClick() {
+      return setValue('guardScenes', _types.GuardScenes.Register);
+    },
+    className: "authing-guard-text-btn authing-guard-to-register-btn",
+    type: "text"
+  }, t('common.registerImmediate')))));
+};
+
+exports.LoginFormFooter = LoginFormFooter;

package/lib/AuthingGuard/Forms/MfaResetCodeForm/Step1.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { User } from 'authing-js-sdk';
+export declare const MfaResetStep1: FC<{
+    mfaToken: string;
+    onSuccess: (user: User & {
+        recoveryCode: string;
+    }) => void;
+    goVerify: () => void;
+    onFail?: (error: any) => void;
+}>;