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

package/components/AuthingGuard/types/GuardConfig.ts

@@ -1,420 +0,0 @@
-import {
-  AuthenticationClient,
-  AuthenticationClientOptions,
-  CommonMessage,
-  SocialConnectionProvider,
-  User,
-} from 'authing-js-sdk'
-import { QrCodeAuthenticationClient } from 'authing-js-sdk/build/main/lib/authentication/QrCodeAuthenticationClient'
-
-import {
-  SocialConnectionItem,
-  EnterpriseConnectionItem,
-  ApplicationConfig,
-  PasswordLoginMethods,
-  Agreement,
-} from '../api'
-import { Lang } from './Locales'
-
-export type { AuthenticationClient, CommonMessage, User } from 'authing-js-sdk'
-
-export enum GuardMode {
-  Modal = 'modal',
-  Normal = 'normal',
-}
-
-export enum LoginMethods {
-  LDAP = 'ldap',
-  AppQr = 'app-qrcode',
-  Password = 'password',
-  PhoneCode = 'phone-code',
-  WxMinQr = 'wechat-miniprogram-qrcode', // 对应社会化登录的 wechat:miniprogram:qrconnect(小程序扫码登录)
-  AD = 'ad', // 对应企业身份源的 Windows AD 登录
-  WechatMpQrcode = 'wechatmp-qrcode', // 微信扫码关注登录
-}
-
-export enum RegisterMethods {
-  Email = 'email',
-  Phone = 'phone',
-}
-
-export enum GuardScenes {
-  Login = 'login',
-  Register = 'register',
-  MfaVerify = 'mfaVerify',
-  AppMfaVerify = 'appMfaVerify',
-  RestPassword = 'restPassword',
-  CompleteUserInfo = 'completeUserInfo',
-}
-
-export enum ResetPwdMethods {
-  Email = 'email',
-  Phone = 'phone',
-}
-
-export enum SocialConnections {
-  Qq = 'qq',
-  Weibo = 'weibo',
-  Github = 'github',
-  Google = 'google',
-  WxPc = 'wechat:pc',
-  Dingtalk = 'dingtalk',
-  WxWCorpQr = 'wechatwork:corp:qrconnect',
-  WxWSPQr = 'wechatwork:service-provider:qrconnect',
-  WxWSPAuth = 'wechatwork:service-provider:authorization',
-  AlipayWeb = 'alipay:web',
-  AppleWeb = 'apple:web',
-  Baidu = 'baidu',
-  LarkInternalApp = 'lark-internal',
-  LarkMarketPlaceApp = 'lark-public',
-}
-
-export enum Protocol {
-  AD = 'ad',
-  CAS = 'cas',
-  LDAP = 'ldap',
-  OIDC = 'oidc',
-  SAML = 'saml',
-  OAUTH = 'oauth',
-  AZURE_AD = 'azure-ad',
-}
-
-// export enum GuardEventsKebab {
-//   // 加载完成，userPool 配置和应用配置（如果有 appId）加载完成
-//   Load = 'load',
-//   // 加载失败
-//   LoadError = 'load-error',
-//   // 用户登录成功
-//   Login = 'login',
-//   // 用户登录失败
-//   LoginError = 'login-error',
-//   // 注册成功
-//   Register = 'register',
-//   // 注册失败
-//   RegisterError = 'register-error',
-//   // 忘记密码邮件发送成功
-//   PwdEmailSend = 'pwd-email-send',
-//   // 忘记密码邮件发送失败
-//   PwdEmailSendError = 'pwd-email-send-error',
-//   // 忘记密码手机验证码发送成功
-//   PwdPhoneSend = 'pwd-phone-send',
-//   // 忘记密码手机验证码发送失败
-//   PwdPhoneSendError = 'pwd-phone-send-error',
-//   // 重置密码成功
-//   PwdReset = 'pwd-reset',
-//   // 重置密码失败
-//   PwdResetError = 'pwd-reset-error',
-//   // 表单关闭事件
-//   Close = 'close',
-// }
-
-// export interface GuardEventsCamelCase {
-//   // 加载完成，userPool 配置和应用配置（如果有 appId）加载完成
-//   [GuardEvents.Load]: 'onLoad'
-//   // 加载失败
-//   [GuardEvents.LoadError]: 'onLoadError'
-//   // 用户登录成功
-//   [GuardEvents.Login]: 'onLogin'
-//   // 用户登录失败
-//   [GuardEvents.LoginError]: 'onLoginError'
-//   // 注册成功
-//   [GuardEvents.Register]: 'onRegister'
-//   // 注册失败
-//   [GuardEvents.RegisterError]: 'onRegisterError'
-//   // 忘记密码邮件发送成功
-//   [GuardEvents.PwdEmailSend]: 'onPwdEmailSend'
-//   // 忘记密码邮件发送失败
-//   [GuardEvents.PwdEmailSendError]: 'onPwdEmailSendError'
-//   // 忘记密码手机验证码发送成功
-//   [GuardEvents.PwdPhoneSend]: 'onPwdPhoneSend'
-//   // 忘记密码手机验证码发送失败
-//   [GuardEvents.PwdPhoneSendError]: 'onPwdPhoneSendError'
-//   // 重置密码成功
-//   [GuardEvents.PwdReset]: 'onPwdReset'
-//   // 重置密码失败
-//   [GuardEvents.PwdResetError]: 'onPwdResetError'
-//   // 表单关闭事件
-//   [GuardEvents.Close]: 'onClose'
-// }
-
-// export enum GuardEvents {
-//   // 加载完成，userPool 配置和应用配置（如果有 appId）加载完成
-//   Load = 'onLoad',
-//   // 加载失败
-//   LoadError = 'onLoadError',
-//   // 用户登录成功
-//   Login = 'onLogin',
-//   // 用户登录失败
-//   LoginError = 'onLoginError',
-//   // 注册成功
-//   Register = 'onRegister',
-//   // 注册失败
-//   RegisterError = 'onRegisterError',
-//   // 忘记密码邮件发送成功
-//   PwdEmailSend = 'onPwdEmailSend',
-//   // 忘记密码邮件发送失败
-//   PwdEmailSendError = 'onPwdEmailSendError',
-//   // 忘记密码手机验证码发送成功
-//   PwdPhoneSend = 'onPwdPhoneSend',
-//   // 忘记密码手机验证码发送失败
-//   PwdPhoneSendError = 'onPwdPhoneSendError',
-//   // 重置密码成功
-//   PwdReset = 'onPwdReset',
-//   // 重置密码失败
-//   PwdResetError = 'onPwdResetError',
-//   // 表单关闭事件
-//   Close = 'onClose',
-// }
-
-export const GuardEventsCamelToKebabMap = {
-  onLoad: 'load',
-  onLoadError: 'load-error',
-  onLogin: 'login',
-  onBeforeLogin: 'before-login',
-  onLoginError: 'login-error',
-  onRegister: 'register',
-  onBeforeRegister: 'before-register',
-  onRegisterError: 'register-error',
-  onPwdEmailSend: 'pwd-email-send',
-  onPwdEmailSendError: 'pwd-email-send-error',
-  onPwdPhoneSend: 'pwd-phone-send',
-  onPwdPhoneSendError: 'pwd-phone-send-error',
-  onPwdReset: 'pwd-reset',
-  onPwdResetError: 'pwd-reset-error',
-  onClose: 'close',
-  onLoginTabChange: 'login-tab-change',
-  onRegisterTabChange: 'register-tab-change',
-  onRegisterInfoCompleted: 'register-info-completed',
-  onRegisterInfoCompletedError: 'register-info-completed-error',
-} as const
-
-export interface GuardEventsHandlerKebab {
-  // 加载完成，userPool 配置和应用配置（如果有 appId）加载完成
-  load: GuardEventsHandler['onLoad']
-  // 加载失败
-  'load-error': GuardEventsHandler['onLoadError']
-  // 登录前，即表单校验完成，请求接口前
-  'before-login': GuardEventsHandler['onBeforeLogin']
-  // 用户登录成功
-  login: GuardEventsHandler['onLogin']
-  // 用户登录失败
-  'login-error': GuardEventsHandler['onLoginError']
-  // 注册前，即表单校验完成，请求接口前
-  'before-register': GuardEventsHandler['onBeforeRegister']
-  // 注册成功
-  register: GuardEventsHandler['onRegister']
-  // 注册失败
-  'register-error': GuardEventsHandler['onRegisterError']
-  // 忘记密码邮件发送成功
-  'pwd-email-send': GuardEventsHandler['onPwdEmailSend']
-  // 忘记密码邮件发送失败
-  'pwd-email-send-error': GuardEventsHandler['onPwdEmailSendError']
-  // 忘记密码手机验证码发送成功
-  'pwd-phone-send': GuardEventsHandler['onPwdPhoneSend']
-  // 忘记密码手机验证码发送失败
-  'pwd-phone-send-error': GuardEventsHandler['onPwdPhoneSendError']
-  // 重置密码成功
-  'pwd-reset': GuardEventsHandler['onPwdReset']
-  // 重置密码失败
-  'pwd-reset-error': GuardEventsHandler['onPwdResetError']
-  // 表单关闭事件
-  close: GuardEventsHandler['onClose']
-  // 登录的 tab 切换
-  'login-tab-change': GuardEventsHandler['onLoginTabChange']
-  // 注册的 tab 切换
-  'register-tab-change': GuardEventsHandler['onRegisterTabChange']
-  // 注册信息补充完毕
-  'register-info-completed': GuardEventsHandler['onRegisterInfoCompleted']
-  // 注册信息补充失败
-  'register-info-completed-error': GuardEventsHandler['onRegisterInfoCompletedError']
-}
-
-export interface PasswordLoginParams {
-  type: LoginMethods.Password
-  data: {
-    // 标识，可能是用户名、邮箱、手机号
-    identity: string
-    // 密码
-    password: string
-    // 图形验证码
-    captchaCode?: string
-  }
-}
-
-export interface LDAPLoginParams {
-  type: LoginMethods.LDAP
-  data: {
-    // 标识，可能是用户名、邮箱、手机号
-    identity: string
-    // 密码
-    password: string
-    // 图形验证码
-    captchaCode?: string
-  }
-}
-
-export interface ADLoginParams {
-  type: LoginMethods.AD
-  data: {
-    // 标识，可能是用户名、邮箱、手机号
-    identity: string
-    // 密码
-    password: string
-  }
-}
-
-export interface PhoneCodeLoginParams {
-  type: LoginMethods.PhoneCode
-  data: {
-    // 手机号
-    phone: string
-    // 手机验证码
-    code: string
-  }
-}
-
-export interface EmailRegisterParams {
-  type: RegisterMethods.Email
-  data: {
-    // 邮箱
-    email: string
-    // 密码
-    password: string
-  }
-}
-
-export interface PhoneRegisterParams {
-  type: RegisterMethods.Phone
-  data: {
-    // 手机号
-    phone: string
-    // 密码
-    password: string
-    // 手机验证码
-    code: string
-  }
-}
-
-export interface GuardEventsHandler {
-  onLoad?: (authClient: AuthenticationClient) => void
-  onLoadError?: (error: CommonMessage) => void
-  onBeforeLogin?: (
-    loginInfo:
-      | PasswordLoginParams
-      | LDAPLoginParams
-      | ADLoginParams
-      | PhoneCodeLoginParams,
-    authClient: AuthenticationClient
-  ) => boolean | Promise<boolean>
-  onLogin?: (user: User, authClient: AuthenticationClient) => void
-  onLoginError?: (user: User, authClient: AuthenticationClient) => void
-  onBeforeRegister?: (
-    registerInfo: EmailRegisterParams | PhoneRegisterParams,
-    authClient: AuthenticationClient
-  ) => boolean | Promise<boolean>
-  onRegister?: (user: User, authClient: AuthenticationClient) => void
-  onRegisterError?: (user: User, authClient: AuthenticationClient) => void
-  onPwdEmailSend?: (authClient: AuthenticationClient) => void
-  onPwdEmailSendError?: (
-    error: CommonMessage,
-    authClient: AuthenticationClient
-  ) => void
-  onPwdPhoneSend?: (authClient: AuthenticationClient) => void
-  onPwdPhoneSendError?: (
-    error: CommonMessage,
-    authClient: AuthenticationClient
-  ) => void
-  onPwdReset?: (authClient: AuthenticationClient) => void
-  onPwdResetError?: (
-    error: CommonMessage,
-    authClient: AuthenticationClient
-  ) => void
-  onClose?: () => void
-  onLoginTabChange?: (activeTab: LoginMethods) => void
-  onRegisterTabChange?: (activeTab: RegisterMethods) => void
-  onRegisterInfoCompleted?: (
-    user: User,
-    udfs: {
-      definition: any
-      value: any
-    }[],
-    authClient: AuthenticationClient
-  ) => void
-  onRegisterInfoCompletedError?: (
-    error: CommonMessage,
-    udfs: {
-      definition: any
-      value: any
-    }[],
-    authClient: AuthenticationClient
-  ) => void
-}
-
-export interface UserConfig {
-  logo?: string
-  title?: string
-  zIndex?: number
-  isSSO?: boolean
-  mode?: GuardMode
-  /**
-   * @deprecated 使用 appHost
-   */
-  apiHost?: string
-  /**
-   * @deprecated 使用 appHost
-   */
-  appDomain?: string
-  appHost?: string
-  contentCss?: string
-  text?: {
-    loginBtn?: {
-      normal?: string
-      loading?: string
-    }
-    registerBtn?: {
-      normal?: string
-      loading?: string
-    }
-    // 登录 tab
-    loginTabs?: Partial<Record<LoginMethods, string>>
-  }
-  escCloseable?: boolean
-  autoRegister?: boolean
-  clickCloseable?: boolean
-  disableResetPwd?: boolean
-  disableRegister?: boolean
-  defaultScenes?: GuardScenes
-  loginMethods?: LoginMethods[]
-  target?: string | HTMLElement
-  enterpriseConnections?: string[]
-  defaultLoginMethod?: LoginMethods
-  registerMethods?: RegisterMethods[]
-  socialConnections?: (SocialConnections | SocialConnectionProvider)[]
-  defaultRegisterMethod?: RegisterMethods
-  qrCodeScanOptions?: Parameters<QrCodeAuthenticationClient['startScanning']>[1]
-  /**
-   * 国际化处理
-   */
-  localesConfig?: LocalesConfig
-  lang?: Lang
-  /**
-   * 用于去品牌化
-   */
-  headers?: AuthenticationClientOptions['headers']
-  passwordLoginMethods?: PasswordLoginMethods[]
-}
-
-export interface GuardConfig extends UserConfig {
-  socialConnectionObjs: SocialConnectionItem[]
-  enterpriseConnectionObjs: EnterpriseConnectionItem[]
-  extendsFields: ApplicationConfig['extendsFields']
-  publicKey: ApplicationConfig['publicKey']
-  agreementEnabled: boolean
-  agreements: Agreement[]
-}
-
-export interface LocalesConfig {
-  defaultLang?: Lang
-  isShowChange?: boolean
-  onChange?: (lang: Lang) => void
-}

package/components/AuthingGuard/types/GuardState.ts

@@ -1,7 +0,0 @@
-import { LoginMethods, RegisterMethods } from './GuardConfig'
-import { GuardScenes } from './GuardConfig'
-
-export interface ActiveTabs {
-  [GuardScenes.Login]: LoginMethods
-  [GuardScenes.Register]: RegisterMethods
-}

package/components/AuthingGuard/types/Locales.ts

@@ -1,12 +0,0 @@
-export type Lang = 'zh-CN' | 'en-US'
-
-export const LANG_MAP = [
-  {
-    label: '中文',
-    value: 'zh-CN',
-  },
-  {
-    label: 'English',
-    value: 'en-US',
-  },
-]

package/components/AuthingGuard/types/index.ts

@@ -1,4 +0,0 @@
-export * from './Forms'
-export * from './GuardState'
-export * from './GuardConfig'
-export * from './Locales'

package/components/AuthingTabs/index.tsx

@@ -1,98 +0,0 @@
-import { Button } from 'antd'
-import React, { FC, useMemo } from 'react'
-import { EllipsisOutlined } from '@ant-design/icons'
-
-import { getClassnames } from '../_utils'
-
-import './style.less'
-
-export interface AuthingTabsProps extends React.HTMLAttributes<HTMLDivElement> {
-  activeKey?: string
-  onTabClick: (key: string) => void
-  showLen?: number
-  tabs: {
-    key: string
-    label: string
-    component: JSX.Element
-  }[]
-}
-
-export const AuthingTabs: FC<AuthingTabsProps> = ({
-  tabs,
-  showLen = 3,
-  className,
-  activeKey,
-  onTabClick,
-}) => {
-  const activeIndex = useMemo(
-    () => tabs.findIndex((item) => item.key === activeKey),
-    [tabs, activeKey]
-  )
-
-  const showTabs = useMemo(() => {
-    if (tabs.length <= showLen) {
-      return [...tabs]
-    }
-
-    let startIndex = Math.max(activeIndex - 1, 0)
-    if (startIndex + showLen > tabs.length - 1) {
-      startIndex = tabs.length - showLen
-    }
-
-    return tabs.slice(startIndex, startIndex + showLen)
-  }, [showLen, activeIndex, tabs])
-
-  const hideTabs = useMemo(() => {
-    const showKeys = showTabs.map((item) => item.key)
-    return tabs.filter((item) => !showKeys.find((key) => item.key === key))
-  }, [tabs, showTabs])
-
-  return (
-    <>
-      <div className={getClassnames(['authing-tabs', className])}>
-        <div
-          className={getClassnames([
-            'authing-tabs-inner',
-            Boolean(hideTabs.length) && 'authing-tabs-inner--more',
-          ])}
-        >
-          {showTabs.map((item, index) => (
-            <div
-              onClick={() => onTabClick(item.key)}
-              className={getClassnames([
-                'authing-tab-item',
-                activeKey === item.key && 'authing-tab-item__active',
-              ])}
-              key={item.key}
-            >
-              {item.label}
-            </div>
-          ))}
-        </div>
-        {Boolean(hideTabs.length) && (
-          <Button
-            className="authing-tabs-show-more"
-            type="text"
-            icon={<EllipsisOutlined />}
-          >
-            <ul className="authing-tabs-more-panel">
-              {hideTabs.map((item) => (
-                <li
-                  key={item.key}
-                  onClick={() => onTabClick(item.key)}
-                  className="authing-tabs-more-panel-item"
-                >
-                  {item.label}
-                </li>
-              ))}
-            </ul>
-          </Button>
-        )}
-      </div>
-
-      <div className="authing-tab-pane">
-        {tabs.find((item) => item.key === activeKey)?.component}
-      </div>
-    </>
-  )
-}

package/components/AuthingTabs/style.less

@@ -1,135 +0,0 @@
-.authing-tabs {
-  display: flex;
-  margin-bottom: 36px;
-  align-items: center;
-}
-.authing-tabs-inner {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  flex: 1;
-}
-.authing-tabs-inner--more {
-  box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);
-}
-.authing-tab-item {
-  color: #aeb9d4;
-  font-size: 16px;
-  transition: all 0.3s ease-in-out;
-  white-space: nowrap;
-  cursor: pointer;
-  position: relative;
-  height: 28px;
-  margin-right: 32px;
-  &:last-child {
-    margin-right: 12px;
-  }
-  &:only-child {
-    margin-right: 0;
-  }
-  &::after {
-    content: '';
-    width: 0;
-    height: 2px;
-    display: block;
-    position: absolute;
-    left: 50%;
-    bottom: -4px;
-    transform: translateX(-50%);
-    background-color: transparent;
-    transition: all 0.3s ease-in-out;
-  }
-}
-.authing-tab-item__active {
-  color: #396aff;
-  font-size: 18px;
-  &::after {
-    width: 26px;
-    background-color: #396aff;
-  }
-}
-.authing-tabs-show-more {
-  position: relative;
-  z-index: 2;
-  &.ant-btn {
-    padding: 0 12px;
-  }
-  &:hover,
-  &:focus,
-  &:active {
-    background-color: #fff;
-  }
-  &:hover {
-    .authing-tabs-more-panel {
-      height: auto;
-      opacity: 1;
-      padding: 4px 0;
-    }
-  }
-
-  &:after {
-    content: '';
-    display: block;
-    width: 100%;
-    height: 6px;
-    top: 100%;
-    left: 0;
-    position: absolute;
-  }
-}
-.authing-tabs-more-panel {
-  position: absolute;
-  box-sizing: border-box;
-  transition: all 0.3s;
-  height: 0;
-  opacity: 0;
-  right: 0;
-  top: 100%;
-  transform: translateY(6px);
-  background-color: #fff;
-  max-height: 200px;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  overflow-y: auto;
-  text-align: left;
-  list-style-type: none;
-  background-clip: padding-box;
-  border-radius: 2px;
-  outline: none;
-  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
-    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
-}
-.authing-tabs-more-panel-item {
-  min-width: 120px;
-  margin: 0;
-  padding: 5px 12px;
-  overflow: hidden;
-  color: rgba(0, 0, 0, 0.85);
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 22px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  cursor: pointer;
-  transition: all 0.3s;
-  &:hover {
-    background-color: #f5f5f5;
-  }
-}
-
-@media only screen and (max-width: 719px) {
-  .authing-tabs-inner {
-    justify-content: flex-start;
-  }
-  .authing-tab-item {
-    margin-right: 40px;
-    font-size: 14px;
-  }
-  .authing-tab-item__active {
-    font-size: 16px;
-  }
-  .authing-tab-pane {
-    padding-bottom: 70px;
-  }
-}