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

package/dist/index.min.js.LICENSE.txt

@@ -0,0 +1,71 @@
+/*!
+  Copyright (c) 2017 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+/**
+ * @license
+ * Copyright 2020 Google LLC. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================================
+ */
+
+/**
+ * @license
+ * Lodash <https://lodash.com/>
+ * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @preserve
+   * Counter block mode compatible with  Dr Brian Gladman fileenc.c
+   * derived from CryptoJS.mode.CTR
+   * Jan Hruby jhruby.web@gmail.com
+   */
+
+/** @preserve
+  (c) 2012 by Cédric Mesnil. All rights reserved.
+  	Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+  	    - Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+      - Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+  	THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+  */
+
+//! moment.js

package/es/AuthingDropdown/index.d.ts

@@ -0,0 +1,12 @@
+import React, { FC } from 'react';
+/**
+ * 不使用 antd 的 dropdown，因为里面会用 tooltip，体积过大
+ */
+export declare const AuthingDropdown: FC<{
+    className?: string;
+    menus: {
+        label: React.ReactNode;
+        key: string | number;
+        onClick?: (key: string | number, evt: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    }[];
+}>;

package/es/AuthingDropdown/index.js

@@ -0,0 +1,46 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import { DownOutlined } from '@ant-design/icons';
+import React, { useState } from 'react';
+import { getClassnames } from '../_utils';
+/**
+ * 不使用 antd 的 dropdown，因为里面会用 tooltip，体积过大
+ */
+
+export var AuthingDropdown = function AuthingDropdown(_ref) {
+  var menus = _ref.menus,
+      children = _ref.children,
+      className = _ref.className;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: getClassnames(['authing-dropdown', className]),
+    onMouseEnter: function onMouseEnter() {
+      return setVisible(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setVisible(false);
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "authing-dropdown-trigger"
+  }, children), /*#__PURE__*/React.createElement("div", {
+    className: getClassnames(['authing-dropdown-menu-container', visible && 'authing-dropdown-menu-container__visible'])
+  }, _mapInstanceProperty(menus).call(menus, function (item) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "authing-dropdown-menu-item",
+      onClick: function onClick(evt) {
+        var _item$onClick;
+
+        setVisible(false);
+        (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item, item.key, evt);
+      },
+      key: item.key
+    }, item.label);
+  })), /*#__PURE__*/React.createElement(DownOutlined, {
+    className: "authing-dropdown-icon"
+  }));
+};

package/es/AuthingDropdown/style/css.js

@@ -0,0 +1 @@
+import './index.css';

package/es/AuthingDropdown/style/index.css

@@ -0,0 +1 @@
+.authing-dropdown{display:inline-flex;position:relative;align-items:center}.authing-dropdown-trigger{cursor:pointer}.authing-dropdown-menu-container{height:0;opacity:0;position:absolute;top:100%;left:0;transition:all .3s;cursor:pointer;background-color:#fff;padding:4px 0;border-radius:2px;box-shadow:0 3px 6px -4px rgba(0,0,0,.12),0 6px 16px 0 rgba(0,0,0,.08),0 9px 28px 8px rgba(0,0,0,.05);pointer-events:none}.authing-dropdown-menu-container__visible{height:auto;opacity:1;pointer-events:unset}.authing-dropdown-menu-item{padding:5px 12px;transition:all .3s}.authing-dropdown-menu-item:hover{background-color:#f5f5f5}.authing-dropdown-icon{margin-left:8px}

package/es/AuthingDropdown/style/index.d.ts

@@ -0,0 +1 @@
+import './index.less';

package/es/AuthingDropdown/style/index.js

@@ -0,0 +1 @@
+import './index.less';

package/es/AuthingGuard/AppMFALayout/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+export interface MfaLayoutProps {
+}
+export declare const AppMfaLayout: FC<MfaLayoutProps>;

package/es/AuthingGuard/AppMFALayout/index.js

@@ -0,0 +1,75 @@
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import "antd/lib/message/style";
+import _message from "antd/lib/message";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _sortInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/sort";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AuthingDropdown } from '../../AuthingDropdown';
+import { EmailMfaVerifyForm, SmsMfaVerifyForm } from '../Forms';
+import { useGuardContext } from '../../context/global/context';
+import { ApplicationMfaType, ApplicationMfaTypeLabel } from '../api';
+export var AppMfaLayout = function AppMfaLayout() {
+  var _formMap, _mfaData$applicationM, _mfaData$applicationM2, _mfaData$applicationM3;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  var _useGuardContext = useGuardContext(),
+      _useGuardContext$stat = _useGuardContext.state,
+      guardEvents = _useGuardContext$stat.guardEvents,
+      authClient = _useGuardContext$stat.authClient,
+      mfaData = _useGuardContext$stat.mfaData;
+
+  var _useState = useState(ApplicationMfaType.SMS),
+      _useState2 = _slicedToArray(_useState, 2),
+      type = _useState2[0],
+      setType = _useState2[1];
+
+  var onSuccess = function onSuccess(user) {
+    var _guardEvents$onLogin;
+
+    _message.success(t('common.LoginSuccess'));
+
+    (_guardEvents$onLogin = guardEvents.onLogin) === null || _guardEvents$onLogin === void 0 ? void 0 : _guardEvents$onLogin.call(guardEvents, user, authClient);
+  };
+
+  var onFail = function onFail(error) {
+    var _guardEvents$onLoginE;
+
+    (_guardEvents$onLoginE = guardEvents.onLoginError) === null || _guardEvents$onLoginE === void 0 ? void 0 : _guardEvents$onLoginE.call(guardEvents, error, authClient);
+  };
+
+  var formProps = {
+    onSuccess: onSuccess,
+    onFail: onFail
+  };
+  var formMap = (_formMap = {}, _defineProperty(_formMap, ApplicationMfaType.EMAIL, /*#__PURE__*/React.createElement(EmailMfaVerifyForm, formProps)), _defineProperty(_formMap, ApplicationMfaType.SMS, /*#__PURE__*/React.createElement(SmsMfaVerifyForm, formProps)), _formMap);
+  var availableMfaType = (_mfaData$applicationM = mfaData.applicationMfa) === null || _mfaData$applicationM === void 0 ? void 0 : (_mfaData$applicationM2 = _filterInstanceProperty(_mfaData$applicationM).call(_mfaData$applicationM, function (item) {
+    var _context;
+
+    return item.status && _includesInstanceProperty(_context = _Object$keys(ApplicationMfaType)).call(_context, item.mfaPolicy);
+  })) === null || _mfaData$applicationM2 === void 0 ? void 0 : (_mfaData$applicationM3 = _sortInstanceProperty(_mfaData$applicationM2).call(_mfaData$applicationM2, function (a, b) {
+    return _sortInstanceProperty(a) - _sortInstanceProperty(b);
+  })) === null || _mfaData$applicationM3 === void 0 ? void 0 : _mapInstanceProperty(_mfaData$applicationM3).call(_mfaData$applicationM3, function (item) {
+    return {
+      label: ApplicationMfaTypeLabel()[item.mfaPolicy],
+      key: item.mfaPolicy,
+      onClick: function onClick() {
+        setType(item.mfaPolicy);
+      }
+    };
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: "authing-text-center"
+  }, formMap[type], ((availableMfaType === null || availableMfaType === void 0 ? void 0 : availableMfaType.length) || 0 > 1) && /*#__PURE__*/React.createElement(AuthingDropdown, {
+    className: "toggle-mfa-dropdown",
+    menus: availableMfaType
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "authing-toggle-mfa"
+  }, t('login.otherVerifyWay'))));
+};

package/es/AuthingGuard/CompleteUserInfoLayout/index.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const CompleteUserInfoLayout: FC;

package/es/AuthingGuard/CompleteUserInfoLayout/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useGuardContext } from '../../context/global/context';
+import { CompleteUserInfoForm } from '../Forms/CompleteUserInfoForm';
+export var CompleteUserInfoLayout = function CompleteUserInfoLayout() {
+  var _useGuardContext = useGuardContext(),
+      guardTitle = _useGuardContext.state.guardTitle;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h2", {
+    className: "authing-guard-complete-info-title"
+  }, t('common.perfectUserInfo')), /*#__PURE__*/React.createElement("p", {
+    className: "authing-guard-complete-info-msg"
+  }, t('common.welcomeDoc', {
+    name: guardTitle
+  })), /*#__PURE__*/React.createElement(CompleteUserInfoForm, null));
+};

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

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

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

@@ -0,0 +1,187 @@
+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 _trimInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/trim";
+import { UserOutlined, LockOutlined } from '@ant-design/icons';
+import React, { forwardRef, useImperativeHandle, useState } from 'react';
+import { useGuardContext } from '../../../context/global/context';
+import { LoginMethods } from '../../types';
+import { LoginFormFooter } from '../LoginFormFooter';
+import { useTranslation } from 'react-i18next';
+import { getRequiredRules } from '../../../_utils';
+export var ADLoginForm = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var onSuccess = _ref.onSuccess,
+      onValidateFail = _ref.onValidateFail,
+      onFail = _ref.onFail;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  var _useGuardContext = useGuardContext(),
+      state = _useGuardContext.state;
+
+  var authClient = state.authClient,
+      guardEvents = state.guardEvents;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      loading = _useState2[0],
+      setLoading = _useState2[1];
+
+  var onFinishFailed = function onFinishFailed(errorInfo) {
+    setLoading(false);
+    onValidateFail && onValidateFail(errorInfo);
+  };
+
+  var _Form$useForm = _Form.useForm(),
+      _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+      rawForm = _Form$useForm2[0];
+
+  var onFinish = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(values) {
+      var canLogin, _context, _context2, identity, password, user, errorData;
+
+      return _regeneratorRuntime.wrap(function _callee$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              if (!guardEvents.onBeforeLogin) {
+                _context3.next = 15;
+                break;
+              }
+
+              _context3.prev = 1;
+              _context3.next = 4;
+              return guardEvents.onBeforeLogin({
+                type: LoginMethods.AD,
+                data: {
+                  identity: values.identity,
+                  password: values.password
+                }
+              }, authClient);
+
+            case 4:
+              canLogin = _context3.sent;
+
+              if (canLogin) {
+                _context3.next = 8;
+                break;
+              }
+
+              setLoading(false);
+              return _context3.abrupt("return");
+
+            case 8:
+              _context3.next = 15;
+              break;
+
+            case 10:
+              _context3.prev = 10;
+              _context3.t0 = _context3["catch"](1);
+
+              if (typeof _context3.t0 === 'string') {
+                _message.error(_context3.t0);
+              } else {
+                _message.error(_context3.t0.message);
+              }
+
+              setLoading(false);
+              return _context3.abrupt("return");
+
+            case 15:
+              _context3.prev = 15;
+              identity = values.identity && _trimInstanceProperty(_context = values.identity).call(_context);
+              password = values.password && _trimInstanceProperty(_context2 = values.password).call(_context2);
+              _context3.next = 20;
+              return authClient.loginByAd(identity, password);
+
+            case 20:
+              user = _context3.sent;
+              onSuccess && onSuccess(user);
+              _context3.next = 36;
+              break;
+
+            case 24:
+              _context3.prev = 24;
+              _context3.t1 = _context3["catch"](15);
+
+              if (!(typeof _context3.t1.message === 'string')) {
+                _context3.next = 35;
+                break;
+              }
+
+              _context3.prev = 27;
+              errorData = JSON.parse(_context3.t1.message);
+              onFail && onFail(errorData);
+              return _context3.abrupt("return");
+
+            case 33:
+              _context3.prev = 33;
+              _context3.t2 = _context3["catch"](27);
+
+            case 35:
+              onFail && onFail(_context3.t1);
+
+            case 36:
+              _context3.prev = 36;
+              setLoading(false);
+              return _context3.finish(36);
+
+            case 39:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee, null, [[1, 10], [15, 24, 36, 39], [27, 33]]);
+    }));
+
+    return function onFinish(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  useImperativeHandle(ref, function () {
+    return rawForm;
+  });
+  return /*#__PURE__*/React.createElement(_Form, {
+    form: rawForm,
+    onSubmitCapture: function onSubmitCapture() {
+      return setLoading(true);
+    },
+    onFinishFailed: onFinishFailed,
+    onFinish: onFinish
+  }, /*#__PURE__*/React.createElement(_Form.Item, {
+    name: "identity",
+    rules: getRequiredRules(t('login.inputAdUsername'))
+  }, /*#__PURE__*/React.createElement(_Input, {
+    autoComplete: "email,username,tel",
+    size: "large",
+    placeholder: t('login.inputAdUsername'),
+    prefix: /*#__PURE__*/React.createElement(UserOutlined, {
+      style: {
+        color: '#ddd'
+      }
+    })
+  })), /*#__PURE__*/React.createElement(_Form.Item, {
+    name: "password",
+    rules: getRequiredRules(t('login.inputAdPwd'))
+  }, /*#__PURE__*/React.createElement(_Input.Password, {
+    autoComplete: "current-password",
+    size: "large",
+    visibilityToggle: false,
+    placeholder: t('login.inputAdPwd'),
+    prefix: /*#__PURE__*/React.createElement(LockOutlined, {
+      style: {
+        color: '#ddd'
+      }
+    })
+  })), /*#__PURE__*/React.createElement(LoginFormFooter, {
+    loading: loading
+  }));
+});

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

@@ -0,0 +1,10 @@
+import React, { FC } from 'react';
+import { Agreement } from '../../api';
+export interface AgreementsProps {
+    value?: boolean;
+    onChange?: (value: boolean) => void;
+    style?: React.CSSProperties;
+    agreements: Agreement[];
+    showError?: boolean;
+}
+export declare const Agreements: FC<AgreementsProps>;

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

@@ -0,0 +1,91 @@
+import "antd/lib/space/style";
+import _Space from "antd/lib/space";
+import "antd/lib/checkbox/style";
+import _Checkbox from "antd/lib/checkbox";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _toConsumableArray from "@babel/runtime-corejs3/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context3; _forEachInstanceProperty(_context3 = ownKeys(Object(source), true)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context4; _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _everyInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/every";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import React, { useState, useMemo, useEffect } from 'react';
+import { getClassnames } from '../../../_utils';
+export var Agreements = function Agreements(_ref) {
+  var showError = _ref.showError,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+      style = _ref.style,
+      agreements = _ref.agreements;
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      acceptList = _useState2[0],
+      setAcceptList = _useState2[1];
+
+  var toggleItemCheck = function toggleItemCheck(id) {
+    setAcceptList(function (prev) {
+      var _context;
+
+      if (_includesInstanceProperty(prev).call(prev, id)) {
+        return _filterInstanceProperty(prev).call(prev, function (item) {
+          return item !== id;
+        });
+      }
+
+      return _concatInstanceProperty(_context = []).call(_context, _toConsumableArray(prev), [id]);
+    });
+  };
+  /** 是否可以注册 */
+
+
+  var isAccept = useMemo(function () {
+    var _context2;
+
+    /** 所有必须勾选的都勾了就可以通过 */
+    return _everyInstanceProperty(_context2 = _filterInstanceProperty(agreements).call(agreements, function (item) {
+      return item.required;
+    })).call(_context2, function (item) {
+      return _includesInstanceProperty(acceptList).call(acceptList, item.id);
+    });
+  }, [acceptList, agreements]);
+  useEffect(function () {
+    onChange(isAccept);
+  }, [isAccept, onChange]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: getClassnames(['authing-agreements', showError && 'authing-agreements-error'])
+  }, _mapInstanceProperty(agreements).call(agreements, function (item) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: item.id,
+      style: _objectSpread({}, style),
+      className: getClassnames(['authing-agreements-item', item.required && !_includesInstanceProperty(acceptList).call(acceptList, item.id) && 'authing-agreements-item-invalid']),
+      onClick: function onClick() {
+        return toggleItemCheck(item.id);
+      }
+    }, /*#__PURE__*/React.createElement(_Space, {
+      align: "start",
+      size: 5
+    }, /*#__PURE__*/React.createElement(_Checkbox, {
+      className: "authing-agreements-checkbox",
+      checked: _includesInstanceProperty(acceptList).call(acceptList, item.id)
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "authing-agreements-item-content",
+      dangerouslySetInnerHTML: {
+        __html: item.title
+      }
+    })));
+  }));
+};

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

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