@oceanbase/design 0.1.0

package/lib/Login/ActivateForm.js

@@ -0,0 +1,134 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Login/ActivateForm.tsx
+var ActivateForm_exports = {};
+__export(ActivateForm_exports, {
+  default: () => ActivateForm_default
+});
+module.exports = __toCommonJS(ActivateForm_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_lodash = require("lodash");
+var import_RegisterForm = require("./RegisterForm");
+var import_util = require("../_util");
+var import_index = require("./index.less");
+var prefix = (0, import_util.getPrefix)("login");
+var Activate = ({
+  locale,
+  loading,
+  passwordRule,
+  errorMessage,
+  goBack,
+  ...restProps
+}) => {
+  const [formRef] = import_antd.Form.useForm();
+  const handleValidateConfirmPassword = (0, import_react.useCallback)(
+    (rule, value, callback) => {
+      if (!formRef) {
+        callback();
+        return;
+      }
+      const pwd = formRef.getFieldValue("password");
+      if ((0, import_lodash.toString)(value) !== (0, import_lodash.toString)(pwd)) {
+        callback(locale.samePasswordMessage);
+        return;
+      }
+      callback();
+    },
+    [formRef]
+  );
+  const passwordRegexpRule = passwordRule || {
+    pattern: import_RegisterForm.PASSWORD_REGEX,
+    message: locale.passwordHelp
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Form,
+    {
+      layout: "vertical",
+      requiredMark: false,
+      className: `${prefix}-form`,
+      form: formRef,
+      ...restProps,
+      "data-testid": "login.register"
+    },
+    errorMessage && /* @__PURE__ */ import_react.default.createElement(import_antd.Alert, { type: "error", showIcon: true, className: `${prefix}-alert`, message: errorMessage }),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Form.Item,
+      {
+        name: "password",
+        label: locale.passwordLabel,
+        dependencies: ["confirmPassword"],
+        help: passwordRegexpRule.message,
+        validateFirst: true,
+        rules: [
+          {
+            required: true,
+            message: locale.passwordMessage
+          },
+          passwordRegexpRule
+        ]
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_antd.Input.Password, { visibilityToggle: true, autoComplete: "new-password" })
+    ),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Form.Item,
+      {
+        name: "confirmPassword",
+        label: locale.confirmPwdLabel,
+        dependencies: ["password"],
+        validateFirst: true,
+        rules: [
+          {
+            required: true,
+            message: locale.confirmPwdMessage
+          },
+          {
+            validator: handleValidateConfirmPassword
+          }
+        ]
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_antd.Input.Password, { visibilityToggle: true, autoComplete: "new-password" })
+    ),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Button,
+      {
+        htmlType: "submit",
+        loading,
+        type: "primary",
+        block: true,
+        className: `${prefix}-submit-btn`
+      },
+      locale.activeSubmitBtn
+    ),
+    /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-switch-btn` }, /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { type: "link", onClick: goBack }, locale.activeBackBtn))
+  );
+};
+var ActivateForm_default = Activate;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/Login/LoginForm.d.ts

@@ -0,0 +1,20 @@
+import type { FormProps } from 'antd/es/form';
+import React from 'react';
+import type { LoginLocale } from '.';
+import './index.less';
+export interface Values {
+    username: string;
+    password: string;
+}
+export interface ILoginFormProps extends FormProps {
+    loading?: boolean;
+    locale?: LoginLocale;
+    errorMessage?: React.ReactNode | string;
+    showAuthCode?: boolean;
+    showOtherLoginButton?: boolean;
+    authCodeImg?: string;
+    otherLoginProps?: any;
+    onAuthCodeImgChange?: () => void;
+}
+declare const Login: React.FC<ILoginFormProps>;
+export default Login;

package/lib/Login/LoginForm.js

@@ -0,0 +1,177 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Login/LoginForm.tsx
+var LoginForm_exports = {};
+__export(LoginForm_exports, {
+  default: () => LoginForm_default
+});
+module.exports = __toCommonJS(LoginForm_exports);
+var import_icons = require("@ant-design/icons");
+var import_antd = require("antd");
+var import_classnames = __toESM(require("classnames"));
+var import_react = __toESM(require("react"));
+var import_util = require("../_util");
+var import_index = require("./index.less");
+var import_StaticFunction = require("../StaticFunction");
+var prefix = (0, import_util.getPrefix)("login");
+var Login = ({
+  loading,
+  locale,
+  errorMessage,
+  showAuthCode,
+  showOtherLoginButton,
+  authCodeImg,
+  otherLoginProps,
+  onAuthCodeImgChange,
+  ...restProps
+}) => {
+  const [focusInput, setFocusInput] = (0, import_react.useState)("");
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Form,
+    {
+      layout: "vertical",
+      hideRequiredMark: true,
+      className: `${prefix}-form`,
+      style: { paddingLeft: showAuthCode ? 96 : 0 },
+      ...restProps,
+      "data-testid": "login.form"
+    },
+    errorMessage && /* @__PURE__ */ import_react.default.createElement(import_antd.Alert, { type: "error", showIcon: true, className: `${prefix}-alert`, message: errorMessage }),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Form.Item,
+      {
+        name: "username",
+        rules: [
+          {
+            required: true,
+            message: locale.usernameMessage
+          }
+        ]
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Input,
+        {
+          prefix: /* @__PURE__ */ import_react.default.createElement(import_icons.UserOutlined, { style: { color: import_StaticFunction.token.colorIcon } }),
+          placeholder: locale.usernamePlaceholder,
+          onFocus: () => {
+            setFocusInput("username");
+          },
+          onBlur: () => {
+            setFocusInput("");
+          },
+          className: (0, import_classnames.default)({
+            [`${prefix}-focus-input`]: focusInput === "username"
+          })
+        }
+      )
+    ),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Form.Item,
+      {
+        name: "password",
+        rules: [
+          {
+            required: true,
+            message: locale.passwordMessage
+          }
+        ]
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Input.Password,
+        {
+          visibilityToggle: true,
+          autoComplete: "current-password",
+          prefix: /* @__PURE__ */ import_react.default.createElement(import_icons.LockOutlined, { style: { color: import_StaticFunction.token.colorIcon } }),
+          placeholder: locale.passwordPlaceholder,
+          onFocus: () => {
+            setFocusInput("password");
+          },
+          onBlur: () => {
+            setFocusInput("");
+          },
+          className: focusInput === "password" ? `${prefix}-focus-input` : ""
+        }
+      )
+    ),
+    showAuthCode && /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { className: `${prefix}-auth-code` }, /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Form.Item,
+      {
+        name: "authCode",
+        rules: [
+          {
+            required: true,
+            message: "验证码不能为空"
+          }
+        ]
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Input,
+        {
+          prefix: /* @__PURE__ */ import_react.default.createElement(import_icons.SafetyCertificateOutlined, { style: { color: import_StaticFunction.token.colorIcon } }),
+          placeholder: "请输入验证码",
+          onFocus: () => {
+            setFocusInput("authCode");
+          },
+          onBlur: () => {
+            setFocusInput("");
+          },
+          className: (0, import_classnames.default)({
+            [`${prefix}-focus-input`]: focusInput === "authCode"
+          })
+        }
+      )
+    ), /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(`${prefix}-code-btn`) }, /* @__PURE__ */ import_react.default.createElement("img", { src: authCodeImg, alt: "", width: "96", height: "38" }), /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-code-mask`, onClick: onAuthCodeImgChange }, /* @__PURE__ */ import_react.default.createElement(import_icons.SyncOutlined, null)))),
+    /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, null, /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Button,
+      {
+        htmlType: "submit",
+        loading,
+        type: "primary",
+        block: true,
+        className: `${prefix}-submit-btn`
+      },
+      locale.loginText
+    )),
+    showOtherLoginButton && /* @__PURE__ */ import_react.default.createElement(import_antd.Form.Item, null, /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Button,
+      {
+        htmlType: "button",
+        loading: otherLoginProps.loading,
+        type: "primary",
+        block: true,
+        onClick: otherLoginProps.onFinish,
+        className: `${prefix}-submit-btn`
+      },
+      locale.otherLoginText
+    ))
+  );
+};
+var LoginForm_default = Login;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/Login/RegisterForm.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { FormProps } from 'antd/es/form';
+import type { LoginLocale } from './index';
+import './index.less';
+/**
+ * 冗余的转义符可以增强正则的可读性
+ */
+export declare const PASSWORD_REGEX: RegExp;
+export interface IRegisterFormProps extends FormProps {
+    locale?: LoginLocale;
+    /**
+     * 用户自定义密码规则
+     */
+    passwordRule?: {
+        pattern: RegExp;
+        message: string;
+    };
+    loading?: boolean;
+    isUserExists?: (account: string) => Promise<boolean>;
+    errorMessage?: React.ReactNode | string;
+}
+declare const Register: React.FC<IRegisterFormProps>;
+export default Register;

package/lib/Login/RegisterForm.js

@@ -0,0 +1,177 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Login/RegisterForm.tsx
+var RegisterForm_exports = {};
+__export(RegisterForm_exports, {
+  PASSWORD_REGEX: () => PASSWORD_REGEX,
+  default: () => RegisterForm_default
+});
+module.exports = __toCommonJS(RegisterForm_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_lodash = require("lodash");
+var import_util = require("../_util");
+var import_index = require("./index.less");
+var PASSWORD_REGEX = /^(?=(.*[a-z]){2,})(?=(.*[A-Z]){2,})(?=(.*\d){2,})(?=(.*[ !"#\$%&'\(\)\*\+,-\./:;<=>\?@\[\\\]\^_`\{\|\}~]){2,})[A-Za-z\d !"#\$%&'\(\)\*\+,-\./:;<=>\?@\[\\\]\^_`\{\|\}~]{8,32}$/;
+var prefix = (0, import_util.getPrefix)("login");
+var Register = ({
+  isUserExists,
+  locale,
+  loading,
+  passwordRule,
+  errorMessage,
+  ...restProps
+}) => {
+  const [formRef] = import_antd.Form.useForm();
+  const handleValidateAccount = (0, import_react.useCallback)(
+    async (rule, value) => {
+      if (!value || !(0, import_lodash.isFunction)(isUserExists)) {
+        return;
+      }
+      const isExists = await isUserExists(value);
+      if (isExists) {
+        throw new Error(locale.userExistMessage);
+      }
+    },
+    [isUserExists]
+  );
+  const handleValidateConfirmPassword = (0, import_react.useCallback)(
+    (rule, value, callback) => {
+      if (!formRef) {
+        callback();
+        return;
+      }
+      const pwd = formRef.getFieldValue("password");
+      if ((0, import_lodash.toString)(value) !== (0, import_lodash.toString)(pwd)) {
+        callback(locale.samePasswordMessage);
+        return;
+      }
+      callback();
+    },
+    [formRef]
+  );
+  const passwordRegexpRule = passwordRule || {
+    pattern: PASSWORD_REGEX,
+    message: locale.passwordHelp
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Form,
+    {
+      layout: "vertical",
+      requiredMark: false,
+      className: `${prefix}-form`,
+      form: formRef,
+      ...restProps,
+      "data-testid": "login.register"
+    },
+    errorMessage && /* @__PURE__ */ import_react.default.createElement(import_antd.Alert, { type: "error", showIcon: true, className: `${prefix}-alert`, message: errorMessage }),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Form.Item,
+      {
+        name: "username",
+        label: locale.usernameLabel,
+        extra: locale.usernameHelp,
+        validateFirst: true,
+        rules: [
+          {
+            required: true,
+            whitespace: true,
+            message: locale.usernameMessage
+          },
+          {
+            min: 4,
+            max: 48,
+            message: locale.usernameLengthMessage
+          },
+          {
+            pattern: /^[a-zA-Z0-9_.+@#$%]+$/,
+            message: locale.usernameFormatMessage
+          },
+          {
+            validator: handleValidateAccount
+          }
+        ]
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_antd.Input, { autoComplete: "new-account", autoFocus: true })
+    ),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Form.Item,
+      {
+        name: "password",
+        label: locale.passwordLabel,
+        dependencies: ["confirmPassword"],
+        help: passwordRegexpRule.message,
+        validateFirst: true,
+        rules: [
+          {
+            required: true,
+            message: locale.passwordMessage
+          },
+          passwordRegexpRule
+        ]
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_antd.Input.Password, { visibilityToggle: true, autoComplete: "new-password" })
+    ),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Form.Item,
+      {
+        name: "confirmPassword",
+        label: locale.confirmPwdLabel,
+        dependencies: ["password"],
+        validateFirst: true,
+        rules: [
+          {
+            required: true,
+            message: locale.confirmPwdMessage
+          },
+          {
+            validator: handleValidateConfirmPassword
+          }
+        ]
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_antd.Input.Password, { visibilityToggle: true, autoComplete: "new-password" })
+    ),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Button,
+      {
+        htmlType: "submit",
+        loading,
+        type: "primary",
+        block: true,
+        className: `${prefix}-submit-btn`
+      },
+      locale.registerBtn
+    )
+  );
+};
+var RegisterForm_default = Register;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PASSWORD_REGEX
+});

package/lib/Login/index.d.ts

@@ -0,0 +1,66 @@
+import React from 'react';
+import type { AlertProps } from 'antd/es/alert';
+import type { FormProps } from 'antd/es/form';
+import type { IActivateFormProps } from './ActivateForm';
+import type { ILoginFormProps } from './LoginForm';
+import type { IRegisterFormProps } from './RegisterForm';
+import type { Locale } from '../interface';
+import './index.less';
+export interface Values {
+    username: string;
+    password: string;
+}
+export interface LoginLocale {
+    otherLoginText: string;
+    usernamePlaceholder: string;
+    usernameMessage: string;
+    passwordPlaceholder: string;
+    passwordMessage: string;
+    loginText: string;
+    isLoadingWarn: string;
+    switchLoginLabel: string;
+    switchRegisterLabel: string;
+    userExistMessage: string;
+    samePasswordMessage: string;
+    usernameLabel: string;
+    usernameHelp: string;
+    usernameFormatMessage: string;
+    usernameLengthMessage: string;
+    passwordLabel: string;
+    passwordHelp: string;
+    confirmPwdLabel: string;
+    confirmPwdMessage: string;
+    registerBtn: string;
+    registerTitle: string;
+    activeTitle: string;
+    activeTitleDescrition: string;
+    activeSubmitBtn: string;
+    activeBackBtn: string;
+}
+export interface LoginProps extends FormProps {
+    style?: React.CSSProperties;
+    logo: string;
+    bgImage: string;
+    title?: string;
+    description?: string;
+    showLocale?: boolean;
+    board?: React.ReactNode;
+    alertProps?: AlertProps;
+    locale?: LoginLocale;
+    locales?: Locale[];
+    loginProps: ILoginFormProps;
+    otherLoginProps?: ILoginFormProps;
+    registerProps?: IRegisterFormProps;
+    activateFormProps?: IActivateFormProps;
+    enableRegister?: boolean;
+    showRegister?: boolean;
+    showActivate?: boolean;
+    showAuthCode?: boolean;
+    showOtherLoginButton?: boolean;
+    authCodeImg?: string;
+    onShowRegisterChange?: (isShow: boolean) => void;
+    onShowActivateChange?: (isShow: boolean) => void;
+    onAuthCodeImgChange?: () => void;
+}
+declare const _default: any;
+export default _default;