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

package/es/Login/core/withAppQrcode.js

@@ -0,0 +1,65 @@
+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";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+
+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 React, { useEffect, useRef, useState } from 'react';
+import { ShieldSpin } from '../../ShieldSpin';
+import { useGuardAuthClient } from '../../Guard/authClient';
+export var LoginWithAppQrcode = function LoginWithAppQrcode(props) {
+  var timerRef = useRef();
+  var client = useGuardAuthClient();
+
+  var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      loading = _useState2[0],
+      setLoading = _useState2[1];
+
+  var appQrcodeClient = client.qrcode;
+  useEffect(function () {
+    if (!props.canLoop) {
+      return;
+    }
+
+    appQrcodeClient.startScanning('authingGuardAppQrcode', _objectSpread(_objectSpread({
+      autoExchangeUserInfo: true
+    }, props.qrCodeScanOptions), {}, {
+      onCodeLoaded: function onCodeLoaded() {
+        setLoading(false);
+      },
+      onStart: function onStart(timer) {
+        timerRef.current = timer;
+      },
+      onSuccess: function onSuccess(user) {
+        props.onLogin(200, user);
+      },
+      onError: function onError(message) {// config.qrCodeScanOptions?.onError?.(message)
+        // onFail && onFail(`${message}`)
+      },
+      onCodeLoadFailed: function onCodeLoadFailed() {
+        setLoading(false);
+      },
+      onRetry: function onRetry() {
+        setLoading(true);
+      }
+    }));
+    return function () {
+      return clearInterval(timerRef.current);
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [appQrcodeClient, props.canLoop, props.qrCodeScanOptions]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "authing-g2-login-app-qrcode"
+  }, loading && /*#__PURE__*/React.createElement(ShieldSpin, null), /*#__PURE__*/React.createElement("div", {
+    id: "authingGuardAppQrcode"
+  }));
+};

package/es/Login/core/withLDAP.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+interface LoginWithLDAPProps {
+    publicKey: string;
+    autoRegister?: boolean;
+    host?: string;
+    onLogin: any;
+    onBeforeLogin: any;
+}
+export declare const LoginWithLDAP: (props: LoginWithLDAPProps) => JSX.Element;
+export {};

package/es/Login/core/withLDAP.js

@@ -0,0 +1,210 @@
+import "antd/lib/form/style";
+import _Form from "antd/lib/form";
+import "antd/lib/input/style";
+import _Input from "antd/lib/input";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/trim";
+import React, { useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { LoginMethods } from '../../';
+import { ErrorCode } from '../../_utils/GuardErrorCode';
+import { useGuardAuthClient } from '../../Guard/authClient';
+import SubmitButton from '../../SubmitButton';
+import { fieldRequiredRule } from '../../_utils';
+import { IconFont } from '../../IconFont';
+import { InputPassword } from '../../InputPassword';
+export var LoginWithLDAP = function LoginWithLDAP(props) {
+  var client = useGuardAuthClient();
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  var submitButtonRef = useRef(null);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showCaptcha = _useState2[0],
+      setShowCaptcha = _useState2[1];
+
+  var _useState3 = useState(''),
+      _useState4 = _slicedToArray(_useState3, 2),
+      verifyCodeUrl = _useState4[0],
+      setVerifyCodeUrl = _useState4[1];
+
+  var captchaUrl = "".concat(props.host, "/api/v2/security/captcha");
+
+  var getCaptchaUrl = function getCaptchaUrl() {
+    var _context;
+
+    return _concatInstanceProperty(_context = "".concat(captchaUrl, "?r=")).call(_context, +new Date());
+  };
+
+  var onFinish = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(values) {
+      var _context2, _context3;
+
+      var loginInfo, context, account, password, user, e;
+      return _regeneratorRuntime.wrap(function _callee$(_context4) {
+        while (1) {
+          switch (_context4.prev = _context4.next) {
+            case 0:
+              // onBeforeLogin
+              submitButtonRef.current.onSpin(true);
+              loginInfo = {
+                type: LoginMethods.LDAP,
+                data: {
+                  identity: values.account,
+                  password: values.password,
+                  captchaCode: values.captchaCode
+                }
+              };
+              _context4.next = 4;
+              return props.onBeforeLogin(loginInfo);
+
+            case 4:
+              context = _context4.sent;
+
+              if (context) {
+                _context4.next = 8;
+                break;
+              }
+
+              submitButtonRef.current.onSpin(false);
+              return _context4.abrupt("return");
+
+            case 8:
+              // onLogin
+              account = values.account && _trimInstanceProperty(_context2 = values.account).call(_context2);
+              password = values.password && _trimInstanceProperty(_context3 = values.password).call(_context3); // let captchaCode = values.captchaCode && values.captchaCode.trim()
+
+              _context4.prev = 10;
+              _context4.next = 13;
+              return client.loginByLdap(account, password);
+
+            case 13:
+              user = _context4.sent;
+              props.onLogin(200, user);
+              _context4.next = 33;
+              break;
+
+            case 17:
+              _context4.prev = 17;
+              _context4.t0 = _context4["catch"](10);
+
+              if (!(typeof (_context4.t0 === null || _context4.t0 === void 0 ? void 0 : _context4.t0.message) === 'string')) {
+                _context4.next = 33;
+                break;
+              }
+
+              e = {
+                code: 2333,
+                data: {},
+                message: t('common.timeoutLDAP')
+              };
+              _context4.prev = 21;
+              e = JSON.parse(_context4.t0 === null || _context4.t0 === void 0 ? void 0 : _context4.t0.message);
+              console.log('paser error.message error，cheke error', _context4.t0); // onFail && onFail(errorData)
+
+              submitButtonRef.current.onSpin(false);
+              return _context4.abrupt("return");
+
+            case 28:
+              _context4.prev = 28;
+              _context4.t1 = _context4["catch"](21);
+
+            case 30:
+              if (e.code === ErrorCode.INPUT_CAPTCHACODE) {
+                setVerifyCodeUrl(getCaptchaUrl());
+                setShowCaptcha(true);
+              }
+
+              submitButtonRef.current.onSpin(false);
+              props.onLogin(e.code, e.data, e.message); // onFail && onFail(error)
+
+            case 33:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee, null, [[10, 17], [21, 28]]);
+    }));
+
+    return function onFinish(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "authing-g2-login-ldap"
+  }, /*#__PURE__*/React.createElement(_Form, {
+    name: "passworLogin",
+    onFinish: onFinish,
+    onFinishFailed: function onFinishFailed() {
+      return submitButtonRef.current.onError();
+    },
+    autoComplete: "off"
+  }, /*#__PURE__*/React.createElement(_Form.Item, {
+    validateTrigger: ['onBlur', 'onChange'],
+    className: "authing-g2-input-form",
+    name: "account",
+    rules: fieldRequiredRule(t('common.account'))
+  }, /*#__PURE__*/React.createElement(_Input, {
+    className: "authing-g2-input",
+    autoComplete: "email,username,tel",
+    size: "large",
+    placeholder: t('login.inputLdapUsername'),
+    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",
+    name: "password",
+    rules: fieldRequiredRule(t('common.password'))
+  }, /*#__PURE__*/React.createElement(InputPassword, {
+    className: "authing-g2-input",
+    size: "large",
+    placeholder: t('login.inputLdapPwd') // prefix={<LockOutlined style={{ color: '#878A95' }} />}
+    ,
+    prefix: /*#__PURE__*/React.createElement(IconFont, {
+      type: "authing-a-lock-line1",
+      style: {
+        color: '#878A95'
+      }
+    })
+  })), showCaptcha && /*#__PURE__*/React.createElement(_Form.Item, {
+    validateTrigger: ['onBlur', 'onChange'],
+    className: "authing-g2-input-form",
+    name: "captchaCode",
+    rules: [{
+      required: true,
+      message: t('login.inputCaptchaCode')
+    }]
+  }, /*#__PURE__*/React.createElement(_Input, {
+    className: "authing-g2-input add-after",
+    size: "large",
+    placeholder: t('login.inputCaptchaCode'),
+    addonAfter: /*#__PURE__*/React.createElement("img", {
+      className: "g2-captcha-code-image",
+      src: verifyCodeUrl,
+      alt: t('login.captchaCode'),
+      style: {
+        height: '2em',
+        cursor: 'pointer'
+      },
+      onClick: function onClick() {
+        return setVerifyCodeUrl(getCaptchaUrl());
+      }
+    })
+  })), /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(SubmitButton, {
+    text: t('common.login'),
+    className: "password",
+    ref: submitButtonRef
+  }))));
+};

package/es/Login/core/withPassword/FormItemAccount.d.ts

@@ -0,0 +1,7 @@
+import { FormItemProps } from 'antd/lib/form';
+import React from 'react';
+import { PasswordLoginMethods } from '../../../AuthingGuard/api';
+export interface FormItemAccountProps extends FormItemProps {
+    passwordLoginMethods: PasswordLoginMethods[];
+}
+export declare const FormItemAccount: React.FC<FormItemAccountProps>;

package/es/Login/core/withPassword/FormItemAccount.js

@@ -0,0 +1,34 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["passwordLoginMethods"];
+import FormItem from 'antd/lib/form/FormItem';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import CustomFormItem from '../../../ValidatorRules';
+import { fieldRequiredRule } from '../../../_utils';
+export var FormItemAccount = function FormItemAccount(props) {
+  var methods = props.passwordLoginMethods,
+      formItemPtops = _objectWithoutProperties(props, _excluded);
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  var runderTemplate = useMemo(function () {
+    if (methods.length !== 1) return /*#__PURE__*/React.createElement(FormItem, _extends({
+      validateTrigger: ['onBlur', 'onChange'],
+      rules: fieldRequiredRule(t('common.account'))
+    }, formItemPtops));
+
+    switch (methods[0]) {
+      case 'phone-password':
+        return /*#__PURE__*/React.createElement(CustomFormItem.Phone, formItemPtops);
+
+      case 'email-password':
+        return /*#__PURE__*/React.createElement(CustomFormItem.Email, formItemPtops);
+
+      case 'username-password':
+        return /*#__PURE__*/React.createElement(CustomFormItem.UserName, formItemPtops);
+    }
+  }, [formItemPtops, methods, t]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, runderTemplate);
+};

package/es/Login/core/withPassword/GraphicVerifyCode.d.ts

@@ -0,0 +1,7 @@
+import { InputProps } from 'antd/lib/input';
+import React from 'react';
+export interface GraphicVerifyCodeProps extends InputProps {
+    verifyCodeUrl: string;
+    changeCode: () => void;
+}
+export declare const GraphicVerifyCode: React.FC<GraphicVerifyCodeProps>;

package/es/Login/core/withPassword/GraphicVerifyCode.js

@@ -0,0 +1,29 @@
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["verifyCodeUrl", "changeCode"];
+import Input from 'antd/lib/input';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { ImagePro } from '../../../ImagePro';
+export var GraphicVerifyCode = function GraphicVerifyCode(props) {
+  var verifyCodeUrl = props.verifyCodeUrl,
+      changeCode = props.changeCode,
+      inputProps = _objectWithoutProperties(props, _excluded);
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "g2-graphic-verify-code"
+  }, /*#__PURE__*/React.createElement(Input, inputProps), /*#__PURE__*/React.createElement(ImagePro, {
+    className: "g2-captcha-code-image",
+    src: verifyCodeUrl,
+    alt: t('login.captchaCode'),
+    height: "46px",
+    style: {
+      cursor: 'pointer'
+    },
+    onClick: function onClick() {
+      return changeCode();
+    }
+  }));
+};

package/es/Login/core/withPassword/InputAccount.d.ts

@@ -0,0 +1,7 @@
+import { InputProps } from 'antd/lib/input';
+import React from 'react';
+import { PasswordLoginMethods } from '../../../AuthingGuard/api';
+export interface InputAccountProps extends InputProps {
+    passwordLoginMethods: PasswordLoginMethods[];
+}
+export declare const InputAccount: React.FC<InputAccountProps>;

package/es/Login/core/withPassword/InputAccount.js

@@ -0,0 +1,56 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["passwordLoginMethods"];
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _sortInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/sort";
+import Input from 'antd/lib/input';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { InputNumber } from '../../../InputNumber';
+export var InputAccount = function InputAccount(props) {
+  var methods = props.passwordLoginMethods,
+      inputProps = _objectWithoutProperties(props, _excluded);
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  var loginMethodsText = useMemo(function () {
+    return {
+      'email-password': {
+        t: t('common.email'),
+        sort: 2
+      },
+      'phone-password': {
+        t: t('common.phoneNumber'),
+        sort: 1
+      },
+      'username-password': {
+        t: t('common.username'),
+        sort: 0
+      }
+    };
+  }, [t]);
+  var placeholder = useMemo(function () {
+    var _context, _context2;
+
+    return t('login.inputAccount', {
+      text: methods === null || methods === void 0 ? void 0 : _mapInstanceProperty(_context = _sortInstanceProperty(_context2 = _mapInstanceProperty(methods).call(methods, function (item) {
+        return loginMethodsText[item];
+      })).call(_context2, function (a, b) {
+        return _sortInstanceProperty(a) - _sortInstanceProperty(b);
+      })).call(_context, function (item) {
+        return item.t;
+      }).join(' / ')
+    });
+  }, [loginMethodsText, methods, t]);
+  var runderInput = useMemo(function () {
+    if (methods.length === 1 && methods[0] === 'phone-password') return /*#__PURE__*/React.createElement(InputNumber, _extends({
+      maxLength: 11,
+      placeholder: placeholder
+    }, inputProps));
+    return /*#__PURE__*/React.createElement(Input, _extends({
+      placeholder: placeholder
+    }, inputProps));
+  }, [inputProps, methods, placeholder]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, runderInput);
+};

package/es/Login/core/withPassword/index.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { PasswordLoginMethods } from '../../../AuthingGuard/api';
+interface LoginWithPasswordProps {
+    publicKey: string;
+    autoRegister?: boolean;
+    host?: string;
+    onLogin: any;
+    onBeforeLogin: any;
+    passwordLoginMethods: PasswordLoginMethods[];
+}
+export declare const LoginWithPassword: (props: LoginWithPasswordProps) => JSX.Element;
+export {};

package/es/Login/core/withPassword/index.js

@@ -0,0 +1,221 @@
+import "antd/lib/form/style";
+import _Form from "antd/lib/form";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _URL from "@babel/runtime-corejs3/core-js-stable/url";
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/trim";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import React, { useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useGuardHttp } from '../../../_utils/guradHttp';
+import { useGuardAuthClient } from '../../../Guard/authClient';
+import { fieldRequiredRule, getUserRegisterParams } from '../../../_utils';
+import { ErrorCode } from '../../../_utils/GuardErrorCode';
+import SubmitButton from '../../../SubmitButton';
+import { LoginMethods } from '../../..';
+import { FormItemAccount } from './FormItemAccount';
+import { InputAccount } from './InputAccount';
+import { GraphicVerifyCode } from './GraphicVerifyCode';
+import { IconFont } from '../../../IconFont';
+import { InputPassword } from '../../../InputPassword';
+export var LoginWithPassword = function LoginWithPassword(props) {
+  var _context5;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  var _useGuardHttp = useGuardHttp(),
+      post = _useGuardHttp.post;
+
+  var client = useGuardAuthClient();
+  var submitButtonRef = useRef(null);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      showCaptcha = _useState2[0],
+      setShowCaptcha = _useState2[1];
+
+  var _useState3 = useState(''),
+      _useState4 = _slicedToArray(_useState3, 2),
+      verifyCodeUrl = _useState4[0],
+      setVerifyCodeUrl = _useState4[1];
+
+  var _useState5 = useState(0),
+      _useState6 = _slicedToArray(_useState5, 2),
+      remainCount = _useState6[0],
+      setRemainCount = _useState6[1];
+
+  var getCaptchaUrl = function getCaptchaUrl() {
+    var url = new _URL(props.host);
+    url.pathname = '/api/v2/security/captcha';
+    url.search = "?r=".concat(+new Date());
+    return url.href;
+  };
+
+  var encrypt = client.options.encryptFunction;
+
+  var onFinish = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(values) {
+      var _context, _context2, _context3;
+
+      var loginInfo, context, url, account, password, captchaCode, body, _yield$post, code, message, data, _remainCount;
+
+      return _regeneratorRuntime.wrap(function _callee$(_context4) {
+        while (1) {
+          switch (_context4.prev = _context4.next) {
+            case 0:
+              setRemainCount(0); // onBeforeLogin
+
+              submitButtonRef === null || submitButtonRef === void 0 ? void 0 : submitButtonRef.current.onSpin(true);
+              loginInfo = {
+                type: LoginMethods.Password,
+                data: {
+                  identity: values.account,
+                  password: values.password,
+                  captchaCode: values.captchaCode
+                }
+              };
+              _context4.next = 5;
+              return props.onBeforeLogin(loginInfo);
+
+            case 5:
+              context = _context4.sent;
+
+              if (context) {
+                _context4.next = 9;
+                break;
+              }
+
+              submitButtonRef === null || submitButtonRef === void 0 ? void 0 : submitButtonRef.current.onSpin(false);
+              return _context4.abrupt("return");
+
+            case 9:
+              // onLogin
+              url = '/api/v2/login/account';
+              account = values.account && _trimInstanceProperty(_context = values.account).call(_context);
+              password = values.password && _trimInstanceProperty(_context2 = values.password).call(_context2);
+              captchaCode = values.captchaCode && _trimInstanceProperty(_context3 = values.captchaCode).call(_context3);
+              _context4.t0 = account;
+              _context4.next = 16;
+              return encrypt(password, props.publicKey);
+
+            case 16:
+              _context4.t1 = _context4.sent;
+              _context4.t2 = captchaCode;
+              _context4.t3 = getUserRegisterParams();
+              _context4.t4 = props.autoRegister;
+              body = {
+                account: _context4.t0,
+                password: _context4.t1,
+                captchaCode: _context4.t2,
+                customData: _context4.t3,
+                autoRegister: _context4.t4
+              };
+              _context4.next = 23;
+              return post(url, body);
+
+            case 23:
+              _yield$post = _context4.sent;
+              code = _yield$post.code;
+              message = _yield$post.message;
+              data = _yield$post.data;
+
+              if (code !== 200) {
+                submitButtonRef.current.onError();
+              }
+
+              if (code === ErrorCode.INPUT_CAPTCHACODE) {
+                setVerifyCodeUrl(getCaptchaUrl());
+                setShowCaptcha(true);
+              }
+
+              if (code === ErrorCode.PASSWORD_ERROR) {
+                if (data !== null && data !== void 0 && data.remainCount) {
+                  setRemainCount((_remainCount = data === null || data === void 0 ? void 0 : data.remainCount) !== null && _remainCount !== void 0 ? _remainCount : 0);
+                }
+              }
+
+              submitButtonRef === null || submitButtonRef === void 0 ? void 0 : submitButtonRef.current.onSpin(false);
+              props.onLogin(code, data, message);
+
+            case 32:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function onFinish(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "authing-g2-login-password"
+  }, /*#__PURE__*/React.createElement(_Form, {
+    name: "passworLogin",
+    onFinish: onFinish,
+    onFinishFailed: function onFinishFailed() {
+      return submitButtonRef.current.onError();
+    },
+    autoComplete: "off"
+  }, /*#__PURE__*/React.createElement(FormItemAccount, {
+    name: "account",
+    className: "authing-g2-input-form",
+    passwordLoginMethods: props.passwordLoginMethods
+  }, /*#__PURE__*/React.createElement(InputAccount, {
+    className: "authing-g2-input",
+    autoComplete: "email,username,tel",
+    size: "large",
+    prefix: /*#__PURE__*/React.createElement(IconFont, {
+      type: "authing-a-user-line1",
+      style: {
+        color: '#878A95'
+      }
+    }),
+    passwordLoginMethods: props.passwordLoginMethods
+  })), /*#__PURE__*/React.createElement(_Form.Item, {
+    name: "password",
+    validateTrigger: ['onBlur', 'onChange'],
+    className: "authing-g2-input-form",
+    rules: fieldRequiredRule(t('common.password'))
+  }, /*#__PURE__*/React.createElement(InputPassword, {
+    className: "authing-g2-input",
+    size: "large",
+    placeholder: t('login.inputLoginPwd'),
+    prefix: /*#__PURE__*/React.createElement(IconFont, {
+      type: "authing-a-lock-line1",
+      style: {
+        color: '#878A95'
+      }
+    })
+  })), showCaptcha && /*#__PURE__*/React.createElement(_Form.Item, {
+    className: "authing-g2-input-form",
+    validateTrigger: ['onBlur', 'onChange'],
+    name: "captchaCode",
+    rules: fieldRequiredRule(t('common.captchaCode'))
+  }, /*#__PURE__*/React.createElement(GraphicVerifyCode, {
+    className: "authing-g2-input",
+    size: "large",
+    placeholder: t('login.inputCaptchaCode'),
+    verifyCodeUrl: verifyCodeUrl,
+    changeCode: function changeCode() {
+      return setVerifyCodeUrl(getCaptchaUrl());
+    }
+  })), remainCount !== 0 && /*#__PURE__*/React.createElement("span", {
+    style: {
+      marginBottom: 23,
+      fontSize: 12,
+      color: '#E63333',
+      display: 'block'
+    }
+  }, t('common.loginFailCheck', {
+    number: remainCount
+  })), /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(SubmitButton, {
+    text: props.autoRegister ? _concatInstanceProperty(_context5 = "".concat(t('common.login'), " / ")).call(_context5, t('common.register')) : t('common.login'),
+    className: "password",
+    ref: submitButtonRef
+  }))));
+};

package/es/Login/core/withPhonecode.d.ts

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