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

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

@@ -1,139 +0,0 @@
-import { Button, Form, Input, message, Spin } from 'antd'
-import { useForm } from 'antd/lib/form/Form'
-import React, { FC, useEffect, useState } from 'react'
-import { useGuardContext } from '../../../context/global/context'
-import { User } from 'authing-js-sdk'
-import { UploadImage } from '../UploadImage'
-import { requestClient } from '../../../_utils/http'
-import { CompleteUserInfoFormProps } from '../../types'
-import { useTranslation } from 'react-i18next'
-import { i18n } from '../../../_utils/locales'
-
-export const CompleteUserInfoForm: FC<CompleteUserInfoFormProps> = ({
-  onSuccess,
-}) => {
-  const { t } = useTranslation()
-  const [rawForm] = useForm()
-  const [submitting, setSubmitting] = useState(false)
-
-  const [loading, setLoading] = useState(false)
-
-  const {
-    state: { config, authClient, guardEvents, userPoolId },
-  } = useGuardContext()
-
-  const { extendsFields } = config
-
-  const [, setUser] = useState<User | null>()
-  const [definitions, setDefinitions] = useState<any[]>([])
-
-  const onFinish = async (values: any) => {
-    const internalFields: any = {}
-    const userFields: any[] = []
-    Object.entries(values).forEach(([key, value]) => {
-      const [type, nameOrId] = key.split(' ')
-      if (type === 'internal') {
-        internalFields[nameOrId] = value
-      } else if (type === 'user') {
-        userFields.push({ nameOrId, value })
-      }
-    })
-
-    const udfs = userFields.map(({ nameOrId, value }) => ({
-      definition: definitions.find((def) => def.id === nameOrId),
-      value,
-    }))
-
-    try {
-      const user = await authClient.updateProfile(internalFields)
-
-      setUser(user)
-
-      await requestClient.post(
-        `/api/v2/udfs/values`,
-        {
-          udfs,
-        },
-        {
-          headers: {
-            authorization: user?.token,
-            'x-authing-userpool-id': userPoolId,
-          },
-        }
-      )
-
-      message.success(t('common.saveSuccess'))
-      guardEvents.onRegisterInfoCompleted?.(user, udfs, authClient)
-      onSuccess?.(user)
-    } catch (e) {
-      guardEvents.onRegisterInfoCompletedError?.(e, udfs, authClient)
-      setSubmitting(false)
-    } finally {
-      setSubmitting(false)
-    }
-  }
-
-  useEffect(() => {
-    setLoading(true)
-    ;(async () => {
-      const user = await authClient.getCurrentUser()
-      setUser(user)
-      const { data } = await requestClient.get<any>(
-        '/api/v2/udfs/definitions',
-        undefined,
-        {
-          headers: {
-            authorization: user?.token!,
-            'x-authing-userpool-id': userPoolId,
-          },
-        }
-      )
-      setDefinitions(data)
-      setLoading(false)
-    })()
-  }, [authClient, userPoolId])
-
-  const onFinishFailed = () => {}
-
-  const INPUT_MAP: Record<string, React.ReactNode | undefined> = {
-    image: <UploadImage />,
-  }
-
-  const formFields = extendsFields.map((def) => {
-    const key = `${def.type} ${def.type === 'internal' ? def.name : def.id}`
-
-    const label = i18n.language === 'zh-CN' ? def.label : def.name
-
-    return (
-      <Form.Item key={key} name={key} label={label} style={{ marginBottom: 8 }}>
-        {INPUT_MAP[def.inputType] || (
-          <Input type={def.inputType} size="large" />
-        )}
-      </Form.Item>
-    )
-  })
-
-  return (
-    <Spin spinning={loading}>
-      <Form
-        layout="vertical"
-        form={rawForm}
-        onSubmitCapture={() => setSubmitting(true)}
-        onFinishFailed={onFinishFailed}
-        onFinish={onFinish}
-      >
-        {formFields}
-
-        <Button
-          size="large"
-          loading={submitting}
-          type="primary"
-          block
-          htmlType="submit"
-        >
-          {t('common.problem.form.submit')}
-        </Button>
-      </Form>
-    </Spin>
-  )
-}

package/components/AuthingGuard/Forms/EmailMfaVerifyForm/CheckEmailForm.tsx

@@ -1,84 +0,0 @@
-import React, { FC, useState } from 'react'
-import { Button, Form, Input, message } from 'antd'
-import { useGuardContext } from '../../../context/global/context'
-import { MFACheckEmailFormProps } from '../../types'
-import './style.less'
-import { useTranslation } from 'react-i18next'
-import { VALIDATE_PATTERN } from '../../../_utils'
-
-export const CheckEmailForm: FC<MFACheckEmailFormProps> = ({
-  onSuccess,
-  mfaToken,
-}) => {
-  const {
-    state: { authClient },
-  } = useGuardContext()
-
-  const { t } = useTranslation()
-
-  const [rawForm] = Form.useForm()
-
-  const [loading, setLoading] = useState(false)
-
-  const onFinish = async ({ email }: any) => {
-    try {
-      const bindable = await authClient.mfa.phoneOrEmailBindable({
-        mfaToken,
-        email,
-      })
-      if (!bindable) {
-        message.error(
-          t('common.unBindEmaileDoc', {
-            email: email,
-          })
-        )
-        return
-      }
-      onSuccess(email!)
-    } catch (e) {
-      // do nothing
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  return (
-    <>
-      <h3 className="authing-guard-mfa-title">{t('common.bindEmail')}</h3>
-      <p className="authing-guard-mfa-tips">{t('common.bindEmailDoc')}</p>
-      <Form
-        form={rawForm}
-        onSubmitCapture={() => setLoading(true)}
-        onFinish={onFinish}
-        onFinishFailed={() => setLoading(false)}
-      >
-        <Form.Item
-          name="email"
-          rules={[
-            {
-              required: true,
-              message: t('login.inputEmail'),
-            },
-            {
-              pattern: VALIDATE_PATTERN.email,
-              message: t('login.emailError'),
-            },
-          ]}
-        >
-          <Input placeholder={t('login.inputEmail')}></Input>
-        </Form.Item>
-
-        <Button
-          className="authing-guard-mfa-confirm-btn"
-          loading={loading}
-          block
-          htmlType="submit"
-          type="primary"
-          size="large"
-        >
-          {t('common.sure')}
-        </Button>
-      </Form>
-    </>
-  )
-}

package/components/AuthingGuard/Forms/EmailMfaVerifyForm/VerifyCodeForm.tsx

@@ -1,116 +0,0 @@
-import { EmailScene, User } from 'authing-js-sdk'
-import React, { FC, useState } from 'react'
-import { Button, Form } from 'antd'
-
-import { VerifyCodeInput } from '../../../VerifyCodeInput'
-import { useGuardContext } from '../../../context/global/context'
-import { EmailMFAVerifyFormProps } from '../../../../components/AuthingGuard/types'
-
-import './style.less'
-import { SendCodeBtn } from '../SendPhoneCode/SendCodeBtn'
-import { useTranslation } from 'react-i18next'
-
-const CODE_LEN = 4
-
-export const VerifyCodeForm: FC<EmailMFAVerifyFormProps> = ({
-  onSuccess,
-  onFail,
-  email,
-  mfaToken,
-  sendCodeRef,
-}) => {
-  const {
-    state: { authClient },
-  } = useGuardContext()
-
-  const { t } = useTranslation()
-
-  const [rawForm] = Form.useForm()
-
-  const [MfaCode, setMFACode] = useState(new Array(CODE_LEN).fill(''))
-  const [loading, setLoading] = useState(false)
-
-  const [sending, setSending] = useState(false)
-  const [sent, setSent] = useState(false)
-
-  const onFinish = async (values: any) => {
-    try {
-      const user: User = await authClient.mfa.verifyAppEmailMfa({
-        mfaToken,
-        email: email!,
-        code: MfaCode.join(''),
-      })
-      onSuccess && onSuccess(user)
-    } catch (e) {
-      onFail?.(e)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const sendVerifyCode = async () => {
-    try {
-      setSending(true)
-      await authClient.sendEmail(email!, EmailScene.MfaVerify)
-      setSent(true)
-      return true
-    } catch (e) {
-      return false
-    } finally {
-      setSending(false)
-    }
-  }
-
-  return (
-    <>
-      <h3 className="authing-guard-mfa-title">{t('login.inputEmailCode')}</h3>
-      <p className="authing-guard-mfa-tips">
-        {sending
-          ? t('login.sendingVerifyCode')
-          : sent
-          ? `${t('login.verifyCodeSended')} ${email}`
-          : t('login.clickSent')}
-      </p>
-      <Form
-        form={rawForm}
-        onSubmitCapture={() => setLoading(true)}
-        onFinish={onFinish}
-        onFinishFailed={() => setLoading(false)}
-      >
-        <Form.Item
-          name="mfaCode"
-          rules={[
-            {
-              validateTrigger: [],
-              validator() {
-                if (MfaCode.some((item) => !item)) {
-                  return Promise.reject(t('login.inputFullMfaCode'))
-                }
-                return Promise.resolve()
-              },
-            },
-          ]}
-        >
-          <VerifyCodeInput
-            length={CODE_LEN}
-            verifyCode={MfaCode}
-            setVerifyCode={setMFACode}
-          />
-        </Form.Item>
-
-        <SendCodeBtn btnRef={sendCodeRef} beforeSend={() => sendVerifyCode()} />
-
-        <Button
-          className="authing-guard-mfa-confirm-btn"
-          loading={loading}
-          block
-          htmlType="submit"
-          type="primary"
-          size="large"
-        >
-          {t('common.sure')}
-        </Button>
-      </Form>
-    </>
-  )
-}

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

@@ -1,40 +0,0 @@
-import React, { FC, useRef, useState } from 'react'
-import { useGuardContext } from '../../../context/global/context'
-import { CheckEmailForm } from './CheckEmailForm'
-import { VerifyCodeForm } from './VerifyCodeForm'
-import { SmsMFAFormProps } from '../../types'
-
-export const EmailMfaVerifyForm: FC<SmsMFAFormProps> = ({
-  onSuccess,
-  onFail,
-}) => {
-  const {
-    state: {
-      mfaData: { mfaToken, email: userEmail },
-    },
-  } = useGuardContext()
-  const [email, setEmail] = useState(userEmail)
-  const sendCodeRef = useRef<HTMLButtonElement>(null)
-
-  return (
-    <>
-      {email ? (
-        <VerifyCodeForm
-          sendCodeRef={sendCodeRef}
-          onSuccess={onSuccess}
-          onFail={onFail}
-          email={email!}
-          mfaToken={mfaToken}
-        ></VerifyCodeForm>
-      ) : (
-        <CheckEmailForm
-          mfaToken={mfaToken}
-          onSuccess={(email) => {
-            setEmail(email)
-            sendCodeRef.current?.click()
-          }}
-        ></CheckEmailForm>
-      )}
-    </>
-  )
-}

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

@@ -1,181 +0,0 @@
-import React, { forwardRef, useImperativeHandle, useState } from 'react'
-import { Input, Form, message } from 'antd'
-import { FormInstance } from 'antd/lib/form'
-import { UserOutlined, LockOutlined } from '@ant-design/icons'
-
-import {
-  getDeviceName,
-  getRequiredRules,
-  getUserRegisterParams,
-  VALIDATE_PATTERN,
-} from '../../../_utils'
-import { useGuardContext } from '../../../context/global/context'
-import {
-  EmailRegisterFormProps,
-  RegisterMethods,
-} from '../../../../components/AuthingGuard/types'
-import { RegisterFormFooter } from '../../../../components/AuthingGuard/Forms/RegisterFormFooter'
-import { useTranslation } from 'react-i18next'
-import { Agreements } from '../Agreements'
-
-export const EmailRegisterForm = forwardRef<
-  FormInstance,
-  EmailRegisterFormProps
->(({ onSuccess, onFail, onValidateFail }, ref) => {
-  const { t } = useTranslation()
-  const {
-    state: { authClient, config, guardEvents },
-  } = useGuardContext()
-
-  const { agreements, agreementEnabled } = config
-
-  const [rawForm] = Form.useForm()
-
-  const [loading, setLoading] = useState(false)
-
-  const onFinishFailed = (errorInfo: any) => {
-    setLoading(false)
-    onValidateFail && onValidateFail(errorInfo)
-  }
-
-  const [acceptedAgreements, setAcceptedAgreements] = useState(false)
-
-  /** 表单是否被提交校验过 */
-  const [validated, setValidated] = useState(false)
-
-  const onFinish = async (values: any) => {
-    if (guardEvents.onBeforeRegister) {
-      try {
-        const canRegister = await guardEvents.onBeforeRegister(
-          {
-            type: RegisterMethods.Email,
-            data: {
-              email: values.email,
-              password: values.password,
-            },
-          },
-          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 { email, password } = values
-      // 注册并获取登录态
-      const user = await authClient.registerByEmail(
-        email,
-        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="email"
-          size="large"
-          placeholder={t('login.inputEmail')}
-          prefix={<UserOutlined style={{ color: '#ddd' }} />}
-        />
-      ),
-      name: 'email',
-      rules: getRequiredRules(t('common.emailNotNull')).concat({
-        pattern: VALIDATE_PATTERN.email,
-        message: t('login.emailError'),
-      }),
-    },
-    {
-      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()
-          }
-        },
-      }),
-    },
-  ]
-
-  return (
-    <Form
-      form={rawForm}
-      onFinish={onFinish}
-      onSubmitCapture={() => setLoading(true)}
-      onFinishFailed={onFinishFailed}
-    >
-      {formItems.map((item) => (
-        <Form.Item key={item.name} name={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>
-  )
-})