@authing/react-ui-components 3.0.0-alpha → 3.0.0-rc.3

package/components/AuthingGuard/ResetPwdLayout/index.tsx

@@ -1,20 +0,0 @@
-import React from 'react'
-
-import { useGuardContext } from '../../context/global/context'
-import { ResetPasswordForm } from '../../../components/AuthingGuard/Forms'
-
-export const ResetPwdLayout = () => {
-  const {
-    state: { guardEvents, authClient },
-  } = useGuardContext()
-
-  const onFail = (error: any) => {
-    guardEvents.onPwdResetError?.(error, authClient)
-  }
-
-  const onSuccess = () => {
-    guardEvents.onPwdReset?.(authClient)
-  }
-
-  return <ResetPasswordForm onFail={onFail} onSuccess={onSuccess} />
-}

package/components/AuthingGuard/ToggleLang/index.tsx

@@ -1,51 +0,0 @@
-import React, { FC } from 'react'
-import { Dropdown, Menu, Space } from 'antd'
-import { LANG_MAP } from '../types'
-import { useTranslation } from 'react-i18next'
-import { changeLang } from '../../_utils/locales'
-import { useGuardContext } from '../../context/global/context'
-import { IconFont } from '../IconFont'
-
-export const ToggleLang: FC = () => {
-  const {
-    state: { authClient },
-  } = useGuardContext()
-
-  const onClick = ({ key }: any) => {
-    changeLang(key)
-    authClient.setLang(key)
-  }
-  const { i18n } = useTranslation()
-
-  return (
-    <Dropdown
-      className="authing-toggle-language"
-      overlay={
-        <Menu onClick={onClick}>
-          {LANG_MAP.map((item) => (
-            <Menu.Item key={item.value}>{item.label}</Menu.Item>
-          ))}
-        </Menu>
-      }
-    >
-      <Space
-        size={1}
-        style={{
-          alignSelf: 'center',
-          color: '#999',
-          marginTop: 24,
-          cursor: 'pointer',
-          fontSize: 14,
-        }}
-      >
-        <IconFont type="authing-yuyan" />
-        <span>
-          {
-            LANG_MAP.find((item) => item.value === (i18n.language || 'zh-CN'))
-              ?.label
-          }
-        </span>
-      </Space>
-    </Dropdown>
-  )
-}

package/components/AuthingGuard/api/appConfig.ts

@@ -1,146 +0,0 @@
-import { Lang, Protocol } from '../types'
-import {
-  IAzureAdConnectionConfig,
-  ICasConnectionConfig,
-  IOAuthConnectionConfig,
-  ISamlConnectionConfig,
-  OIDCConnectionConfig,
-  SocialConnectionItem,
-} from './userPoolConfig'
-import { i18n } from '../../_utils/locales'
-import { requestClient } from '../../_utils/http'
-import { PasswordStrength } from '../../_utils'
-
-export enum ApplicationMfaType {
-  SMS = 'SMS',
-  EMAIL = 'EMAIL',
-  // OTP = 'OTP',
-  // FACE = 'FACE',
-  // FINGERPRINT = 'FINGERPRINT',
-}
-
-export const ApplicationMfaTypeLabel: () => Record<
-  ApplicationMfaType,
-  string
-> = () => ({
-  [ApplicationMfaType.SMS]: i18n.t('common.SMS'),
-  [ApplicationMfaType.EMAIL]: i18n.t('common.EmailVerification'),
-})
-
-export interface OidcClientMetadata {
-  grant_types: string[]
-  client_id: string
-  redirect_uris: string[]
-  scope: string
-  response_types: ResponseType[]
-}
-export interface InternalExtendsField {
-  type: 'internal'
-  name: string
-  label: string
-  inputType: string
-}
-
-export interface UserExtendsField {
-  type: 'user'
-  id: string
-  name: string
-  label: string
-  inputType: string
-}
-
-export type ExtendsField = InternalExtendsField | UserExtendsField
-
-export interface ApplicationPasswordTabConfig {
-  enabledLoginMethods?: PasswordLoginMethods[]
-}
-
-export interface Agreement {
-  id: number
-  title: string
-  required: boolean
-  lang: Lang
-}
-
-export type PasswordLoginMethods =
-  | 'username-password'
-  | 'email-password'
-  | 'phone-password'
-
-export interface ApplicationConfig {
-  id: string
-  cdnBase: string
-  userPoolId: string
-  rootUserPoolId: string
-  publicKey: string
-  // 登录框自定义 css 代码
-  css: string
-  name: string
-  logo: string
-  redirectUris: string[]
-  registerDisabled: boolean
-  registerTabs: {
-    list: string[]
-    default: string
-    title: { [x: string]: string }
-  }
-  loginTabs: {
-    list: string[]
-    default: string
-    title: { [x: string]: string }
-  }
-  socialConnections: SocialConnectionItem[]
-
-  extendsFieldsEnabled: boolean
-  extendsFields: ExtendsField[]
-
-  identifier: string
-  identityProviders: {
-    identifier: string
-    protocol: Protocol
-    displayName: string
-    logo: string
-    config:
-      | ISamlConnectionConfig
-      | OIDCConnectionConfig
-      | ICasConnectionConfig
-      | IAzureAdConnectionConfig
-      | IOAuthConnectionConfig
-  }[]
-
-  ssoPageComponentDisplay: {
-    autoRegisterThenLoginHintInfo: boolean
-    forgetPasswordBtn: boolean
-    idpBtns: boolean
-    loginBtn: boolean
-    loginByPhoneCodeTab: boolean
-    loginByUserPasswordTab: boolean
-    loginMethodNav: boolean
-    phoneCodeInput: boolean
-    registerBtn: boolean
-    registerByEmailTab: boolean
-    registerByPhoneTab: boolean
-    registerMethodNav: boolean
-    socialLoginBtns: boolean
-    userPasswordInput: boolean
-    wxMpScanTab: boolean
-  }
-
-  protocol: Protocol
-  oidcConfig: OidcClientMetadata
-  passwordTabConfig: ApplicationPasswordTabConfig
-
-  agreementEnabled: boolean
-  agreements: Agreement[]
-  customPasswordStrength: any
-  passwordStrength: PasswordStrength
-  verifyCodeLength: number
-}
-
-export const fetchAppConfig = (appId: string) =>
-  requestClient.get<ApplicationConfig>(
-    `/api/v2/applications/${appId}/public-config`,
-    {
-      credentials: 'include',
-    }
-  )

package/components/AuthingGuard/api/index.ts

@@ -1,3 +0,0 @@
-export * from './sso'
-export * from './appConfig'
-export * from './userPoolConfig'

package/components/AuthingGuard/api/sso.ts

@@ -1,29 +0,0 @@
-import { User } from '../types'
-import { requestClient } from '../../_utils/http'
-
-export interface SessionData {
-  session: null | {
-    _id: string
-    cookie: {
-      originalMaxAge: number
-      expires: Date
-      secure: boolean
-      httpOnly: boolean
-      path: string
-      sameSite: string
-    }
-    appId?: string
-    type: string
-    userId: string
-  }
-  userInfo?: User
-}
-
-export const trackSession = () =>
-  requestClient.get<SessionData>(
-    `/cas/session`,
-    {},
-    {
-      credentials: 'include',
-    }
-  )

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]
-}