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

package/lib/SendCode/index.js

@@ -0,0 +1,227 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SendCode = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _antd = require("antd");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _authingJsSdk = require("authing-js-sdk");
+
+var _SendCodeBtn = require("./SendCodeBtn");
+
+var _reactI18next = require("react-i18next");
+
+var _authClient = require("../Guard/authClient");
+
+var _utils = require("../_utils");
+
+var _InputNumber = require("../InputNumber");
+
+var _excluded = ["method", "data", "value", "onChange", "autoSubmit", "form", "onSendCodeBefore", "maxLength", "fieldName"];
+
+var SendCode = function SendCode(_ref) {
+  var method = _ref.method,
+      data = _ref.data,
+      value = _ref.value,
+      _onChange = _ref.onChange,
+      _ref$autoSubmit = _ref.autoSubmit,
+      autoSubmit = _ref$autoSubmit === void 0 ? false : _ref$autoSubmit,
+      form = _ref.form,
+      onSendCodeBefore = _ref.onSendCodeBefore,
+      maxLength = _ref.maxLength,
+      fieldName = _ref.fieldName,
+      inputProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+      t = _useTranslation.t;
+
+  var authClient = (0, _authClient.useGuardAuthClient)();
+
+  var sendEmail = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(email) {
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (email) {
+                _context.next = 3;
+                break;
+              }
+
+              _antd.message.error(t('login.inputEmail'));
+
+              return _context.abrupt("return", false);
+
+            case 3:
+              if ((0, _utils.validate)('email', email)) {
+                _context.next = 6;
+                break;
+              }
+
+              _antd.message.error(t('common.emailFormatError'));
+
+              return _context.abrupt("return", false);
+
+            case 6:
+              _context.prev = 6;
+              _context.next = 9;
+              return authClient.sendEmail(email, _authingJsSdk.EmailScene.ResetPassword);
+
+            case 9:
+              return _context.abrupt("return", true);
+
+            case 12:
+              _context.prev = 12;
+              _context.t0 = _context["catch"](6);
+              return _context.abrupt("return", false);
+
+            case 15:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[6, 12]]);
+    }));
+
+    return function sendEmail(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var sendPhone = /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(phone) {
+      var _JSON$parse, msg;
+
+      return _regenerator.default.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.prev = 0;
+              _context2.next = 3;
+              return authClient.sendSmsCode(phone);
+
+            case 3:
+              return _context2.abrupt("return", true);
+
+            case 6:
+              _context2.prev = 6;
+              _context2.t0 = _context2["catch"](0);
+
+              if (!(_context2.t0.code === 'ECONNABORTED')) {
+                _context2.next = 11;
+                break;
+              }
+
+              _antd.message.error(t('login.sendCodeTimeout'));
+
+              return _context2.abrupt("return", false);
+
+            case 11:
+              _JSON$parse = JSON.parse(_context2.t0.message), msg = _JSON$parse.message;
+
+              _antd.message.error(msg);
+
+              return _context2.abrupt("return", false);
+
+            case 14:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2, null, [[0, 6]]);
+    }));
+
+    return function sendPhone(_x2) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Row, {
+    justify: "space-between",
+    align: "middle"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Col, {
+    span: 15,
+    className: "g2-send-code-input-col"
+  }, /*#__PURE__*/_react.default.createElement(_InputNumber.InputNumber, (0, _extends2.default)({
+    value: value,
+    onChange: function onChange(e) {
+      _onChange === null || _onChange === void 0 ? void 0 : _onChange(e);
+      if (!autoSubmit) return;
+
+      if (maxLength && e.target.value.length >= maxLength) {
+        form === null || form === void 0 ? void 0 : form.submit();
+      }
+    }
+  }, inputProps, {
+    maxLength: maxLength
+  }))), /*#__PURE__*/_react.default.createElement(_antd.Col, {
+    offset: 1,
+    span: 8
+  }, /*#__PURE__*/_react.default.createElement(_SendCodeBtn.SendCodeBtn, {
+    beforeSend: function beforeSend() {
+      return onSendCodeBefore().then( /*#__PURE__*/function () {
+        var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3(b) {
+          var phoneData;
+          return _regenerator.default.wrap(function _callee3$(_context3) {
+            while (1) {
+              switch (_context3.prev = _context3.next) {
+                case 0:
+                  phoneData = form ? form.getFieldValue(fieldName || method) : data;
+
+                  if (!(method === 'phone')) {
+                    _context3.next = 7;
+                    break;
+                  }
+
+                  _context3.next = 4;
+                  return sendPhone(phoneData);
+
+                case 4:
+                  _context3.t0 = _context3.sent;
+                  _context3.next = 10;
+                  break;
+
+                case 7:
+                  _context3.next = 9;
+                  return sendEmail(phoneData);
+
+                case 9:
+                  _context3.t0 = _context3.sent;
+
+                case 10:
+                  return _context3.abrupt("return", _context3.t0);
+
+                case 11:
+                case "end":
+                  return _context3.stop();
+              }
+            }
+          }, _callee3);
+        }));
+
+        return function (_x3) {
+          return _ref4.apply(this, arguments);
+        };
+      }()).catch(function (e) {
+        return false;
+      });
+    },
+    sendDesc: t('common.sendVerifyCode')
+  }))));
+};
+
+exports.SendCode = SendCode;

package/lib/SendCode/style/css.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./index.css");

package/lib/SendCode/style/index.css

@@ -0,0 +1 @@
+.authing-g2-send-code-btn{height:43px;width:100%;border:1px solid #d4d6dc;border-radius:4px}.authing-g2-send-code-btn:hover{background:rgba(57,106,255,.1)}.authing-g2-send-code-btn:focus{outline:none}.authing-g2-send-code-btn[disabled]{cursor:not-allowed;filter:opacity(.5)}@media only screen and (max-width:719px){.authing-g2-send-code-btn{font-size:14px}}.g2-loading-btn-center .authing-ant-btn-loading-icon .anticon{padding-right:0}

package/lib/SendCode/style/index.d.ts

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

package/lib/SendCode/style/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./index.less");

package/lib/SendCode/style/index.less

@@ -0,0 +1,31 @@
+.authing-g2-send-code-btn {
+  height: 43px;
+  width: 100%;
+  border: 1px solid #d4d6dc;
+  border-radius: 4px;
+}
+
+.authing-g2-send-code-btn:hover {
+  background: rgba(57, 106, 255, 0.1);
+}
+
+.authing-g2-send-code-btn:focus {
+  outline: none;
+}
+
+.authing-g2-send-code-btn[disabled] {
+  cursor: not-allowed;
+  filter: opacity(0.5);
+}
+
+@media only screen and (max-width: 719px) {
+  .authing-g2-send-code-btn {
+    font-size: 14px;
+  }
+}
+
+.g2-loading-btn-center {
+  .authing-ant-btn-loading-icon .anticon {
+    padding-right: 0;
+  }
+}

package/lib/ShieldSpin/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface IG2SpinProps {
+    size?: number;
+}
+export declare const ShieldSpin: (props: IG2SpinProps) => JSX.Element;
+export declare const Spin: () => JSX.Element;
+export {};

package/lib/ShieldSpin/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Spin = exports.ShieldSpin = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _loading = require("./loading.svg");
+
+//@ts-ignore
+var ShieldSpin = function ShieldSpin(props) {
+  var size = props.size ? props.size : 50;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: size,
+      height: size
+    }
+  }, /*#__PURE__*/_react.default.createElement(_loading.ReactComponent, null));
+};
+
+exports.ShieldSpin = ShieldSpin;
+
+var Spin = function Spin() {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "g2-init-setting-loading"
+  }, /*#__PURE__*/_react.default.createElement(ShieldSpin, {
+    size: 100
+  }));
+};
+
+exports.Spin = Spin;

package/lib/ShieldSpin/loading.svg

@@ -0,0 +1,29 @@
+<svg width="100%" height="100%"
+ viewBox="0 0 150 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <style>
+    #path-f {
+      fill: none;
+      stroke: #eaebee;
+      stroke-width: 10;
+      stroke-dasharray: 100 220;
+      animation: dash 40s infinite linear forwards;
+    }
+    #path-b {
+      fill: none;
+      stroke: #0080ff;
+      stroke-width: 8;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+    @keyframes dash {
+      to {
+        stroke-dashoffset: 12000;
+      }
+    }
+  </style>
+  <title>Loading</title>
+  <g id="单独" transform="translate(25.000000, 16.000000)" fill-rule="nonzero"  stroke-width="2" >
+    <path d="M50,0 L0,30 C0,31 0,32 0,33 C0,69 20,100 50,116 C79,100 100,69 100,33 C100,32 99,31 99,30 L50,0 Z" id="path-b"/>
+    <path d="M50,0 L0,30 C0,31 0,32 0,33 C0,69 20,100 50,116 C79,100 100,69 100,33 C100,32 99,31 99,30 L50,0 Z" id="path-f"/>
+  </g>
+</svg>

package/lib/SubmitButton/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface SubmitButtonProps {
+    text?: string;
+    className?: string;
+    onClick?: any;
+}
+declare const _default: React.ForwardRefExoticComponent<SubmitButtonProps & React.RefAttributes<unknown>>;
+export default _default;

package/lib/SubmitButton/index.js

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _antd = require("antd");
+
+var SubmitButton = function SubmitButton(props, ref) {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      spin = _useState2[0],
+      setSpin = _useState2[1]; // spin 状态需要手动设置关闭
+
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      shaking = _useState4[0],
+      setShaking = _useState4[1]; // 抖动状态会自动关闭
+
+
+  (0, _react.useEffect)(function () {
+    var timeOut;
+
+    if (shaking === true) {
+      timeOut = setTimeout(function () {
+        setShaking(false);
+      }, 1000);
+    }
+
+    return function () {
+      clearTimeout(timeOut);
+    };
+  }, [shaking]);
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      onError: function onError(text) {
+        setShaking(true);
+      },
+      onSpin: function onSpin(sp) {
+        setSpin(sp);
+      }
+    };
+  });
+  var propsCls = props.className ? props.className : '';
+  var shakingCls = shaking ? 'shaking' : '';
+  return /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    size: "large",
+    type: "primary",
+    htmlType: "submit",
+    loading: spin,
+    onClick: props.onClick ? props.onClick : function () {},
+    className: "authing-g2-submit-button ".concat(propsCls, " ").concat(shakingCls)
+  }, props.text);
+};
+
+var _default = /*#__PURE__*/(0, _react.forwardRef)(SubmitButton);
+
+exports.default = _default;

package/lib/SubmitSuccess/index.d.ts

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

package/lib/SubmitSuccess/index.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GuardSubmitSuccessView = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactI18next = require("react-i18next");
+
+var _ = require("..");
+
+var _ImagePro = require("../ImagePro");
+
+var _SubmitButton = _interopRequireDefault(require("../SubmitButton"));
+
+var GuardSubmitSuccessView = function GuardSubmitSuccessView(props) {
+  var _config$__publicConfi;
+
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+      t = _useTranslation.t;
+
+  var initData = props.initData,
+      config = props.config;
+
+  var _useState = (0, _react.useState)(5),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      countDown = _useState2[0],
+      setCountDown = _useState2[1];
+
+  var timerRef = (0, _react.useRef)(0);
+
+  var _ref = initData !== null && initData !== void 0 ? initData : {},
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? t('common.problem.successTip') : _ref$title,
+      _ref$message = _ref.message,
+      message = _ref$message === void 0 ? t('common.problem.successTipMsg') : _ref$message;
+
+  var cdnBase = config === null || config === void 0 ? void 0 : (_config$__publicConfi = config.__publicConfig__) === null || _config$__publicConfi === void 0 ? void 0 : _config$__publicConfi.cdnBase;
+  (0, _react.useEffect)(function () {
+    timerRef.current = setInterval(function () {
+      setCountDown(function (prev) {
+        return prev - 1;
+      });
+    }, 1000);
+    return function () {
+      return clearInterval(timerRef.current);
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (countDown <= 0) {
+      var _props$__changeModule;
+
+      clearInterval(timerRef.current);
+      (_props$__changeModule = props.__changeModule) === null || _props$__changeModule === void 0 ? void 0 : _props$__changeModule.call(props, _.GuardModuleType.LOGIN);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [countDown]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "g2-view-container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "g2-view-tabs g2-questions-send-success-page"
+  }, /*#__PURE__*/_react.default.createElement(_ImagePro.ImagePro, {
+    className: "plate",
+    src: "".concat(cdnBase, "/questions-send-ok.png"),
+    alt: "",
+    width: 191,
+    height: 146
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "title"
+  }, title), /*#__PURE__*/_react.default.createElement("div", {
+    className: "message"
+  }, message), /*#__PURE__*/_react.default.createElement(_SubmitButton.default, {
+    onClick: function onClick() {
+      var _props$__changeModule2;
+
+      (_props$__changeModule2 = props.__changeModule) === null || _props$__changeModule2 === void 0 ? void 0 : _props$__changeModule2.call(props, _.GuardModuleType.LOGIN);
+    },
+    text: t('common.backLoginPage')
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "timer-tip"
+  }, countDown, " ", t('common.pToLogin'))));
+};
+
+exports.GuardSubmitSuccessView = GuardSubmitSuccessView;

package/lib/SubmitSuccess/interface.d.ts

@@ -0,0 +1,13 @@
+import { IG2Config, IG2Events, IG2FCViewProps } from '../Type';
+export interface SubmitSuccessEvents extends IG2Events {
+}
+export interface SubmitSuccessConfig extends IG2Config {
+}
+export interface SubmitSuccessInitData {
+    title?: string;
+    message?: string;
+}
+export interface GuardSubmitSuccessViewProps extends IG2FCViewProps, SubmitSuccessEvents {
+    config: SubmitSuccessConfig;
+    initData?: SubmitSuccessInitData;
+}

package/lib/SubmitSuccess/interface.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/Type/index.d.ts

@@ -0,0 +1,35 @@
+import { AuthenticationClient, CommonMessage } from 'authing-js-sdk';
+import { Lang } from 'authing-js-sdk/build/main/types';
+import { GuardMode } from '..';
+import { ApplicationConfig } from '../AuthingGuard/api';
+import { GuardModuleType } from '../Guard/module';
+export interface IG2FCProps extends IG2Events {
+    appId: string;
+    config?: Partial<IG2Config>;
+}
+export interface IG2FCViewProps extends IG2FCProps {
+    config: IG2Config;
+}
+export interface IG2Config {
+    title: string;
+    logo: string;
+    lang: Lang;
+    langRange: Lang[];
+    host: string;
+    mode: GuardMode;
+    clickCloseable: boolean;
+    escCloseable: boolean;
+    userpool?: string;
+    contentCss?: string;
+    target?: HTMLElement | string;
+    __appHost__?: string;
+    __publicConfig__?: ApplicationConfig;
+}
+export interface IG2Events {
+    onLoad?: (authClient: AuthenticationClient) => void;
+    onLoadError?: (error: CommonMessage) => void;
+    onClose?: () => void;
+    onLangChange?: (lang: Lang) => void;
+    __changeModule?: (moduleName: GuardModuleType, initData?: any) => void;
+}
+export declare const getDefaultG2Config: () => IG2Config;

package/lib/Type/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDefaultG2Config = void 0;
+
+var _ = require("..");
+
+var defaultG2Config = {
+  lang: 'zh-CN',
+  langRange: ['zh-CN', 'en-US'],
+  title: 'Authing',
+  escCloseable: true,
+  clickCloseable: true,
+  mode: _.GuardMode.Normal,
+  host: 'https://core.authing.cn',
+  logo: 'https://files.authing.co/user-contents/photos/0a4c99ff-b8ce-4030-aaaf-584c807cb21c.png'
+};
+
+var getDefaultG2Config = function getDefaultG2Config() {
+  return defaultG2Config;
+};
+
+exports.getDefaultG2Config = getDefaultG2Config;

package/lib/ValidatorRules/PasswordFormItem.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { PasswordFormItemProps } from '.';
+export declare const PasswordFormItem: React.FC<PasswordFormItemProps>;

package/lib/ValidatorRules/PasswordFormItem.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PasswordFormItem = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _antd = require("antd");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _utils = require("../_utils");
+
+var _context = require("../_utils/context");
+
+var _excluded = ["rules"];
+
+var PasswordFormItem = function PasswordFormItem(props) {
+  var rules = props.rules,
+      fromItemProos = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var publicConfig = (0, _context.usePublicConfig)();
+  return publicConfig ? /*#__PURE__*/_react.default.createElement(_antd.Form.Item, (0, _extends2.default)({
+    validateTrigger: ['onChange', 'onBlur'],
+    validateFirst: true,
+    name: "password",
+    rules: [].concat((0, _toConsumableArray2.default)((0, _utils.getPasswordValidate)(publicConfig.passwordStrength, publicConfig.customPasswordStrength)), (0, _toConsumableArray2.default)(rules !== null && rules !== void 0 ? rules : []))
+  }, fromItemProos)) : /*#__PURE__*/_react.default.createElement(_antd.Form.Item, props);
+};
+
+exports.PasswordFormItem = PasswordFormItem;

package/lib/ValidatorRules/ValidatorFormItem.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ICheckProps, ValidatorFormItemProps } from '.';
+export declare const EmailFormItem: React.ForwardRefExoticComponent<ValidatorFormItemProps & React.RefAttributes<ICheckProps>>;
+export declare const PhoneFormItem: React.ForwardRefExoticComponent<ValidatorFormItemProps & React.RefAttributes<ICheckProps>>;
+export declare const UserNameFormItem: React.ForwardRefExoticComponent<ValidatorFormItemProps & React.RefAttributes<ICheckProps>>;