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

package/lib/Login/socialLogin/index.js

@@ -0,0 +1,462 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SocialLogin = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _antd = require("antd");
+
+var _avatar = _interopRequireDefault(require("antd/lib/avatar/avatar"));
+
+var _authingJsSdk = require("authing-js-sdk");
+
+var _qs = _interopRequireDefault(require("qs"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactI18next = require("react-i18next");
+
+var _shortid = _interopRequireDefault(require("shortid"));
+
+var _locales = require("../../_utils/locales");
+
+var _utils = require("../../_utils");
+
+var _guradHttp = require("../../_utils/guradHttp");
+
+var _constants = require("../../AuthingGuard/constants");
+
+var _useScreenSize3 = require("../../AuthingGuard/hooks/useScreenSize");
+
+var _authClient = require("../../Guard/authClient");
+
+var _IconFont = require("../../IconFont");
+
+var SocialLogin = function SocialLogin(_ref) {
+  var _config$__publicConfi, _socialConnectionObjs;
+
+  var appId = _ref.appId,
+      config = _ref.config,
+      onGuardLogin = _ref.onLogin;
+  var noLoginMethods = !config.loginMethods.length;
+  var userPoolId = (_config$__publicConfi = config.__publicConfig__) === null || _config$__publicConfi === void 0 ? void 0 : _config$__publicConfi.userPoolId;
+  var publicConfig = config.__publicConfig__;
+
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+      t = _useTranslation.t;
+
+  var _useGuardHttp = (0, _guradHttp.useGuardHttp)(),
+      post = _useGuardHttp.post;
+
+  var _useScreenSize = (0, _useScreenSize3.useScreenSize)(),
+      _useScreenSize2 = (0, _slicedToArray2.default)(_useScreenSize, 1),
+      screenSize = _useScreenSize2[0];
+
+  var authClient = (0, _authClient.useGuardAuthClient)();
+  (0, _react.useEffect)(function () {
+    var onMessage = function onMessage(evt) {
+      // TODO: event.origin是指发送的消息源，一定要进行验证！！！
+      var _evt$data = evt.data,
+          code = _evt$data.code,
+          errMsg = _evt$data.message,
+          data = _evt$data.data,
+          event = _evt$data.event;
+
+      var _ref2 = event || {},
+          source = _ref2.source,
+          eventType = _ref2.eventType; // 社会化登录是用 authing-js-sdk 实现的，不用再在这里回调了
+
+
+      if (source === 'authing' && eventType === 'socialLogin') {
+        return;
+      }
+
+      try {
+        var parsedMsg = JSON.parse(errMsg);
+        var authingCode = parsedMsg.code;
+
+        if ([_constants.OTP_MFA_CODE, _constants.APP_MFA_CODE].includes(authingCode)) {
+          //   onFail(parsedMsg)
+          // TODO
+          return;
+        }
+      } catch (e) {// do nothing...
+      }
+
+      if (code !== undefined) {
+        if (code === 200) {
+          localStorage.setItem('_authing_token', data === null || data === void 0 ? void 0 : data.token); //   onSuccess(data)
+          // TODO
+        } else {
+          _antd.message.error(errMsg);
+        }
+      }
+    };
+
+    window.addEventListener('message', onMessage);
+    return function () {
+      window.removeEventListener('message', onMessage);
+    };
+  }, []);
+  var enterpriseConnectionObjs;
+
+  if (config.enterpriseConnections) {
+    var _config$__publicConfi2, _config$__publicConfi3, _config$__publicConfi4;
+
+    enterpriseConnectionObjs = ((_config$__publicConfi2 = config.__publicConfig__) === null || _config$__publicConfi2 === void 0 ? void 0 : (_config$__publicConfi3 = _config$__publicConfi2.identityProviders) === null || _config$__publicConfi3 === void 0 ? void 0 : (_config$__publicConfi4 = _config$__publicConfi3.filter) === null || _config$__publicConfi4 === void 0 ? void 0 : _config$__publicConfi4.call(_config$__publicConfi3, function (item) {
+      return config.enterpriseConnections.includes(item.identifier);
+    })) || [];
+  } else {
+    var _config$__publicConfi5;
+
+    enterpriseConnectionObjs = ((_config$__publicConfi5 = config.__publicConfig__) === null || _config$__publicConfi5 === void 0 ? void 0 : _config$__publicConfi5.identityProviders) || [];
+  }
+
+  var idpButtons = enterpriseConnectionObjs.map(function (i) {
+    if (i.protocol === _authingJsSdk.Protocol.OIDC) {
+      var configItem = i.config;
+
+      var state = _shortid.default.generate();
+
+      var query = _qs.default.stringify({
+        client_id: configItem.clientId,
+        redirect_uri: configItem.redirectUri,
+        scope: configItem.scopes,
+        response_type: configItem.responseType,
+        state: state,
+        nonce: _shortid.default.generate()
+      });
+
+      var url = "".concat(configItem.authorizationEdpoint, "?").concat(query);
+      return /*#__PURE__*/_react.default.createElement(_antd.Button, {
+        key: i.identifier,
+        className: "g2-guard-third-login-btn",
+        block: true,
+        size: "large",
+        icon: /*#__PURE__*/_react.default.createElement(_avatar.default, {
+          size: 20,
+          src: i.logo,
+          style: {
+            marginRight: 8
+          }
+        }),
+        onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+          return _regenerator.default.wrap(function _callee$(_context) {
+            while (1) {
+              switch (_context.prev = _context.next) {
+                case 0:
+                  _context.next = 2;
+                  return post('/api/v2/connections/oidc/start-interaction', {
+                    state: state,
+                    protocol: i.protocol,
+                    userPoolId: userPoolId,
+                    appId: appId,
+                    referer: window.location.href,
+                    connection: {
+                      providerIentifier: i.identifier
+                    }
+                  });
+
+                case 2:
+                  (0, _utils.popupCenter)(url);
+
+                case 3:
+                case "end":
+                  return _context.stop();
+              }
+            }
+          }, _callee);
+        }))
+      }, t('login.loginBy', {
+        name: i.displayName
+      }));
+    } else if (i.protocol === _authingJsSdk.Protocol.SAML) {
+      var _config = i.config;
+      return /*#__PURE__*/_react.default.createElement(_antd.Button, {
+        key: i.identifier,
+        className: "g2-guard-third-login-btn",
+        block: true,
+        size: "large",
+        icon: /*#__PURE__*/_react.default.createElement(_avatar.default, {
+          size: 20,
+          src: i.logo,
+          style: {
+            marginRight: 8
+          }
+        }),
+        onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+          return _regenerator.default.wrap(function _callee2$(_context2) {
+            while (1) {
+              switch (_context2.prev = _context2.next) {
+                case 0:
+                  (0, _utils.popupCenter)(_config.samlRequest);
+
+                case 1:
+                case "end":
+                  return _context2.stop();
+              }
+            }
+          }, _callee2);
+        }))
+      }, t('login.loginBy', {
+        name: i.displayName
+      }));
+    } else if (i.protocol === _authingJsSdk.Protocol.CAS) {
+      var _config2 = i.config;
+      return /*#__PURE__*/_react.default.createElement(_antd.Button, {
+        key: i.identifier,
+        className: "g2-guard-third-login-btn",
+        block: true,
+        size: "large",
+        icon: /*#__PURE__*/_react.default.createElement(_avatar.default, {
+          size: 20,
+          src: i.logo,
+          style: {
+            marginRight: 8
+          }
+        }),
+        onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
+          return _regenerator.default.wrap(function _callee3$(_context3) {
+            while (1) {
+              switch (_context3.prev = _context3.next) {
+                case 0:
+                  (0, _utils.popupCenter)(_config2.casConnectionLoginUrl);
+
+                case 1:
+                case "end":
+                  return _context3.stop();
+              }
+            }
+          }, _callee3);
+        }))
+      }, t('login.loginBy', {
+        name: i.displayName
+      }));
+    } else if (i.protocol === _authingJsSdk.Protocol.OAUTH) {
+      var _config3 = i.config;
+      return /*#__PURE__*/_react.default.createElement(_antd.Button, {
+        key: i.identifier,
+        className: "g2-guard-third-login-btn",
+        block: true,
+        size: "large",
+        icon: /*#__PURE__*/_react.default.createElement(_avatar.default, {
+          size: 20,
+          src: i.logo,
+          style: {
+            marginRight: 8
+          }
+        }),
+        onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4() {
+          return _regenerator.default.wrap(function _callee4$(_context4) {
+            while (1) {
+              switch (_context4.prev = _context4.next) {
+                case 0:
+                  (0, _utils.popupCenter)(_config3.authUrl);
+
+                case 1:
+                case "end":
+                  return _context4.stop();
+              }
+            }
+          }, _callee4);
+        }))
+      }, t('login.loginBy', {
+        name: i.displayName
+      }));
+    } else if (i.protocol === _authingJsSdk.Protocol.AZURE_AD) {
+      var _configItem = i.config;
+      return /*#__PURE__*/_react.default.createElement(_antd.Button, {
+        key: i.identifier,
+        className: "g2-guard-third-login-btn",
+        block: true,
+        size: "large",
+        icon: /*#__PURE__*/_react.default.createElement(_avatar.default, {
+          size: 20,
+          src: i.logo,
+          style: {
+            marginRight: 8
+          }
+        }),
+        onClick: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5() {
+          return _regenerator.default.wrap(function _callee5$(_context5) {
+            while (1) {
+              switch (_context5.prev = _context5.next) {
+                case 0:
+                  (0, _utils.popupCenter)(_configItem.authorizationUrl);
+
+                case 1:
+                case "end":
+                  return _context5.stop();
+              }
+            }
+          }, _callee5);
+        }))
+      }, t('login.loginBy', {
+        name: i.displayName
+      }));
+    } else {
+      return null;
+    }
+  });
+  var socialConnectionObjs;
+
+  if (!config.socialConnections) {
+    socialConnectionObjs = (0, _toConsumableArray2.default)((publicConfig === null || publicConfig === void 0 ? void 0 : publicConfig.socialConnections) || []);
+  } else {
+    var _publicConfig$socialC, _publicConfig$socialC2, _publicConfig$socialC3;
+
+    var socials = config.socialConnections;
+    socialConnectionObjs = (_publicConfig$socialC = publicConfig === null || publicConfig === void 0 ? void 0 : (_publicConfig$socialC2 = publicConfig.socialConnections) === null || _publicConfig$socialC2 === void 0 ? void 0 : (_publicConfig$socialC3 = _publicConfig$socialC2.filter) === null || _publicConfig$socialC3 === void 0 ? void 0 : _publicConfig$socialC3.call(_publicConfig$socialC2, function (item) {
+      return socials.includes(item.provider);
+    })) !== null && _publicConfig$socialC !== void 0 ? _publicConfig$socialC : [];
+  } // 某些社会化登录会在 tabs 中显示，或者无法在 Guard 中使用，所以底部不显示了
+
+
+  socialConnectionObjs = (_socialConnectionObjs = socialConnectionObjs) === null || _socialConnectionObjs === void 0 ? void 0 : _socialConnectionObjs.filter(function (item) {
+    return !_constants.HIDE_SOCIALS.includes(item.provider);
+  });
+  var socialLoginButtons = socialConnectionObjs.filter(function (item) {
+    return (0, _utils.isWechatBrowser)() ? item.provider === _authingJsSdk.SocialConnectionProvider.WECHATMP : item.provider !== _authingJsSdk.SocialConnectionProvider.WECHATMP;
+  }).map(function (item) {
+    var iconType = "authing-".concat(item.provider.replace(/:/g, '-'));
+    var authorization_params = {};
+
+    if (item.provider === _authingJsSdk.SocialConnectionProvider.BAIDU) {
+      authorization_params.display = screenSize;
+    }
+
+    var onLogin = function onLogin() {
+      authClient.social.authorize(item.identifier, {
+        onSuccess: function onSuccess(user) {
+          // TODO
+          // onSuccess(user)
+          onGuardLogin(200, user);
+        },
+        onError: function onError(code, msg) {
+          try {
+            var parsedMsg = JSON.parse(msg);
+            var authingCode = parsedMsg.code,
+                authingMessage = parsedMsg.message,
+                authingData = parsedMsg.data; // if ([OTP_MFA_CODE, APP_MFA_CODE].includes(authingCode)) {
+            //   // TODO
+            //   onGuardLogin(authingCode, authingData, authingMessage)
+            //   return
+            // }
+
+            onGuardLogin(authingCode, authingData, authingMessage);
+          } catch (e) {// do nothing...
+          }
+
+          _antd.message.error(msg);
+        },
+        authorization_params: authorization_params
+      });
+    };
+
+    var shape = config.socialConnectionsBtnShape;
+
+    if (shape === 'button') {
+      var _ref8, _item$displayName;
+
+      return /*#__PURE__*/_react.default.createElement(_antd.Button, {
+        key: item.id,
+        block: true,
+        size: "large",
+        className: "g2-guard-third-login-btn",
+        icon: /*#__PURE__*/_react.default.createElement(_IconFont.IconFont, {
+          type: "".concat(iconType, "-fill"),
+          style: {
+            fontSize: 20,
+            marginRight: 8
+          }
+        }),
+        onClick: onLogin,
+        style: {
+          marginBottom: 8
+        }
+      }, (_ref8 = (_item$displayName = item.displayName) !== null && _item$displayName !== void 0 ? _item$displayName : _locales.i18n.language === 'zh-CN' ? item.name : item.name_en) !== null && _ref8 !== void 0 ? _ref8 : item.provider);
+    } else if (shape === 'icon') {
+      var _item$tooltip;
+
+      return /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+        key: item.id,
+        title: ((_item$tooltip = item.tooltip) === null || _item$tooltip === void 0 ? void 0 : _item$tooltip[_locales.i18n.language]) || item.name
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "g2-social-login-item",
+        onClick: onLogin
+      }, /*#__PURE__*/_react.default.createElement(_IconFont.IconFont, {
+        type: "".concat(iconType, "-fill")
+      })));
+    } else {
+      var _ref9, _item$displayName2, _item$tooltip2;
+
+      return noLoginMethods ? /*#__PURE__*/_react.default.createElement(_antd.Button, {
+        key: item.id,
+        block: true,
+        size: "large",
+        className: "g2-guard-third-login-btn",
+        icon: /*#__PURE__*/_react.default.createElement(_IconFont.IconFont, {
+          type: "".concat(iconType, "-fill"),
+          style: {
+            fontSize: 20,
+            marginRight: 8
+          }
+        }),
+        onClick: onLogin
+      }, (_ref9 = (_item$displayName2 = item.displayName) !== null && _item$displayName2 !== void 0 ? _item$displayName2 : _locales.i18n.language === 'zh-CN' ? item.name : item.name_en) !== null && _ref9 !== void 0 ? _ref9 : item.provider) : /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+        overlayStyle: {
+          fontFamily: 'sans-serif'
+        },
+        key: item.id,
+        title: ((_item$tooltip2 = item.tooltip) === null || _item$tooltip2 === void 0 ? void 0 : _item$tooltip2[_locales.i18n.language]) || item.name
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "g2-social-login-item",
+        onClick: onLogin
+      }, /*#__PURE__*/_react.default.createElement(_IconFont.IconFont, {
+        type: "".concat(iconType, "-fill")
+      })));
+    }
+  });
+  var idp = enterpriseConnectionObjs.length ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !noLoginMethods && /*#__PURE__*/_react.default.createElement("div", {
+    className: "g2-social-login-title"
+  }, _locales.i18n.t('login.otherLoginWay')), /*#__PURE__*/_react.default.createElement("div", {
+    className: "g2-social-login-list"
+  }, idpButtons)) : null; // eslint-disable-next-line react-hooks/exhaustive-deps
+  // let socialLogin
+  // const shape = config.socialConnectionsBtnShape
+
+  var socialLogin = socialLoginButtons.length > 0 && noLoginMethods ? /*#__PURE__*/_react.default.createElement(_antd.Space, {
+    size: 12,
+    className: "g2-guard-full-width-space no-login-methods",
+    direction: "vertical"
+  }, socialLoginButtons) : socialLoginButtons.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "g2-social-login-title"
+  }, t('login.thridAccLogin')), /*#__PURE__*/_react.default.createElement("div", {
+    className: "g2-social-login-list"
+  }, socialLoginButtons));
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !noLoginMethods && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      flex: 1,
+      minHeight: 32
+    }
+  }), /*#__PURE__*/_react.default.createElement(_antd.Space, {
+    size: 12,
+    direction: "vertical",
+    className: "g2-guard-full-width-space"
+  }, !(publicConfig !== null && publicConfig !== void 0 && publicConfig.ssoPageComponentDisplay.idpBtns) || idp, !(publicConfig !== null && publicConfig !== void 0 && publicConfig.ssoPageComponentDisplay.socialLoginBtns) || socialLogin));
+};
+
+exports.SocialLogin = SocialLogin;

package/lib/Login/style/css.js

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

package/lib/Login/style/index.css

@@ -0,0 +1 @@
+.g2-qrcode-switch{position:absolute;display:flex;right:16px}.g2-qrcode-switch :global(.authing-ant-popover-inner-content){display:flex;justify-content:center;align-items:center;background:rgba(84,89,104,.1);height:26px;margin-right:4px;font-size:12px;padding:0 12px;border-radius:4px;color:#545968}@media (any-hover:hover){.g2-qrcode-switch .switch-img:hover .imgae-mask{border-width:0;right:50px;top:50px}}.g2-qrcode-switch .imgae-mask{width:0;height:0;border-style:solid;border-width:50px 0 0 50px;border-color:transparent transparent transparent #fff;position:absolute;right:0;top:0;transition:all .2s}.g2-qrcode-switch .qrcode-switch-image{font-size:50px;color:#396aff;cursor:pointer}.authing-g2-login-app-qrcode{min-height:288px;display:flex;justify-content:center;align-items:center}.authing-g2-login-app-qrcode img{width:200px;height:200px;margin-top:0!important}.authing-g2-login-app-qrcode .__authing__heading-subtitle-style{font-size:14px}.authing-g2-login-app-qrcode .__authing-shadow-style{width:200px;height:200px;margin-left:-100px;line-height:200px}.switch-text{left:-80px!important;top:4px!important}.switch-text .authing-ant-popover-inner{background:rgba(84,89,104,.1);border-radius:4px;box-shadow:none}.switch-text .authing-ant-popover-inner-content{display:flex;justify-content:center;align-items:center;height:26px;width:72px;white-space:nowrap;margin-right:4px;font-size:12px;padding:0 12px;border-radius:4px;color:#545968}.switch-text .authing-ant-popover-arrow{border-color:rgba(84,89,104,.1)!important;border-width:3px!important;background:#fff!important;width:0!important;height:0!important;right:7px!important}

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

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

package/lib/Login/style/index.js

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

package/lib/Login/style/index.less

@@ -0,0 +1,99 @@
+.g2-qrcode-switch {
+  position: absolute;
+  display: flex;
+  right: 16px;
+
+  :global(.authing-ant-popover-inner-content) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgba(84, 89, 104, 0.1);
+    height: 26px;
+    margin-right: 4px;
+    font-size: 12px;
+    padding: 0 12px;
+    border-radius: 4px;
+    color: #545968;
+  }
+  .switch-img {
+    @media (any-hover: hover) {
+      &:hover {
+        .imgae-mask {
+          border-width: 0;
+          right: 50px;
+          top: 50px;
+        }
+      }
+    }
+  }
+  .imgae-mask {
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 50px 0 0 50px;
+    border-color: transparent transparent transparent #fff;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transition: 0.2s all;
+  }
+  .qrcode-switch-image {
+    // width: 50px;
+    // height: 50px;
+    font-size: 50px;
+    color: #396aff;
+    cursor: pointer;
+  }
+}
+
+.authing-g2-login-app-qrcode {
+  min-height: 288px;
+  // height: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  img {
+    width: 200px;
+    height: 200px;
+    margin-top: 0px !important;
+  }
+  .__authing__heading-subtitle-style {
+    font-size: 14px;
+  }
+  .__authing-shadow-style {
+    width: 200px;
+    height: 200px;
+    margin-left: -100px;
+    line-height: 200px;
+  }
+}
+.switch-text {
+  left: -80px !important;
+  top: 4px !important;
+  .authing-ant-popover-inner {
+    background: rgba(84, 89, 104, 0.1);
+    border-radius: 4px;
+    box-shadow: none;
+  }
+  .authing-ant-popover-inner-content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 26px;
+    width: 72px;
+    white-space: nowrap;
+    margin-right: 4px;
+    font-size: 12px;
+    padding: 0 12px;
+    border-radius: 4px;
+    color: #545968;
+  }
+  .authing-ant-popover-arrow {
+    border-color: rgba(84, 89, 104, 0.1) !important;
+    border-width: 3px !important;
+    background: #fff !important;
+    width: 0px !important;
+    height: 0px !important;
+    right: 7px !important;
+  }
+}

package/lib/Login/style/socialLogin.css

@@ -0,0 +1 @@
+.g2-guard-full-width-space{width:100%}.no-login-methods{padding:38px}.g2-guard-third-login-btn{display:flex!important;border:none!important;background-color:#f5f6f7!important;border-radius:4px!important;color:#282d3c!important;font-size:14px!important;margin-bottom:8px!important;margin-top:8px!important;justify-content:center;align-items:center}.g2-guard-third-login-btn:last-child{margin-bottom:16px!important}.g2-guard-third-login-btn:hover{background-color:rgba(84,89,104,.2)!important}.g2-social-login-item{display:inline-flex;margin:12px;width:56px;height:48px;background-color:#f5f6f7;border-radius:4px;justify-content:center;align-items:center;cursor:pointer;-webkit-user-select:none;-ms-user-select:none;user-select:none}.g2-social-login-item .g2-icon{font-size:24px;transition:color .3s ease-out}.g2-social-login-item:hover{background:rgba(84,89,104,.2)}.g2-social-login-title{text-align:center;font-size:14px;color:#c8c9cc}.g2-social-login-title:after,.g2-social-login-title:before{content:"——";color:#eee;margin:0 11px}.g2-social-login-list{display:flex;flex-wrap:wrap;justify-content:center;padding:0 35px}.authing-ant-avatar>img{display:block;width:100%;height:100%;object-fit:cover}

package/lib/Login/style/socialLogin.less

@@ -0,0 +1,77 @@
+.g2-guard-full-width-space {
+  width: 100%;
+}
+
+.no-login-methods {
+  padding: 38px;
+}
+
+.g2-guard-third-login-btn {
+  display: flex !important;
+  border: none !important;
+  background-color: #f5f6f7 !important;
+  border-radius: 4px !important;
+  color: #282d3c !important;
+  font-size: 14px !important;
+  margin-bottom: 8px !important;
+  margin-top: 8px !important;
+
+  justify-content: center;
+  align-items: center;
+
+  &:last-child {
+    margin-bottom: 16px !important;
+  }
+  &:hover {
+    background-color: rgba(84, 89, 104, 0.2) !important;
+  }
+}
+
+.g2-social-login-item {
+  display: inline-flex;
+  margin: 12px;
+  width: 56px;
+  height: 48px;
+  background-color: #f5f6f7;
+  border-radius: 4px;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+
+  .g2-icon {
+    font-size: 24px;
+    transition: color 0.3s ease-out;
+  }
+
+  &:hover {
+    background: rgba(84, 89, 104, 0.2);
+  }
+}
+
+.g2-social-login-title {
+  text-align: center;
+  font-size: 14px;
+  color: #c8c9cc;
+}
+
+.g2-social-login-title::before,
+.g2-social-login-title::after {
+  content: '——';
+  color: #eeeeee;
+  margin: 0 11px;
+}
+
+.g2-social-login-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  padding: 0 35px;
+}
+
+.authing-ant-avatar > img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}

package/lib/MFA/VerifyCodeInput/VerifyCodeFormItem.d.ts

@@ -0,0 +1,7 @@
+import { FormItemProps } from 'antd/lib/form';
+import React from 'react';
+export interface VerifyCodeFormItemProps extends FormItemProps {
+    codeLength: number;
+    ruleKeyword?: string;
+}
+export declare const VerifyCodeFormItem: React.FC<VerifyCodeFormItemProps>;