@authing/react-ui-components 3.0.2-beta.5 → 3.1.1-rc.1

package/components/ForgetPassword/core/resetPassword.tsx

@@ -1,162 +0,0 @@
-import React, { useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Form, Input } from 'antd'
-import { StoreValue } from 'antd/lib/form/interface'
-
-import { UserOutlined, SafetyOutlined, LockOutlined } from '@ant-design/icons'
-import { SendCode } from '../../SendCode'
-
-import { useAuthClient } from '../../Guard/authClient'
-import { fieldRequiredRule, getPasswordValidate, validate } from '../../_utils'
-import SubmitButton from '../../SubmitButton'
-
-interface ResetPasswordProps {
-  onReset: any
-  publicConfig: any
-  onSend: (type: 'email' | 'phone') => void
-  onSendError: (type: 'email' | 'phone', error: any) => void
-}
-export const ResetPassword = (props: ResetPasswordProps) => {
-  const { t } = useTranslation()
-  let [form] = Form.useForm()
-  let [identify, setIdentify] = useState('')
-  let [codeMethod, setCodeMethod] = useState<'phone' | 'email'>('phone')
-  let client = useAuthClient()
-  let submitButtonRef = useRef<any>(null)
-
-  const verifyCodeLength = props.publicConfig.verifyCodeLength ?? 4
-
-  const onFinish = async (values: any) => {
-    let identify = values.identify
-    let code = values.code
-    let newPassword = values.password
-    let context = new Promise(() => {})
-
-    if (codeMethod === 'email') {
-      context = client.resetPasswordByEmailCode(identify, code, newPassword)
-    }
-    if (codeMethod === 'phone') {
-      context = client.resetPasswordByPhoneCode(identify, code, newPassword)
-    }
-
-    context
-      .then((r) => {
-        props.onSend(codeMethod)
-        props.onReset(r)
-      })
-      .catch((e) => {
-        props.onSendError(codeMethod, e)
-        props.onReset(e)
-      })
-  }
-
-  return (
-    <div className="authing-g2-login-phone-code">
-      <Form
-        name="resetPassword"
-        form={form}
-        onFinish={onFinish}
-        onFinishFailed={() => {
-          submitButtonRef?.current?.onError()
-        }}
-        autoComplete="off"
-      >
-        <Form.Item
-          className="authing-g2-input-form"
-          name="identify"
-          validateFirst={true}
-          rules={[
-            ...fieldRequiredRule(t('common.account')),
-            {
-              validator: async (_, value: StoreValue) => {
-                if (!value) {
-                  return
-                }
-                if (validate('email', value) || validate('phone', value)) {
-                  return
-                } else {
-                  throw new Error(t('login.inputCorrectPhoneOrEmail'))
-                }
-              },
-            },
-          ]}
-        >
-          <Input
-            className="authing-g2-input"
-            autoComplete="tel"
-            size="large"
-            placeholder={t('login.inputPhoneOrEmail')}
-            value={identify}
-            onChange={(e) => {
-              let v = e.target.value
-              setIdentify(v)
-              if (validate('email', v)) {
-                setCodeMethod('email')
-              }
-              if (validate('phone', v)) {
-                setCodeMethod('phone')
-              }
-            }}
-            prefix={<UserOutlined style={{ color: '#878A95' }} />}
-          />
-        </Form.Item>
-        <Form.Item
-          className="authing-g2-input-form"
-          name="code"
-          rules={[...fieldRequiredRule(t('common.captchaCode'))]}
-        >
-          <SendCode
-            className="authing-g2-input"
-            autoComplete="one-time-code"
-            size="large"
-            placeholder={t('common.inputFourVerifyCode', {
-              length: verifyCodeLength,
-            })}
-            prefix={<SafetyOutlined style={{ color: '#878A95' }} />}
-            maxLength={verifyCodeLength}
-            method={codeMethod}
-            data={identify}
-            onSendCodeBefore={async () => {
-              await form.validateFields(['identify'])
-            }}
-
-            // form={form}
-          />
-        </Form.Item>
-        <Form.Item
-          className="authing-g2-input-form"
-          name="password"
-          validateFirst={true}
-          rules={[
-            {
-              validator(_, value) {
-                if ((value ?? '') && value.indexOf(' ') !== -1) {
-                  return Promise.reject(t('common.checkPasswordHasSpace'))
-                }
-                return Promise.resolve()
-              },
-            },
-            ...getPasswordValidate(
-              props.publicConfig?.passwordStrength,
-              props.publicConfig?.customPasswordStrength
-            ),
-          ]}
-        >
-          <Input.Password
-            className="authing-g2-input"
-            size="large"
-            placeholder={t('user.inputNewPwd')}
-            prefix={<LockOutlined style={{ color: '#878A95' }} />}
-          />
-        </Form.Item>
-        <Form.Item className="authing-g2-input-form submit-form">
-          <SubmitButton
-            className="forget-password"
-            text={t('common.confirm')}
-            ref={submitButtonRef}
-          />
-        </Form.Item>
-      </Form>
-    </div>
-  )
-}

package/components/ForgetPassword/index.tsx

@@ -1,78 +0,0 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { message } from 'antd'
-
-import { GuardModuleType } from '../Guard/module'
-import { ResetPassword } from './core/resetPassword'
-
-import { ImagePro } from '../ImagePro'
-import { ForgetPasswordViewProps } from './interface'
-import { useAuthClient } from '../Guard/authClient'
-import { CommonMessage } from '..'
-
-export const GuardForgetPassword: React.FC<ForgetPasswordViewProps> = (
-  props
-) => {
-  const { t } = useTranslation()
-  let publicConfig = props.config.__publicConfig__
-  const authClient = useAuthClient()
-
-  const onReset = (res: any) => {
-    let code = res.code
-    if (code !== 200) {
-      props.onPwdResetError?.(res, authClient)
-      message.error(res.message)
-      return
-    }
-    props.onPwdReset?.(authClient)
-    // 返回登录
-    const initData = {
-      title: t('common.resetSuccess'),
-      message: t('common.resetSuccessMessage'),
-    }
-    props.__changeModule?.(GuardModuleType.SUBMIT_SUCCESS, { ...initData })
-  }
-
-  const onSend = (type: 'phone' | 'email') => {
-    if (type === 'phone') props.onPwdPhoneSend?.(authClient)
-    if (type === 'email') props.onPwdEmailSend?.(authClient)
-  }
-  const onSendError = (type: 'phone' | 'email', error: any) => {
-    if (type === 'phone')
-      props.onPwdPhoneSendError?.(error as CommonMessage, authClient)
-    if (type === 'email')
-      props.onPwdEmailSendError?.(error as CommonMessage, authClient)
-  }
-
-  return (
-    <div className="g2-view-container">
-      <div className="g2-view-header">
-        <ImagePro
-          src={props.config?.logo}
-          size={48}
-          borderRadius={4}
-          alt=""
-          className="icon"
-        />
-        <div className="title">{t('login.resetPwd')}</div>
-        <div className="title-explain">{t('user.resetpasswordText1')}</div>
-      </div>
-      <div className="g2-view-tabs">
-        <ResetPassword
-          onReset={onReset}
-          publicConfig={publicConfig}
-          onSend={onSend}
-          onSendError={onSendError}
-        />
-      </div>
-      <div className="g2-tips-line">
-        <div
-          className="link-like back-to-login"
-          onClick={() => props.__changeModule?.(GuardModuleType.LOGIN)}
-        >
-          {t('common.backLoginPage')}
-        </div>
-      </div>
-    </div>
-  )
-}

package/components/ForgetPassword/interface.ts

@@ -1,32 +0,0 @@
-import { AuthenticationClient, CommonMessage } from '..'
-import { IG2Config, IG2Events, IG2FCProps, IG2FCViewProps } from '../Type'
-
-export interface ForgetPasswordEvents extends IG2Events {
-  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
-}
-
-export interface ForgetPasswordConfig extends IG2Config {}
-
-export interface ForgetPasswordProps extends IG2FCProps, ForgetPasswordEvents {
-  config: Partial<IG2Config>
-}
-
-export interface ForgetPasswordViewProps
-  extends ForgetPasswordProps,
-    IG2FCViewProps {
-  config: IG2Config
-}

package/components/Guard/Guard.tsx

@@ -1,295 +0,0 @@
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useReducer,
-  useState,
-} from 'react'
-import { ConfigProvider, message, Modal } from 'antd'
-
-import { GuardLoginView } from '../Login'
-
-import { initAuthClient } from './authClient'
-import { GuardEvents, guardEventsFilter } from './event'
-import { initConfig } from '../_utils/config'
-import { insertStyles } from '../_utils'
-import { getGuardHttp, GuardHttp, initGuardHttp } from '../_utils/guradHttp'
-import { initI18n } from '..//_utils/locales'
-import { IG2FCProps } from '../Type'
-import { getDefaultGuardLocalConfig, GuardLocalConfig } from './config'
-import { ShieldSpin } from '../ShieldSpin'
-import { GuardModuleType } from './module'
-import { GuardMFAView } from '../MFA'
-import { GuardRegisterView } from '../Register'
-import { GuardDownloadATView } from '../DownloadAuthenticator'
-import {
-  GuardStateMachine,
-  initGuardStateMachine,
-  useHistoryHijack,
-} from './stateMachine'
-import { GuardBindTotpView } from '../BindTotp'
-import { GuardForgetPassword } from '../ForgetPassword'
-import { GuardChangePassword } from '../ChangePassword'
-import { GuardNeedHelpView } from '../NeedHelpView'
-import { GuardCompleteInfoView } from '../CompleteInfo'
-import { GuardRecoveryCodeView } from '../RecoveryCode'
-import './styles.less'
-import { IconFont } from '../AuthingGuard/IconFont'
-import { GuardErrorView } from '../Error'
-import { AuthenticationClient, GuardMode } from '..'
-import { GuardSubmitSuccessView } from '../SubmitSuccess'
-
-const PREFIX_CLS = 'authing-ant'
-
-message.config({
-  prefixCls: `${PREFIX_CLS}-message`,
-})
-
-const ComponentsMapping: Record<
-  GuardModuleType,
-  (props: GuardViewProps) => React.ReactNode
-> = {
-  [GuardModuleType.ERROR]: (props) => <GuardErrorView {...props} />,
-  [GuardModuleType.LOGIN]: (props) => <GuardLoginView {...props} />,
-  [GuardModuleType.MFA]: (props) => <GuardMFAView {...props} />,
-  [GuardModuleType.REGISTER]: (props) => <GuardRegisterView {...props} />,
-  [GuardModuleType.DOWNLOAD_AT]: (props) => <GuardDownloadATView {...props} />,
-  [GuardModuleType.FORGET_PWD]: (props) => <GuardForgetPassword {...props} />,
-  [GuardModuleType.CHANGE_PWD]: (props) => <GuardChangePassword {...props} />,
-  [GuardModuleType.BIND_TOTP]: (props) => <GuardBindTotpView {...props} />,
-  [GuardModuleType.ANY_QUESTIONS]: (props) => <GuardNeedHelpView {...props} />,
-  [GuardModuleType.COMPLETE_INFO]: (props) => (
-    <GuardCompleteInfoView {...props} />
-  ),
-  [GuardModuleType.RECOVERY_CODE]: (props) => (
-    <GuardRecoveryCodeView {...props} />
-  ),
-  [GuardModuleType.SUBMIT_SUCCESS]: (props) => (
-    <GuardSubmitSuccessView {...props} />
-  ),
-}
-
-// 首页 init 数据
-const initState: ModuleState = {
-  moduleName: GuardModuleType.LOGIN,
-  initData: {},
-}
-
-export interface GuardProps extends GuardEvents, IG2FCProps {
-  tenantId?: string
-  config?: Partial<GuardLocalConfig>
-  visible?: boolean
-}
-
-interface GuardViewProps extends GuardProps {
-  config: GuardLocalConfig
-  initData: any
-}
-
-interface IBaseAction<T = string, P = any> {
-  type: T & string
-  payload?: Partial<P>
-}
-
-interface ModuleState {
-  moduleName: GuardModuleType
-  initData: any
-}
-
-export const Guard = (props: GuardProps) => {
-  const { appId, tenantId, config } = props
-
-  // 初始化 Loading 标识
-  const [initSettingEnd, setInitSettingEnd] = useState(false)
-
-  const [initError, setInitError] = useState(false)
-  const [errorData, setErrorData] = useState<any>()
-
-  // Config
-  const [GuardLocalConfig, setGuardLocalConfig] = useState<GuardLocalConfig>()
-
-  const [events, setEvents] = useState<GuardEvents>()
-  const [authClint, setAuthClint] = useState<AuthenticationClient>()
-  const [httpClint, setHttpClint] = useState<GuardHttp>()
-
-  // 状态机
-  const [
-    guardStateMachine,
-    setGuardStateMachine,
-  ] = useState<GuardStateMachine>()
-
-  // 劫持浏览器 History
-  const [historyNext] = useHistoryHijack(guardStateMachine?.back)
-
-  // modules 定义
-  const moduleReducer: (
-    state: ModuleState,
-    action: IBaseAction<GuardModuleType, ModuleState>
-  ) => ModuleState = (state, { type, payload }) => {
-    return {
-      moduleName: type,
-      initData: payload?.initData,
-    }
-  }
-
-  // Modules Reducer
-  const [moduleState, changeModule] = useReducer(moduleReducer, initState)
-
-  // 切换 Module
-  const onChangeModule = (moduleName: GuardModuleType, initData: any = {}) => {
-    changeModule({
-      type: moduleName,
-      payload: {
-        initData: initData ?? {},
-      },
-    })
-  }
-
-  // HttpClint
-  useEffect(() => {
-    if (!appId) return
-
-    const httpClient = initGuardHttp(
-      config?.host ?? getDefaultGuardLocalConfig().host
-    )
-    httpClient.setAppId(appId)
-    tenantId && httpClient.setTenantId(tenantId)
-    setHttpClint(httpClient)
-  }, [appId, config?.host, tenantId])
-
-  useEffect(() => {
-    if (httpClint && GuardLocalConfig && GuardLocalConfig.__appHost__) {
-      httpClint?.setBaseUrl(GuardLocalConfig.__appHost__)
-    }
-  }, [GuardLocalConfig, httpClint])
-
-  // I18n
-  useEffect(() => {
-    // TODO  国际化 这部分有点小问题 等待优化
-    initI18n({}, config?.lang)
-  }, [config?.lang])
-
-  // AuthClient
-  useEffect(() => {
-    if (appId && GuardLocalConfig) {
-      const authClint = initAuthClient(GuardLocalConfig, appId, tenantId)
-      setAuthClint(authClint)
-    }
-  }, [GuardLocalConfig, appId, tenantId])
-
-  // initEvents
-  useEffect(() => {
-    const events = guardEventsFilter(props)
-    setEvents(events)
-  }, [props])
-
-  // 状态机相关
-  useEffect(() => {
-    const guardStateMachine = initGuardStateMachine(onChangeModule, initState)
-    setGuardStateMachine(guardStateMachine)
-  }, [])
-
-  // 设置 config
-  useEffect(() => {
-    if (guardStateMachine && GuardLocalConfig)
-      guardStateMachine.setConfig(GuardLocalConfig)
-  }, [GuardLocalConfig, guardStateMachine])
-
-  const initPublicConfig = useCallback(async () => {
-    if (!config && !appId) return
-    try {
-      // Config 初始化
-      const { config: mergedConfig, publicConfig } = await initConfig(
-        appId,
-        config ?? {},
-        getDefaultGuardLocalConfig()
-      )
-
-      setGuardLocalConfig(mergedConfig)
-
-      getGuardHttp().setUserpoolId(publicConfig.userPoolId)
-    } catch (error: any) {
-      setErrorData(error)
-      setInitError(true)
-    } finally {
-      // 初始化 结束
-      setInitSettingEnd(true)
-    }
-  }, [appId, config])
-
-  useEffect(() => {
-    initPublicConfig()
-  }, [initPublicConfig])
-
-  useEffect(() => {
-    if (GuardLocalConfig && GuardLocalConfig.contentCss)
-      insertStyles(GuardLocalConfig.contentCss)
-  }, [GuardLocalConfig])
-
-  useEffect(() => {
-    if (GuardLocalConfig && authClint) events?.onLoad?.(authClint)
-  }, [GuardLocalConfig, authClint, events])
-
-  useEffect(() => {
-    if (initError) {
-      events?.onLoadError?.(errorData)
-    }
-  }, [errorData, events, initError])
-
-  const renderModule = useMemo(() => {
-    if (initError)
-      return <GuardErrorView initData={{ messages: errorData?.message }} />
-    if (initSettingEnd && GuardLocalConfig) {
-      return ComponentsMapping[moduleState.moduleName]({
-        appId,
-        initData: moduleState.initData,
-        config: GuardLocalConfig,
-        ...events,
-        __changeModule: (moduleName, initData) => {
-          historyNext(initData)
-          guardStateMachine?.next(moduleName, initData)
-        },
-      })
-    } else {
-      return (
-        <div className="g2-init-setting-loading">
-          <ShieldSpin size={100} />
-        </div>
-      )
-    }
-  }, [
-    initSettingEnd,
-    GuardLocalConfig,
-    initError,
-    errorData?.message,
-    moduleState.moduleName,
-    moduleState.initData,
-    appId,
-    events,
-    historyNext,
-    guardStateMachine,
-  ])
-
-  return (
-    // TODO 这部分缺失 Loging 态
-    <ConfigProvider prefixCls={PREFIX_CLS}>
-      {config?.mode === GuardMode.Modal ? (
-        <Modal
-          className="authing-g2-render-module-modal"
-          closeIcon={
-            <IconFont type="authing-close-line" className="g2-modal-close" />
-          }
-          visible={props.visible}
-          onCancel={props.onClose}
-          keyboard={config.escCloseable}
-          maskClosable={false} //点击蒙层，是否允许关闭
-          getContainer={config.target ? config.target : false}
-        >
-          <div className="authing-g2-render-module">{renderModule}</div>
-        </Modal>
-      ) : (
-        <div className="authing-g2-render-module">{renderModule}</div>
-      )}
-    </ConfigProvider>
-  )
-}

package/components/Guard/authClient.ts

@@ -1,44 +0,0 @@
-import { AuthenticationClient } from 'authing-js-sdk'
-
-import packageConfig from '../../package.json'
-import { GuardLocalConfig } from './config'
-
-let authClient: AuthenticationClient
-
-export const initAuthClient = (
-  config: GuardLocalConfig,
-  appId: string,
-  tenantId?: string
-) => {
-  const host = config.__appHost__ ?? config.host
-  const lang = config.lang
-
-  if (!authClient) {
-    try {
-      authClient = new AuthenticationClient({
-        appHost: host,
-        tenantId: tenantId,
-        appId,
-        lang,
-        requestFrom: `Guard-${packageConfig.framework}@${packageConfig.version}`,
-        onError: (code, msg: any) => {
-          console.error(code, msg)
-        },
-      })
-    } catch (error) {
-      throw error
-    }
-  }
-
-  return authClient
-}
-
-export const getAuthClient = () => {
-  if (!authClient) {
-    throw new Error('Please initialize AuthClient')
-  }
-
-  return authClient
-}
-
-export const useAuthClient = () => getAuthClient()

package/components/Guard/config.ts

@@ -1,19 +0,0 @@
-import { getDefaultLoginConfig, LoginConfig } from '../Login/props'
-import { getDefaultRegisterConfig, RegisterConfig } from '../Register/props'
-
-export interface GuardComponentConifg extends Partial<GuardLocalConfig> {}
-
-export interface GuardLocalConfig extends RegisterConfig, LoginConfig {}
-
-let defaultConfig: GuardLocalConfig
-
-export const getDefaultGuardLocalConfig = (): GuardLocalConfig => {
-  if (!defaultConfig) {
-    defaultConfig = {
-      ...getDefaultLoginConfig(),
-      ...getDefaultRegisterConfig(),
-    }
-  }
-
-  return defaultConfig
-}

package/components/Guard/event.ts

@@ -1,52 +0,0 @@
-import { message } from 'antd'
-import { CompleteInfoEvents } from '../CompleteInfo/interface'
-import { ForgetPasswordEvents } from '../ForgetPassword/interface'
-import { LoginEvents } from '../Login/props'
-import { RegisterEvents } from '../Register/props'
-import { i18n } from '../_utils/locales'
-
-export interface GuardEvents
-  extends LoginEvents,
-    RegisterEvents,
-    CompleteInfoEvents,
-    ForgetPasswordEvents {}
-
-export const guardEventsFilter = (props: any) => {
-  const events: GuardEvents = {}
-  const eventsName = Object.keys(props).filter((name) => name.startsWith('on'))
-  eventsName.forEach((eventName) => {
-    events[eventName as keyof GuardEvents] = props[eventName]
-  })
-
-  return guardEventsHijacking(events)
-}
-
-const eventsMapping: Partial<GuardEvents> = {
-  onLogin: (...props) => {
-    message.success(i18n.t('common.LoginSuccess'))
-    return props
-  },
-
-  onRegister: (...props) => {
-    message.success(i18n.t('common.registrationSuccess'))
-    return props
-  },
-}
-
-export const guardEventsHijacking = (events: GuardEvents): GuardEvents => {
-  const newEvents: GuardEvents = {}
-  Object.keys(eventsMapping).forEach((eventsKey) => {
-    // @ts-ignore
-    newEvents[eventsKey] = (...props) => {
-      // @ts-ignore
-      const newProps = eventsMapping[eventsKey](...props)
-      // @ts-ignore
-      events[eventsKey]?.(...newProps)
-    }
-  })
-
-  return {
-    ...events,
-    ...newEvents,
-  }
-}

package/components/Guard/index.tsx

@@ -1,4 +0,0 @@
-export * from './Guard'
-export * from './module'
-export * from './event'
-export * from './config'