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

package/es/MFA/interface.js

@@ -0,0 +1,29 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) symbols = _filterInstanceProperty(symbols).call(symbols, 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) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import { getDefaultG2Config } from '../Type';
+
+var defaultConfig = _objectSpread({}, getDefaultG2Config());
+
+export var getDefaultMFAConfig = function getDefaultMFAConfig() {
+  return _objectSpread(_objectSpread({}, getDefaultG2Config()), defaultConfig);
+};
+export var MFAType;
+
+(function (MFAType) {
+  MFAType["SMS"] = "SMS";
+  MFAType["EMAIL"] = "EMAIL";
+  MFAType["TOTP"] = "OTP";
+  MFAType["FACE"] = "FACE";
+})(MFAType || (MFAType = {}));

package/es/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/es/MFA/mfaMethods/index.js

@@ -0,0 +1,80 @@
+import "antd/lib/button/style";
+import _Button from "antd/lib/button";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+var _methodTitleMapping;
+
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _sortInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/sort";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { IconFont } from '../../IconFont';
+import { MFAType } from '../interface';
+import { i18n } from '../../_utils/locales';
+var methodTitleMapping = (_methodTitleMapping = {}, _defineProperty(_methodTitleMapping, MFAType.EMAIL, {
+  title: function title() {
+    return i18n.t('common.EmailVerification');
+  },
+  icon: 'authing-mail'
+}), _defineProperty(_methodTitleMapping, MFAType.SMS, {
+  title: function title() {
+    return i18n.t('common.SMS');
+  },
+  icon: 'authing-phone'
+}), _defineProperty(_methodTitleMapping, MFAType.TOTP, {
+  title: function title() {
+    return i18n.t('common.OTPVerification');
+  },
+  icon: 'authing-totp'
+}), _defineProperty(_methodTitleMapping, MFAType.FACE, {
+  title: function title() {
+    return i18n.t('common.faceVerification');
+  },
+  icon: 'authing-face'
+}), _methodTitleMapping);
+export 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 = useState(method),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentMethod = _useState2[0],
+      setCurrentMethod = _useState2[1];
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  var otherMethods = useMemo(function () {
+    var _context, _context2;
+
+    return _mapInstanceProperty(_context = _sortInstanceProperty(_context2 = _filterInstanceProperty(applicationMfa).call(applicationMfa, function (item) {
+      return item.mfaPolicy !== currentMethod;
+    })).call(_context2, function (a, b) {
+      return _sortInstanceProperty(a) - _sortInstanceProperty(b);
+    })).call(_context, function (item) {
+      return /*#__PURE__*/React.createElement(_Button, {
+        className: "g2-guard-mfa-methods-btn",
+        onClick: function onClick(e) {
+          onChangeMethod(item.mfaPolicy);
+          setCurrentMethod(item.mfaPolicy);
+        },
+        key: item.mfaPolicy
+      }, /*#__PURE__*/React.createElement(IconFont, {
+        type: methodTitleMapping[item.mfaPolicy].icon
+      }), "".concat(methodTitleMapping[item.mfaPolicy].title()));
+    });
+  }, [applicationMfa, currentMethod, onChangeMethod]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, otherMethods.length !== 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      minHeight: 32
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "g2-mfa-method"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "g2-mfa-method-title"
+  }, t('login.otherVerifyWay')), otherMethods)));
+};

package/es/MFA/style/css.js

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

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

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

package/es/MFA/style/index.js

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

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

package/es/NeedHelpView/core/describeQuestions.js

@@ -0,0 +1,299 @@
+import "antd/lib/modal/style";
+import _Modal from "antd/lib/modal";
+import "antd/lib/upload/style";
+import _Upload from "antd/lib/upload";
+import "antd/lib/select/style";
+import _Select from "antd/lib/select";
+import "antd/lib/input/style";
+import _Input from "antd/lib/input";
+import _toConsumableArray from "@babel/runtime-corejs3/helpers/esm/toConsumableArray";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
+import "antd/lib/form/style";
+import _Form from "antd/lib/form";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import React, { useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import SubmitButton from '../../SubmitButton';
+import { PlusOutlined } from '@ant-design/icons';
+import { useGuardHttp } from '../../_utils/guradHttp';
+import { fieldRequiredRule, validate } from '../../_utils';
+import { IconFont } from '../../IconFont';
+export var DescribeQuestions = function DescribeQuestions(props) {
+  var _context2;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t; // 不清楚为什么放出去之后，i18n 的结果全是 undefeated
+
+
+  var typeProblemMap = {
+    0: [t('common.problem.noVerifyTip.tip'), t('common.problem.noVerifyTip.type1'), t('common.problem.noVerifyTip.type2'), t('common.problem.noVerifyTip.type3')],
+    1: [t('common.problem.noLoginTip.tip'), t('common.problem.noLoginTip.type1'), t('common.problem.noLoginTip.type2')],
+    2: [t('common.problem.noRegisterTip.tip'), t('common.problem.noRegisterTip.type1'), t('common.problem.noRegisterTip.type2'), t('common.problem.noRegisterTip.type3')],
+    3: [t('common.problem.noAccountTip.tip'), t('common.problem.noAccountTip.type1'), t('common.problem.noAccountTip.type2')],
+    4: [t('common.problem.noResetPassTip.tip'), t('common.problem.noResetPassTip.type1'), t('common.problem.noResetPassTip.type2')],
+    5: [t('common.problem.otherTip.tip'), t('common.problem.otherTip.type1')],
+    6: [t('common.problem.otherTip.tip'), t('common.problem.otherTip.type1')]
+  };
+  var typeOperations = [{
+    label: t('common.problem.noVerify'),
+    value: 0
+  }, {
+    label: t('common.problem.noLogin'),
+    value: 1
+  }, {
+    label: t('common.problem.noRegister'),
+    value: 2
+  }, {
+    label: t('common.problem.noAccount'),
+    value: 3
+  }, {
+    label: t('common.problem.noResetPass'),
+    value: 4
+  }, {
+    label: t('common.problem.locked'),
+    value: 5
+  }, {
+    label: t('common.problem.other'),
+    value: 6
+  }];
+
+  var _Form$useForm = _Form.useForm(),
+      _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+      form = _Form$useForm2[0];
+
+  var _useGuardHttp = useGuardHttp(),
+      post = _useGuardHttp.post;
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      uploadUrl = _useState2[0],
+      setUploadUrl = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      previewVisible = _useState4[0],
+      setPreviewVisible = _useState4[1];
+
+  var _useState5 = useState(),
+      _useState6 = _slicedToArray(_useState5, 2),
+      previewImage = _useState6[0],
+      setPreviewImage = _useState6[1];
+
+  var _useState7 = useState([]),
+      _useState8 = _slicedToArray(_useState7, 2),
+      fileList = _useState8[0],
+      setFileList = _useState8[1];
+
+  var _useState9 = useState(0),
+      _useState10 = _slicedToArray(_useState9, 2),
+      typeProblem = _useState10[0],
+      setTypeProblem = _useState10[1];
+
+  var submitButtonRef = useRef(null);
+  var textMap = typeProblemMap[typeProblem];
+
+  var onFinish = function onFinish(values) {
+    var _submitButtonRef$curr;
+
+    submitButtonRef === null || submitButtonRef === void 0 ? void 0 : (_submitButtonRef$curr = submitButtonRef.current) === null || _submitButtonRef$curr === void 0 ? void 0 : _submitButtonRef$curr.onSpin(true);
+    var params = {
+      type: typeProblem,
+      description: values.description,
+      phone: values.identify,
+      images: uploadUrl,
+      appId: props.appId
+    };
+    var context = post('/api/v2/feedback', params);
+    context.then(function (res) {
+      if (res.code === 200) {
+        var _submitButtonRef$curr2;
+
+        submitButtonRef === null || submitButtonRef === void 0 ? void 0 : (_submitButtonRef$curr2 = submitButtonRef.current) === null || _submitButtonRef$curr2 === void 0 ? void 0 : _submitButtonRef$curr2.onSpin(false);
+        props.onSuccess();
+      }
+    });
+  };
+
+  var handlePreview = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(file) {
+      var url;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              // setPreviewImage(file.url);
+              // file 没有 url 属性，需要改成下面的用法
+              url = file.response.data.url;
+              setPreviewImage(url);
+              setPreviewVisible(true);
+
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function handlePreview(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "authing-g2-describe-questions"
+  }, /*#__PURE__*/React.createElement(_Form, {
+    name: "resetPassword",
+    layout: "vertical",
+    form: form,
+    onFinish: onFinish,
+    onFinishFailed: function onFinishFailed() {
+      var _submitButtonRef$curr3;
+
+      submitButtonRef === null || submitButtonRef === void 0 ? void 0 : (_submitButtonRef$curr3 = submitButtonRef.current) === null || _submitButtonRef$curr3 === void 0 ? void 0 : _submitButtonRef$curr3.onError();
+    },
+    autoComplete: "off"
+  }, /*#__PURE__*/React.createElement(_Form.Item, {
+    validateTrigger: ['onBlur', 'onChange'],
+    className: "authing-g2-input-form",
+    name: "identify",
+    label: t('common.problem.form.phone'),
+    validateFirst: true,
+    rules: _concatInstanceProperty(_context2 = []).call(_context2, _toConsumableArray(fieldRequiredRule(t('common.problem.form.phone'))), [{
+      validator: function () {
+        var _validator = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(_, value) {
+          return _regeneratorRuntime.wrap(function _callee2$(_context3) {
+            while (1) {
+              switch (_context3.prev = _context3.next) {
+                case 0:
+                  if (value) {
+                    _context3.next = 2;
+                    break;
+                  }
+
+                  return _context3.abrupt("return");
+
+                case 2:
+                  if (!(validate('email', value) || validate('phone', value))) {
+                    _context3.next = 6;
+                    break;
+                  }
+
+                  return _context3.abrupt("return");
+
+                case 6:
+                  throw new Error(t('login.inputCorrectPhoneOrEmail'));
+
+                case 7:
+                case "end":
+                  return _context3.stop();
+              }
+            }
+          }, _callee2);
+        }));
+
+        function validator(_x2, _x3) {
+          return _validator.apply(this, arguments);
+        }
+
+        return validator;
+      }()
+    }])
+  }, /*#__PURE__*/React.createElement(_Input, {
+    className: "authing-g2-input",
+    autoComplete: "tel",
+    size: "large",
+    placeholder: t('login.inputPhoneOrEmail'),
+    prefix: /*#__PURE__*/React.createElement(IconFont, {
+      type: "authing-a-user-line1",
+      style: {
+        color: '#878A95'
+      }
+    })
+  })), /*#__PURE__*/React.createElement(_Form.Item, {
+    validateTrigger: ['onBlur', 'onChange'],
+    className: "authing-g2-input-form ",
+    label: t('common.problem.form.question'),
+    name: "questionPicker",
+    initialValue: typeProblem
+  }, /*#__PURE__*/React.createElement(_Select, {
+    className: "authing-g2-select",
+    onChange: function onChange(value) {
+      setTypeProblem(value);
+    }
+  }, typeOperations === null || typeOperations === void 0 ? void 0 : _mapInstanceProperty(typeOperations).call(typeOperations, function (_ref2) {
+    var value = _ref2.value,
+        label = _ref2.label;
+    return /*#__PURE__*/React.createElement(_Select.Option, {
+      key: value,
+      value: value,
+      className: "authing-g2-question-option ".concat(typeProblem === value ? 'authing-g2-question-option-active' : '')
+    }, label);
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "authing-g2-input-form"
+  }, textMap === null || textMap === void 0 ? void 0 : _mapInstanceProperty(textMap).call(textMap, function (item, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index
+    }, item);
+  })), /*#__PURE__*/React.createElement(_Form.Item, {
+    validateTrigger: ['onBlur', 'onChange'],
+    className: "authing-g2-input-form",
+    name: "description",
+    label: t('common.problem.form.questionDescript')
+  }, /*#__PURE__*/React.createElement(_Input.TextArea, {
+    className: "authing-g2-questions-textarea",
+    maxLength: 200,
+    showCount: true,
+    rows: 4,
+    style: {
+      marginBottom: 10
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "authing-g2-input-form"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "label-title"
+  }, t('common.problem.form.questionClip')), /*#__PURE__*/React.createElement("div", {
+    className: "g2-questions"
+  }, /*#__PURE__*/React.createElement(_Upload, {
+    action: "".concat(props.host, "/api/v2/upload?folder=photos"),
+    listType: "picture-card",
+    accept: "image/png, image/jpeg, image/jpg",
+    className: "authing-g2-questions-upload-self",
+    fileList: fileList,
+    onPreview: handlePreview,
+    onChange: function onChange(e) {
+      var _context4;
+
+      setFileList(e.fileList);
+
+      var imgUrl = _mapInstanceProperty(_context4 = e.fileList).call(_context4, function (item) {
+        var response = item.response;
+        return response === null || response === void 0 ? void 0 : response.data.url;
+      });
+
+      setUploadUrl(imgUrl);
+    }
+  }, fileList.length >= 5 ? null : /*#__PURE__*/React.createElement(PlusOutlined, null)))), /*#__PURE__*/React.createElement(_Form.Item, {
+    className: "authing-g2-input-form submit-form"
+  }, /*#__PURE__*/React.createElement(SubmitButton, {
+    className: "forget-password",
+    text: t('common.problem.form.submit'),
+    ref: submitButtonRef
+  }))), /*#__PURE__*/React.createElement(_Modal, {
+    visible: previewVisible,
+    title: null,
+    footer: null,
+    onCancel: function onCancel() {
+      return setPreviewVisible(false);
+    }
+  }, /*#__PURE__*/React.createElement("img", {
+    alt: "example",
+    style: {
+      width: '100%'
+    },
+    src: previewImage
+  })));
+};

package/es/NeedHelpView/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const GuardNeedHelpView: (props: any) => JSX.Element;