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

package/components/SendCode/index.tsx

@@ -1,94 +0,0 @@
-import { Col, message, Row } from 'antd'
-import React, { FC } from 'react'
-import { EmailScene } from 'authing-js-sdk'
-
-import { SendCodeBtn } from './SendCodeBtn'
-
-import './style.less'
-import { useTranslation } from 'react-i18next'
-import { useAuthClient } from '../Guard/authClient'
-import { validate } from '../_utils'
-import { InputProps } from 'antd/lib/input'
-import { InputNumber } from '../InputNumber'
-
-export interface SendPhoneCodeProps extends InputProps {
-  method: 'phone' | 'email'
-  data: string
-  form?: any
-  onSendCodeBefore?: any // 点击的时候先做这个
-}
-
-export const SendCode: FC<SendPhoneCodeProps> = ({
-  method,
-  data,
-  value,
-  onChange,
-  form,
-  onSendCodeBefore,
-  maxLength,
-  ...inputProps
-}) => {
-  const { t } = useTranslation()
-
-  const authClient = useAuthClient()
-
-  const sendEmail = async (email: string) => {
-    if (!email) {
-      message.error(t('login.inputEmail'))
-      return false
-    }
-    if (!validate('email', email)) {
-      message.error(t('common.emailFormatError'))
-      return false
-    }
-    try {
-      await authClient.sendEmail(email, EmailScene.ResetPassword)
-      // onSend?.()
-      return true
-    } catch (error) {
-      // onError?.(error)
-      return false
-    }
-  }
-
-  const sendPhone = async (phone: string) => {
-    try {
-      await authClient.sendSmsCode(phone)
-      return true
-    } catch (error) {
-      return false
-    }
-  }
-
-  return (
-    <>
-      <Row justify="space-between" align="middle">
-        <Col span={15} className="g2-send-code-input-col">
-          <InputNumber
-            value={value}
-            onChange={onChange}
-            {...inputProps}
-            maxLength={maxLength}
-          />
-        </Col>
-        <Col offset={1} span={8}>
-          <SendCodeBtn
-            beforeSend={() => {
-              return onSendCodeBefore()
-                .then(async (b: any) => {
-                  let phoneData = form ? form.getFieldValue(method) : data
-                  return method === 'phone'
-                    ? await sendPhone(phoneData)
-                    : await sendEmail(phoneData)
-                })
-                .catch((e: any) => {
-                  // console.log('e', e)
-                  return false
-                })
-            }}
-          />
-        </Col>
-      </Row>
-    </>
-  )
-}

package/components/SendCode/style.less

@@ -1,31 +0,0 @@
-.authing-g2-send-code-btn {
-  height: 46px;
-  width: 100%;
-  border: 1px solid #d4d6dc;
-  border-radius: 4px;
-}
-
-.authing-g2-send-code-btn:hover {
-  background: rgba(57, 106, 255, 0.1);
-}
-
-.authing-g2-send-code-btn:focus {
-  outline: none;
-}
-
-.authing-g2-send-code-btn[disabled] {
-  cursor: not-allowed;
-  filter: opacity(0.5);
-}
-
-@media only screen and (max-width: 719px) {
-  .authing-g2-send-code-btn {
-    font-size: 14px;
-  }
-}
-
-.g2-loading-btn-center {
-  .authing-ant-btn-loading-icon .anticon {
-    padding-right: 0;
-  }
-}

package/components/ShieldSpin/index.tsx

@@ -1,27 +0,0 @@
-import React from 'react'
-import { ReactComponent as LoadShielding } from './loading.svg'
-
-interface IG2SpinProps {
-  size?: number
-}
-
-export const ShieldSpin = (props: IG2SpinProps) => {
-  let size = props.size ? props.size : 50
-
-  return (
-    <div
-      style={{
-        width: size,
-        height: size,
-      }}
-    >
-      <LoadShielding />
-    </div>
-  )
-}
-
-export const Spin = () => (
-  <div className="g2-init-setting-loading">
-    <ShieldSpin size={100} />
-  </div>
-)

package/components/SubmitButton/index.tsx

@@ -1,50 +0,0 @@
-import React, {
-  forwardRef,
-  useState,
-  useImperativeHandle,
-  useEffect,
-} from 'react'
-import { Button } from 'antd'
-
-interface SubmitButtonProps {
-  text?: string
-  className?: string
-  onClick?: any
-}
-const SubmitButton = (props: SubmitButtonProps, ref: any) => {
-  let [spin, setSpin] = useState(false) // spin 状态需要手动设置关闭
-  let [shaking, setShaking] = useState(false) // 抖动状态会自动关闭
-
-  useEffect(() => {
-    if (shaking === true) {
-      setTimeout(() => {
-        setShaking(false)
-      }, 1000)
-    }
-  }, [shaking])
-
-  useImperativeHandle(ref, () => ({
-    onError: (text?: string) => {
-      setShaking(true)
-    },
-    onSpin: (sp: boolean) => {
-      setSpin(sp)
-    },
-  }))
-
-  let propsCls = props.className ? props.className : ''
-  let shakingCls = shaking ? 'shaking' : ''
-  return (
-    <Button
-      size="large"
-      type="primary"
-      htmlType="submit"
-      loading={spin}
-      onClick={props.onClick ? props.onClick : () => {}}
-      className={`authing-g2-submit-button ${propsCls} ${shakingCls}`}
-    >
-      {props.text}
-    </Button>
-  )
-}
-export default forwardRef(SubmitButton)

package/components/Type/index.ts

@@ -1,61 +0,0 @@
-import { AuthenticationClient, CommonMessage } from 'authing-js-sdk'
-import { Lang } from 'authing-js-sdk/build/main/types'
-import { ApplicationConfig } from '../AuthingGuard/api'
-import { GuardModuleType } from '../Guard/module'
-
-export enum GuardMode {
-  Modal = 'modal',
-  Normal = 'normal',
-}
-
-export enum GuardScenes {
-  Login = 'login',
-  Register = 'register',
-}
-export interface IG2FCProps extends IG2Events {
-  appId: string
-  config?: Partial<IG2Config>
-}
-
-export interface IG2FCViewProps extends IG2FCProps {
-  config: IG2Config
-}
-
-export interface IG2Config {
-  title: string
-  logo: string
-  lang: Lang
-  langRange: Lang[]
-  host: string
-  mode: GuardMode
-  clickCloseable: boolean
-  escCloseable: boolean
-  userpool?: string
-  contentCss?: string
-  target?: HTMLElement | string
-  __appHost__?: string
-  __publicConfig__?: ApplicationConfig
-}
-
-const defaultG2Config: IG2Config = {
-  lang: 'zh-CN',
-  langRange: ['zh-CN', 'en-US'],
-  title: 'Authing',
-  escCloseable: true,
-  clickCloseable: true,
-  mode: GuardMode.Normal,
-  host: 'https://core.authing.cn',
-  logo:
-    'https://files.authing.co/user-contents/photos/0a4c99ff-b8ce-4030-aaaf-584c807cb21c.png',
-}
-
-export interface IG2Events {
-  onLoad?: (authClient: AuthenticationClient) => void
-  onLoadError?: (error: CommonMessage) => void
-  onClose?: () => void
-  onLangChange?: (lang: Lang) => void
-  // __codePaser?: (code: number) => Function
-  __changeModule?: (moduleName: GuardModuleType, initData: any) => void
-}
-
-export const getDefaultG2Config = (): IG2Config => defaultG2Config

package/components/ValidatorRules/EmailFormItem.tsx

@@ -1,82 +0,0 @@
-import { Form } from 'antd'
-import React, {
-  forwardRef,
-  useCallback,
-  useImperativeHandle,
-  useMemo,
-  useState,
-} from 'react'
-import { fieldRequiredRule, VALIDATE_PATTERN } from '../_utils'
-import { useGuardHttp } from '../_utils/guradHttp'
-import { useDebounce } from '../_utils/hooks'
-import { useTranslation } from 'react-i18next'
-import { ICheckProps, ValidatorFormItemProps } from '.'
-import { Rule } from 'antd/lib/form'
-
-const checkError = (message: string) => Promise.reject(new Error(message))
-
-const checkSuccess = (message?: string) => Promise.resolve(message)
-
-export const EmailFormItem = forwardRef<ICheckProps, ValidatorFormItemProps>(
-  (props, ref) => {
-    const { userPoolId, form, checkRepeat = false, ...formItemProps } = props
-    const { get } = useGuardHttp()
-    const { t } = useTranslation()
-    const [checked, setChecked] = useState(false)
-
-    const checkEmail = useDebounce(async () => {
-      const email = form?.getFieldValue('email')
-      if (!(email && VALIDATE_PATTERN.email.test(email))) {
-        return
-      }
-      let { data } = await get<boolean>(`/api/v2/users/find`, {
-        userPoolId: userPoolId,
-        key: email,
-        type: 'email',
-      })
-      setChecked(Boolean(data))
-      form?.validateFields(['email'])
-    }, 1000)
-
-    useImperativeHandle(ref, () => ({
-      check: () => {
-        setChecked(false)
-        checkEmail()
-      },
-    }))
-
-    const validator = useCallback(() => {
-      if (checked) return checkError(t('common.checkEmail'))
-      else return checkSuccess()
-    }, [checked, t])
-
-    const rules = useMemo<Rule[]>(() => {
-      const rules = [
-        ...fieldRequiredRule(t('common.emailLabel')),
-        {
-          validator: (_: any, value: any) => {
-            if (!VALIDATE_PATTERN.email.test(value))
-              return checkError(t('common.emailFormatError'))
-
-            return checkSuccess()
-          },
-        },
-      ]
-      checkRepeat &&
-        rules.push({
-          validator,
-        })
-
-      return rules
-    }, [checkRepeat, t, validator])
-
-    return (
-      <Form.Item
-        validateFirst={true}
-        {...formItemProps}
-        name="email"
-        rules={[...rules, ...(formItemProps?.rules ?? [])]}
-      />
-    )
-  }
-)

package/components/ValidatorRules/PhoneFormItem.tsx

@@ -1,90 +0,0 @@
-import { Form } from 'antd'
-import React, {
-  forwardRef,
-  useCallback,
-  useImperativeHandle,
-  useMemo,
-  useState,
-} from 'react'
-import { fieldRequiredRule, VALIDATE_PATTERN } from '../_utils'
-import { useGuardHttp } from '../_utils/guradHttp'
-import { useDebounce } from '../_utils/hooks'
-import { useTranslation } from 'react-i18next'
-import { ICheckProps, ValidatorFormItemProps } from '.'
-import { Rule } from 'antd/lib/form'
-
-const checkError = (message: string) => Promise.reject(new Error(message))
-
-const checkSuccess = (message?: string) => Promise.resolve(message)
-
-export const PhoneFormItem = forwardRef<ICheckProps, ValidatorFormItemProps>(
-  (props, ref) => {
-    const { userPoolId, form, checkRepeat = false, ...formItemProps } = props
-
-    const { get } = useGuardHttp()
-    const { t } = useTranslation()
-    const [checked, setChecked] = useState(false)
-
-    const checkPhone = useDebounce(async () => {
-      const phone = form?.getFieldValue('phone')
-      if (!(phone && VALIDATE_PATTERN.phone.test(phone))) {
-        return
-      }
-      let { data } = await get<boolean>(`/api/v2/users/find`, {
-        userPoolId: userPoolId,
-        key: phone,
-        type: 'phone',
-      })
-
-      setChecked(Boolean(data))
-      form?.validateFields(['phone'])
-    }, 1000)
-
-    useImperativeHandle(ref, () => ({
-      check: () => {
-        setChecked(false)
-        checkPhone()
-      },
-    }))
-
-    const validator = useCallback(
-      (_: any, value: any) => {
-        if (!VALIDATE_PATTERN.phone.test(value))
-          return checkError(t('common.phoneFormateError'))
-
-        if (checked) return checkError(t('common.checkPhone'))
-        else return checkSuccess()
-      },
-      [checked, t]
-    )
-
-    const rules = useMemo<Rule[]>(() => {
-      const rules = [
-        ...fieldRequiredRule(t('common.phone')),
-        {
-          validator: (_: any, value: any) => {
-            if (!VALIDATE_PATTERN.phone.test(value))
-              return checkError(t('common.phoneFormateError'))
-
-            return checkSuccess()
-          },
-        },
-      ]
-      checkRepeat &&
-        rules.push({
-          validator,
-        })
-
-      return rules
-    }, [checkRepeat, t, validator])
-
-    return (
-      <Form.Item
-        validateFirst={true}
-        {...formItemProps}
-        name="phone"
-        rules={[...rules, ...(formItemProps?.rules ?? [])]}
-      />
-    )
-  }
-)

package/components/ValidatorRules/index.ts

@@ -1,14 +0,0 @@
-import { FormInstance, FormItemProps } from 'antd/lib/form'
-
-export interface ValidatorFormItemProps extends FormItemProps {
-  userPoolId?: string
-  form?: FormInstance
-  checkRepeat?: boolean
-}
-
-export interface ICheckProps {
-  check: () => void
-}
-
-export { EmailFormItem } from './EmailFormItem'
-export { PhoneFormItem } from './PhoneFormItem'

package/components/VerifyCodeInput/index.tsx

@@ -1,76 +0,0 @@
-import { Divider, Input } from 'antd'
-import React, { FC, Fragment, useRef } from 'react'
-
-import './style.less'
-
-interface VerifyCodeInputProps extends React.HTMLAttributes<HTMLDivElement> {
-  verifyCode: string[]
-  setVerifyCode: (code: string[]) => void
-  length?: number
-  onEnter?: Function
-}
-
-export const VerifyCodeInput: FC<VerifyCodeInputProps> = ({
-  verifyCode,
-  setVerifyCode,
-  length = 6,
-  onEnter,
-}) => {
-  const inputRef = useRef<any[]>([])
-
-  const handleChange = (val: string | undefined = '', index: number) => {
-    const num = parseInt(val)
-    if (isNaN(num)) {
-      val = ''
-    } else {
-      val = String(num)
-    }
-    const codes = [...verifyCode]
-    codes[index] = val.split('').slice(-1)[0] || ''
-    setVerifyCode(codes)
-
-    if (val && inputRef.current[index + 1]) {
-      inputRef.current[index + 1].focus()
-    }
-  }
-
-  const handleKeyDown = (evt: any, index: number) => {
-    const currentVal = verifyCode[index]
-
-    switch (evt.keyCode) {
-      case 8:
-        if (!currentVal && inputRef.current[index - 1]) {
-          handleChange('', index - 1)
-          inputRef.current[index - 1].focus()
-        }
-        break
-
-      case 13:
-        onEnter?.()
-        break
-      default:
-        break
-    }
-  }
-
-  return (
-    <div className="authing-code-input">
-      {new Array(length).fill(0).map((_, index) => (
-        <Fragment key={index}>
-          <Input
-            ref={(el) => (inputRef.current[index] = el)}
-            className="authing-code-input-item"
-            size="large"
-            autoFocus={index === 0}
-            onKeyDown={(evt) => handleKeyDown(evt, index)}
-            value={verifyCode[index]}
-            onChange={(evt) => handleChange(evt.target.value, index)}
-          />
-          {index === Math.floor(length / 2 - 1) && (
-            <Divider className="authing-code-input-divider" />
-          )}
-        </Fragment>
-      ))}
-    </div>
-  )
-}

package/components/_utils/GuardErrorCode.ts

@@ -1,8 +0,0 @@
-export enum ErrorCode {
-  OTP_MFA_CODE = 1635,
-  APP_MFA_CODE = 1636,
-  INPUT_CAPTCHACODE = 2000,
-  USER_EXISTENCE = 2026,
-  LOGIN_INVALID = 2021,
-  PASSWORD_ERROR = 2333,
-}

package/components/_utils/clipboard.ts

@@ -1,27 +0,0 @@
-import { i18n } from './locales'
-
-// https://juejin.im/post/6844903857290477582
-export const copyToClipboard = (str: string) => {
-  const el = document.createElement('textarea') // 创建一个 <textarea> 元素
-  el.value = str // 设置它的值为你想复制的字符串
-  el.setAttribute('readonly', '') // 设置为只读以防止干扰
-  el.style.position = 'absolute'
-  el.style.left = '-9999px' // 移出屏幕外以使其不可见
-  document.body.appendChild(el) // 插入 <textarea> 元素到 HTML 文档中
-  try {
-    const selected =
-      document.getSelection()!.rangeCount > 0 // 检查是否之前曾选中过内容
-        ? document.getSelection()!.getRangeAt(0) // 如果找到，则保存选中
-        : false // 标记为  false 以表示不存在之前选中的内容
-    el.select() // 选中 <textarea> 的内容
-    document.execCommand('copy') // 复制 - 仅当作为用户操作的响应结果时才可以工作(比如，点击事件)
-    document.body.removeChild(el) // 移除 <textarea> 元素
-    if (selected) {
-      // 如果在复制前已存在选中的内容
-      document.getSelection()!.removeAllRanges() // 取消 HTML 文档中所有的选中部分
-      document.getSelection()!.addRange(selected) // 恢复原来的选中
-    }
-  } catch (e) {
-    console.warn(i18n.t('common.copyFailed'))
-  }
-}

package/components/_utils/config.ts

@@ -1,123 +0,0 @@
-import { LoginMethods, RegisterMethods } from 'authing-js-sdk'
-import { IG2Config } from '../Type'
-import { ApplicationConfig } from '../AuthingGuard/api'
-import { LoginConfig } from '../Login/props'
-import { RegisterConfig } from '../Register/props'
-import { assembledAppHost } from '.'
-import { GuardHttp } from './guradHttp'
-import { AuthingResponse } from './http'
-import { GuardComponentConifg } from '../Guard/config'
-
-export interface GuardConfig extends RegisterConfig, LoginConfig {}
-
-let publicConfigMap: Record<string, ApplicationConfig> = {}
-
-const getPublicConfig = (appId: string) => publicConfigMap?.[appId]
-
-const setPublicConfig = (appId: string, config: ApplicationConfig) =>
-  (publicConfigMap[appId] = config)
-
-export const initConfig = async (
-  appId: string,
-  config: Partial<IG2Config>,
-  defaultConfig: IG2Config
-): Promise<{ config: GuardConfig; publicConfig: ApplicationConfig }> => {
-  if (!getPublicConfig(appId))
-    await requestPublicConfig(appId, config.host ?? defaultConfig.host)
-  const mergedConfig = mergeConfig(
-    config,
-    defaultConfig,
-    getPublicConfig(appId)
-  )
-
-  return {
-    config: {
-      ...mergedConfig,
-      __publicConfig__: getPublicConfig(appId),
-      __appHost__: assembledAppHost(
-        getPublicConfig(appId).identifier,
-        mergedConfig?.host!
-      ),
-    },
-    publicConfig: getPublicConfig(appId),
-  }
-}
-
-const mergeConfig = (
-  config: GuardComponentConifg,
-  defaultConfig: IG2Config,
-  publicConfig: ApplicationConfig
-): GuardConfig => {
-  const mergedPublicConfig: GuardConfig = {
-    ...defaultConfig,
-    ...config,
-    title: config.title ?? publicConfig.name,
-    logo: config.logo ?? publicConfig.logo,
-    loginMethods:
-      config?.loginMethods ??
-      (publicConfig.loginTabs?.list as LoginMethods[]) ??
-      [],
-    passwordLoginMethods:
-      config?.passwordLoginMethods ??
-      publicConfig.passwordTabConfig?.enabledLoginMethods ??
-      [],
-    // 默认登录方式
-    defaultLoginMethod:
-      config.defaultLoginMethod ??
-      (publicConfig.loginTabs.default as LoginMethods),
-    // 禁止重制密码
-    disableResetPwd: !!(
-      config.disableResetPwd ??
-      !publicConfig.ssoPageComponentDisplay?.registerBtn
-    ),
-    // 是否自动注册
-    autoRegister:
-      config.autoRegister ??
-      publicConfig.ssoPageComponentDisplay.autoRegisterThenLoginHintInfo,
-    registerMethods:
-      config.registerMethods ??
-      (publicConfig.registerTabs?.list as RegisterMethods[]),
-    defaultRegisterMethod:
-      config.defaultRegisterMethod ??
-      (publicConfig.registerTabs.default as RegisterMethods),
-    // 禁止注册
-    disableRegister: !!(
-      config.disableRegister ??
-      !publicConfig.ssoPageComponentDisplay.registerBtn
-    ),
-    // publicKey
-    publicKey: config.publicKey ?? publicConfig.publicKey,
-    // 注册协议
-    agreementEnabled: config.agreementEnabled ?? publicConfig.agreementEnabled,
-    agreements: config.agreements ?? publicConfig.agreements,
-    contentCss: config.contentCss ?? publicConfig.css,
-  }
-
-  return mergedPublicConfig
-}
-
-const requestPublicConfig = async (
-  appId: string,
-  host: string
-): Promise<ApplicationConfig> => {
-  let res: AuthingResponse<ApplicationConfig>
-
-  const guardHttp = new GuardHttp(host)
-  guardHttp.setAppId(appId)
-
-  try {
-    res = await guardHttp.get<ApplicationConfig>(
-      `/api/v2/applications/${appId}/public-config`
-    )
-  } catch (error) {
-    console.error('Please check your config or network')
-    throw new Error('Please check your config or network')
-  }
-
-  if (res.code !== 200 || !res.data)
-    throw new Error(res?.message ?? 'Please check your config')
-
-  setPublicConfig(appId, res.data)
-
-  return getPublicConfig(appId)
-}