@authing/react-ui-components 3.0.0-alpha → 3.0.0-rc.3

package/components/AuthingGuard/Forms/PasswordLoginForm/index.tsx

@@ -1,261 +0,0 @@
-import { Input, Form, Alert, message as Message, message } from 'antd'
-import { FormInstance, Rule } from 'antd/lib/form'
-import { UserOutlined, LockOutlined } from '@ant-design/icons'
-import React, {
-  forwardRef,
-  useImperativeHandle,
-  useMemo,
-  useState,
-} from 'react'
-
-import { getRequiredRules, getUserRegisterParams } from '../../../_utils'
-import { useGuardContext } from '../../../context/global/context'
-import { NEED_CAPTCHA } from '../../../../components/AuthingGuard/constants'
-import {
-  LoginMethods,
-  PasswordLoginFormProps,
-  User,
-} from '../../../../components/AuthingGuard/types'
-import { LoginFormFooter } from '../../../../components/AuthingGuard/Forms/LoginFormFooter'
-import { useTranslation } from 'react-i18next'
-import { PasswordLoginMethods } from '../../api'
-import { requestClient } from '../../../_utils/http'
-
-export const PasswordLoginForm = forwardRef<
-  FormInstance,
-  PasswordLoginFormProps
->(({ onSuccess, onValidateFail, onFail }, ref) => {
-  const { state, getValue } = useGuardContext()
-  const { t } = useTranslation()
-
-  const { config, authClient, realHost, userPoolId, appId, guardEvents } = state
-  const autoRegister = config.autoRegister
-
-  const captchaUrl = `${realHost}/api/v2/security/captcha`
-  const getCaptchaUrl = () => `${captchaUrl}?r=${+new Date()}`
-
-  const [rawForm] = Form.useForm()
-
-  const [needCaptcha, setNeedCaptcha] = useState(false)
-  const [verifyCodeUrl, setVerifyCodeUrl] = useState<string | null>(null)
-  const [loading, setLoading] = useState(false)
-
-  const onFinishFailed = (errorInfo: any) => {
-    setLoading(false)
-    onValidateFail && onValidateFail(errorInfo)
-  }
-
-  const loginMethodsText = useMemo<
-    Record<
-      PasswordLoginMethods,
-      {
-        t: string
-        sort: number
-      }
-    >
-  >(
-    () => ({
-      'email-password': {
-        t: t('common.email'),
-        sort: 2,
-      },
-      'phone-password': {
-        t: t('common.phoneNumber'),
-        sort: 1,
-      },
-      'username-password': {
-        t: t('common.username'),
-        sort: 0,
-      },
-    }),
-    [t]
-  )
-
-  const usernamePlaceholder = useMemo(
-    () =>
-      t('login.inputAccount', {
-        text: config.passwordLoginMethods
-          ?.map((item) => loginMethodsText[item])
-          .sort((a, b) => a.sort - b.sort)
-          .map((item) => item.t)
-          .join(' / '),
-      }),
-    [config.passwordLoginMethods, loginMethodsText, t]
-  )
-
-  const identityRules = useMemo(() => {
-    const rules: Rule[] = getRequiredRules(t('common.accNotNull'))
-
-    const loginMethods = config.passwordLoginMethods
-
-    if (
-      loginMethods?.includes('email-password') &&
-      loginMethods?.length === 1
-    ) {
-      rules.push({
-        type: 'email',
-        message: t('common.emailFormatError'),
-      })
-    }
-
-    return rules
-  }, [config, t])
-
-  const login = async (values: any) => {
-    const identity = values.identity && values.identity.trim()
-    const password = values.password && values.password.trim()
-    const captchaCode = values.captchaCode && values.captchaCode.trim()
-
-    const encrypt = authClient.options.encryptFunction
-
-    const { publicKey, autoRegister } = getValue('config')
-    const { code, data, message } = await requestClient.post<User>(
-      '/api/v2/login/account',
-      {
-        account: identity,
-        password: await encrypt!(password, publicKey),
-        captchaCode,
-        customData: getUserRegisterParams(),
-        autoRegister: autoRegister,
-      },
-      {
-        headers: {
-          'x-authing-userpool-id': userPoolId,
-          'x-authing-app-id': appId,
-        },
-      }
-    )
-
-    if (code === 200) {
-      return data
-    } else {
-      Message.error(message)
-      // eslint-disable-next-line no-throw-literal
-      throw {
-        code,
-        message,
-        data,
-      }
-    }
-  }
-
-  const onFinish = async (values: any) => {
-    if (guardEvents.onBeforeLogin) {
-      try {
-        const canLogin = await guardEvents.onBeforeLogin(
-          {
-            type: LoginMethods.Password,
-            data: {
-              identity: values.identity,
-              password: values.password,
-              captchaCode: values.captchaCode,
-            },
-          },
-          authClient
-        )
-
-        if (!canLogin) {
-          setLoading(false)
-          return
-        }
-      } catch (e) {
-        if (typeof e === 'string') {
-          message.error(e)
-        } else {
-          message.error(e.message)
-        }
-        setLoading(false)
-        return
-      }
-    }
-
-    try {
-      let user: User | undefined
-      user = await login(values)
-      user && onSuccess && onSuccess(user)
-    } catch (error) {
-      if (error.code === NEED_CAPTCHA && verifyCodeUrl === null) {
-        setNeedCaptcha(true)
-        setVerifyCodeUrl(getCaptchaUrl())
-      }
-
-      onFail && onFail(error)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  useImperativeHandle(ref, () => rawForm)
-
-  const formItems = [
-    {
-      component: (
-        <Input
-          autoComplete="email,username,tel"
-          size="large"
-          placeholder={usernamePlaceholder}
-          prefix={<UserOutlined style={{ color: '#ddd' }} />}
-        />
-      ),
-      name: 'identity',
-      rules: identityRules,
-    },
-    {
-      component: (
-        <Input.Password
-          size="large"
-          placeholder={t('login.inputLoginPwd')}
-          prefix={<LockOutlined style={{ color: '#ddd' }} />}
-        />
-      ),
-      name: 'password',
-      rules: getRequiredRules(t('common.passwordNotNull')),
-    },
-    {
-      component: (
-        <Input
-          size="large"
-          placeholder={t('login.inputCaptchaCode')}
-          addonAfter={
-            <img
-              src={verifyCodeUrl ?? ''}
-              alt={t('login.captchaCode')}
-              style={{ height: '2em', cursor: 'pointer' }}
-              onClick={() => setVerifyCodeUrl(getCaptchaUrl())}
-            />
-          }
-        />
-      ),
-      name: 'captchaCode',
-      rules: getRequiredRules(t('common.captchaCodeNotNull')),
-      hide: !needCaptcha,
-    },
-  ]
-
-  return (
-    <Form
-      form={rawForm}
-      onSubmitCapture={() => setLoading(true)}
-      onFinishFailed={onFinishFailed}
-      onFinish={onFinish}
-    >
-      {autoRegister && (
-        <Alert message={t('login.autoRegister')} style={{ marginBottom: 24 }} />
-      )}
-      {formItems.map(
-        (item) =>
-          !item.hide && (
-            <Form.Item key={item.name} name={item.name} rules={item.rules}>
-              {item.component}
-            </Form.Item>
-          )
-      )}
-
-      <LoginFormFooter
-        needRegister
-        needRestPwd
-        loading={loading}
-      ></LoginFormFooter>
-    </Form>
-  )
-})

package/components/AuthingGuard/Forms/PhoneCodeLoginForm/index.tsx

@@ -1,133 +0,0 @@
-import React, { forwardRef, useImperativeHandle, useState } from 'react'
-import { FormInstance, Rule } from 'antd/lib/form'
-import { Alert, Form, Input, message } from 'antd'
-import { UserOutlined, SafetyOutlined } from '@ant-design/icons'
-
-import {
-  getRequiredRules,
-  getUserRegisterParams,
-  VALIDATE_PATTERN,
-} from '../../../_utils'
-import { useGuardContext } from '../../../context/global/context'
-import {
-  LoginMethods,
-  PhoneCodeLoginFormProps,
-} from '../../../../components/AuthingGuard/types'
-import { SendPhoneCode } from '../../../../components/AuthingGuard/Forms/SendPhoneCode'
-import { LoginFormFooter } from '../../../../components/AuthingGuard/Forms/LoginFormFooter'
-import { useTranslation } from 'react-i18next'
-
-export const PhoneCodeLoginForm = forwardRef<
-  FormInstance,
-  PhoneCodeLoginFormProps
->(({ onSuccess, onFail, onValidateFail }, ref) => {
-  const {
-    state: { authClient, config, guardEvents },
-  } = useGuardContext()
-  const { t } = useTranslation()
-
-  const rulesMap: Record<string, Rule[]> = {
-    phone: getRequiredRules(t('login.inputPhone')).concat({
-      pattern: VALIDATE_PATTERN.phone,
-      message: t('common.phoneFormateError'),
-    }),
-    code: getRequiredRules(t('common.inputVerifyCode')),
-  }
-
-  const [rawForm] = Form.useForm()
-
-  const [phone, setPhone] = useState('')
-  const [loading, setLoading] = useState(false)
-
-  const onFinishFailed = (errorInfo: any) => {
-    setLoading(false)
-    onValidateFail && onValidateFail(errorInfo)
-  }
-
-  const onFinish = async (values: any) => {
-    if (guardEvents.onBeforeLogin) {
-      try {
-        const canLogin = await guardEvents.onBeforeLogin(
-          {
-            type: LoginMethods.PhoneCode,
-            data: {
-              phone: values.phone,
-              code: values.code,
-            },
-          },
-          authClient
-        )
-
-        if (!canLogin) {
-          setLoading(false)
-          return
-        }
-      } catch (e) {
-        if (typeof e === 'string') {
-          message.error(e)
-        } else {
-          message.error(e.message)
-        }
-        setLoading(false)
-        return
-      }
-    }
-
-    try {
-      const { phone, code } = values
-      const user = await authClient.loginByPhoneCode(phone, code, {
-        params: getUserRegisterParams(),
-      })
-      onSuccess && onSuccess(user)
-    } catch (error) {
-      onFail && onFail(error)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  useImperativeHandle(ref, () => rawForm)
-
-  return (
-    <Form
-      form={rawForm}
-      onSubmitCapture={() => setLoading(true)}
-      onFinishFailed={onFinishFailed}
-      onFinish={onFinish}
-    >
-      {config.autoRegister && (
-        <Alert
-          message={t('login.phoneAutoRegister')}
-          style={{ marginBottom: 24 }}
-        />
-      )}
-      <Form.Item name="phone" rules={rulesMap.phone}>
-        <Input
-          autoComplete="tel"
-          onChange={(e) => {
-            setPhone(e.target.value)
-          }}
-          size="large"
-          placeholder={t('login.inputPhone')}
-          prefix={<UserOutlined style={{ color: '#ddd' }} />}
-        />
-      </Form.Item>
-      <Form.Item name="code" rules={rulesMap.code}>
-        <Input
-          size="large"
-          placeholder={t('common.inputFourVerifyCode', {
-            length: 4,
-          })}
-          prefix={<SafetyOutlined style={{ color: '#ddd' }} />}
-          suffix={<SendPhoneCode phone={phone} />}
-        />
-      </Form.Item>
-
-      <LoginFormFooter
-        needRestPwd
-        needRegister
-        loading={loading}
-      ></LoginFormFooter>
-    </Form>
-  )
-})

package/components/AuthingGuard/Forms/PhoneRegisterForm/index.tsx

@@ -1,202 +0,0 @@
-import { Input, Form, message } from 'antd'
-import { FormInstance } from 'antd/lib/form'
-import React, { forwardRef, useImperativeHandle, useState } from 'react'
-import { UserOutlined, LockOutlined, SafetyOutlined } from '@ant-design/icons'
-
-import { useGuardContext } from '../../../context/global/context'
-import {
-  PhoneRegisterFormProps,
-  RegisterMethods,
-} from '../../../../components/AuthingGuard/types'
-import {
-  getDeviceName,
-  getRequiredRules,
-  getUserRegisterParams,
-  VALIDATE_PATTERN,
-} from '../../../_utils'
-import { SendPhoneCode } from '../../../../components/AuthingGuard/Forms/SendPhoneCode'
-import { RegisterFormFooter } from '../../../../components/AuthingGuard/Forms/RegisterFormFooter'
-import { useTranslation } from 'react-i18next'
-import { Agreements } from '../Agreements'
-
-export const PhoneRegisterForm = forwardRef<
-  FormInstance,
-  PhoneRegisterFormProps
->(({ onSuccess, onFail, onValidateFail }, ref) => {
-  const {
-    state: { authClient, config, guardEvents },
-  } = useGuardContext()
-  const { t } = useTranslation()
-
-  const [rawForm] = Form.useForm()
-
-  const { agreements, agreementEnabled } = config
-
-  /** 表单是否被提交校验过 */
-  const [validated, setValidated] = useState(false)
-
-  const [phone, setPhone] = useState('')
-  const [loading, setLoading] = useState(false)
-
-  const onFinishFailed = (errorInfo: any) => {
-    setLoading(false)
-    onValidateFail && onValidateFail(errorInfo)
-  }
-
-  const [acceptedAgreements, setAcceptedAgreements] = useState(false)
-
-  const onFinish = async (values: any) => {
-    if (guardEvents.onBeforeRegister) {
-      try {
-        const canRegister = await guardEvents.onBeforeRegister(
-          {
-            type: RegisterMethods.Phone,
-            data: {
-              phone: values.phone,
-              password: values.password,
-              code: values.code,
-            },
-          },
-          authClient
-        )
-
-        if (!canRegister) {
-          setLoading(false)
-          return
-        }
-      } catch (e) {
-        if (typeof e === 'string') {
-          message.error(e)
-        } else {
-          message.error(e.message)
-        }
-        setLoading(false)
-        return
-      }
-    }
-
-    try {
-      await rawForm.validateFields()
-
-      setValidated(true)
-
-      if (agreementEnabled && agreements?.length && !acceptedAgreements) {
-        return
-      }
-
-      const { phone, code, password } = values
-      const user = await authClient.registerByPhoneCode(
-        phone,
-        code,
-        password,
-        {
-          browser:
-            typeof navigator !== 'undefined' ? navigator.userAgent : null,
-          device: getDeviceName(),
-        },
-        {
-          generateToken: true,
-          params: getUserRegisterParams(),
-        }
-      )
-      onSuccess && onSuccess(user)
-    } catch (error) {
-      onFail && onFail(error)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  useImperativeHandle(ref, () => rawForm)
-
-  const formItems = [
-    {
-      component: (
-        <Input
-          autoComplete="tel"
-          onChange={(e) => {
-            setPhone(e.target.value)
-          }}
-          size="large"
-          placeholder={t('login.inputPhone')}
-          prefix={<UserOutlined style={{ color: '#ddd' }} />}
-        />
-      ),
-      name: 'phone',
-      rules: getRequiredRules(t('common.phoneNotNull')).concat({
-        pattern: VALIDATE_PATTERN.phone,
-        message: t('login.phoneError'),
-      }),
-    },
-    {
-      component: (
-        <Input.Password
-          size="large"
-          placeholder={t('common.setPassword')}
-          prefix={<LockOutlined style={{ color: '#ddd' }} />}
-        />
-      ),
-      name: 'password',
-      rules: getRequiredRules(t('common.passwordNotNull')),
-    },
-    {
-      component: (
-        <Input.Password
-          size="large"
-          placeholder={t('login.inputPwdAgain')}
-          prefix={<LockOutlined style={{ color: '#ddd' }} />}
-        />
-      ),
-      name: 'new-password',
-      rules: getRequiredRules(t('common.repeatPassword')).concat({
-        validator: (rule, value) => {
-          if (value !== rawForm.getFieldValue('password')) {
-            return Promise.reject(t('common.repeatPasswordDoc'))
-          } else {
-            return Promise.resolve()
-          }
-        },
-      }),
-    },
-    {
-      component: (
-        <Input
-          autoComplete="one-time-code"
-          size="large"
-          placeholder={t('common.inputFourVerifyCode', {
-            length: 4,
-          })}
-          prefix={<SafetyOutlined style={{ color: '#ddd' }} />}
-          addonAfter={<SendPhoneCode phone={phone} />}
-        />
-      ),
-      name: 'code',
-      rules: getRequiredRules(t('common.captchaCodeNotNull')),
-    },
-  ]
-
-  return (
-    <Form
-      form={rawForm}
-      onSubmitCapture={() => setLoading(true)}
-      onFinishFailed={onFinishFailed}
-      onFinish={onFinish}
-    >
-      {formItems.map((item) => (
-        <Form.Item name={item.name} key={item.name} rules={item.rules}>
-          {item.component}
-        </Form.Item>
-      ))}
-
-      {config.agreementEnabled && Boolean(agreements?.length) && (
-        <Agreements
-          onChange={setAcceptedAgreements}
-          agreements={agreements}
-          showError={validated}
-        />
-      )}
-
-      <RegisterFormFooter loading={loading} />
-    </Form>
-  )
-})

package/components/AuthingGuard/Forms/QrCodeLoginForm/index.tsx

@@ -1,59 +0,0 @@
-import { Spin } from 'antd'
-import React, { FC, useEffect, useMemo, useRef } from 'react'
-
-import { useGuardContext } from '../../../context/global/context'
-import {
-  LoginMethods,
-  QrLoginFormProps,
-} from '../../../../components/AuthingGuard/types'
-
-import './style.less'
-import { User } from 'authing-js-sdk'
-
-export const QrCodeLoginForm: FC<QrLoginFormProps> = ({
-  onFail,
-  onSuccess,
-  type,
-}) => {
-  const {
-    state: { authClient, config },
-  } = useGuardContext()
-
-  const timerRef = useRef<any>()
-
-  const client = useMemo(() => {
-    return {
-      [LoginMethods.AppQr]: authClient.qrcode,
-      [LoginMethods.WxMinQr]: authClient.wxqrcode,
-      [LoginMethods.WechatMpQrcode]: authClient.wechatmpqrcode,
-    }[type]
-  }, [type, authClient])
-
-  useEffect(() => {
-    client.startScanning('authingGuardQrcode', {
-      autoExchangeUserInfo: true,
-      ...config.qrCodeScanOptions,
-      onStart(timer) {
-        timerRef.current = timer
-      },
-      onSuccess(user) {
-        onSuccess && onSuccess(user as User)
-      },
-      onError: (message) => {
-        config.qrCodeScanOptions?.onError?.(message)
-
-        onFail && onFail(`${message}`)
-      },
-    })
-    return () => clearInterval(timerRef.current)
-  }, [client, config.qrCodeScanOptions, onFail, onSuccess])
-
-  return (
-    <div className="authing-guard-qr-form">
-      <div className="authing-guard-qr-loading">
-        <Spin size="large" />
-      </div>
-      <div id="authingGuardQrcode"></div>
-    </div>
-  )
-}

package/components/AuthingGuard/Forms/QrCodeLoginForm/style.less

@@ -1,14 +0,0 @@
-.authing-guard-qr-form {
-  position: relative;
-  min-height: 300px;
-}
-.authing-guard-qr-loading {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}