@authing/react-ui-components 3.0.2-beta.6 → 3.0.3-rc.3

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/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/VerifyCodeInput/style.less

@@ -1,24 +0,0 @@
-.authing-code-input-item {
-  text-align: center;
-  width: 40px;
-  min-width: 40px;
-  min-height: 40px;
-  height: 40px;
-  line-height: 40px;
-  &:not(:first-child) {
-    margin-left: 18px;
-  }
-  input {
-    text-align: center;
-  }
-}
-.authing-code-input-divider {
-  width: 14px;
-  min-width: 14px;
-  max-width: 14px;
-  margin-left: 18px;
-}
-.authing-code-input {
-  display: flex;
-  align-items: center;
-}

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/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'))
-  }
-}