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

package/es/Login/socialLogin/index.js

@@ -0,0 +1,450 @@
+import "antd/lib/space/style";
+import _Space from "antd/lib/space";
+import "antd/lib/tooltip/style";
+import _Tooltip from "antd/lib/tooltip";
+import _toConsumableArray from "@babel/runtime-corejs3/helpers/esm/toConsumableArray";
+import "antd/lib/button/style";
+import _Button from "antd/lib/button";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
+import "antd/lib/message/style";
+import _message from "antd/lib/message";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import Avatar from 'antd/lib/avatar/avatar';
+import { Protocol, SocialConnectionProvider } from 'authing-js-sdk';
+import qs from 'qs';
+import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import shortid from 'shortid';
+import { i18n } from '../../_utils/locales';
+import { isWechatBrowser, popupCenter } from '../../_utils';
+import { useGuardHttp } from '../../_utils/guradHttp';
+import { APP_MFA_CODE, HIDE_SOCIALS, OTP_MFA_CODE } from '../../AuthingGuard/constants';
+import { useScreenSize } from '../../AuthingGuard/hooks/useScreenSize';
+import { useGuardAuthClient } from '../../Guard/authClient';
+import { IconFont } from '../../IconFont';
+export var SocialLogin = function SocialLogin(_ref) {
+  var _config$__publicConfi, _socialConnectionObjs, _context9;
+
+  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 = useTranslation(),
+      t = _useTranslation.t;
+
+  var _useGuardHttp = useGuardHttp(),
+      post = _useGuardHttp.post;
+
+  var _useScreenSize = useScreenSize(),
+      _useScreenSize2 = _slicedToArray(_useScreenSize, 1),
+      screenSize = _useScreenSize2[0];
+
+  var authClient = useGuardAuthClient();
+  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 _context;
+
+        var parsedMsg = JSON.parse(errMsg);
+        var authingCode = parsedMsg.code;
+
+        if (_includesInstanceProperty(_context = [OTP_MFA_CODE, APP_MFA_CODE]).call(_context, 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 {
+          _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 = _filterInstanceProperty(_config$__publicConfi3)) === null || _config$__publicConfi4 === void 0 ? void 0 : _config$__publicConfi4.call(_config$__publicConfi3, function (item) {
+      var _context2;
+
+      return _includesInstanceProperty(_context2 = config.enterpriseConnections).call(_context2, item.identifier);
+    })) || [];
+  } else {
+    var _config$__publicConfi5;
+
+    enterpriseConnectionObjs = ((_config$__publicConfi5 = config.__publicConfig__) === null || _config$__publicConfi5 === void 0 ? void 0 : _config$__publicConfi5.identityProviders) || [];
+  }
+
+  var idpButtons = _mapInstanceProperty(enterpriseConnectionObjs).call(enterpriseConnectionObjs, function (i) {
+    if (i.protocol === Protocol.OIDC) {
+      var _context3;
+
+      var configItem = i.config;
+      var state = shortid.generate();
+      var query = qs.stringify({
+        client_id: configItem.clientId,
+        redirect_uri: configItem.redirectUri,
+        scope: configItem.scopes,
+        response_type: configItem.responseType,
+        state: state,
+        nonce: shortid.generate()
+      });
+
+      var url = _concatInstanceProperty(_context3 = "".concat(configItem.authorizationEdpoint, "?")).call(_context3, query);
+
+      return /*#__PURE__*/React.createElement(_Button, {
+        key: i.identifier,
+        className: "g2-guard-third-login-btn",
+        block: true,
+        size: "large",
+        icon: /*#__PURE__*/React.createElement(Avatar, {
+          size: 20,
+          src: i.logo,
+          style: {
+            marginRight: 8
+          }
+        }),
+        onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+          return _regeneratorRuntime.wrap(function _callee$(_context4) {
+            while (1) {
+              switch (_context4.prev = _context4.next) {
+                case 0:
+                  _context4.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:
+                  popupCenter(url);
+
+                case 3:
+                case "end":
+                  return _context4.stop();
+              }
+            }
+          }, _callee);
+        }))
+      }, t('login.loginBy', {
+        name: i.displayName
+      }));
+    } else if (i.protocol === Protocol.SAML) {
+      var _config = i.config;
+      return /*#__PURE__*/React.createElement(_Button, {
+        key: i.identifier,
+        className: "g2-guard-third-login-btn",
+        block: true,
+        size: "large",
+        icon: /*#__PURE__*/React.createElement(Avatar, {
+          size: 20,
+          src: i.logo,
+          style: {
+            marginRight: 8
+          }
+        }),
+        onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+          return _regeneratorRuntime.wrap(function _callee2$(_context5) {
+            while (1) {
+              switch (_context5.prev = _context5.next) {
+                case 0:
+                  popupCenter(_config.samlRequest);
+
+                case 1:
+                case "end":
+                  return _context5.stop();
+              }
+            }
+          }, _callee2);
+        }))
+      }, t('login.loginBy', {
+        name: i.displayName
+      }));
+    } else if (i.protocol === Protocol.CAS) {
+      var _config2 = i.config;
+      return /*#__PURE__*/React.createElement(_Button, {
+        key: i.identifier,
+        className: "g2-guard-third-login-btn",
+        block: true,
+        size: "large",
+        icon: /*#__PURE__*/React.createElement(Avatar, {
+          size: 20,
+          src: i.logo,
+          style: {
+            marginRight: 8
+          }
+        }),
+        onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+          return _regeneratorRuntime.wrap(function _callee3$(_context6) {
+            while (1) {
+              switch (_context6.prev = _context6.next) {
+                case 0:
+                  popupCenter(_config2.casConnectionLoginUrl);
+
+                case 1:
+                case "end":
+                  return _context6.stop();
+              }
+            }
+          }, _callee3);
+        }))
+      }, t('login.loginBy', {
+        name: i.displayName
+      }));
+    } else if (i.protocol === Protocol.OAUTH) {
+      var _config3 = i.config;
+      return /*#__PURE__*/React.createElement(_Button, {
+        key: i.identifier,
+        className: "g2-guard-third-login-btn",
+        block: true,
+        size: "large",
+        icon: /*#__PURE__*/React.createElement(Avatar, {
+          size: 20,
+          src: i.logo,
+          style: {
+            marginRight: 8
+          }
+        }),
+        onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+          return _regeneratorRuntime.wrap(function _callee4$(_context7) {
+            while (1) {
+              switch (_context7.prev = _context7.next) {
+                case 0:
+                  popupCenter(_config3.authUrl);
+
+                case 1:
+                case "end":
+                  return _context7.stop();
+              }
+            }
+          }, _callee4);
+        }))
+      }, t('login.loginBy', {
+        name: i.displayName
+      }));
+    } else if (i.protocol === Protocol.AZURE_AD) {
+      var _configItem = i.config;
+      return /*#__PURE__*/React.createElement(_Button, {
+        key: i.identifier,
+        className: "g2-guard-third-login-btn",
+        block: true,
+        size: "large",
+        icon: /*#__PURE__*/React.createElement(Avatar, {
+          size: 20,
+          src: i.logo,
+          style: {
+            marginRight: 8
+          }
+        }),
+        onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+          return _regeneratorRuntime.wrap(function _callee5$(_context8) {
+            while (1) {
+              switch (_context8.prev = _context8.next) {
+                case 0:
+                  popupCenter(_configItem.authorizationUrl);
+
+                case 1:
+                case "end":
+                  return _context8.stop();
+              }
+            }
+          }, _callee5);
+        }))
+      }, t('login.loginBy', {
+        name: i.displayName
+      }));
+    } else {
+      return null;
+    }
+  });
+
+  var socialConnectionObjs;
+
+  if (!config.socialConnections) {
+    socialConnectionObjs = _toConsumableArray((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 = _filterInstanceProperty(_publicConfig$socialC2)) === null || _publicConfig$socialC3 === void 0 ? void 0 : _publicConfig$socialC3.call(_publicConfig$socialC2, function (item) {
+      return _includesInstanceProperty(socials).call(socials, item.provider);
+    })) !== null && _publicConfig$socialC !== void 0 ? _publicConfig$socialC : [];
+  } // 某些社会化登录会在 tabs 中显示，或者无法在 Guard 中使用，所以底部不显示了
+
+
+  socialConnectionObjs = (_socialConnectionObjs = socialConnectionObjs) === null || _socialConnectionObjs === void 0 ? void 0 : _filterInstanceProperty(_socialConnectionObjs).call(_socialConnectionObjs, function (item) {
+    return !_includesInstanceProperty(HIDE_SOCIALS).call(HIDE_SOCIALS, item.provider);
+  });
+
+  var socialLoginButtons = _mapInstanceProperty(_context9 = _filterInstanceProperty(socialConnectionObjs).call(socialConnectionObjs, function (item) {
+    return isWechatBrowser() ? item.provider === SocialConnectionProvider.WECHATMP : item.provider !== SocialConnectionProvider.WECHATMP;
+  })).call(_context9, function (item) {
+    var iconType = "authing-".concat(item.provider.replace(/:/g, '-'));
+    var authorization_params = {};
+
+    if (item.provider === 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...
+          }
+
+          _message.error(msg);
+        },
+        authorization_params: authorization_params
+      });
+    };
+
+    var shape = config.socialConnectionsBtnShape;
+
+    if (shape === 'button') {
+      var _ref8, _item$displayName;
+
+      return /*#__PURE__*/React.createElement(_Button, {
+        key: item.id,
+        block: true,
+        size: "large",
+        className: "g2-guard-third-login-btn",
+        icon: /*#__PURE__*/React.createElement(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 : 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.createElement(_Tooltip, {
+        key: item.id,
+        title: ((_item$tooltip = item.tooltip) === null || _item$tooltip === void 0 ? void 0 : _item$tooltip[i18n.language]) || item.name
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "g2-social-login-item",
+        onClick: onLogin
+      }, /*#__PURE__*/React.createElement(IconFont, {
+        type: "".concat(iconType, "-fill")
+      })));
+    } else {
+      var _ref9, _item$displayName2, _item$tooltip2;
+
+      return noLoginMethods ? /*#__PURE__*/React.createElement(_Button, {
+        key: item.id,
+        block: true,
+        size: "large",
+        className: "g2-guard-third-login-btn",
+        icon: /*#__PURE__*/React.createElement(IconFont, {
+          type: "".concat(iconType, "-fill"),
+          style: {
+            fontSize: 20,
+            marginRight: 8
+          }
+        }),
+        onClick: onLogin
+      }, (_ref9 = (_item$displayName2 = item.displayName) !== null && _item$displayName2 !== void 0 ? _item$displayName2 : i18n.language === 'zh-CN' ? item.name : item.name_en) !== null && _ref9 !== void 0 ? _ref9 : item.provider) : /*#__PURE__*/React.createElement(_Tooltip, {
+        overlayStyle: {
+          fontFamily: 'sans-serif'
+        },
+        key: item.id,
+        title: ((_item$tooltip2 = item.tooltip) === null || _item$tooltip2 === void 0 ? void 0 : _item$tooltip2[i18n.language]) || item.name
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "g2-social-login-item",
+        onClick: onLogin
+      }, /*#__PURE__*/React.createElement(IconFont, {
+        type: "".concat(iconType, "-fill")
+      })));
+    }
+  });
+
+  var idp = enterpriseConnectionObjs.length ? /*#__PURE__*/React.createElement(React.Fragment, null, !noLoginMethods && /*#__PURE__*/React.createElement("div", {
+    className: "g2-social-login-title"
+  }, i18n.t('login.otherLoginWay')), /*#__PURE__*/React.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.createElement(_Space, {
+    size: 12,
+    className: "g2-guard-full-width-space no-login-methods",
+    direction: "vertical"
+  }, socialLoginButtons) : socialLoginButtons.length > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "g2-social-login-title"
+  }, t('login.thridAccLogin')), /*#__PURE__*/React.createElement("div", {
+    className: "g2-social-login-list"
+  }, socialLoginButtons));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, !noLoginMethods && /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      minHeight: 32
+    }
+  }), /*#__PURE__*/React.createElement(_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));
+};

package/es/Login/style/css.js

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

package/es/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/es/Login/style/index.d.ts

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

package/es/Login/style/index.js

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

package/es/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/es/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/es/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/es/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>;

package/es/MFA/VerifyCodeInput/VerifyCodeFormItem.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["codeLength", "ruleKeyword"];
+import Form from 'antd/lib/form';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+export var VerifyCodeFormItem = function VerifyCodeFormItem(props) {
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  var codeLength = props.codeLength,
+      _props$ruleKeyword = props.ruleKeyword,
+      ruleKeyword = _props$ruleKeyword === void 0 ? t('common.captchaCode') : _props$ruleKeyword,
+      formItemProps = _objectWithoutProperties(props, _excluded);
+
+  return /*#__PURE__*/React.createElement(Form.Item, _extends({
+    validateTrigger: ['onChange'],
+    name: "mfaCode",
+    className: "g2-mfa-totp-verify-input",
+    validateFirst: true,
+    rules: [{
+      type: 'array',
+      validateTrigger: ['onChange'],
+      message: t('common.isMissing', {
+        name: ruleKeyword
+      }),
+      required: true
+    }, {
+      type: 'array',
+      validateTrigger: [''],
+      message: t('common.fullCaptchaCode', {
+        name: ruleKeyword
+      }),
+      min: codeLength
+    }]
+  }, formItemProps));
+};