@authing/react-ui-components 3.0.2-beta.7 → 3.0.2-beta.9

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;
-}

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

@@ -1,56 +0,0 @@
-import { Button } from 'antd'
-import React, { FC } from 'react'
-import { useGuardContext } from '../../../context/global/context'
-import { GuardScenes } from '../../../../components/AuthingGuard/types'
-
-import './style.less'
-import { useTranslation } from 'react-i18next'
-
-export interface RegisterFormFooterProps {
-  loading: boolean
-}
-
-export const RegisterFormFooter: FC<RegisterFormFooterProps> = ({
-  loading,
-}) => {
-  const {
-    setValue,
-    state: { config },
-  } = useGuardContext()
-  const { t } = useTranslation()
-
-  return (
-    <>
-      <Button
-        htmlType="submit"
-        size="large"
-        type="primary"
-        loading={loading}
-        block
-      >
-        {loading
-          ? t(
-              `map.${config.text?.registerBtn?.loading}`,
-              config.text?.registerBtn?.loading
-            )
-          : t(
-              `map.${config.text?.registerBtn?.normal}`,
-              config.text?.registerBtn?.normal
-            )}
-      </Button>
-
-      <div className="authing-guard-form-actions">
-        <div className="authing-guard-tip-btn-comb">
-          <span className="authing-guard-tip">{t('common.alreadyHasAcc')}</span>
-          <Button
-            onClick={() => setValue('guardScenes', GuardScenes.Login)}
-            className="authing-guard-text-btn authing-guard-to-login-btn"
-            type="text"
-          >
-            {t('common.loginImmediate')}
-          </Button>
-        </div>
-      </div>
-    </>
-  )
-}

package/components/AuthingGuard/Forms/ResetPwdForm/Footer.tsx

@@ -1,21 +0,0 @@
-import React from 'react'
-import { Button } from 'antd'
-
-import { useGuardContext } from '../../../context/global/context'
-import { GuardScenes } from '../../../../components/AuthingGuard/types'
-import { useTranslation } from 'react-i18next'
-
-export const ResetPwdFormFooter = () => {
-  const { setValue } = useGuardContext()
-  const { t } = useTranslation()
-  return (
-    <Button
-      onClick={() => setValue('guardScenes', GuardScenes.Login)}
-      className="authing-guard-text-btn authing-guard-form-actions"
-      type="text"
-      htmlType="button"
-    >
-      {t('login.otherAccLogin')}
-    </Button>
-  )
-}

package/components/AuthingGuard/Forms/ResetPwdForm/Step1.tsx

@@ -1,86 +0,0 @@
-import React, { FC, useState } from 'react'
-import { Form, Input, Button, message } from 'antd'
-
-import { validate } from '../../../_utils'
-import {
-  ResetPasswordStep1Props,
-  ResetPwdMethods,
-} from '../../../../components/AuthingGuard/types'
-import { useGuardContext } from '../../../context/global/context'
-import { EmailScene } from 'authing-js-sdk'
-import { useTranslation } from 'react-i18next'
-
-export const ResetPasswordStep1: FC<ResetPasswordStep1Props> = ({
-  onSuccess,
-}) => {
-  const {
-    state: { authClient, guardEvents },
-  } = useGuardContext()
-  const { t } = useTranslation()
-
-  const [loading, setLoading] = useState(false)
-
-  const onFinish = async (values: any) => {
-    const value = values.phoneOrEmail
-
-    if (validate('email', value)) {
-      try {
-        setLoading(true)
-        await authClient.sendEmail(value, EmailScene.ResetPassword)
-
-        guardEvents.onPwdEmailSend?.(authClient)
-        message.success(t('login.emailSent'))
-        onSuccess(ResetPwdMethods.Email, value)
-      } catch (e) {
-        guardEvents.onPwdEmailSendError?.(e, authClient)
-      } finally {
-        setLoading(false)
-      }
-    } else if (validate('phone', value)) {
-      onSuccess(ResetPwdMethods.Phone, value)
-    }
-  }
-
-  return (
-    <Form
-      onSubmitCapture={() => setLoading(true)}
-      onFinishFailed={() => setLoading(false)}
-      onFinish={onFinish}
-    >
-      <Form.Item
-        name="phoneOrEmail"
-        validateTrigger="onBlur"
-        rules={[
-          {
-            validator: (rule, value) => {
-              if (!value) {
-                return Promise.reject(t('login.inputPhoneOrEmail'))
-              }
-              if (validate('email', value) || validate('phone', value)) {
-                return Promise.resolve()
-              } else {
-                return Promise.reject(t('login.inputCorrectPhone'))
-              }
-            },
-          },
-        ]}
-      >
-        <Input
-          size="large"
-          autoComplete="tel,email"
-          placeholder={t('login.inputPhoneOrEmail')}
-        />
-      </Form.Item>
-      <Button
-        className="authing-reset-pwd-btn"
-        block
-        type="primary"
-        size="large"
-        htmlType="submit"
-        loading={loading}
-      >
-        {t('login.resetPwd')}
-      </Button>
-    </Form>
-  )
-}

package/components/AuthingGuard/Forms/ResetPwdForm/Step2.tsx

@@ -1,127 +0,0 @@
-import React, { FC, useState } from 'react'
-import { Form, Input, Button } from 'antd'
-import { SafetyOutlined, LockOutlined, UserOutlined } from '@ant-design/icons'
-
-import { getRequiredRules } from '../../../_utils'
-import { useGuardContext } from '../../../context/global/context'
-import { ResetPasswordStep2Props } from '../../../../components/AuthingGuard/types'
-import { SendPhoneCode } from '../../../../components/AuthingGuard/Forms/SendPhoneCode'
-import { useTranslation } from 'react-i18next'
-
-export const ResetPasswordStep2: FC<ResetPasswordStep2Props> = ({
-  phone,
-  onSuccess,
-  onFail,
-}) => {
-  const [rawForm] = Form.useForm()
-  const { t } = useTranslation()
-
-  const [loading, setLoading] = useState(false)
-
-  const {
-    state: { authClient, guardEvents },
-  } = useGuardContext()
-
-  const onStep2Finish = async (values: any) => {
-    const code = values.code
-    const password = values.password
-
-    try {
-      await authClient.resetPasswordByPhoneCode(phone, code, password)
-      onSuccess()
-    } catch (e) {
-      onFail?.(e)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  return (
-    <Form
-      form={rawForm}
-      onFinishFailed={() => setLoading(false)}
-      onSubmitCapture={() => setLoading(true)}
-      onFinish={onStep2Finish}
-    >
-      <Form.Item
-        name="phone"
-        initialValue={phone}
-        rules={getRequiredRules(t('common.phoneNotNull'))}
-      >
-        <Input
-          autoComplete="tel"
-          name="phone"
-          readOnly
-          size="large"
-          placeholder={t('login.inputPhone')}
-          prefix={<UserOutlined style={{ color: '#ddd' }} />}
-        />
-      </Form.Item>
-      <Form.Item
-        name="code"
-        rules={getRequiredRules(t('common.inputVerifyCode')).concat({
-          len: 4,
-          message: t('common.inputFourVerifyCode', {
-            length: 4,
-          }),
-        })}
-      >
-        <Input
-          name="code"
-          size="large"
-          placeholder={t('common.inputFourVerifyCode', {
-            length: 4,
-          })}
-          prefix={<SafetyOutlined style={{ color: '#ddd' }} />}
-          suffix={
-            <SendPhoneCode
-              onError={(error) =>
-                guardEvents.onPwdPhoneSendError?.(error, authClient)
-              }
-              onSend={() => guardEvents.onPwdPhoneSend?.(authClient)}
-              phone={phone}
-            />
-          }
-        />
-      </Form.Item>
-      <Form.Item
-        name="password"
-        rules={getRequiredRules(t('common.passwordNotNull'))}
-      >
-        <Input.Password
-          name="password"
-          size="large"
-          placeholder={t('user.newPwd')}
-          prefix={<LockOutlined style={{ color: '#ddd' }} />}
-        />
-      </Form.Item>
-      <Form.Item
-        name="repeat-password"
-        rules={getRequiredRules(t('common.repeatPassword')).concat({
-          validator: async (rule, value) => {
-            if (rawForm.getFieldValue('password') !== value) {
-              throw new Error(t('login.twoPwdNeedSame'))
-            }
-          },
-        })}
-      >
-        <Input.Password
-          name="repeat-password"
-          size="large"
-          placeholder={t('login.inputPwdAgain')}
-          prefix={<LockOutlined style={{ color: '#ddd' }} />}
-        />
-      </Form.Item>
-      <Button
-        className="authing-reset-pwd-btn"
-        block
-        loading={loading}
-        type="primary"
-        size="large"
-        htmlType="submit"
-      >
-        {t('login.resetPwd')}
-      </Button>
-    </Form>
-  )
-}