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

package/components/AuthingGuard/Forms/index.ts

@@ -1,13 +0,0 @@
-export * from './ADLoginForm'
-export * from './ResetPwdForm'
-export * from './MfaVerifyForm'
-export * from './LdapLoginForm'
-export * from './QrCodeLoginForm'
-export * from './MfaResetCodeForm'
-export * from './EmailRegisterForm'
-export * from './PhoneRegisterForm'
-export * from './PasswordLoginForm'
-export * from './SocialAndIdpLogin'
-export * from './PhoneCodeLoginForm'
-export * from './SmsMfaVerifyForm'
-export * from './EmailMfaVerifyForm'

package/components/AuthingGuard/GuardLayout/index.tsx

@@ -1,474 +0,0 @@
-import { message, Spin } from 'antd'
-import React, { FC, useCallback, useEffect, useMemo, useState } from 'react'
-
-import {
-  getClassnames,
-  insertStyles,
-  deepMerge,
-  removeStyles,
-} from '../../_utils'
-import { useGuardContext } from '../../context/global/context'
-import { GuardHeader } from '../../../components/AuthingGuard/Header'
-import { MfaLayout } from '../../../components/AuthingGuard/MfaLayout'
-import { LoginLayout } from '../../../components/AuthingGuard/LoginLayout'
-import {
-  defaultGuardConfig,
-  HIDE_SOCIALS,
-} from '../../../components/AuthingGuard/constants'
-import { RegisterLayout } from '../../../components/AuthingGuard/RegisterLayout'
-import { ResetPwdLayout } from '../../../components/AuthingGuard/ResetPwdLayout'
-import {
-  SessionData,
-  trackSession,
-  fetchAppConfig,
-  ApplicationConfig,
-  SocialConnectionItem,
-} from '../../../components/AuthingGuard/api'
-import {
-  GuardMode,
-  GuardScenes,
-  GuardConfig,
-  UserConfig,
-  Lang,
-} from '../../../components/AuthingGuard/types'
-
-import './style.less'
-import { CompleteUserInfoLayout } from '../CompleteUserInfoLayout'
-import { AppMfaLayout } from '../AppMFALayout'
-import { IconFont } from '../IconFont'
-import { ToggleLang } from '../ToggleLang'
-import { useTranslation } from 'react-i18next'
-import i18n from 'i18next'
-import { changeLang } from '../../_utils/locales'
-
-const checkConfig = (appId: string) => {
-  // 不要去掉 console.warn，不然 vue 版打包出来每次都会 throw error，估计是 rollup 打包有问题
-  if (!appId) {
-    console.warn('APP ID: ', appId)
-    throw new Error(i18n.t('common.unAppId'))
-  }
-}
-
-const useGuardConfig = () => {
-  const {
-    state: { appId, userConfig },
-    setValue,
-  } = useGuardContext()
-
-  const { t } = useTranslation()
-
-  const [loading, setLoading] = useState(true)
-
-  const [appConfig, setAppConfig] = useState<Partial<ApplicationConfig>>({})
-  const [errorMsg, setErrorMsg] = useState('')
-  const [errorDetail, setErrorDetail] = useState<any>()
-
-  useEffect(() => {
-    try {
-      checkConfig(appId)
-
-      setErrorDetail(null)
-      setErrorMsg('')
-    } catch (e: any) {
-      setErrorDetail(e)
-      setErrorMsg(e.message)
-      console.error(e)
-    }
-  }, [appId])
-
-  // 获取应用配置
-  useEffect(() => {
-    setLoading(true)
-
-    if (!appId) {
-      setLoading(false)
-      return
-    }
-    fetchAppConfig(appId)
-      .then((res) => {
-        if (res.code !== 200) {
-          setErrorMsg(res.message!)
-          setErrorDetail(res)
-          return
-        }
-
-        setAppConfig(res.data!)
-        setValue('userPoolId', res.data?.userPoolId)
-      })
-      .catch((e: any) => {
-        setErrorDetail(e)
-        setErrorMsg(t('common.networkError'))
-      })
-      .finally(() => {
-        setLoading(false)
-      })
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [appId])
-
-  useEffect(() => {
-    // 先移除之前的
-    removeStyles('appConfig')
-    removeStyles('userConfig')
-
-    insertStyles(appConfig?.css, 'appConfig')
-    insertStyles(userConfig.contentCss, 'userConfig')
-  }, [appConfig, userConfig.contentCss])
-
-  const guardConfig = useMemo<GuardConfig>(() => {
-    /**
-     * 将用应用配置与用户手动传入的配置合并
-     * 优先级：用户传入 > 应用 > 用户池
-     */
-
-    // 社会化登录
-    let socialConnectionObjs: SocialConnectionItem[] | undefined
-    // 默认展示所有社会化登录
-    if (!userConfig.socialConnections) {
-      socialConnectionObjs = [...(appConfig.socialConnections || [])]
-    } else {
-      const socials = userConfig.socialConnections
-      socialConnectionObjs = appConfig.socialConnections?.filter?.((item) =>
-        socials.includes(item.provider)
-      )
-    }
-
-    // 某些社会化登录会在 tabs 中显示，或者无法在 Guard 中使用，所以底部不显示了
-    socialConnectionObjs = socialConnectionObjs?.filter(
-      (item) => !HIDE_SOCIALS.includes(item.provider)
-    )
-
-    // 企业身份源
-    let enterpriseConnectionObjs: ApplicationConfig['identityProviders']
-
-    if (userConfig.enterpriseConnections) {
-      enterpriseConnectionObjs =
-        appConfig.identityProviders?.filter?.((item) =>
-          userConfig.enterpriseConnections!.includes(item.identifier)
-        ) || []
-    } else {
-      enterpriseConnectionObjs = appConfig.identityProviders || []
-    }
-
-    // 登录方式
-    const loginMethods =
-      userConfig.loginMethods ||
-      appConfig.loginTabs?.list ||
-      defaultGuardConfig.loginMethods
-
-    // 账密登录的登录拆分
-    const passwordLoginMethods =
-      userConfig.passwordLoginMethods ||
-      appConfig.passwordTabConfig?.enabledLoginMethods ||
-      defaultGuardConfig.loginMethods
-
-    // 默认登录方式
-    const defaultLoginMethod =
-      userConfig.defaultLoginMethod ||
-      appConfig.loginTabs?.default ||
-      defaultGuardConfig.defaultLoginMethod
-
-    // 注册方式
-    const registerMethods =
-      userConfig.registerMethods ||
-      appConfig.registerTabs?.list ||
-      defaultGuardConfig.registerMethods
-    // 默认注册方式
-    const defaultRegisterMethod =
-      userConfig.defaultRegisterMethod ||
-      appConfig.registerTabs?.default ||
-      defaultGuardConfig.defaultRegisterMethod
-
-    // 应用名
-    const title = loading
-      ? ''
-      : userConfig.title ?? appConfig.name ?? defaultGuardConfig.title
-
-    // 应用 logo
-    const logo = loading
-      ? ''
-      : userConfig.logo ?? appConfig.logo ?? defaultGuardConfig.logo
-
-    // 是否自动注册
-    const autoRegister =
-      userConfig.autoRegister ??
-      appConfig.ssoPageComponentDisplay?.autoRegisterThenLoginHintInfo ??
-      defaultGuardConfig.autoRegister
-
-    // 禁止注册
-    const disableRegister =
-      userConfig.disableRegister ??
-      !(
-        appConfig.ssoPageComponentDisplay?.registerBtn ??
-        !defaultGuardConfig.disableRegister
-      )
-
-    // 禁止重置密码
-    const disableResetPwd =
-      userConfig.disableResetPwd ??
-      !(
-        appConfig.ssoPageComponentDisplay?.registerBtn ??
-        !defaultGuardConfig.disableResetPwd
-      )
-
-    return deepMerge<GuardConfig>(
-      {} as GuardConfig,
-      defaultGuardConfig,
-      userConfig,
-      {
-        logo,
-        title,
-        autoRegister,
-        loginMethods,
-        passwordLoginMethods,
-        extendsFields: appConfig.extendsFields,
-        disableRegister,
-        disableResetPwd,
-        registerMethods,
-        defaultLoginMethod,
-        socialConnectionObjs,
-        defaultRegisterMethod,
-        enterpriseConnectionObjs,
-        publicKey: appConfig.publicKey,
-        agreementEnabled: appConfig.agreementEnabled,
-        agreements: appConfig.agreements,
-      }
-    )
-  }, [
-    userConfig,
-    appConfig.loginTabs?.list,
-    appConfig.loginTabs?.default,
-    appConfig.passwordTabConfig?.enabledLoginMethods,
-    appConfig.registerTabs?.list,
-    appConfig.registerTabs?.default,
-    appConfig.name,
-    appConfig.logo,
-    appConfig.ssoPageComponentDisplay?.autoRegisterThenLoginHintInfo,
-    appConfig.ssoPageComponentDisplay?.registerBtn,
-    appConfig.extendsFields,
-    appConfig.publicKey,
-    appConfig.agreementEnabled,
-    appConfig.agreements,
-    appConfig.socialConnections,
-    appConfig.identityProviders,
-    loading,
-  ])
-
-  return {
-    loading,
-    errorMsg,
-    guardConfig,
-    errorDetail,
-  }
-}
-
-const useModal = (visible?: boolean) => {
-  const {
-    state: { userConfig },
-  } = useGuardContext()
-
-  const isModal = userConfig.mode === GuardMode.Modal
-  // 传入了 visible 则为受控组件
-  const isControlled = typeof visible !== 'undefined'
-
-  // modal 模式，没传 visible，默认为 true
-  const [localVisible, setLocalVisible] = useState(
-    isModal && isControlled ? visible : true
-  )
-
-  const toggleLocalVisible = () => {
-    setLocalVisible((v) => !v)
-  }
-
-  const realVisible = useMemo(() => {
-    return isControlled ? visible : localVisible
-  }, [isControlled, localVisible, visible])
-
-  return {
-    isModal,
-    realVisible,
-    isControlled,
-    toggleLocalVisible,
-  }
-}
-
-export const GuardLayout: FC<{
-  visible?: boolean
-  className?: string
-  id?: string
-  style?: React.CSSProperties
-  lang?: Lang
-  // 这个传下是为了响应 config 变化，好蠢，以后优化
-  userConfig: UserConfig
-}> = ({
-  visible,
-  id,
-  className,
-  style,
-  lang,
-  userConfig: reactiveUserConfig,
-}) => {
-  const { t } = useTranslation()
-  const {
-    state: { guardScenes, authClient, guardEvents, activeTabs, localesConfig },
-    setValue,
-  } = useGuardContext()
-
-  const { realVisible, isControlled, toggleLocalVisible } = useModal(visible)
-
-  const { loading, errorMsg, guardConfig, errorDetail } = useGuardConfig()
-
-  useEffect(() => {
-    if (lang) {
-      authClient.setLang(lang)
-      changeLang(lang)
-    }
-  }, [authClient, lang])
-
-  useEffect(() => {
-    if (!loading) {
-      guardEvents.onLoginTabChange?.(activeTabs.login)
-    }
-  }, [activeTabs.login, loading, guardEvents])
-
-  useEffect(() => {
-    if (!loading) {
-      guardEvents.onRegisterTabChange?.(activeTabs.register)
-    }
-  }, [activeTabs.register, loading, guardEvents])
-
-  useEffect(() => {
-    setValue('userConfig', reactiveUserConfig)
-  }, [reactiveUserConfig, setValue])
-
-  // 动画完成后完全隐藏 dom
-  const [hidden, setHidden] = useState(false)
-  useEffect(() => {
-    setHidden(false)
-  }, [realVisible])
-
-  const closeHandler = useCallback(() => {
-    if (!isControlled && realVisible) {
-      toggleLocalVisible()
-    }
-    guardEvents.onClose?.()
-  }, [isControlled, guardEvents, toggleLocalVisible, realVisible])
-
-  useEffect(() => {
-    if (loading) {
-      return
-    }
-    if (errorDetail) {
-      guardEvents.onLoadError?.(errorDetail)
-      return
-    }
-
-    guardEvents.onLoad?.(authClient)
-  }, [authClient, errorDetail, guardEvents, loading, t])
-
-  useEffect(() => {
-    if (guardConfig.isSSO) {
-      trackSession().then((sessionData) => {
-        // 这个接口没有 code, data, 直接返回了数据
-        let typedData = (sessionData as unknown) as SessionData
-        if (typedData.userInfo) {
-          message.success(t('common.LoginSuccess'))
-          guardEvents.onLogin?.(typedData.userInfo, authClient)
-        }
-      })
-    }
-  }, [guardConfig.isSSO, guardEvents, authClient, t])
-
-  useEffect(() => {
-    setValue('config', guardConfig)
-    setValue('activeTabs', {
-      [GuardScenes.Login]: guardConfig.defaultLoginMethod,
-      [GuardScenes.Register]: guardConfig.defaultRegisterMethod,
-    })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [guardConfig])
-
-  const isModal = useMemo(() => guardConfig.mode === GuardMode.Modal, [
-    guardConfig,
-  ])
-
-  // 监听 esc 关闭 modal
-  useEffect(() => {
-    const handler = (evt: KeyboardEvent) => {
-      if (evt.keyCode === 27 && isModal && guardConfig.escCloseable) {
-        closeHandler()
-      }
-    }
-
-    window.addEventListener('keydown', handler)
-    return () => window.removeEventListener('keydown', handler)
-  }, [closeHandler, guardConfig, isModal])
-
-  const layoutMap = {
-    [GuardScenes.Login]: <LoginLayout />,
-    [GuardScenes.Register]: <RegisterLayout />,
-    [GuardScenes.RestPassword]: <ResetPwdLayout />,
-    [GuardScenes.MfaVerify]: <MfaLayout />,
-    [GuardScenes.CompleteUserInfo]: <CompleteUserInfoLayout />,
-    [GuardScenes.AppMfaVerify]: <AppMfaLayout />,
-  }
-
-  return (
-    <div
-      id={id}
-      style={{
-        ...style,
-        zIndex: guardConfig.zIndex || 100,
-      }}
-      className={getClassnames([
-        'authing-guard-layout',
-        !realVisible && 'authing-guard-layout__hidden',
-        isModal && 'authing-guard-layout__modal',
-        hidden && 'authing-guard-layout__dis-none',
-        className,
-      ])}
-      onTransitionEnd={() => {
-        if (!realVisible) {
-          setHidden(true)
-        }
-      }}
-    >
-      <>
-        {isModal && (
-          <div
-            className={getClassnames([
-              'authing-guard-mask',
-              !realVisible && 'authing-guard-mask__hidden',
-            ])}
-          ></div>
-        )}
-        <div
-          className={getClassnames([
-            'authing-guard-container',
-            !realVisible && 'authing-guard-container__hidden',
-          ])}
-        >
-          {isModal && guardConfig.clickCloseable && (
-            <button onClick={closeHandler} className="authing-guard-close-btn">
-              <IconFont type="authing-guanbi" />
-            </button>
-          )}
-
-          <GuardHeader />
-
-          {loading ? (
-            <Spin size="large" className="authing-guard-loading" />
-          ) : errorMsg ? (
-            <div className="authing-guard-load-error">{errorMsg}</div>
-          ) : (
-            layoutMap[guardScenes]
-          )}
-          {/* <div>{localesConfig?.isShowChange && <ToggleLang />}</div> */}
-          <div>
-            {localesConfig?.isShowChange === false ? null : <ToggleLang />}
-          </div>
-        </div>
-      </>
-    </div>
-  )
-}

package/components/AuthingGuard/Header/index.tsx

@@ -1,25 +0,0 @@
-import React, { FC } from 'react'
-import { Avatar } from 'antd'
-
-import { useGuardContext } from '../../context/global/context'
-
-import './style.less'
-
-export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-export const GuardHeader: FC<HeaderProps> = (props) => {
-  const {
-    state: {
-      config: { logo, title },
-    },
-  } = useGuardContext()
-
-  return (
-    <div className="authing-guard-header">
-      {Boolean(logo) && (
-        <Avatar className="authing-guard-logo" src={logo} size={50}></Avatar>
-      )}
-      <div className="authing-guard-title">{title}</div>
-    </div>
-  )
-}

package/components/AuthingGuard/Header/style.less

@@ -1,52 +0,0 @@
-.authing-guard-header {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.authing-guard-logo {
-  margin-bottom: 8px;
-}
-
-.authing-guard-logo img {
-  object-fit: contain;
-}
-
-.authing-guard-title {
-  color: #abb9d7;
-  font-size: 24px;
-  margin-bottom: 24px;
-  width: 100%;
-  word-break: break-all;
-  text-align: center;
-}
-
-// .large .logo {
-//   margin-bottom: 16px;
-// }
-
-// .large .title {
-//   color: #333333;
-//   font-size: 32px;
-// }
-
-@media only screen and (max-width: 719px) {
-  .authing-guard-header {
-    align-items: flex-start;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    padding-top: 40px;
-    padding-bottom: 48px;
-  }
-  .authing-guard-title {
-    margin-bottom: 0;
-    padding-left: 8px;
-    color: #333333;
-    font-weight: 500;
-  }
-  .authing-guard-logo {
-    margin: 0;
-  }
-}

package/components/AuthingGuard/IconFont/iconfont.js

@@ -1,74 +0,0 @@
-/** eslint-disable */
-/**
- * !!!!!!!!!!!! 注意注意！！！！！！！！！！！！！
- *
- * 只要替换 svgStr 中的字符串即可，为了兼容 SSR！！！！！！
- *
- */
-import { svgStr } from './svg'
-var init = function (a) {
-  var c,
-    t,
-    l,
-    e,
-    i,
-    o,
-    h = svgStr,
-    m = (m = document.getElementsByTagName('script'))[
-      m.length - 1
-    ].getAttribute('data-injectcss')
-  if (m && !a.__iconfont__svg__cssinject__) {
-    a.__iconfont__svg__cssinject__ = !0
-    try {
-      document.write(
-        '<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>'
-      )
-    } catch (a) {
-      console && console.log(a)
-    }
-  }
-  function n() {
-    i || ((i = !0), l())
-  }
-  ;(c = function () {
-    var a, c, t
-    ;((t = document.createElement('div')).innerHTML = h),
-      (h = null),
-      (c = t.getElementsByTagName('svg')[0]) &&
-        (c.setAttribute('aria-hidden', 'true'),
-        (c.style.position = 'absolute'),
-        (c.style.width = 0),
-        (c.style.height = 0),
-        (c.style.overflow = 'hidden'),
-        (a = c),
-        (t = document.body).firstChild
-          ? (c = t.firstChild).parentNode.insertBefore(a, c)
-          : t.appendChild(a))
-  }),
-    document.addEventListener
-      ? ~['complete', 'loaded', 'interactive'].indexOf(document.readyState)
-        ? setTimeout(c, 0)
-        : ((t = function () {
-            document.removeEventListener('DOMContentLoaded', t, !1), c()
-          }),
-          document.addEventListener('DOMContentLoaded', t, !1))
-      : document.attachEvent &&
-        ((l = c),
-        (e = a.document),
-        (i = !1),
-        (o = function () {
-          try {
-            e.documentElement.doScroll('left')
-          } catch (a) {
-            return void setTimeout(o, 50)
-          }
-          n()
-        })(),
-        (e.onreadystatechange = function () {
-          'complete' == e.readyState && ((e.onreadystatechange = null), n())
-        }))
-}
-
-if (typeof window !== 'undefined' && typeof window.document !== 'undefined') {
-  init(window)
-}

package/components/AuthingGuard/IconFont/index.tsx

@@ -1,19 +0,0 @@
-import React, { FC } from 'react'
-import { getClassnames } from '../../_utils'
-import './iconfont'
-import './style.less'
-
-export const IconFont: FC<{
-  type: string
-  style?: React.CSSProperties
-  className?: string
-}> = ({ type, style, className }) => {
-  return (
-    <svg
-      style={{ ...style }}
-      className={getClassnames(['authing-icon', className])}
-    >
-      <use xlinkHref={`#${type}`}></use>
-    </svg>
-  )
-}