@authing/react-ui-components 3.0.2-beta.5 → 3.1.1-rc.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/ShieldSpin/loading.svg

@@ -1,29 +0,0 @@
-<svg width="100%" height="100%"
- viewBox="0 0 150 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <style>
-    #path-f {
-      fill: none;
-      stroke: #eaebee;
-      stroke-width: 10;
-      stroke-dasharray: 100 220;
-      animation: dash 40s infinite linear forwards;
-    }
-    #path-b {
-      fill: none;
-      stroke: #0080ff;
-      stroke-width: 8;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-    }
-    @keyframes dash {
-      to {
-        stroke-dashoffset: 12000;
-      }
-    }
-  </style>
-  <title>Loading</title>
-  <g id="单独" transform="translate(25.000000, 16.000000)" fill-rule="nonzero"  stroke-width="2" >
-    <path d="M50,0 L0,30 C0,31 0,32 0,33 C0,69 20,100 50,116 C79,100 100,69 100,33 C100,32 99,31 99,30 L50,0 Z" id="path-b"/>
-    <path d="M50,0 L0,30 C0,31 0,32 0,33 C0,69 20,100 50,116 C79,100 100,69 100,33 C100,32 99,31 99,30 L50,0 Z" id="path-f"/>
-  </g>
-</svg>

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/SubmitSuccess/index.tsx

@@ -1,66 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { GuardModuleType } from '..'
-import { ImagePro } from '../ImagePro'
-import SubmitButton from '../SubmitButton'
-import { GuardSubmitSuccessViewProps } from './interface'
-
-export const GuardSubmitSuccessView: React.FC<GuardSubmitSuccessViewProps> = (
-  props
-) => {
-  const { t } = useTranslation()
-  const { initData, config } = props
-  const [countDown, setCountDown] = useState(5)
-
-  const timerRef = useRef<any>(0)
-
-  const {
-    title = t('common.problem.successTip'),
-    message = t('common.problem.successTipMsg'),
-  } = initData ?? {}
-
-  const cdnBase = config?.__publicConfig__?.cdnBase
-
-  useEffect(() => {
-    timerRef.current = setInterval(() => {
-      setCountDown((prev) => {
-        return prev - 1
-      })
-    }, 1000)
-
-    return () => clearInterval(timerRef.current)
-  }, [])
-
-  useEffect(() => {
-    if (countDown <= 0) {
-      clearInterval(timerRef.current)
-      props.__changeModule?.(GuardModuleType.LOGIN)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [countDown])
-
-  return (
-    <div className="g2-view-container">
-      <div className="g2-view-tabs g2-questions-send-success-page">
-        <ImagePro
-          className="plate"
-          src={`${cdnBase}/questions-send-ok.png`}
-          alt=""
-          width={191}
-          height={146}
-        />
-        <div className="title">{title}</div>
-        <div className="message">{message}</div>
-        <SubmitButton
-          onClick={() => {
-            props.__changeModule?.(GuardModuleType.LOGIN)
-          }}
-          text={t('common.backLoginPage')}
-        />
-        <div className="timer-tip">
-          {countDown} {t('common.pToLogin')}
-        </div>
-      </div>
-    </div>
-  )
-}

package/components/SubmitSuccess/interface.ts

@@ -1,17 +0,0 @@
-import { IG2Config, IG2Events, IG2FCViewProps } from '../Type'
-
-export interface SubmitSuccessEvents extends IG2Events {}
-
-export interface SubmitSuccessConfig extends IG2Config {}
-
-export interface SubmitSuccessInitData {
-  title?: string
-  message?: string
-}
-
-export interface GuardSubmitSuccessViewProps
-  extends IG2FCViewProps,
-    SubmitSuccessEvents {
-  config: SubmitSuccessConfig
-  initData?: SubmitSuccessInitData
-}

package/components/Type/index.ts

@@ -1,52 +0,0 @@
-import { AuthenticationClient, CommonMessage } from 'authing-js-sdk'
-import { Lang } from 'authing-js-sdk/build/main/types'
-import { GuardMode } from '..'
-import { ApplicationConfig } from '../AuthingGuard/api'
-import { GuardModuleType } from '../Guard/module'
-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/ValidatorFormItem.tsx

@@ -1,139 +0,0 @@
-import { Form } from 'antd'
-import React, {
-  forwardRef,
-  useCallback,
-  useImperativeHandle,
-  useMemo,
-  useState,
-} from 'react'
-import { fieldRequiredRule, sleep, VALIDATE_PATTERN } from '../_utils'
-import { useGuardHttp } from '../_utils/guradHttp'
-import { useTranslation } from 'react-i18next'
-import {
-  ICheckProps,
-  ValidatorFormItemMetaProps,
-  ValidatorFormItemProps,
-} from '.'
-import { Rule } from 'antd/lib/form'
-import { useDebounce } from '../_utils/hooks'
-
-const checkError = (message: string) => Promise.reject(new Error(message))
-
-const checkSuccess = (message?: string) => Promise.resolve(message ?? '')
-
-const ValidatorFormItem = forwardRef<ICheckProps, ValidatorFormItemMetaProps>(
-  (props, ref) => {
-    const {
-      userPoolId,
-      form,
-      checkRepeat = false,
-      method,
-      ...formItemProps
-    } = props
-
-    const { get } = useGuardHttp()
-    const { t } = useTranslation()
-    const [checked, setChecked] = useState(false)
-
-    const [isReady, setIsReady] = useState(false)
-
-    const methodContent = useMemo(() => {
-      if (method === 'email')
-        return {
-          field: t('common.emailLabel'),
-          checkErrorMessage: t('common.checkEmail'),
-          pattern: VALIDATE_PATTERN.email,
-        }
-      else
-        return {
-          field: t('common.phone'),
-          checkErrorMessage: t('common.phoneFormateError'),
-          pattern: VALIDATE_PATTERN.phone,
-        }
-    }, [method, t])
-
-    const checkField = useDebounce(async (value: string) => {
-      if (!(value && methodContent.pattern.test(value))) {
-        setIsReady(true)
-        return
-      }
-      let { data } = await get<boolean>(`/api/v2/users/find`, {
-        userPoolId: userPoolId,
-        key: value,
-        type: method,
-      })
-      setChecked(Boolean(data))
-      form?.validateFields([method])
-      setIsReady(true)
-    }, 500)
-
-    useImperativeHandle(ref, () => ({
-      check: (values: any) => {
-        setChecked(false)
-        if (values[method]) {
-          console.log('check', isReady)
-          setIsReady(false)
-          checkField(values[method])
-        }
-      },
-    }))
-
-    const checkReady = useCallback(async (): Promise<boolean> => {
-      if (isReady) return true
-      do {
-        await sleep(200)
-      } while (isReady)
-
-      return true
-    }, [isReady])
-
-    const validator = useCallback(async () => {
-      if ((await checkReady()) && checked)
-        return checkError(methodContent.checkErrorMessage)
-      else return checkSuccess()
-    }, [checkReady, checked, methodContent.checkErrorMessage])
-
-    const rules = useMemo<Rule[]>(() => {
-      const rules = [
-        ...fieldRequiredRule(methodContent.field),
-        {
-          validator: (_: any, value: any) => {
-            if (!methodContent.pattern.test(value))
-              return checkError(methodContent.checkErrorMessage)
-
-            return checkSuccess()
-          },
-        },
-      ]
-      checkRepeat &&
-        rules.push({
-          validator,
-        })
-
-      return rules
-    }, [
-      checkRepeat,
-      methodContent.checkErrorMessage,
-      methodContent.field,
-      methodContent.pattern,
-      validator,
-    ])
-
-    return (
-      <Form.Item
-        validateFirst={true}
-        rules={[...rules, ...(formItemProps?.rules ?? [])]}
-        {...formItemProps}
-        name={method}
-      />
-    )
-  }
-)
-
-export const EmailFormItem = forwardRef<ICheckProps, ValidatorFormItemProps>(
-  (props, ref) => <ValidatorFormItem ref={ref} {...props} method="email" />
-)
-
-export const PhoneFormItem = forwardRef<ICheckProps, ValidatorFormItemProps>(
-  (props, ref) => <ValidatorFormItem ref={ref} {...props} method="phone" />
-)

package/components/ValidatorRules/index.ts

@@ -1,20 +0,0 @@
-import { FormInstance, FormItemProps } from 'antd/lib/form'
-
-export interface ValidatorFormItemProps extends FormItemProps {
-  userPoolId?: string
-  form?: FormInstance
-  checkRepeat?: boolean
-}
-
-export interface ValidatorFormItemMetaProps extends ValidatorFormItemProps {
-  userPoolId?: string
-  form?: FormInstance
-  checkRepeat?: boolean
-  method: 'email' | 'phone'
-}
-
-export interface ICheckProps {
-  check: (values: any) => void
-}
-
-export { EmailFormItem, PhoneFormItem } from './ValidatorFormItem'

package/components/_utils/GuardErrorCode.ts

@@ -1,9 +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,
-  USER_NOT_EXIST = 2004,
-}

package/components/_utils/config.ts

@@ -1,116 +0,0 @@
-import { LoginMethods, RegisterMethods } from 'authing-js-sdk'
-import { IG2Config } from '../Type'
-import { ApplicationConfig } from '../AuthingGuard/api'
-import { assembledAppHost } from '.'
-import { getGuardHttp } from './guradHttp'
-import { AuthingResponse } from './http'
-import { GuardComponentConifg, GuardLocalConfig } from '../Guard/config'
-
-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: GuardLocalConfig; publicConfig: ApplicationConfig }> => {
-  if (!getPublicConfig(appId)) await requestPublicConfig(appId)
-  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
-): GuardLocalConfig => {
-  const mergedPublicConfig: GuardLocalConfig = {
-    ...defaultConfig,
-    ...config,
-    title: config.title ?? publicConfig.name,
-    logo: !!config.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?.forgetPasswordBtn
-    ),
-    // 是否自动注册
-    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
-): Promise<ApplicationConfig> => {
-  let res: AuthingResponse<ApplicationConfig>
-
-  const { get } = getGuardHttp()
-
-  try {
-    res = await 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)
-}