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

package/lib/Register/components/Agreements/index.js

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Agreements = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _antd = require("antd");
+
+var _utils = require("../../../_utils");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(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) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+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 = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      acceptList = _useState2[0],
+      setAcceptList = _useState2[1];
+
+  var toggleItemCheck = function toggleItemCheck(id) {
+    setAcceptList(function (prev) {
+      if (prev.includes(id)) {
+        return prev.filter(function (item) {
+          return item !== id;
+        });
+      }
+
+      return [].concat((0, _toConsumableArray2.default)(prev), [id]);
+    });
+  };
+  /** 是否可以注册 */
+
+
+  var isAccept = (0, _react.useMemo)(function () {
+    /** 所有必须勾选的都勾了就可以通过 */
+    return agreements.filter(function (item) {
+      return item.required;
+    }).every(function (item) {
+      return acceptList.includes(item.id);
+    });
+  }, [acceptList, agreements]);
+  (0, _react.useEffect)(function () {
+    onChange(isAccept);
+  }, [isAccept, onChange]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _utils.getClassnames)(['authing-agreements', showError && 'authing-agreements-error'])
+  }, agreements.map(function (item) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: item.id,
+      style: _objectSpread({}, style),
+      className: (0, _utils.getClassnames)(['authing-agreements-item', item.required && !acceptList.includes(item.id) && 'authing-agreements-item-invalid']),
+      onClick: function onClick() {
+        return toggleItemCheck(item.id);
+      }
+    }, /*#__PURE__*/_react.default.createElement(_antd.Space, {
+      align: "start",
+      size: 5
+    }, /*#__PURE__*/_react.default.createElement(_antd.Checkbox, {
+      className: "authing-agreements-checkbox",
+      checked: acceptList.includes(item.id)
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "authing-agreements-item-content",
+      dangerouslySetInnerHTML: {
+        __html: item.title
+      }
+    })));
+  }));
+};
+
+exports.Agreements = Agreements;

package/lib/Register/core/WithEmail.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Agreement, ApplicationConfig } from '../../AuthingGuard/api';
+export interface RegisterWithEmailProps {
+    onRegister: Function;
+    onBeforeRegister?: Function;
+    publicConfig?: ApplicationConfig;
+    agreements: Agreement[];
+}
+export declare const RegisterWithEmail: React.FC<RegisterWithEmailProps>;

package/lib/Register/core/WithEmail.js

@@ -0,0 +1,284 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RegisterWithEmail = 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 _authingJsSdk = require("authing-js-sdk");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactI18next = require("react-i18next");
+
+var _reactUse = require("react-use");
+
+var _authClient = require("../../Guard/authClient");
+
+var _utils = require("../../_utils");
+
+var _Agreements = require("../components/Agreements");
+
+var _SubmitButton = _interopRequireDefault(require("../../SubmitButton"));
+
+var _ValidatorRules = _interopRequireDefault(require("../../ValidatorRules"));
+
+var _IconFont = require("../../IconFont");
+
+var _InputPassword = require("../../InputPassword");
+
+var RegisterWithEmail = function RegisterWithEmail(_ref) {
+  var onRegister = _ref.onRegister,
+      onBeforeRegister = _ref.onBeforeRegister,
+      agreements = _ref.agreements;
+
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+      t = _useTranslation.t;
+
+  var submitButtonRef = (0, _react.useRef)(null);
+  var authClient = (0, _authClient.useGuardAuthClient)();
+
+  var _Form$useForm = _antd.Form.useForm(),
+      _Form$useForm2 = (0, _slicedToArray2.default)(_Form$useForm, 1),
+      form = _Form$useForm2[0];
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      acceptedAgreements = _useState2[0],
+      setAcceptedAgreements = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      validated = _useState4[0],
+      setValidated = _useState4[1];
+
+  var ref = (0, _react.useRef)(null);
+
+  var _useAsyncFn = (0, _reactUse.useAsyncFn)( /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(values) {
+      var canRegister, email, password, user, code, data, _message;
+
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!onBeforeRegister) {
+                _context.next = 15;
+                break;
+              }
+
+              _context.prev = 1;
+              _context.next = 4;
+              return onBeforeRegister({
+                type: _authingJsSdk.RegisterMethods.Phone,
+                data: {
+                  phone: values.phone,
+                  password: values.password,
+                  code: values.code
+                }
+              }, authClient);
+
+            case 4:
+              canRegister = _context.sent;
+
+              if (canRegister) {
+                _context.next = 8;
+                break;
+              }
+
+              submitButtonRef.current.onSpin(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 === null || _context.t0 === void 0 ? void 0 : _context.t0.message);
+              }
+
+              submitButtonRef.current.onSpin(false);
+              return _context.abrupt("return");
+
+            case 15:
+              _context.prev = 15;
+              _context.next = 18;
+              return form.validateFields();
+
+            case 18:
+              setValidated(true);
+
+              if (!(agreements !== null && agreements !== void 0 && agreements.length && !acceptedAgreements)) {
+                _context.next = 23;
+                break;
+              }
+
+              _antd.message.error(t('common.protocolTips'));
+
+              submitButtonRef.current.onError(); // submitButtonRef.current.onSpin(false)
+
+              return _context.abrupt("return");
+
+            case 23:
+              email = values.email, password = values.password; // 注册
+
+              _context.next = 26;
+              return authClient.registerByEmail(email, password, {
+                browser: typeof navigator !== 'undefined' ? navigator.userAgent : null,
+                device: (0, _utils.getDeviceName)()
+              }, {
+                generateToken: true,
+                params: (0, _utils.getUserRegisterParams)()
+              });
+
+            case 26:
+              user = _context.sent;
+              submitButtonRef.current.onSpin(false);
+              onRegister(200, user);
+              _context.next = 36;
+              break;
+
+            case 31:
+              _context.prev = 31;
+              _context.t1 = _context["catch"](15);
+              code = _context.t1.code, data = _context.t1.data, _message = _context.t1.message;
+              submitButtonRef.current.onError();
+              onRegister(code, data, _message);
+
+            case 36:
+              _context.prev = 36;
+              submitButtonRef.current.onSpin(false);
+              return _context.finish(36);
+
+            case 39:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[1, 10], [15, 31, 36, 39]]);
+    }));
+
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [form, acceptedAgreements], {
+    loading: false
+  }),
+      _useAsyncFn2 = (0, _slicedToArray2.default)(_useAsyncFn, 2),
+      _onFinish = _useAsyncFn2[1];
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "authing-g2-register-email"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Form, {
+    form: form,
+    name: "emailRegister",
+    autoComplete: "off",
+    onFinish: function onFinish(values) {
+      submitButtonRef.current.onSpin(true);
+
+      _onFinish(values);
+    },
+    onFinishFailed: function onFinishFailed() {
+      return submitButtonRef.current.onError();
+    },
+    onValuesChange: function onValuesChange(_, values) {
+      var _ref$current;
+
+      if (values['password'] && values['new-password']) {
+        // password changed verify new password
+        form.validateFields(['new-password']);
+      }
+
+      (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.check(values);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_ValidatorRules.default.Email, {
+    ref: ref,
+    key: "email",
+    name: "email",
+    className: "authing-g2-input-form",
+    validateFirst: true,
+    form: form,
+    checkRepeat: true,
+    required: true
+  }, /*#__PURE__*/_react.default.createElement(_antd.Input, {
+    className: "authing-g2-input",
+    autoComplete: "email",
+    size: "large",
+    placeholder: t('login.inputEmail') // prefix={<UserOutlined style={{ color: '#878A95' }} />}
+    ,
+    prefix: /*#__PURE__*/_react.default.createElement(_IconFont.IconFont, {
+      type: "authing-a-user-line1",
+      style: {
+        color: '#878A95'
+      }
+    })
+  })), /*#__PURE__*/_react.default.createElement(_ValidatorRules.default.Password, {
+    key: "password",
+    name: "password",
+    className: "authing-g2-input-form",
+    validateFirst: true
+  }, /*#__PURE__*/_react.default.createElement(_InputPassword.InputPassword, {
+    className: "authing-g2-input",
+    size: "large",
+    placeholder: t('login.inputPwd'),
+    prefix: /*#__PURE__*/_react.default.createElement(_IconFont.IconFont, {
+      type: "authing-a-lock-line1",
+      style: {
+        color: '#878A95'
+      }
+    })
+  })), /*#__PURE__*/_react.default.createElement(_ValidatorRules.default.Password, {
+    key: "new-password",
+    name: "new-password",
+    rules: [{
+      validateTrigger: 'onBlur',
+      validator: function validator(_, value) {
+        if (value !== form.getFieldValue('password')) {
+          return Promise.reject(t('common.repeatPasswordDoc'));
+        } else {
+          return Promise.resolve();
+        }
+      }
+    }],
+    className: "authing-g2-input-form",
+    validateFirst: true
+  }, /*#__PURE__*/_react.default.createElement(_InputPassword.InputPassword, {
+    className: "authing-g2-input",
+    size: "large",
+    placeholder: t('common.passwordAgain') // prefix={<LockOutlined style={{ color: '#878A95' }} />}
+    ,
+    prefix: /*#__PURE__*/_react.default.createElement(_IconFont.IconFont, {
+      type: "authing-a-lock-line1",
+      style: {
+        color: '#878A95'
+      }
+    })
+  })), 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(_antd.Form.Item, null, /*#__PURE__*/_react.default.createElement(_SubmitButton.default, {
+    text: t('common.register'),
+    ref: submitButtonRef
+  }))));
+};
+
+exports.RegisterWithEmail = RegisterWithEmail;

package/lib/Register/core/WithPhone.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Agreement, ApplicationConfig } from '../../AuthingGuard/api';
+export interface RegisterWithPhoneProps {
+    onRegister: Function;
+    agreements: Agreement[];
+    publicConfig?: ApplicationConfig;
+}
+export declare const RegisterWithPhone: React.FC<RegisterWithPhoneProps>;

package/lib/Register/core/WithPhone.js

@@ -0,0 +1,231 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RegisterWithPhone = 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 _authClient = require("../../Guard/authClient");
+
+var _SendCode = require("../../SendCode");
+
+var _utils = require("../../_utils");
+
+var _Agreements = require("../components/Agreements");
+
+var _SubmitButton = _interopRequireDefault(require("../../SubmitButton"));
+
+var _InputNumber = require("../../InputNumber");
+
+var _ValidatorRules = _interopRequireDefault(require("../../ValidatorRules"));
+
+var _IconFont = require("../../IconFont");
+
+var RegisterWithPhone = function RegisterWithPhone(_ref) {
+  var _publicConfig$verifyC;
+
+  var onRegister = _ref.onRegister,
+      agreements = _ref.agreements,
+      publicConfig = _ref.publicConfig;
+
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+      t = _useTranslation.t;
+
+  var submitButtonRef = (0, _react.useRef)(null);
+  var authClient = (0, _authClient.useGuardAuthClient)();
+
+  var _Form$useForm = _antd.Form.useForm(),
+      _Form$useForm2 = (0, _slicedToArray2.default)(_Form$useForm, 1),
+      form = _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),
+      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 ref = (0, _react.useRef)(null);
+  var verifyCodeLength = (_publicConfig$verifyC = publicConfig === null || publicConfig === void 0 ? void 0 : publicConfig.verifyCodeLength) !== null && _publicConfig$verifyC !== void 0 ? _publicConfig$verifyC : 4;
+
+  var _useAsyncFn = (0, _reactUse.useAsyncFn)( /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(values) {
+      var _phone, _values$password, password, _code, user, _code2, _data, _message;
+
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.prev = 0;
+              submitButtonRef.current.onSpin(true);
+              _context.next = 4;
+              return form.validateFields();
+
+            case 4:
+              setValidated(true);
+
+              if (!(agreements !== null && agreements !== void 0 && agreements.length && !acceptedAgreements)) {
+                _context.next = 9;
+                break;
+              }
+
+              _antd.message.error(t('common.protocolTips'));
+
+              submitButtonRef.current.onError(); // submitButtonRef.current.onSpin(false)
+
+              return _context.abrupt("return");
+
+            case 9:
+              _phone = values.phone, _values$password = values.password, password = _values$password === void 0 ? '' : _values$password, _code = values.code; // 注册
+
+              _context.next = 12;
+              return authClient.registerByPhoneCode(_phone, _code, password, {
+                browser: typeof navigator !== 'undefined' ? navigator.userAgent : null,
+                device: (0, _utils.getDeviceName)()
+              }, {
+                generateToken: true,
+                params: (0, _utils.getUserRegisterParams)()
+              });
+
+            case 12:
+              user = _context.sent;
+              submitButtonRef.current.onSpin(false);
+              onRegister(200, user);
+              _context.next = 24;
+              break;
+
+            case 17:
+              _context.prev = 17;
+              _context.t0 = _context["catch"](0);
+              _code2 = _context.t0.code;
+              _data = _context.t0.data;
+              _message = _context.t0.message;
+              submitButtonRef.current.onError(); // submitButtonRef.current.onSpin(false)
+
+              onRegister(_code2, _data, _message);
+
+            case 24:
+              _context.prev = 24;
+              submitButtonRef.current.onSpin(false);
+              return _context.finish(24);
+
+            case 27:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[0, 17, 24, 27]]);
+    }));
+
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [form, acceptedAgreements], {
+    loading: false
+  }),
+      _useAsyncFn2 = (0, _slicedToArray2.default)(_useAsyncFn, 2),
+      onFinish = _useAsyncFn2[1];
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "authing-g2-register-email"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Form, {
+    form: form,
+    name: "emailRegister",
+    autoComplete: "off",
+    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, {
+    ref: ref,
+    key: "phone",
+    name: "phone",
+    className: "authing-g2-input-form",
+    validateFirst: true,
+    form: form,
+    checkRepeat: true,
+    required: true
+  }, /*#__PURE__*/_react.default.createElement(_InputNumber.InputNumber, {
+    className: "authing-g2-input",
+    onChange: function onChange(e) {
+      setPhone(e.target.value);
+    },
+    size: "large",
+    placeholder: t('login.inputPhone') // prefix={<UserOutlined style={{ color: '#878A95' }} />}
+    ,
+    prefix: /*#__PURE__*/_react.default.createElement(_IconFont.IconFont, {
+      type: "authing-a-user-line1",
+      style: {
+        color: '#878A95'
+      }
+    }),
+    maxLength: 11
+  })), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    key: "code",
+    name: "code",
+    validateTrigger: ['onBlur', 'onChange'],
+    rules: (0, _utils.fieldRequiredRule)(t('common.captchaCode')),
+    className: "authing-g2-input-form",
+    validateFirst: true
+  }, /*#__PURE__*/_react.default.createElement(_SendCode.SendCode, {
+    className: "authing-g2-input",
+    autoComplete: "one-time-code",
+    size: "large",
+    placeholder: t('common.inputFourVerifyCode', {
+      length: verifyCodeLength
+    }),
+    maxLength: verifyCodeLength // prefix={<SafetyOutlined style={{ color: '#878A95' }} />}
+    ,
+    prefix: /*#__PURE__*/_react.default.createElement(_IconFont.IconFont, {
+      type: "authing-a-shield-check-line1",
+      style: {
+        color: '#878A95'
+      }
+    }),
+    method: "phone",
+    onSendCodeBefore: function onSendCodeBefore() {
+      return form.validateFields(['phone']);
+    },
+    data: phone
+  })), 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(_antd.Form.Item, null, /*#__PURE__*/_react.default.createElement(_SubmitButton.default, {
+    text: t('common.register'),
+    ref: submitButtonRef
+  }))));
+};
+
+exports.RegisterWithPhone = RegisterWithPhone;

package/lib/Register/index.d.ts

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