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

package/lib/AuthingGuard/Forms/SocialAndIdpLogin/index.js

@@ -0,0 +1,387 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SocialAndIdpLogin = 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 _qs = _interopRequireDefault(require("qs"));
+
+var _shortid = _interopRequireDefault(require("shortid"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _antd = require("antd");
+
+var _utils = require("../../../_utils");
+
+var _context6 = require("../../../context/global/context");
+
+var _constants = require("../../constants");
+
+var _types = require("../../types");
+
+var _http = require("../../../_utils/http");
+
+var _IconFont = require("../../IconFont");
+
+var _useScreenSize3 = require("../../hooks/useScreenSize");
+
+var _authingJsSdk = require("authing-js-sdk");
+
+var _reactI18next = require("react-i18next");
+
+var _locales = require("../../../_utils/locales");
+
+var SocialAndIdpLogin = function SocialAndIdpLogin(_ref) {
+  var _config$loginMethods;
+
+  var _ref$onFail = _ref.onFail,
+      onFail = _ref$onFail === void 0 ? function () {} : _ref$onFail,
+      _ref$onSuccess = _ref.onSuccess,
+      _onSuccess = _ref$onSuccess === void 0 ? function () {} : _ref$onSuccess;
+
+  var _useGuardContext = (0, _context6.useGuardContext)(),
+      _useGuardContext$stat = _useGuardContext.state,
+      config = _useGuardContext$stat.config,
+      userPoolId = _useGuardContext$stat.userPoolId,
+      appId = _useGuardContext$stat.appId,
+      authClient = _useGuardContext$stat.authClient;
+
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+      t = _useTranslation.t;
+
+  var noForm = !((_config$loginMethods = config.loginMethods) !== null && _config$loginMethods !== void 0 && _config$loginMethods.length);
+
+  var _useScreenSize = (0, _useScreenSize3.useScreenSize)(),
+      _useScreenSize2 = (0, _slicedToArray2.default)(_useScreenSize, 1),
+      screenSize = _useScreenSize2[0];
+
+  (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);
+          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);
+        } else {
+          _antd.message.error(errMsg);
+        }
+      }
+    };
+
+    window.addEventListener('message', onMessage);
+    return function () {
+      window.removeEventListener('message', onMessage);
+    };
+  }, [onFail, _onSuccess]);
+  var idpButtons = config.enterpriseConnectionObjs.map(function (i) {
+    if (i.protocol === _types.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: "authing-guard-third-login-btn",
+        block: true,
+        size: "large",
+        icon: /*#__PURE__*/_react.default.createElement(_antd.Avatar, {
+          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 _http.requestClient.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 === _types.Protocol.SAML) {
+      var _config = i.config;
+      return /*#__PURE__*/_react.default.createElement(_antd.Button, {
+        key: i.identifier,
+        className: "authing-guard-third-login-btn",
+        block: true,
+        size: "large",
+        icon: /*#__PURE__*/_react.default.createElement(_antd.Avatar, {
+          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 === _types.Protocol.CAS) {
+      var _config2 = i.config;
+      return /*#__PURE__*/_react.default.createElement(_antd.Button, {
+        key: i.identifier,
+        className: "authing-guard-third-login-btn",
+        block: true,
+        size: "large",
+        icon: /*#__PURE__*/_react.default.createElement(_antd.Avatar, {
+          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 === _types.Protocol.OAUTH) {
+      var _config3 = i.config;
+      return /*#__PURE__*/_react.default.createElement(_antd.Button, {
+        key: i.identifier,
+        className: "authing-guard-third-login-btn",
+        block: true,
+        size: "large",
+        icon: /*#__PURE__*/_react.default.createElement(_antd.Avatar, {
+          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 === _types.Protocol.AZURE_AD) {
+      var _configItem = i.config;
+      return /*#__PURE__*/_react.default.createElement(_antd.Button, {
+        key: i.identifier,
+        className: "authing-guard-third-login-btn",
+        block: true,
+        size: "large",
+        icon: /*#__PURE__*/_react.default.createElement(_antd.Avatar, {
+          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 socialLoginButtons = config.socialConnectionObjs.filter(function (item) {
+    return (0, _utils.isWechatBrowser)() ? item.provider === _authingJsSdk.SocialConnectionProvider.WECHATMP : item.provider !== _authingJsSdk.SocialConnectionProvider.WECHATMP;
+  }).map(function (item) {
+    var _item$tooltip, _item$tooltip2;
+
+    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) {
+          _onSuccess(user);
+        },
+        onError: function onError(code, msg) {
+          try {
+            var parsedMsg = JSON.parse(msg);
+            var authingCode = parsedMsg.code;
+
+            if ([_constants.OTP_MFA_CODE, _constants.APP_MFA_CODE].includes(authingCode)) {
+              onFail(parsedMsg);
+              return;
+            }
+          } catch (e) {// do nothing...
+          }
+
+          _antd.message.error(msg);
+        },
+        authorization_params: authorization_params
+      });
+    };
+
+    return noForm ? /*#__PURE__*/_react.default.createElement(_antd.Button, {
+      key: item.provider,
+      block: true,
+      size: "large",
+      className: "authing-guard-third-login-btn",
+      icon: /*#__PURE__*/_react.default.createElement(_IconFont.IconFont, {
+        type: iconType,
+        style: {
+          fontSize: 20,
+          marginRight: 8
+        }
+      }),
+      onClick: onLogin
+    }, ((_item$tooltip = item.tooltip) === null || _item$tooltip === void 0 ? void 0 : _item$tooltip[_locales.i18n.language]) || item.displayName) : /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+      key: item.provider,
+      title: ((_item$tooltip2 = item.tooltip) === null || _item$tooltip2 === void 0 ? void 0 : _item$tooltip2[_locales.i18n.language]) || item.displayName
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "authing-social-login-item",
+      onClick: onLogin
+    }, /*#__PURE__*/_react.default.createElement(_IconFont.IconFont, {
+      type: iconType
+    })));
+  });
+  var idp = config.enterpriseConnectionObjs.length > 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !noForm && /*#__PURE__*/_react.default.createElement("div", {
+    className: "authing-social-login-title"
+  }, "OR"), /*#__PURE__*/_react.default.createElement(_antd.Space, {
+    size: 12,
+    className: "authing-guard-full-width-space",
+    direction: "vertical"
+  }, idpButtons)) : null;
+  var socialLogin = socialLoginButtons.length > 0 && noForm ? /*#__PURE__*/_react.default.createElement(_antd.Space, {
+    size: 12,
+    className: "authing-guard-full-width-space",
+    direction: "vertical"
+  }, socialLoginButtons) : socialLoginButtons.length > 0 && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "authing-social-login-title"
+  }, t('login.thridAccLogin')), /*#__PURE__*/_react.default.createElement("div", {
+    className: "authing-social-login-list"
+  }, socialLoginButtons));
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !noForm && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      flex: 1,
+      minHeight: 26
+    }
+  }), /*#__PURE__*/_react.default.createElement(_antd.Space, {
+    size: 12,
+    direction: "vertical",
+    className: "authing-guard-full-width-space"
+  }, idp, socialLogin));
+};
+
+exports.SocialAndIdpLogin = SocialAndIdpLogin;

package/lib/AuthingGuard/Forms/UploadImage/index.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+export declare const UploadImage: FC<{
+    value?: string;
+    onChange?: (value: string) => void;
+}>;

package/lib/AuthingGuard/Forms/UploadImage/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.UploadImage = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _icons = require("@ant-design/icons");
+
+var _antd = require("antd");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactI18next = require("react-i18next");
+
+var _context = require("../../../context/global/context");
+
+var UploadImage = function UploadImage(_ref) {
+  var value = _ref.value,
+      onChange = _ref.onChange;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      uploading = _useState2[0],
+      setUploading = _useState2[1];
+
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+      t = _useTranslation.t;
+
+  var _useGuardContext = (0, _context.useGuardContext)(),
+      apiHost = _useGuardContext.state.config.apiHost;
+
+  var onStatusChange = function onStatusChange(info) {
+    var status = info.file.status;
+
+    if (status === 'uploading') {
+      setUploading(true);
+    } else {
+      setUploading(false);
+    }
+
+    if (status === 'done') {
+      var _info$file$response = info.file.response,
+          code = _info$file$response.code,
+          errMsg = _info$file$response.message,
+          data = _info$file$response.data;
+
+      if (code !== 200) {
+        return _antd.message.error(errMsg);
+      }
+
+      var url = data.url;
+      onChange === null || onChange === void 0 ? void 0 : onChange(url);
+    } else if (status === 'error') {
+      _antd.message.error(t('common.uploadFail', {
+        name: info.file.name
+      }));
+    }
+  };
+
+  var uploadButton = /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_icons.PlusOutlined, null), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginTop: 8
+    }
+  }, "Upload"));
+
+  return /*#__PURE__*/_react.default.createElement(_antd.Upload, {
+    name: "file",
+    accept: "image/*",
+    listType: "picture-card",
+    showUploadList: false,
+    action: "".concat(apiHost, "/api/v2/upload?folder=photos"),
+    onChange: onStatusChange
+  }, /*#__PURE__*/_react.default.createElement(_antd.Spin, {
+    size: "small",
+    spinning: uploading
+  }, value ? /*#__PURE__*/_react.default.createElement("img", {
+    src: value,
+    alt: "",
+    style: {
+      width: '100%'
+    }
+  }) : uploadButton));
+};
+
+exports.UploadImage = UploadImage;

package/lib/AuthingGuard/Forms/index.d.ts

@@ -0,0 +1,13 @@
+export * from './ADLoginForm';
+export * from './ResetPwdForm';
+export * from './MfaVerifyForm';
+export * from './LdapLoginForm';
+export * from './QrCodeLoginForm';
+export * from './MfaResetCodeForm';
+export * from './EmailRegisterForm';
+export * from './PhoneRegisterForm';
+export * from './PasswordLoginForm';
+export * from './SocialAndIdpLogin';
+export * from './PhoneCodeLoginForm';
+export * from './SmsMfaVerifyForm';
+export * from './EmailMfaVerifyForm';

package/lib/AuthingGuard/Forms/index.js

@@ -0,0 +1,174 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _ADLoginForm = require("./ADLoginForm");
+
+Object.keys(_ADLoginForm).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ADLoginForm[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ADLoginForm[key];
+    }
+  });
+});
+
+var _ResetPwdForm = require("./ResetPwdForm");
+
+Object.keys(_ResetPwdForm).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ResetPwdForm[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _ResetPwdForm[key];
+    }
+  });
+});
+
+var _MfaVerifyForm = require("./MfaVerifyForm");
+
+Object.keys(_MfaVerifyForm).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _MfaVerifyForm[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _MfaVerifyForm[key];
+    }
+  });
+});
+
+var _LdapLoginForm = require("./LdapLoginForm");
+
+Object.keys(_LdapLoginForm).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _LdapLoginForm[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _LdapLoginForm[key];
+    }
+  });
+});
+
+var _QrCodeLoginForm = require("./QrCodeLoginForm");
+
+Object.keys(_QrCodeLoginForm).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _QrCodeLoginForm[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _QrCodeLoginForm[key];
+    }
+  });
+});
+
+var _MfaResetCodeForm = require("./MfaResetCodeForm");
+
+Object.keys(_MfaResetCodeForm).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _MfaResetCodeForm[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _MfaResetCodeForm[key];
+    }
+  });
+});
+
+var _EmailRegisterForm = require("./EmailRegisterForm");
+
+Object.keys(_EmailRegisterForm).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _EmailRegisterForm[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _EmailRegisterForm[key];
+    }
+  });
+});
+
+var _PhoneRegisterForm = require("./PhoneRegisterForm");
+
+Object.keys(_PhoneRegisterForm).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PhoneRegisterForm[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _PhoneRegisterForm[key];
+    }
+  });
+});
+
+var _PasswordLoginForm = require("./PasswordLoginForm");
+
+Object.keys(_PasswordLoginForm).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PasswordLoginForm[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _PasswordLoginForm[key];
+    }
+  });
+});
+
+var _SocialAndIdpLogin = require("./SocialAndIdpLogin");
+
+Object.keys(_SocialAndIdpLogin).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SocialAndIdpLogin[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _SocialAndIdpLogin[key];
+    }
+  });
+});
+
+var _PhoneCodeLoginForm = require("./PhoneCodeLoginForm");
+
+Object.keys(_PhoneCodeLoginForm).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PhoneCodeLoginForm[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _PhoneCodeLoginForm[key];
+    }
+  });
+});
+
+var _SmsMfaVerifyForm = require("./SmsMfaVerifyForm");
+
+Object.keys(_SmsMfaVerifyForm).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SmsMfaVerifyForm[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _SmsMfaVerifyForm[key];
+    }
+  });
+});
+
+var _EmailMfaVerifyForm = require("./EmailMfaVerifyForm");
+
+Object.keys(_EmailMfaVerifyForm).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _EmailMfaVerifyForm[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _EmailMfaVerifyForm[key];
+    }
+  });
+});

package/lib/AuthingGuard/GuardLayout/index.d.ts

@@ -0,0 +1,10 @@
+import React, { FC } from 'react';
+import { UserConfig, Lang } from '../types';
+export declare const GuardLayout: FC<{
+    visible?: boolean;
+    className?: string;
+    id?: string;
+    style?: React.CSSProperties;
+    lang?: Lang;
+    userConfig: UserConfig;
+}>;