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

package/lib/AuthingTabs/index.d.ts

@@ -0,0 +1,12 @@
+import React, { FC } from 'react';
+export interface AuthingTabsProps extends React.HTMLAttributes<HTMLDivElement> {
+    activeKey?: string;
+    onTabClick: (key: string) => void;
+    showLen?: number;
+    tabs: {
+        key: string;
+        label: string;
+        component: JSX.Element;
+    }[];
+}
+export declare const AuthingTabs: FC<AuthingTabsProps>;

package/lib/AuthingTabs/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.AuthingTabs = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _antd = require("antd");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _icons = require("@ant-design/icons");
+
+var _utils = require("../_utils");
+
+var AuthingTabs = function AuthingTabs(_ref) {
+  var _tabs$find;
+
+  var tabs = _ref.tabs,
+      _ref$showLen = _ref.showLen,
+      showLen = _ref$showLen === void 0 ? 3 : _ref$showLen,
+      className = _ref.className,
+      activeKey = _ref.activeKey,
+      onTabClick = _ref.onTabClick;
+  var activeIndex = (0, _react.useMemo)(function () {
+    return tabs.findIndex(function (item) {
+      return item.key === activeKey;
+    });
+  }, [tabs, activeKey]);
+  var showTabs = (0, _react.useMemo)(function () {
+    if (tabs.length <= showLen) {
+      return (0, _toConsumableArray2.default)(tabs);
+    }
+
+    var startIndex = Math.max(activeIndex - 1, 0);
+
+    if (startIndex + showLen > tabs.length - 1) {
+      startIndex = tabs.length - showLen;
+    }
+
+    return tabs.slice(startIndex, startIndex + showLen);
+  }, [showLen, activeIndex, tabs]);
+  var hideTabs = (0, _react.useMemo)(function () {
+    var showKeys = showTabs.map(function (item) {
+      return item.key;
+    });
+    return tabs.filter(function (item) {
+      return !showKeys.find(function (key) {
+        return item.key === key;
+      });
+    });
+  }, [tabs, showTabs]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _utils.getClassnames)(['authing-tabs', className])
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _utils.getClassnames)(['authing-tabs-inner', Boolean(hideTabs.length) && 'authing-tabs-inner--more'])
+  }, showTabs.map(function (item, index) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      onClick: function onClick() {
+        return onTabClick(item.key);
+      },
+      className: (0, _utils.getClassnames)(['authing-tab-item', activeKey === item.key && 'authing-tab-item__active']),
+      key: item.key
+    }, item.label);
+  })), Boolean(hideTabs.length) && /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    className: "authing-tabs-show-more",
+    type: "text",
+    icon: /*#__PURE__*/_react.default.createElement(_icons.EllipsisOutlined, null)
+  }, /*#__PURE__*/_react.default.createElement("ul", {
+    className: "authing-tabs-more-panel"
+  }, hideTabs.map(function (item) {
+    return /*#__PURE__*/_react.default.createElement("li", {
+      key: item.key,
+      onClick: function onClick() {
+        return onTabClick(item.key);
+      },
+      className: "authing-tabs-more-panel-item"
+    }, item.label);
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "authing-tab-pane"
+  }, (_tabs$find = tabs.find(function (item) {
+    return item.key === activeKey;
+  })) === null || _tabs$find === void 0 ? void 0 : _tabs$find.component));
+};
+
+exports.AuthingTabs = AuthingTabs;

package/lib/AuthingTabs/style/css.js

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

package/lib/AuthingTabs/style/index.css

@@ -0,0 +1 @@
+.authing-tabs{display:flex;margin-bottom:36px;align-items:center}.authing-tabs-inner{display:flex;justify-content:space-around;align-items:center;flex:1}.authing-tabs-inner--more{box-shadow:inset -10px 0 8px -8px rgba(0,0,0,.08)}.authing-tab-item{color:#aeb9d4;font-size:16px;transition:all .3s ease-out;white-space:nowrap;cursor:pointer;position:relative;height:28px;margin-right:32px}.authing-tab-item:last-child{margin-right:12px}.authing-tab-item:only-child{margin-right:0}.authing-tab-item:after{content:"";width:0;height:2px;display:block;position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);background-color:transparent;transition:all .3s ease-out}.authing-tab-item__active{color:#396aff;font-size:18px}.authing-tab-item__active:after{width:26px;background-color:#396aff}.authing-tabs-show-more{position:relative;z-index:2}.authing-tabs-show-more.ant-btn{padding:0 12px}.authing-tabs-show-more:active,.authing-tabs-show-more:focus,.authing-tabs-show-more:hover{background-color:#fff}.authing-tabs-show-more:hover .authing-tabs-more-panel{height:auto;opacity:1;padding:4px 0}.authing-tabs-show-more:after{content:"";display:block;width:100%;height:6px;top:100%;left:0;position:absolute}.authing-tabs-more-panel{position:absolute;box-sizing:border-box;transition:all .3s;height:0;opacity:0;right:0;top:100%;transform:translateY(6px);background-color:#fff;max-height:200px;margin:0;padding:0;overflow-x:hidden;overflow-y:auto;text-align:left;list-style-type:none;background-clip:padding-box;border-radius:2px;outline:none;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)}.authing-tabs-more-panel-item{min-width:120px;margin:0;padding:5px 12px;overflow:hidden;color:rgba(0,0,0,.85);font-weight:400;font-size:14px;line-height:22px;white-space:nowrap;text-overflow:ellipsis;cursor:pointer;transition:all .3s}.authing-tabs-more-panel-item:hover{background-color:#f5f5f5}@media only screen and (max-width:719px){.authing-tabs-inner{justify-content:flex-start}.authing-tab-item{margin-right:40px;font-size:14px}.authing-tab-item__active{font-size:16px}.authing-tab-pane{padding-bottom:70px}}

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

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

package/lib/AuthingTabs/style/index.js

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

package/lib/AuthingTabs/style/index.less

@@ -0,0 +1,135 @@
+.authing-tabs {
+  display: flex;
+  margin-bottom: 36px;
+  align-items: center;
+}
+.authing-tabs-inner {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  flex: 1;
+}
+.authing-tabs-inner--more {
+  box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);
+}
+.authing-tab-item {
+  color: #aeb9d4;
+  font-size: 16px;
+  transition: all 0.3s ease-out;
+  white-space: nowrap;
+  cursor: pointer;
+  position: relative;
+  height: 28px;
+  margin-right: 32px;
+  &:last-child {
+    margin-right: 12px;
+  }
+  &:only-child {
+    margin-right: 0;
+  }
+  &::after {
+    content: '';
+    width: 0;
+    height: 2px;
+    display: block;
+    position: absolute;
+    left: 50%;
+    bottom: -4px;
+    transform: translateX(-50%);
+    background-color: transparent;
+    transition: all 0.3s ease-out;
+  }
+}
+.authing-tab-item__active {
+  color: #396aff;
+  font-size: 18px;
+  &::after {
+    width: 26px;
+    background-color: #396aff;
+  }
+}
+.authing-tabs-show-more {
+  position: relative;
+  z-index: 2;
+  &.ant-btn {
+    padding: 0 12px;
+  }
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: #fff;
+  }
+  &:hover {
+    .authing-tabs-more-panel {
+      height: auto;
+      opacity: 1;
+      padding: 4px 0;
+    }
+  }
+
+  &:after {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 6px;
+    top: 100%;
+    left: 0;
+    position: absolute;
+  }
+}
+.authing-tabs-more-panel {
+  position: absolute;
+  box-sizing: border-box;
+  transition: all 0.3s;
+  height: 0;
+  opacity: 0;
+  right: 0;
+  top: 100%;
+  transform: translateY(6px);
+  background-color: #fff;
+  max-height: 200px;
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  text-align: left;
+  list-style-type: none;
+  background-clip: padding-box;
+  border-radius: 2px;
+  outline: none;
+  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
+    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
+}
+.authing-tabs-more-panel-item {
+  min-width: 120px;
+  margin: 0;
+  padding: 5px 12px;
+  overflow: hidden;
+  color: rgba(0, 0, 0, 0.85);
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 22px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  transition: all 0.3s;
+  &:hover {
+    background-color: #f5f5f5;
+  }
+}
+
+@media only screen and (max-width: 719px) {
+  .authing-tabs-inner {
+    justify-content: flex-start;
+  }
+  .authing-tab-item {
+    margin-right: 40px;
+    font-size: 14px;
+  }
+  .authing-tab-item__active {
+    font-size: 16px;
+  }
+  .authing-tab-pane {
+    padding-bottom: 70px;
+  }
+}

package/lib/BindTotp/core/bindSuccess.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface BindSuccessProps {
+    onBind: any;
+    secret: string;
+}
+export declare const BindSuccess: React.FC<BindSuccessProps>;

package/lib/BindTotp/core/bindSuccess.js

@@ -0,0 +1,126 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BindSuccess = 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 _SubmitButton = _interopRequireDefault(require("../../SubmitButton"));
+
+var Paragraph = _antd.Typography.Paragraph;
+
+var BindSuccess = function BindSuccess(_ref) {
+  var secret = _ref.secret,
+      onBind = _ref.onBind;
+  // const [isSaved, setIsSaved] = useState(false)
+  var submitButtonRef = (0, _react.useRef)(null);
+
+  var _Form$useForm = _antd.Form.useForm(),
+      _Form$useForm2 = (0, _slicedToArray2.default)(_Form$useForm, 1),
+      form = _Form$useForm2[0];
+
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+      t = _useTranslation.t;
+
+  var bindSuccess = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var _submitButtonRef$curr;
+
+      var _submitButtonRef$curr2, _submitButtonRef$curr3;
+
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              (_submitButtonRef$curr = submitButtonRef.current) === null || _submitButtonRef$curr === void 0 ? void 0 : _submitButtonRef$curr.onSpin(true);
+              _context.prev = 1;
+              _context.next = 4;
+              return form.validateFields();
+
+            case 4:
+              onBind();
+              _context.next = 10;
+              break;
+
+            case 7:
+              _context.prev = 7;
+              _context.t0 = _context["catch"](1);
+              (_submitButtonRef$curr2 = submitButtonRef.current) === null || _submitButtonRef$curr2 === void 0 ? void 0 : _submitButtonRef$curr2.onError();
+
+            case 10:
+              _context.prev = 10;
+              (_submitButtonRef$curr3 = submitButtonRef.current) === null || _submitButtonRef$curr3 === void 0 ? void 0 : _submitButtonRef$curr3.onSpin(false);
+              return _context.finish(10);
+
+            case 13:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[1, 7, 10, 13]]);
+    }));
+
+    return function bindSuccess() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", {
+    className: "authing-g2-mfa-title"
+  }, t('common.totpText1')), /*#__PURE__*/_react.default.createElement("p", {
+    className: "authing-g2-mfa-tips"
+  }, t('common.totpText2')), /*#__PURE__*/_react.default.createElement("div", {
+    className: "g2-mfa-bindTotp-copySecret"
+  }, /*#__PURE__*/_react.default.createElement(Paragraph, {
+    copyable: true
+  }, secret)), /*#__PURE__*/_react.default.createElement(_antd.Form, {
+    form: form,
+    onFinish: bindSuccess,
+    style: {
+      width: '100%'
+    },
+    onFinishFailed: function onFinishFailed() {
+      var _submitButtonRef$curr4;
+
+      return (_submitButtonRef$curr4 = submitButtonRef.current) === null || _submitButtonRef$curr4 === void 0 ? void 0 : _submitButtonRef$curr4.onError();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
+    className: "authing-g2-input-form g2-mfa-totp-verify-input",
+    name: "remember",
+    rules: [{
+      validator: function validator(_, value) {
+        console.log(value);
+
+        if (!value) {
+          return Promise.reject(t('common.pleaseRecordKey'));
+        }
+
+        return Promise.resolve();
+      }
+    }],
+    valuePropName: "checked"
+  }, /*#__PURE__*/_react.default.createElement(_antd.Checkbox, {
+    className: "g2-mfa-bindTotp-secretSave"
+  }, t('login.rememberedSecret'))), /*#__PURE__*/_react.default.createElement(_SubmitButton.default, {
+    text: t('common.bindSuccess'),
+    ref: submitButtonRef
+  })));
+};
+
+exports.BindSuccess = BindSuccess;

package/lib/BindTotp/core/securityCode.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface SecurityCodeProps {
+    mfaToken: string;
+    qrcode: string;
+    onNext: any;
+    changeModule: any;
+}
+export declare const SecurityCode: React.FC<SecurityCodeProps>;

package/lib/BindTotp/core/securityCode.js

@@ -0,0 +1,162 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SecurityCode = 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 _module = require("../../Guard/module");
+
+var _guradHttp = require("../../_utils/guradHttp");
+
+var _SubmitButton = _interopRequireDefault(require("../../SubmitButton"));
+
+var _ImagePro = require("../../ImagePro");
+
+var _VerifyCodeFormItem = require("../../MFA/VerifyCodeInput/VerifyCodeFormItem");
+
+var _VerifyCodeInput = require("../../MFA/VerifyCodeInput");
+
+var SecurityCode = function SecurityCode(_ref) {
+  var mfaToken = _ref.mfaToken,
+      qrcode = _ref.qrcode,
+      onNext = _ref.onNext,
+      changeModule = _ref.changeModule;
+
+  var _Form$useForm = _antd.Form.useForm(),
+      _Form$useForm2 = (0, _slicedToArray2.default)(_Form$useForm, 1),
+      form = _Form$useForm2[0];
+
+  var submitButtonRef = (0, _react.useRef)(null);
+
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+      t = _useTranslation.t;
+
+  var _useGuardHttp = (0, _guradHttp.useGuardHttp)(),
+      post = _useGuardHttp.post;
+
+  var onJump = function onJump() {
+    changeModule === null || changeModule === void 0 ? void 0 : changeModule(_module.GuardModuleType.DOWNLOAD_AT);
+  };
+
+  var _useAsyncFn = (0, _reactUse.useAsyncFn)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+    var saftyCode, _yield$post, code, data, resMessage, _submitButtonRef$curr;
+
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            submitButtonRef.current.onSpin(true);
+            _context.prev = 1;
+            _context.next = 4;
+            return form.validateFields();
+
+          case 4:
+            saftyCode = form.getFieldValue('saftyCode');
+            _context.next = 7;
+            return post('/api/v2/mfa/totp/associate/confirm', {
+              authenticator_type: 'totp',
+              totp: saftyCode.join(''),
+              source: 'APPLICATION'
+            }, {
+              headers: {
+                authorization: mfaToken
+              }
+            });
+
+          case 7:
+            _yield$post = _context.sent;
+            code = _yield$post.code;
+            data = _yield$post.data;
+            resMessage = _yield$post.message;
+
+            if (code !== 200) {
+              submitButtonRef.current.onError();
+
+              _antd.message.error(resMessage);
+            } else {
+              onNext(data);
+            }
+
+            _context.next = 17;
+            break;
+
+          case 14:
+            _context.prev = 14;
+            _context.t0 = _context["catch"](1);
+            submitButtonRef.current.onError();
+
+          case 17:
+            _context.prev = 17;
+            (_submitButtonRef$curr = submitButtonRef.current) === null || _submitButtonRef$curr === void 0 ? void 0 : _submitButtonRef$curr.onSpin(false);
+            return _context.finish(17);
+
+          case 20:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee, null, [[1, 14, 17, 20]]);
+  })), [mfaToken]),
+      _useAsyncFn2 = (0, _slicedToArray2.default)(_useAsyncFn, 2),
+      bindTotp = _useAsyncFn2[1];
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", {
+    className: "authing-g2-mfa-title"
+  }, t('user.mfaBind')), /*#__PURE__*/_react.default.createElement("p", {
+    className: "authing-g2-mfa-tips",
+    style: {
+      textAlign: 'left'
+    }
+  }, t('common.usePhoneOpen'), "\uFF08", t('common.noValidator'), ' ', /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      color: '#396AFF',
+      cursor: 'pointer'
+    },
+    onClick: onJump
+  }, t('common.clickTodownload')), "\uFF09 ", t('common.mfaText1')), /*#__PURE__*/_react.default.createElement(_ImagePro.ImagePro, {
+    className: "g2-mfa-bindTotp-qrcode",
+    src: qrcode,
+    alt: "qrcode"
+  }), /*#__PURE__*/_react.default.createElement(_antd.Form, {
+    className: "g2-mfa-bindTotp-securityCode-form",
+    form: form,
+    onSubmitCapture: function onSubmitCapture() {},
+    onFinish: bindTotp,
+    onFinishFailed: function onFinishFailed(e) {
+      submitButtonRef.current.onError();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_VerifyCodeFormItem.VerifyCodeFormItem, {
+    codeLength: 6,
+    name: "saftyCode",
+    ruleKeyword: t('user.numberSafteyCode')
+  }, /*#__PURE__*/_react.default.createElement(_VerifyCodeInput.VerifyCodeInput, {
+    length: 6,
+    showDivider: true,
+    gutter: '10px',
+    onFinish: bindTotp
+  })), /*#__PURE__*/_react.default.createElement(_SubmitButton.default, {
+    text: t('user.nextStep'),
+    ref: submitButtonRef
+  })));
+};
+
+exports.SecurityCode = SecurityCode;

package/lib/BindTotp/index.d.ts

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