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

package/es/AuthingGuard/Forms/ResetPwdForm/index.js

@@ -0,0 +1,122 @@
+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 React, { useEffect, useState } from 'react';
+import { ResetPasswordStep1 } from './Step1';
+import { ResetPasswordStep2 } from './Step2';
+import { ResetPasswordStep3 } from './Step3';
+import { ResetPasswordStep4 } from './Step4';
+import { ResetPwdFormFooter } from './Footer';
+import { useGuardContext } from '../../../context/global/context';
+import { useTranslation } from 'react-i18next';
+export var ResetPasswordForm = function ResetPasswordForm(_ref) {
+  var onSuccess = _ref.onSuccess,
+      onFail = _ref.onFail;
+
+  var _useGuardContext = useGuardContext(),
+      setValue = _useGuardContext.setValue;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  var _useState = useState(1),
+      _useState2 = _slicedToArray(_useState, 2),
+      step = _useState2[0],
+      setStep = _useState2[1];
+
+  var _useState3 = useState(''),
+      _useState4 = _slicedToArray(_useState3, 2),
+      phone = _useState4[0],
+      setPhone = _useState4[1];
+
+  var _useState5 = useState(''),
+      _useState6 = _slicedToArray(_useState5, 2),
+      email = _useState6[0],
+      setEmail = _useState6[1];
+
+  useEffect(function () {
+    switch (step) {
+      case 1:
+        setValue('guardTitle', t('common.retrievePassword'));
+        break;
+
+      case 2:
+      case 3:
+      case 4:
+        setValue('guardTitle', t('login.resetPwd'));
+        break;
+
+      default:
+        setValue('guardTitle', t('common.retrievePassword'));
+        break;
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [step]);
+
+  var onStep1Finish = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(type, value) {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (type === 'phone') {
+                setPhone(value);
+                setStep(2);
+              } else if (type === 'email') {
+                setEmail(value);
+                setStep(3);
+              }
+
+            case 1:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function onStep1Finish(_x, _x2) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var onStep2OrStep3Finish = function onStep2OrStep3Finish() {
+    setStep(4);
+    onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
+  };
+
+  var onStep2OrStep3Fail = function onStep2OrStep3Fail(error) {
+    onFail === null || onFail === void 0 ? void 0 : onFail(error);
+  };
+
+  var getForm = function getForm() {
+    switch (step) {
+      case 1:
+        return /*#__PURE__*/React.createElement(ResetPasswordStep1, {
+          onSuccess: onStep1Finish
+        });
+
+      case 2:
+        return /*#__PURE__*/React.createElement(ResetPasswordStep2, {
+          phone: phone,
+          onFail: onStep2OrStep3Fail,
+          onSuccess: onStep2OrStep3Finish
+        });
+
+      case 3:
+        return /*#__PURE__*/React.createElement(ResetPasswordStep3, {
+          email: email,
+          onFail: onStep2OrStep3Fail,
+          onSuccess: onStep2OrStep3Finish
+        });
+
+      case 4:
+        return /*#__PURE__*/React.createElement(ResetPasswordStep4, null);
+
+      default:
+        return null;
+    }
+  };
+
+  return /*#__PURE__*/React.createElement("div", null, getForm(), step !== 4 && /*#__PURE__*/React.createElement(ResetPwdFormFooter, null));
+};

package/es/AuthingGuard/Forms/SendPhoneCode/SendCodeBtn.d.ts

@@ -0,0 +1,6 @@
+import React, { FC } from 'react';
+export interface SendCodeProps {
+    beforeSend: () => Promise<boolean>;
+    btnRef?: React.RefObject<HTMLButtonElement>;
+}
+export declare const SendCodeBtn: FC<SendCodeProps>;

package/es/AuthingGuard/Forms/SendPhoneCode/SendCodeBtn.js

@@ -0,0 +1,130 @@
+import "antd/lib/spin/style";
+import _Spin from "antd/lib/spin";
+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 _setInterval from "@babel/runtime-corejs3/core-js-stable/set-interval";
+import React, { useState, useRef, useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { LoadingOutlined } from '@ant-design/icons';
+var TIME = 60;
+
+var useSentCounter = function useSentCounter() {
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      countDown = _useState2[0],
+      setCountDown = _useState2[1];
+
+  var timerRef = useRef(0);
+  useEffect(function () {
+    return function () {
+      return clearInterval(timerRef.current);
+    };
+  }, []);
+  useEffect(function () {
+    if (countDown <= 0) {
+      clearInterval(timerRef.current);
+    }
+  }, [countDown]);
+  var enabled = useMemo(function () {
+    return countDown <= 0;
+  }, [countDown]);
+
+  var send = function send() {
+    setCountDown(TIME);
+    timerRef.current = _setInterval(function () {
+      setCountDown(function (prev) {
+        return prev - 1;
+      });
+    }, 1000);
+  };
+
+  return {
+    enabled: enabled,
+    send: send,
+    countDown: countDown
+  };
+};
+
+export var SendCodeBtn = function SendCodeBtn(_ref) {
+  var beforeSend = _ref.beforeSend,
+      btnRef = _ref.btnRef;
+
+  var _useSentCounter = useSentCounter(),
+      enabled = _useSentCounter.enabled,
+      send = _useSentCounter.send,
+      countDown = _useSentCounter.countDown;
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      loading = _useState4[0],
+      setLoading = _useState4[1];
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  var disabled = useMemo(function () {
+    return !enabled || loading;
+  }, [enabled, loading]);
+
+  var onClick = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(e) {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              setLoading(true);
+
+              if (!disabled) {
+                _context.next = 3;
+                break;
+              }
+
+              return _context.abrupt("return");
+
+            case 3:
+              _context.next = 5;
+              return beforeSend();
+
+            case 5:
+              if (_context.sent) {
+                _context.next = 8;
+                break;
+              }
+
+              setLoading(false);
+              return _context.abrupt("return");
+
+            case 8:
+              setLoading(false);
+              send();
+
+            case 10:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function onClick(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  return /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "authing-send-code-btn",
+    disabled: disabled,
+    onClick: onClick,
+    ref: btnRef
+  }, /*#__PURE__*/React.createElement(_Spin, {
+    spinning: loading,
+    indicator: /*#__PURE__*/React.createElement(LoadingOutlined, {
+      spin: true
+    }),
+    size: "small"
+  }, enabled ? t('common.sendVerifyCode') : t('common.retryAfterTime', {
+    time: countDown
+  })));
+};

package/es/AuthingGuard/Forms/SendPhoneCode/index.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { CommonMessage } from 'authing-js-sdk';
+export interface SendPhoneCodeProps {
+    phone: string;
+    onSend?: () => void;
+    onError?: (error: CommonMessage) => void;
+}
+export declare const SendPhoneCode: FC<SendPhoneCodeProps>;

package/es/AuthingGuard/Forms/SendPhoneCode/index.js

@@ -0,0 +1,69 @@
+import "antd/lib/message/style";
+import _message from "antd/lib/message";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import React from 'react';
+import { SendCodeBtn } from './SendCodeBtn';
+import { validate } from '../../../_utils';
+import { useGuardContext } from '../../../context/global/context';
+import { useTranslation } from 'react-i18next';
+export var SendPhoneCode = function SendPhoneCode(_ref) {
+  var phone = _ref.phone,
+      onSend = _ref.onSend,
+      onError = _ref.onError;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  var _useGuardContext = useGuardContext(),
+      authClient = _useGuardContext.state.authClient;
+
+  return /*#__PURE__*/React.createElement(SendCodeBtn, {
+    beforeSend: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (phone) {
+                _context.next = 3;
+                break;
+              }
+
+              _message.error(t('login.inputPhone'));
+
+              return _context.abrupt("return", false);
+
+            case 3:
+              if (validate('phone', phone)) {
+                _context.next = 6;
+                break;
+              }
+
+              _message.error(t('common.phoneFormateError'));
+
+              return _context.abrupt("return", false);
+
+            case 6:
+              _context.prev = 6;
+              _context.next = 9;
+              return authClient.sendSmsCode(phone);
+
+            case 9:
+              onSend === null || onSend === void 0 ? void 0 : onSend();
+              return _context.abrupt("return", true);
+
+            case 13:
+              _context.prev = 13;
+              _context.t0 = _context["catch"](6);
+              onError === null || onError === void 0 ? void 0 : onError(_context.t0);
+              return _context.abrupt("return", false);
+
+            case 17:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[6, 13]]);
+    }))
+  });
+};

package/es/AuthingGuard/Forms/SmsMfaVerifyForm/CheckPhoneForm.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { MFACheckPhoneFormProps } from '../../types';
+export declare const CheckPhoneForm: FC<MFACheckPhoneFormProps>;

package/es/AuthingGuard/Forms/SmsMfaVerifyForm/CheckPhoneForm.js

@@ -0,0 +1,125 @@
+import "antd/lib/button/style";
+import _Button from "antd/lib/button";
+import "antd/lib/input/style";
+import _Input from "antd/lib/input";
+import "antd/lib/message/style";
+import _message from "antd/lib/message";
+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 _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import React, { useState } from 'react';
+import { useGuardContext } from '../../../context/global/context';
+import { VALIDATE_PATTERN } from '../../../_utils';
+import { useTranslation } from 'react-i18next';
+export var CheckPhoneForm = function CheckPhoneForm(_ref) {
+  var onSuccess = _ref.onSuccess,
+      mfaToken = _ref.mfaToken;
+
+  var _useGuardContext = useGuardContext(),
+      authClient = _useGuardContext.state.authClient;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  var _Form$useForm = _Form.useForm(),
+      _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+      rawForm = _Form$useForm2[0];
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      loading = _useState2[0],
+      setLoading = _useState2[1];
+
+  var onFinish = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref2) {
+      var phone, bindable;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              phone = _ref2.phone;
+              _context.prev = 1;
+              _context.next = 4;
+              return authClient.mfa.phoneOrEmailBindable({
+                mfaToken: mfaToken,
+                phone: phone
+              });
+
+            case 4:
+              bindable = _context.sent;
+
+              if (bindable) {
+                _context.next = 8;
+                break;
+              }
+
+              _message.error(t('common.unBindEmaileDoc', {
+                email: phone
+              }));
+
+              return _context.abrupt("return");
+
+            case 8:
+              onSuccess(phone);
+              _context.next = 13;
+              break;
+
+            case 11:
+              _context.prev = 11;
+              _context.t0 = _context["catch"](1);
+
+            case 13:
+              _context.prev = 13;
+              setLoading(false);
+              return _context.finish(13);
+
+            case 16:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[1, 11, 13, 16]]);
+    }));
+
+    return function onFinish(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h3", {
+    className: "authing-guard-mfa-title"
+  }, t('common.bindPhone')), /*#__PURE__*/React.createElement("p", {
+    className: "authing-guard-mfa-tips"
+  }, t('login.bindPhoneInfo')), /*#__PURE__*/React.createElement(_Form, {
+    className: "authing-mfa-check-phone-from",
+    form: rawForm,
+    onSubmitCapture: function onSubmitCapture() {
+      return setLoading(true);
+    },
+    onFinish: onFinish,
+    onFinishFailed: function onFinishFailed() {
+      return setLoading(false);
+    }
+  }, /*#__PURE__*/React.createElement(_Form.Item, {
+    name: "phone",
+    rules: [{
+      required: true,
+      message: t('login.inputPhone')
+    }, {
+      pattern: VALIDATE_PATTERN.phone,
+      message: t('login.phoneError')
+    }]
+  }, /*#__PURE__*/React.createElement(_Input, {
+    size: "large",
+    placeholder: t('login.inputPhone')
+  })), /*#__PURE__*/React.createElement(_Button, {
+    className: "authing-guard-mfa-confirm-btn",
+    loading: loading,
+    block: true,
+    htmlType: "submit",
+    type: "primary",
+    size: "large"
+  }, t('common.sure'))));
+};

package/es/AuthingGuard/Forms/SmsMfaVerifyForm/VerifyCodeForm.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { SmsMFAVerifyFormProps } from '../../../../components/AuthingGuard/types';
+export declare const VerifyCodeForm: FC<SmsMFAVerifyFormProps>;

package/es/AuthingGuard/Forms/SmsMfaVerifyForm/VerifyCodeForm.js

@@ -0,0 +1,183 @@
+import "antd/lib/button/style";
+import _Button from "antd/lib/button";
+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 _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _fillInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/fill";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _someInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/some";
+import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
+import React, { useState } from 'react';
+import { VerifyCodeInput } from '../../../VerifyCodeInput';
+import { useGuardContext } from '../../../context/global/context';
+import { SendCodeBtn } from '../SendPhoneCode/SendCodeBtn';
+import { useTranslation } from 'react-i18next';
+var CODE_LEN = 4;
+export var VerifyCodeForm = function VerifyCodeForm(_ref) {
+  var _context, _context4;
+
+  var onSuccess = _ref.onSuccess,
+      onFail = _ref.onFail,
+      phone = _ref.phone,
+      mfaToken = _ref.mfaToken,
+      sendCodeRef = _ref.sendCodeRef;
+
+  var _useGuardContext = useGuardContext(),
+      authClient = _useGuardContext.state.authClient;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  var _Form$useForm = _Form.useForm(),
+      _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+      rawForm = _Form$useForm2[0];
+
+  var _useState = useState(_fillInstanceProperty(_context = new Array(CODE_LEN)).call(_context, '')),
+      _useState2 = _slicedToArray(_useState, 2),
+      MfaCode = _useState2[0],
+      setMFACode = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      loading = _useState4[0],
+      setLoading = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      sending = _useState6[0],
+      setSending = _useState6[1];
+
+  var _useState7 = useState(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      sent = _useState8[0],
+      setSent = _useState8[1];
+
+  var onFinish = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(values) {
+      var user;
+      return _regeneratorRuntime.wrap(function _callee$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.prev = 0;
+              _context2.next = 3;
+              return authClient.mfa.verifyAppSmsMfa({
+                mfaToken: mfaToken,
+                phone: phone,
+                code: MfaCode.join('')
+              });
+
+            case 3:
+              user = _context2.sent;
+              onSuccess && onSuccess(user);
+              _context2.next = 10;
+              break;
+
+            case 7:
+              _context2.prev = 7;
+              _context2.t0 = _context2["catch"](0);
+              onFail === null || onFail === void 0 ? void 0 : onFail(_context2.t0);
+
+            case 10:
+              _context2.prev = 10;
+              setLoading(false);
+              return _context2.finish(10);
+
+            case 13:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee, null, [[0, 7, 10, 13]]);
+    }));
+
+    return function onFinish(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var sendVerifyCode = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      return _regeneratorRuntime.wrap(function _callee2$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              setSending(true);
+              _context3.prev = 1;
+              _context3.next = 4;
+              return authClient.sendSmsCode(phone);
+
+            case 4:
+              setSent(true);
+              return _context3.abrupt("return", true);
+
+            case 8:
+              _context3.prev = 8;
+              _context3.t0 = _context3["catch"](1);
+              return _context3.abrupt("return", false);
+
+            case 11:
+              _context3.prev = 11;
+              setSending(false);
+              return _context3.finish(11);
+
+            case 14:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee2, null, [[1, 8, 11, 14]]);
+    }));
+
+    return function sendVerifyCode() {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h3", {
+    className: "authing-guard-mfa-title"
+  }, t('login.inputPhoneCode')), /*#__PURE__*/React.createElement("p", {
+    className: "authing-guard-mfa-tips"
+  }, sending ? t('login.sendingVerifyCode') : sent ? _concatInstanceProperty(_context4 = "".concat(t('login.verifyCodeSended'), " ")).call(_context4, phone) : t('login.clickSent')), /*#__PURE__*/React.createElement(_Form, {
+    form: rawForm,
+    onSubmitCapture: function onSubmitCapture() {
+      return setLoading(true);
+    },
+    onFinish: onFinish,
+    onFinishFailed: function onFinishFailed() {
+      return setLoading(false);
+    }
+  }, /*#__PURE__*/React.createElement(_Form.Item, {
+    name: "mfaCode",
+    rules: [{
+      validateTrigger: [],
+      validator: function validator() {
+        if (_someInstanceProperty(MfaCode).call(MfaCode, function (item) {
+          return !item;
+        })) {
+          return _Promise.reject(t('login.inputFullMfaCode'));
+        }
+
+        return _Promise.resolve();
+      }
+    }]
+  }, /*#__PURE__*/React.createElement(VerifyCodeInput, {
+    length: CODE_LEN,
+    verifyCode: MfaCode,
+    setVerifyCode: setMFACode
+  })), /*#__PURE__*/React.createElement(SendCodeBtn, {
+    btnRef: sendCodeRef,
+    beforeSend: function beforeSend() {
+      return sendVerifyCode();
+    }
+  }), /*#__PURE__*/React.createElement(_Button, {
+    className: "authing-guard-mfa-confirm-btn",
+    loading: loading,
+    block: true,
+    htmlType: "submit",
+    type: "primary",
+    size: "large"
+  }, t('common.sure'))));
+};

package/es/AuthingGuard/Forms/SmsMfaVerifyForm/index.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { SmsMFAFormProps } from '../../types';
+export declare const SmsMfaVerifyForm: FC<SmsMFAFormProps>;