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

package/lib/MFA/index.js

@@ -0,0 +1,196 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GuardMFAView = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactI18next = require("react-i18next");
+
+var _module = require("../Guard/module");
+
+var _IconFont = require("../IconFont");
+
+var _email = require("./core/email");
+
+var _sms = require("./core/sms");
+
+var _face = require("./core/face");
+
+var _totp = require("./core/totp");
+
+var _mfaMethods = require("./mfaMethods");
+
+var _interface = require("./interface");
+
+var _authClient = require("../Guard/authClient");
+
+var _codemap = require("./codemap");
+
+var _antd = require("antd");
+
+var _ComponentsMapping;
+
+var ComponentsMapping = (_ComponentsMapping = {}, (0, _defineProperty2.default)(_ComponentsMapping, _interface.MFAType.EMAIL, function (_ref) {
+  var config = _ref.config,
+      initData = _ref.initData,
+      mfaLogin = _ref.mfaLogin;
+  return /*#__PURE__*/_react.default.createElement(_email.MFAEmail, {
+    config: config,
+    mfaToken: initData.mfaToken,
+    email: initData.email,
+    mfaLogin: mfaLogin
+  });
+}), (0, _defineProperty2.default)(_ComponentsMapping, _interface.MFAType.SMS, function (_ref2) {
+  var config = _ref2.config,
+      initData = _ref2.initData,
+      mfaLogin = _ref2.mfaLogin;
+  return /*#__PURE__*/_react.default.createElement(_sms.MFASms, {
+    config: config,
+    mfaToken: initData.mfaToken,
+    phone: initData.phone,
+    mfaLogin: mfaLogin
+  });
+}), (0, _defineProperty2.default)(_ComponentsMapping, _interface.MFAType.TOTP, function (_ref3) {
+  var initData = _ref3.initData,
+      config = _ref3.config,
+      changeModule = _ref3.changeModule,
+      mfaLogin = _ref3.mfaLogin;
+  return /*#__PURE__*/_react.default.createElement(_totp.MFATotp, {
+    changeModule: changeModule,
+    config: config,
+    initData: initData,
+    mfaLogin: mfaLogin
+  });
+}), (0, _defineProperty2.default)(_ComponentsMapping, _interface.MFAType.FACE, function (_ref4) {
+  var config = _ref4.config,
+      initData = _ref4.initData,
+      mfaLogin = _ref4.mfaLogin,
+      setShowMethods = _ref4.setShowMethods;
+  return /*#__PURE__*/_react.default.createElement(_face.MFAFace, {
+    config: config,
+    initData: initData,
+    mfaLogin: mfaLogin,
+    setShowMethods: setShowMethods
+  });
+}), _ComponentsMapping);
+
+var GuardMFAView = function GuardMFAView(_ref5) {
+  var _initData$current, _initData$application;
+
+  var initData = _ref5.initData,
+      config = _ref5.config,
+      __changeModule = _ref5.__changeModule,
+      onLogin = _ref5.onLogin;
+
+  var _useState = (0, _react.useState)((_initData$current = initData.current) !== null && _initData$current !== void 0 ? _initData$current : (_initData$application = initData.applicationMfa) === null || _initData$application === void 0 ? void 0 : _initData$application.sort(function (a, b) {
+    return a.sort - b.sort;
+  })[0].mfaPolicy),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      currentMethod = _useState2[0],
+      setCurrentMethod = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(true),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      showMethods = _useState4[0],
+      setShowMethods = _useState4[1];
+
+  var client = (0, _authClient.useGuardAuthClient)();
+
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+      t = _useTranslation.t;
+
+  var onBack = function onBack() {
+    return window.history.back();
+  };
+
+  var __codePaser = function __codePaser(code) {
+    var action = _codemap.codeMap[code];
+
+    if (code === 200) {
+      return function (data) {
+        onLogin === null || onLogin === void 0 ? void 0 : onLogin(data, client); // 登录成功
+      };
+    }
+
+    if (!action) {
+      return function (data) {
+        console.error('not catch code', code);
+
+        _antd.message.error(data.message);
+      };
+    } // 解析成功
+
+
+    if ((action === null || action === void 0 ? void 0 : action.action) === 'changeModule') {
+      var m = action.module ? action.module : _module.GuardModuleType.ERROR;
+      return function (initData) {
+        return __changeModule === null || __changeModule === void 0 ? void 0 : __changeModule(m, initData);
+      };
+    }
+
+    if ((action === null || action === void 0 ? void 0 : action.action) === 'insideFix') {
+      return function () {};
+    }
+
+    if ((action === null || action === void 0 ? void 0 : action.action) === 'message') {
+      return function (data) {
+        _antd.message.error(data.message);
+      };
+    } // 最终结果
+
+
+    return function () {
+      console.error('last action at mfaview');
+    };
+  };
+
+  var mfaLogin = function mfaLogin(code, data, message) {
+    var callback = __codePaser === null || __codePaser === void 0 ? void 0 : __codePaser(code);
+
+    if (!data) {
+      data = {};
+    }
+
+    data.__message = message;
+    callback === null || callback === void 0 ? void 0 : callback(data);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "g2-view-container"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "g2-view-back"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    onClick: onBack,
+    className: "g2-view-back-hover"
+  }, /*#__PURE__*/_react.default.createElement(_IconFont.IconFont, {
+    className: "g2-view-back-icon",
+    type: "authing-arrow-left-s-line"
+  }), /*#__PURE__*/_react.default.createElement("span", null, t('common.backLoginPage')))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "g2-mfa-content"
+  }, ComponentsMapping[currentMethod]({
+    config: config,
+    initData: initData,
+    changeModule: __changeModule,
+    mfaLogin: mfaLogin,
+    setShowMethods: setShowMethods
+  })), showMethods && /*#__PURE__*/_react.default.createElement(_mfaMethods.MFAMethods, {
+    applicationMfa: initData.applicationMfa,
+    method: currentMethod,
+    onChangeMethod: function onChangeMethod(type) {
+      setCurrentMethod(type);
+    }
+  }));
+};
+
+exports.GuardMFAView = GuardMFAView;

package/lib/MFA/interface.d.ts

@@ -0,0 +1,38 @@
+import { IG2Config, IG2Events, IG2FCProps } from '../Type';
+import { AuthenticationClient, User } from '..';
+export interface MFAConfig extends IG2Config {
+}
+export declare const getDefaultMFAConfig: () => MFAConfig;
+export interface MFAEvents extends IG2Events {
+    onLogin?: (user: User, authClient: AuthenticationClient) => void;
+}
+export declare enum MFAType {
+    SMS = "SMS",
+    EMAIL = "EMAIL",
+    TOTP = "OTP",
+    FACE = "FACE"
+}
+export interface GuardMFAInitData {
+    mfaToken: string;
+    applicationMfa: {
+        mfaPolicy: MFAType;
+        sort: number;
+        status: 0 | 1;
+    }[];
+    faceMfaEnabled: boolean;
+    totpMfaEnabled: boolean;
+    email?: string;
+    phone?: string;
+    avatar?: string;
+    nickme?: string;
+    username?: string;
+    current?: MFAType;
+}
+export interface GuardMFAProps extends IG2FCProps, MFAEvents {
+    config: Partial<MFAConfig>;
+    initData: GuardMFAInitData;
+}
+export interface GuardMFAViewProps extends GuardMFAProps {
+    config: MFAConfig;
+    initData: GuardMFAInitData;
+}

package/lib/MFA/interface.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDefaultMFAConfig = exports.MFAType = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _Type = require("../Type");
+
+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 defaultConfig = _objectSpread({}, (0, _Type.getDefaultG2Config)());
+
+var getDefaultMFAConfig = function getDefaultMFAConfig() {
+  return _objectSpread(_objectSpread({}, (0, _Type.getDefaultG2Config)()), defaultConfig);
+};
+
+exports.getDefaultMFAConfig = getDefaultMFAConfig;
+var MFAType;
+exports.MFAType = MFAType;
+
+(function (MFAType) {
+  MFAType["SMS"] = "SMS";
+  MFAType["EMAIL"] = "EMAIL";
+  MFAType["TOTP"] = "OTP";
+  MFAType["FACE"] = "FACE";
+})(MFAType || (exports.MFAType = MFAType = {}));

package/lib/MFA/mfaMethods/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { GuardMFAInitData, MFAType } from '../interface';
+export interface MFAMethodsProps {
+    applicationMfa: GuardMFAInitData['applicationMfa'];
+    method: MFAType;
+    onChangeMethod: (type: MFAType) => void;
+}
+export declare const MFAMethods: React.FC<MFAMethodsProps>;

package/lib/MFA/mfaMethods/index.js

@@ -0,0 +1,95 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MFAMethods = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactI18next = require("react-i18next");
+
+var _antd = require("antd");
+
+var _IconFont = require("../../IconFont");
+
+var _interface = require("../interface");
+
+var _locales = require("../../_utils/locales");
+
+var _methodTitleMapping;
+
+var methodTitleMapping = (_methodTitleMapping = {}, (0, _defineProperty2.default)(_methodTitleMapping, _interface.MFAType.EMAIL, {
+  title: function title() {
+    return _locales.i18n.t('common.EmailVerification');
+  },
+  icon: 'authing-mail'
+}), (0, _defineProperty2.default)(_methodTitleMapping, _interface.MFAType.SMS, {
+  title: function title() {
+    return _locales.i18n.t('common.SMS');
+  },
+  icon: 'authing-phone'
+}), (0, _defineProperty2.default)(_methodTitleMapping, _interface.MFAType.TOTP, {
+  title: function title() {
+    return _locales.i18n.t('common.OTPVerification');
+  },
+  icon: 'authing-totp'
+}), (0, _defineProperty2.default)(_methodTitleMapping, _interface.MFAType.FACE, {
+  title: function title() {
+    return _locales.i18n.t('common.faceVerification');
+  },
+  icon: 'authing-face'
+}), _methodTitleMapping);
+
+var MFAMethods = function MFAMethods(_ref) {
+  var _ref$applicationMfa = _ref.applicationMfa,
+      applicationMfa = _ref$applicationMfa === void 0 ? [] : _ref$applicationMfa,
+      method = _ref.method,
+      onChangeMethod = _ref.onChangeMethod;
+
+  var _useState = (0, _react.useState)(method),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      currentMethod = _useState2[0],
+      setCurrentMethod = _useState2[1];
+
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+      t = _useTranslation.t;
+
+  var otherMethods = (0, _react.useMemo)(function () {
+    return applicationMfa.filter(function (item) {
+      return item.mfaPolicy !== currentMethod;
+    }).sort(function (a, b) {
+      return a.sort - b.sort;
+    }).map(function (item) {
+      return /*#__PURE__*/_react.default.createElement(_antd.Button, {
+        className: "g2-guard-mfa-methods-btn",
+        onClick: function onClick(e) {
+          onChangeMethod(item.mfaPolicy);
+          setCurrentMethod(item.mfaPolicy);
+        },
+        key: item.mfaPolicy
+      }, /*#__PURE__*/_react.default.createElement(_IconFont.IconFont, {
+        type: methodTitleMapping[item.mfaPolicy].icon
+      }), "".concat(methodTitleMapping[item.mfaPolicy].title()));
+    });
+  }, [applicationMfa, currentMethod, onChangeMethod]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, otherMethods.length !== 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      minHeight: 32
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "g2-mfa-method"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "g2-mfa-method-title"
+  }, t('login.otherVerifyWay')), otherMethods)));
+};
+
+exports.MFAMethods = MFAMethods;

package/lib/MFA/style/css.js

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

package/lib/MFA/style/index.css

@@ -0,0 +1 @@
+.authing-g2-mfa-title{color:#282d3c;font-size:18px;font-weight:600;text-align:center;margin-bottom:8px;margin-top:40px}.authing-g2-mfa-tips{font-size:14px;color:#545968;text-align:center;margin-bottom:24px;min-height:23px}.g2-mfa-content{margin:0 38px}.g2-mfa-content .g2-mfa-submit-button{margin-top:32px!important}.g2-mfa-content .bind-totp{margin-top:40px!important}.g2-mfa-content .authing-ant-form-item-control-input-content{display:flex;justify-content:center}.g2-mfa-content .g2-mfa-totp-verify-input{text-align:center}.g2-mfa-content .g2-mfa-totp-verify-input .authing-code-input-item:not(:first-child){margin-left:14px}.g2-mfa-content .authing-ant-form-horizontal{display:flex;justify-content:center;flex-direction:column}.g2-mfa-content .g2-mfa-face-image{margin:0 auto;display:block;margin-bottom:24px}.g2-mfa-content .g2-mfa-face-identifying{display:flex;justify-content:center;align-items:center}.g2-mfa-content .g2-mfa-face-identifying .video-round{width:210px;height:210px;border-radius:50%;vertical-align:middle}.g2-mfa-content .g2-mfa-face-identifying .mesh{z-index:100;-webkit-user-select:none;-ms-user-select:none;user-select:none;color:#fff;position:absolute;display:flex;justify-content:center;align-items:center;cursor:pointer;background:rgba(0,0,0,.4)}.g2-mfa-content .g2-mfa-face-identifying .ring{width:240px;height:240px;position:absolute;transform:rotate(270deg)}.svg-circle-bg{stroke-width:4}.svg-circle-running{stroke-width:4;transition:all .2s linear;stroke:#396aff;stroke-linecap:round}.g2-mfa-verifyCode-formItem .authing-ant-form-item-explain-error{display:flex;justify-content:center}

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

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

package/lib/MFA/style/index.js

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

package/lib/MFA/style/index.less

@@ -0,0 +1,101 @@
+.authing-g2-mfa-title {
+  color: #282d3c;
+  font-size: 18px;
+  font-weight: 600;
+  text-align: center;
+  margin-bottom: 8px;
+  margin-top: 40px;
+}
+
+.authing-g2-mfa-tips {
+  font-size: 14px;
+  color: #545968;
+  text-align: center;
+  margin-bottom: 24px;
+  min-height: 23px;
+}
+
+.g2-mfa-content {
+  margin: 0 38px;
+
+  .g2-mfa-submit-button {
+    margin-top: 32px !important;
+  }
+
+  .bind-totp {
+    margin-top: 40px !important;
+  }
+
+  .authing-ant-form-item-control-input-content {
+    display: flex;
+    justify-content: center;
+  }
+
+  .g2-mfa-totp-verify-input {
+    text-align: center;
+    .authing-code-input-item {
+      &:not(:first-child) {
+        margin-left: 14px;
+      }
+    }
+  }
+
+  .authing-ant-form-horizontal {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+  }
+
+  .g2-mfa-face-image {
+    margin: 0px auto;
+    display: block;
+    margin-bottom: 24px;
+  }
+  .g2-mfa-face-identifying {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .video-round {
+      width: 210px;
+      height: 210px;
+      border-radius: 50%;
+      vertical-align: middle;
+    }
+    .mesh {
+      z-index: 100;
+      cursor: pointer;
+      user-select: none;
+      color: white;
+      position: absolute;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      background: rgba(0, 0, 0, 0.4);
+    }
+    .ring {
+      width: 240px;
+      height: 240px;
+      position: absolute;
+      transform: rotate(270deg);
+    }
+  }
+}
+.svg-circle-bg {
+  stroke-width: 4;
+  // stroke: rgba(255, 161, 39, 1);
+}
+.svg-circle-running {
+  stroke-width: 4;
+  transition: all 0.2s linear;
+  stroke: #396aff;
+  stroke-linecap: round;
+}
+
+.g2-mfa-verifyCode-formItem {
+  .authing-ant-form-item-explain-error {
+    display: flex;
+    justify-content: center;
+  }
+}

package/lib/MFA/style/mfaMethods.css

@@ -0,0 +1 @@
+.g2-mfa-method{padding:0 38px}.g2-mfa-method-title{text-align:center;font-size:14px;color:#c8c9cc;margin-bottom:8px;width:100%}.g2-mfa-method-title:after,.g2-mfa-method-title:before{content:"——";color:#eee;margin:0 11px}.g2-guard-mfa-methods-btn{border:none!important;background-color:#f5f6f7!important;border-radius:4px!important;color:#282d3c!important;font-size:14px!important;height:49px!important;margin-top:8px!important;width:100%;justify-content:center;align-items:center;font-size:14px}.g2-guard-mfa-methods-btn:hover{background:rgba(84,89,104,.2)!important}.g2-guard-mfa-methods-btn .g2-icon{font-size:16px;margin-right:8px}

package/lib/MFA/style/mfaMethods.less

@@ -0,0 +1,42 @@
+.g2-mfa-method {
+  padding: 0 38px;
+}
+
+.g2-mfa-method-title {
+  text-align: center;
+  font-size: 14px;
+  color: #c8c9cc;
+  margin-bottom: 8px;
+  width: 100%;
+}
+
+.g2-mfa-method-title::before,
+.g2-mfa-method-title::after {
+  content: '——';
+  color: #eeeeee;
+  margin: 0 11px;
+}
+
+.g2-guard-mfa-methods-btn {
+  border: none !important;
+  background-color: #f5f6f7 !important;
+  border-radius: 4px !important;
+  color: #282d3c !important;
+  font-size: 14px !important;
+  height: 49px !important;
+  margin-top: 8px !important;
+  width: 100%;
+
+  justify-content: center;
+  align-items: center;
+
+  font-size: 14px;
+  &:hover {
+    background: rgba(84, 89, 104, 0.2) !important;
+  }
+
+  .g2-icon {
+    font-size: 16px;
+    margin-right: 8px;
+  }
+}

package/lib/MFA/style/verifyCodeInput.css

@@ -0,0 +1 @@
+.authing-g2-code-input-item{text-align:center;width:40px;min-width:40px;min-height:40px;height:40px;line-height:40px;background-color:#f5f6f7;border:unset;border-radius:4px}.authing-g2-code-input-item:not(:first-child){margin-left:18px}.authing-g2-code-input-item input{text-align:center}.authing-g2-code-input-divider{width:14px;min-width:14px;max-width:14px;margin-left:10px}.authing-g2-code-input{display:flex;align-items:center}.authing-ant-form-item-has-error .authing-g2-code-input-item{background-color:#f5f6f7;border:1px solid #ff4d4f}

package/lib/MFA/style/verifyCodeInput.less

@@ -0,0 +1,38 @@
+.authing-g2-code-input-item {
+  text-align: center;
+  width: 40px;
+  min-width: 40px;
+  min-height: 40px;
+  height: 40px;
+  line-height: 40px;
+  background-color: #f5f6f7;
+  border: unset;
+  border-radius: 4px;
+
+  &:not(:first-child) {
+    margin-left: 18px;
+  }
+  input {
+    text-align: center;
+  }
+}
+.authing-g2-code-input-divider {
+  width: 14px;
+  min-width: 14px;
+  max-width: 14px;
+  margin-left: 10px;
+}
+.authing-g2-code-input {
+  display: flex;
+  align-items: center;
+}
+
+.authing-ant-form-item-has-error {
+  .authing-g2-code-input-item {
+    background-color: #f5f6f7;
+    border: 1px solid #ff4d4f;
+  }
+}
+// .g2-mfa-bindTotp .g2-mfa-bindTotp-securityCode-form .g2-mfa-totp-verify-input {
+//   margin-bottom: 24px;
+// }

package/lib/NeedHelpView/core/describeQuestions.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface describeQuestionsProps {
+    appId: string;
+    host: string;
+    onSuccess: any;
+}
+export declare const DescribeQuestions: (props: describeQuestionsProps) => JSX.Element;
+export {};