@oceanbase/ui 0.2.0

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_design = require("@oceanbase/design");
+var import_lodash = require("lodash");
+var import_react = __toESM(require("react"));
+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_design.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_design.Form,
+    {
+      layout: "vertical",
+      requiredMark: false,
+      className: `${prefix}-form`,
+      form: formRef,
+      ...restProps,
+      "data-testid": "login.register"
+    },
+    errorMessage && /* @__PURE__ */ import_react.default.createElement(import_design.Alert, { type: "error", showIcon: true, className: `${prefix}-alert`, message: errorMessage }),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_design.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_design.Input, { autoComplete: "new-account", autoFocus: true })
+    ),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_design.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_design.Input.Password, { visibilityToggle: true, autoComplete: "new-password" })
+    ),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_design.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_design.Input.Password, { visibilityToggle: true, autoComplete: "new-password" })
+    ),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_design.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 type { AlertProps } from 'antd/es/alert';
+import type { FormProps } from 'antd/es/form';
+import React from 'react';
+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;

package/lib/Login/index.js

@@ -0,0 +1,171 @@
+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/index.tsx
+var Login_exports = {};
+__export(Login_exports, {
+  default: () => Login_default
+});
+module.exports = __toCommonJS(Login_exports);
+var import_ahooks = require("ahooks");
+var import_design = require("@oceanbase/design");
+var import_design2 = require("@oceanbase/design");
+var import_classnames = __toESM(require("classnames"));
+var import_react = __toESM(require("react"));
+var import_constant = require("../constant");
+var import_LocaleWrapper = __toESM(require("../locale/LocaleWrapper"));
+var import_util = require("../_util");
+var import_ActivateForm = __toESM(require("./ActivateForm"));
+var import_zh_CN = __toESM(require("./locale/zh-CN"));
+var import_LoginForm = __toESM(require("./LoginForm"));
+var import_RegisterForm = __toESM(require("./RegisterForm"));
+var import_oceanbase_logo = __toESM(require("../assets/logo/oceanbase_logo.svg"));
+var import_LocaleDropdown = __toESM(require("../LocaleDropdown"));
+var import_index = require("./index.less");
+var prefix = (0, import_util.getPrefix)("login");
+var Login = (props) => {
+  const {
+    logo,
+    bgImage,
+    title,
+    description,
+    board,
+    alertProps,
+    showLocale,
+    locale,
+    locales,
+    loginProps,
+    otherLoginProps,
+    registerProps,
+    activateFormProps,
+    enableRegister,
+    showAuthCode,
+    showOtherLoginButton,
+    authCodeImg,
+    onAuthCodeImgChange,
+    style = {}
+  } = props;
+  const [showRegister, setShowRegister] = (0, import_ahooks.useControllableValue)(props, {
+    defaultValue: false,
+    valuePropName: "showRegister",
+    trigger: "onShowRegisterChange"
+  });
+  const [showActivate, setShowActivate] = (0, import_ahooks.useControllableValue)(props, {
+    defaultValue: false,
+    valuePropName: "showActivate",
+    trigger: "onShowActivateChange"
+  });
+  const isLoading = (loginProps == null ? void 0 : loginProps.loading) || (registerProps == null ? void 0 : registerProps.loading) || (otherLoginProps == null ? void 0 : otherLoginProps.loading);
+  const switchForm = (0, import_react.useCallback)(() => {
+    if (isLoading) {
+      import_design2.message.warning(locale.isLoadingWarn);
+    }
+    setShowRegister(!showRegister);
+  }, [showRegister, isLoading]);
+  const goBack = (0, import_react.useCallback)(() => {
+    if (isLoading) {
+      import_design2.message.warning(locale.isLoadingWarn);
+    }
+    setShowActivate(!showActivate);
+  }, [showActivate, isLoading]);
+  const localeMenu = /* @__PURE__ */ import_react.default.createElement(
+    import_design.Menu,
+    {
+      onClick: ({ key }) => {
+        (0, import_util.setLocale)(key);
+      }
+    },
+    import_constant.LOCALE_LIST.filter((item) => !locales || locales.includes(item.value)).map((item) => /* @__PURE__ */ import_react.default.createElement(import_design.Menu.Item, { key: item.value }, item.label))
+  );
+  const showWaterMark = !showRegister;
+  return /* @__PURE__ */ import_react.default.createElement(import_design.App, null, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: (0, import_classnames.default)(`${prefix}-container`, {
+        [`${prefix}-container-with-board`]: board
+      }),
+      style
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-bg`, style: { backgroundImage: `url(${bgImage})` } }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-info` }, title && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-welcome` }, title), description && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-start` }, description))),
+    /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-card` }, showLocale && /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefix}-locale` }, /* @__PURE__ */ import_react.default.createElement(import_LocaleDropdown.default, { locales })), board && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-board` }, board), /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-content` }, showActivate ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("img", { src: logo, alt: "", className: `${prefix}-activate-logo` }), /* @__PURE__ */ import_react.default.createElement(
+      import_design.Divider,
+      {
+        style: {
+          marginTop: 14,
+          marginBottom: 20
+        }
+      }
+    ), /* @__PURE__ */ import_react.default.createElement(import_design.Typography.Title, { level: 3 }, locale.activeTitle), /* @__PURE__ */ import_react.default.createElement(import_design.Typography.Paragraph, null, locale.activeTitleDescrition), /* @__PURE__ */ import_react.default.createElement(
+      import_ActivateForm.default,
+      {
+        ...activateFormProps,
+        locale,
+        errorMessage: alertProps == null ? void 0 : alertProps.message,
+        goBack
+      }
+    )) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, showRegister ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("img", { src: logo, alt: "", className: `${prefix}-reigster-logo` }), /* @__PURE__ */ import_react.default.createElement(
+      import_design.Divider,
+      {
+        style: {
+          marginTop: 14,
+          marginBottom: 20
+        }
+      }
+    ), /* @__PURE__ */ import_react.default.createElement(import_design.Typography.Title, { level: 3 }, locale.registerTitle), /* @__PURE__ */ import_react.default.createElement(
+      import_RegisterForm.default,
+      {
+        ...registerProps,
+        locale,
+        errorMessage: alertProps == null ? void 0 : alertProps.message
+      }
+    )) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("img", { src: logo, alt: "", className: `${prefix}-logo` }), /* @__PURE__ */ import_react.default.createElement(
+      import_LoginForm.default,
+      {
+        ...loginProps,
+        otherLoginProps,
+        locale,
+        errorMessage: alertProps == null ? void 0 : alertProps.message,
+        showAuthCode,
+        showOtherLoginButton,
+        authCodeImg,
+        onAuthCodeImgChange
+      }
+    ))), !!enableRegister && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefix}-switch-btn` }, /* @__PURE__ */ import_react.default.createElement(import_design.Button, { type: "link", onClick: switchForm, "data-testid": "login.register.btn" }, showRegister ? locale.switchLoginLabel : locale.switchRegisterLabel)), showWaterMark ? /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: `${prefix}-watermark-wrapper`,
+        style: { paddingLeft: showAuthCode ? 96 : 0 }
+      },
+      /* @__PURE__ */ import_react.default.createElement("img", { src: import_oceanbase_logo.default, alt: "", className: `${prefix}-watermark` })
+    ) : null))
+  ));
+};
+var Login_default = (0, import_LocaleWrapper.default)({
+  componentName: "Login",
+  defaultLocale: import_zh_CN.default
+})(Login);