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

package/components/AuthingGuard/api/userPoolConfig.ts

@@ -1,111 +0,0 @@
-import { Lang, Protocol } from '../types'
-import { SocialConnectionProvider } from 'authing-js-sdk'
-
-export interface OIDCConnectionConfig {
-  issuerUrl: string
-  authorizationEdpoint: string
-  responseType: string
-  mode: OIDCConnectionMode
-  clientId: string
-  clientSecret: string
-  scopes: string
-  redirectUri: string
-}
-
-export interface IOAuthConnectionConfig {
-  authEndPoint: string
-  tokenEndPoint: string
-  scope: string
-  clientId: string
-  clientSecret: string
-  authUrlTemplate: string
-  codeToTokenScript: string
-  tokenToUserInfoScript: string
-  tokenToUserInfoScriptFuncId: string
-  codeToTokenScriptFuncId: string
-  authUrl?: string // 根据模板拼接出来的授权 url
-}
-
-export interface IAzureAdConnectionConfig {
-  microsoftAzureAdDomain: string
-  clientId: string
-  syncUserProfileOnLogin: string
-  emailVerifiedDefault: boolean
-  authorizationUrl: string
-  callbackUrl: string
-}
-
-export enum OIDCConnectionMode {
-  FRONT_CHANNEL = 'FRONT_CHANNEL',
-  BACK_CHANNEL = 'BACK_CHANNEL',
-}
-
-export interface ISamlConnectionConfig {
-  signInEndPoint: string
-  samlRequest?: string
-
-  // saml assertion 验签公钥
-
-  samlIdpCert: string
-
-  // saml request 验签公钥
-
-  samlSpCert: string
-
-  // saml request 签名私钥
-
-  samlSpKey: string
-
-  signOutEndPoint: string
-
-  signSamlRequest: boolean
-
-  signatureAlgorithm: string
-
-  digestAlgorithm: string
-
-  protocolBinding: string
-}
-
-export interface ICasConnectionConfig {
-  casConnectionLoginUrl: string
-}
-export interface SocialConnectionItem {
-  name: string
-  name_en: string
-  logo: string
-  description: string
-  provider: SocialConnectionProvider
-  authorizationUrl: string
-  tooltip: Record<Lang, string>
-}
-
-export interface EnterpriseConnectionItem {
-  id: string
-  createdAt: Date
-  updatedAt: Date
-  userPoolId: string
-  protocol: Protocol
-  identifier: string
-  displayName: string
-  logo: string
-  enabled: boolean
-  config:
-    | OIDCConnectionConfig
-    | ISamlConnectionConfig
-    | ICasConnectionConfig
-    | IAzureAdConnectionConfig
-    | IOAuthConnectionConfig
-}
-
-export interface UserPoolConfig {
-  name: string
-  logo: string
-  socialConnections: SocialConnectionItem[]
-  enterpriseConnections: EnterpriseConnectionItem[]
-}
-
-// export const fetchUserPoolConfig = (userPoolId: string) =>
-//   requestClient.get<UserPoolConfig>(
-//     `/api/v2/userpools/${userPoolId}/public-config`
-//   )

package/components/AuthingGuard/constants.ts

@@ -1,105 +0,0 @@
-import {
-  GuardMode,
-  UserConfig,
-  GuardScenes,
-  LoginMethods,
-  RegisterMethods,
-  LocalesConfig,
-} from '../../components/AuthingGuard/types'
-import { i18n } from '../_utils/locales'
-
-// 个人版 OTP MFA 的 error code
-export const OTP_MFA_CODE = 1635
-// 企业版手机和短信验证吗 MFA 的 error code
-export const APP_MFA_CODE = 1636
-
-// 需要验证吗
-export const NEED_CAPTCHA = 2000
-
-export const LOGIN_METHODS_MAP = () => ({
-  [LoginMethods.Password]: i18n.t('login.pwdLogin'),
-  [LoginMethods.PhoneCode]: i18n.t('login.verifyCodeLogin'),
-  [LoginMethods.AppQr]: i18n.t('login.appScanLogin'),
-  [LoginMethods.WxMinQr]: i18n.t('login.scanLogin'),
-  [LoginMethods.LDAP]: i18n.t('login.ldapLogin'),
-  [LoginMethods.AD]: i18n.t('login.adLogin'),
-  [LoginMethods.WechatMpQrcode]: i18n.t('login.wechatmpQrcode'),
-})
-
-export const REGISTER_METHODS_MAP = () => ({
-  [RegisterMethods.Email]: i18n.t('login.emailRegister'),
-  [RegisterMethods.Phone]: i18n.t('login.phoneRegister'),
-})
-
-// 某些社会化登录会在 tabs 中显示，或者无法在 Guard 中使用，所以底部不显示了
-export const HIDE_SOCIALS = [
-  'wechat:miniprogram:app-launch',
-  'wechat:miniprogram:qrconnect',
-  'wechat:webpage-authorization',
-  'wechat:miniprogram:default',
-  'wechatwork:addressbook',
-  'wechat:mobile',
-]
-
-// 企业版 MFA 支持的方式
-export enum ApplicationMfaType {
-  SMS = 'SMS',
-  EMAIL = 'EMAIL',
-  // OTP = 'OTP',
-  // FACE = 'FACE',
-  // FINGERPRINT = 'FINGERPRINT',
-}
-
-export const defaultGuardConfig: Partial<UserConfig> = {
-  isSSO: false,
-  title: 'Authing',
-  text: {
-    loginTabs: LOGIN_METHODS_MAP(),
-    loginBtn: {
-      normal: '登录',
-      loading: '登录',
-    },
-    registerBtn: {
-      normal: '注册',
-      loading: '注册',
-    },
-  },
-  escCloseable: true,
-  autoRegister: false,
-  clickCloseable: true,
-  mode: GuardMode.Normal,
-  disableRegister: false,
-  disableResetPwd: false,
-  defaultScenes: GuardScenes.Login,
-  appHost: 'https://core.authing.cn',
-  defaultLoginMethod: LoginMethods.Password,
-  defaultRegisterMethod: RegisterMethods.Email,
-  loginMethods: [LoginMethods.Password, LoginMethods.PhoneCode],
-  registerMethods: [RegisterMethods.Email, RegisterMethods.Phone],
-  logo:
-    'https://files.authing.co/user-contents/photos/0a4c99ff-b8ce-4030-aaaf-584c807cb21c.png',
-  passwordLoginMethods: [
-    'email-password',
-    'username-password',
-    'phone-password',
-  ],
-}
-
-export const defaultLocalesConfig: LocalesConfig = {
-  defaultLang: 'zh-CN',
-  isShowChange: false,
-}
-
-export const defaultHeaders: {
-  'userpool-id': string
-  'app-id': string
-  'sdk-version': string
-  'request-from': string
-  lang: string
-} = {
-  'userpool-id': 'x-authing-userpool-id',
-  'app-id': 'x-authing-app-id',
-  'request-from': 'x-authing-request-from',
-  'sdk-version': 'x-authing-sdk-version',
-  lang: 'x-authing-lang',
-}

package/components/AuthingGuard/hooks/index.tsx

@@ -1,70 +0,0 @@
-import {
-  AuthenticationClient,
-  AuthenticationClientOptions,
-} from 'authing-js-sdk'
-import { defaultGuardConfig } from '../constants'
-
-let authClient: AuthenticationClient | null = null
-
-export interface AuthClientConfig extends AuthenticationClientOptions {
-  /**
-   * @deprecated 使用 appHost
-   */
-  appDomain?: string
-  /**
-   * @deprecated 无需传入
-   */
-  isSSO?: boolean
-  /**
-   * @deprecated 使用 appHost
-   */
-  host?: string
-}
-
-export const initAuthClient = (config: AuthClientConfig) => {
-  if (authClient) {
-    return authClient
-  }
-
-  const { appHost, appDomain, host } = config
-
-  /**
-   * 兼容之前的参数
-   */
-  let realHost
-  if (appHost) {
-    realHost = appHost
-  } else if (appDomain) {
-    const parsedUrl = new URL(host || defaultGuardConfig.appHost!)
-    realHost = `${parsedUrl.protocol}//${appDomain}${
-      parsedUrl.port ? ':' + parsedUrl.port : ''
-    }`
-  } else if (host) {
-    realHost = host
-  } else {
-    realHost = defaultGuardConfig.appHost
-  }
-  config.appHost = realHost!
-
-  authClient = new AuthenticationClient(config)
-
-  return authClient
-}
-
-export const useAuthing = (config?: AuthClientConfig) => {
-  return { authClient: getAuthClient(config) }
-}
-
-export const getAuthClient = (config?: AuthClientConfig) => {
-  if (!authClient && !config) {
-    throw new Error(
-      'Please `initAuthClient` first or pass `AuthClientConfig` to useAuthing.'
-    )
-  }
-
-  if (config) {
-    initAuthClient(config)
-  }
-
-  return authClient
-}

package/components/AuthingGuard/hooks/useScreenSize.tsx

@@ -1,68 +0,0 @@
-import { useState, useEffect } from 'react'
-// import { inRange, debounce } from 'lodash'
-
-function debounce(fn: Function, delay: number, immediate = true) {
-  let timer: any
-
-  return function (this: any) {
-    let context = this
-    let args = arguments
-    timer && clearTimeout(timer)
-
-    if (immediate && !timer) {
-      fn.apply(context, args)
-    }
-
-    timer = setTimeout(function () {
-      fn.apply(context, args)
-    }, delay)
-  }
-}
-
-function inRange(n: number, start: number, end?: number): boolean {
-  if (end || end === 0) {
-    return n >= start && n <= end
-  }
-  return n >= start
-}
-
-export enum ScreenSize {
-  Mobile = 'mobile',
-  Desktop = 'desktop',
-}
-export const SCREEN_SIZE_RANG: {
-  size: ScreenSize
-  range: [number, number]
-}[] = [
-  {
-    size: ScreenSize.Mobile,
-    range: [0, 719],
-  },
-  {
-    size: ScreenSize.Desktop,
-    range: [720, Infinity],
-  },
-]
-
-export const getScreenSize = () => {
-  const viewportWidth = document.body.clientWidth
-  return (
-    SCREEN_SIZE_RANG.find((item) => inRange(viewportWidth, ...item.range))
-      ?.size ?? ScreenSize.Desktop
-  )
-}
-
-export const useScreenSize = () => {
-  const [screenSize, setScreenSize] = useState(getScreenSize)
-
-  useEffect(() => {
-    const onResize = debounce(() => {
-      setScreenSize(getScreenSize())
-    }, 200)
-    window.addEventListener('resize', onResize)
-
-    return () => window.removeEventListener('resize', onResize)
-  }, [])
-
-  return [screenSize]
-}

package/components/AuthingGuard/index.tsx

@@ -1,126 +0,0 @@
-import { ConfigProvider, message } from 'antd'
-import React, { FC } from 'react'
-import { AuthenticationClient } from 'authing-js-sdk'
-
-import { GuardContext } from '../context/global/context'
-import { GuardScenes } from '../../components/AuthingGuard/types'
-import { requestClient } from '../_utils/http'
-import {
-  defaultGuardConfig,
-  OTP_MFA_CODE,
-  APP_MFA_CODE,
-  defaultLocalesConfig,
-  defaultHeaders,
-} from '../../components/AuthingGuard/constants'
-import { GuardLayout } from '../../components/AuthingGuard/GuardLayout'
-import {
-  UserConfig,
-  GuardEventsHandler,
-} from '../../components/AuthingGuard/types/GuardConfig'
-
-import './style.less'
-import { initI18n } from '../_utils/locales'
-const PREFIX_CLS = 'authing-ant'
-
-message.config({
-  prefixCls: `${PREFIX_CLS}-message`,
-})
-
-interface AuthingGuardProps extends GuardEventsHandler {
-  appId: string
-  config?: UserConfig
-  visible?: boolean
-  className?: string
-  id?: string
-}
-
-export const AuthingGuard: FC<AuthingGuardProps> = ({
-  appId,
-  config = {},
-  visible,
-  className,
-  id,
-  ...guardEvents
-}) => {
-  const {
-    apiHost,
-    appDomain,
-    appHost,
-    defaultLoginMethod = defaultGuardConfig.defaultLoginMethod,
-    defaultScenes = defaultGuardConfig.defaultScenes,
-    defaultRegisterMethod = defaultGuardConfig.defaultRegisterMethod,
-    lang,
-    localesConfig = defaultLocalesConfig,
-    headers = defaultHeaders,
-  } = config
-
-  initI18n(localesConfig, lang)
-
-  let realHost: string | undefined
-  if (appHost) {
-    realHost = appHost
-  } else if (appDomain) {
-    const parsedUrl = new URL(defaultGuardConfig.appHost!)
-    realHost = `${parsedUrl.protocol}//${appDomain}${
-      parsedUrl.port ? ':' + parsedUrl.port : ''
-    }`
-  } else {
-    realHost = apiHost || defaultGuardConfig.appHost!
-  }
-
-  requestClient.setBaseUrl(realHost)
-  requestClient.setLangHeader(headers?.lang)
-
-  const authClient = new AuthenticationClient({
-    appHost: realHost!,
-    appId,
-    requestFrom: 'ui-components',
-    lang: localesConfig.defaultLang ?? lang,
-    headers,
-    onError: (code, msg: any) => {
-      if (code === 2020) {
-        return
-      }
-      if ([OTP_MFA_CODE, APP_MFA_CODE].includes(code)) {
-        message.info(msg)
-        return
-      }
-      message.error(msg)
-    },
-  })
-
-  const activeTabs = {
-    [GuardScenes.Login]: defaultLoginMethod,
-    [GuardScenes.Register]: defaultRegisterMethod,
-  }
-
-  return (
-    <ConfigProvider prefixCls={PREFIX_CLS}>
-      <GuardContext
-        value={{
-          authClient,
-          config: { ...config },
-          userConfig: config,
-          appId,
-          guardScenes: defaultScenes,
-          activeTabs,
-          guardTitle: config.title,
-          mfaData: {
-            mfaToken: '',
-          },
-          guardEvents,
-          localesConfig: config.localesConfig,
-          realHost: realHost,
-        }}
-      >
-        <GuardLayout
-          id={id}
-          className={className}
-          visible={visible}
-          lang={lang}
-          userConfig={config}
-        />
-      </GuardContext>
-    </ConfigProvider>
-  )
-}

package/components/AuthingGuard/style.less

@@ -1,103 +0,0 @@
-@import '~antd/lib/style/mixins/index.less';
-
-*[class*='authing-'] {
-  @import '~antd/lib/style/core/global.less';
-}
-
-.authing-guard-text-btn {
-  color: #396aff;
-  padding: 0;
-
-  &:hover,
-  &:focus {
-    color: #6b90ff;
-    background-color: transparent;
-  }
-}
-
-.authing-text-center {
-  text-align: center;
-  .authing-code-input {
-    justify-content: center;
-  }
-  .authing-dropdown-menu-container {
-    text-align: left;
-  }
-}
-
-.authing-guard-form-actions {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 8px;
-  align-items: center;
-  .authing-ant-divider-vertical {
-    visibility: hidden;
-  }
-}
-
-.authing-guard-tip {
-  color: #999;
-}
-
-.authing-guard-tip-btn-comb {
-  margin-left: auto;
-}
-
-.authing-guard-full-width-space {
-  width: 100%;
-}
-
-.authing-data-tips {
-  position: relative;
-  &::after {
-    content: attr(data-tips);
-    position: absolute;
-    white-space: nowrap;
-    top: 100%;
-    left: 50%;
-    transform: translateX(-50%) translateY(6px);
-    display: none;
-    background-color: rgba(0, 0, 0, 0.75);
-    font-size: 12px;
-    padding: 12px;
-    z-index: 500;
-    border-radius: 4px;
-    color: #fff;
-  }
-  &:hover {
-    &::after {
-      display: block;
-    }
-  }
-}
-.authing-data-tips__top {
-  position: relative;
-  &::after {
-    top: auto;
-    bottom: 100%;
-    transform: translateX(-50%) translateY(-6px);
-  }
-}
-
-.authing-guard-pointer {
-  cursor: pointer;
-}
-
-@media only screen and (max-width: 719px) {
-  .authing-guard-form-actions {
-    .authing-ant-divider-vertical {
-      visibility: initial;
-    }
-    justify-content: flex-end !important;
-    .authing-guard-text-btn {
-      color: #999999;
-      font-size: 12px;
-    }
-    .authing-guard-tip-btn-comb {
-      margin-left: initial !important;
-      font-size: 12px;
-      font-weight: 400;
-      color: #999999;
-    }
-  }
-}

package/components/AuthingGuard/types/Forms.ts

@@ -1,94 +0,0 @@
-import { User } from 'authing-js-sdk'
-import { LoginMethods } from './GuardConfig'
-import { ResetPwdMethods } from './GuardConfig'
-
-export interface BaseFormProps extends React.HTMLAttributes<HTMLDivElement> {
-  onSuccess?: (user: User) => void
-  onFail?: (error: any) => void
-}
-
-export interface CompleteUserInfoFormProps extends BaseFormProps {}
-
-export interface PasswordLoginFormProps extends BaseFormProps {
-  onValidateFail?: (error: any) => void
-}
-
-export interface ADLoginFormProps extends BaseFormProps {
-  onValidateFail?: (error: any) => void
-}
-
-export interface PhoneCodeLoginFormProps extends BaseFormProps {
-  onValidateFail?: (error: any) => void
-}
-
-export interface LdapLoginFormProps extends BaseFormProps {
-  onValidateFail?: (error: any) => void
-}
-
-export interface QrLoginFormProps extends BaseFormProps {
-  type: LoginMethods.AppQr | LoginMethods.WxMinQr | LoginMethods.WechatMpQrcode
-}
-
-export interface EmailRegisterFormProps extends BaseFormProps {
-  onValidateFail?: (error: any) => void
-}
-
-export interface PhoneRegisterFormProps extends BaseFormProps {
-  onValidateFail?: (error: any) => void
-}
-
-export interface ResetPasswordFormProps {
-  onSuccess?: () => void
-  onFail?: (error: any) => void
-}
-
-export interface ResetPasswordStep1Props {
-  onSuccess: (resetMethod: ResetPwdMethods, val: string) => void
-}
-
-export interface ResetPasswordStep2Props {
-  phone: string
-  onSuccess: () => void
-  onFail?: (error: any) => void
-}
-
-export interface ResetPasswordStep3Props {
-  email: string
-  onSuccess: () => void
-  onFail?: (error: any) => void
-}
-
-export interface SocialAndIdpLoginProps extends BaseFormProps {}
-
-export interface MfaVerifyForm extends BaseFormProps {
-  goReset: () => void
-}
-export interface SmsMFAVerifyFormProps extends BaseFormProps {
-  phone?: string
-  mfaToken: string
-  sendCodeRef: React.RefObject<HTMLButtonElement>
-}
-
-export interface SmsMFAFormProps extends BaseFormProps {}
-
-export interface MFACheckPhoneFormProps {
-  mfaToken: string
-  onSuccess: (phone: string) => void
-}
-
-export interface EmailMFAVerifyFormProps extends BaseFormProps {
-  email?: string
-  mfaToken: string
-  sendCodeRef: React.RefObject<HTMLButtonElement>
-}
-
-export interface EmailMFAFormProps extends BaseFormProps {}
-
-export interface MFACheckEmailFormProps {
-  mfaToken: string
-  onSuccess: (email: string) => void
-}
-
-export interface MfaResetForm extends BaseFormProps {
-  goVerify: () => void
-}