@authing/react-ui-components 3.0.2-Beta.0 → 3.0.2-beta.10

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

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

@@ -1,166 +0,0 @@
-import { Input, Form, message } from 'antd'
-import { FormInstance } from 'antd/lib/form'
-import { UserOutlined, LockOutlined } from '@ant-design/icons'
-import React, { forwardRef, useImperativeHandle, useState } from 'react'
-
-import { getRequiredRules } from '../../../_utils'
-import { useGuardContext } from '../../../context/global/context'
-import { NEED_CAPTCHA } from '../../../../components/AuthingGuard/constants'
-import {
-  LoginMethods,
-  PasswordLoginFormProps,
-} from '../../../../components/AuthingGuard/types'
-import { LoginFormFooter } from '../../../../components/AuthingGuard/Forms/LoginFormFooter'
-import { useTranslation } from 'react-i18next'
-
-export const LdapLoginForm = forwardRef<FormInstance, PasswordLoginFormProps>(
-  ({ onSuccess, onValidateFail, onFail }, ref) => {
-    const { t } = useTranslation()
-
-    const { state } = useGuardContext()
-    const { config, authClient, realHost, guardEvents } = state
-    const autoRegister = config.autoRegister
-
-    const [rawForm] = Form.useForm()
-
-    const [needCaptcha, setNeedCaptcha] = useState(false)
-    const [verifyCodeUrl, setVerifyCodeUrl] = useState<string | null>(null)
-    const [loading, setLoading] = useState(false)
-
-    const captchaUrl = `${realHost}/api/v2/security/captcha`
-    const getCaptchaUrl = () => `${captchaUrl}?r=${+new Date()}`
-
-    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.LDAP,
-              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 {
-        const identity = values.identity && values.identity.trim()
-        const password = values.password && values.password.trim()
-        const captchaCode = values.captchaCode && values.captchaCode.trim()
-
-        const user = await authClient.loginByLdap(identity, password, {
-          autoRegister,
-          captchaCode,
-        })
-        onSuccess && onSuccess(user)
-      } catch (error) {
-        if (typeof error.message === 'string') {
-          // js sdk httpclient 的报错，这里只有一种情况就是用户开启了 mfa 的报错
-          try {
-            const errorData = JSON.parse(error.message)
-            onFail && onFail(errorData)
-            return
-          } catch (_) {}
-        }
-
-        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="ldap,username"
-            size="large"
-            placeholder={t('login.inputLdapUsername')}
-            prefix={<UserOutlined style={{ color: '#ddd' }} />}
-          />
-        ),
-        name: 'identity',
-        rules: getRequiredRules(t('common.LDAPAccountNotNull')),
-      },
-      {
-        component: (
-          <Input.Password
-            size="large"
-            placeholder={t('login.inputLdapPwd')}
-            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}
-      >
-        {formItems.map(
-          (item) =>
-            !item.hide && (
-              <Form.Item key={item.name} name={item.name} rules={item.rules}>
-                {item.component}
-              </Form.Item>
-            )
-        )}
-
-        <LoginFormFooter loading={loading}></LoginFormFooter>
-      </Form>
-    )
-  }
-)

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

@@ -1,76 +0,0 @@
-import { Button, Divider } 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 LoginFormFooterProps {
-  loading: boolean
-  needRestPwd?: boolean
-  needRegister?: boolean
-}
-
-export const LoginFormFooter: FC<LoginFormFooterProps> = ({
-  loading,
-  needRestPwd = false,
-  needRegister = false,
-}) => {
-  const { t } = useTranslation()
-
-  const {
-    setValue,
-    state: { config },
-  } = useGuardContext()
-
-  return (
-    <>
-      <Button
-        htmlType="submit"
-        className="authing-guard-form-submit-btn"
-        size="large"
-        type="primary"
-        loading={loading}
-        block
-      >
-        {loading
-          ? t(
-              `map.${config.text?.loginBtn?.loading}`,
-              config.text?.loginBtn?.loading
-            )
-          : t(
-              `map.${config.text?.loginBtn?.normal}`,
-              config.text?.loginBtn?.normal
-            )}
-      </Button>
-
-      <div className="authing-guard-form-actions">
-        {needRestPwd && !config.disableResetPwd && (
-          <Button
-            onClick={() => setValue('guardScenes', GuardScenes.RestPassword)}
-            className="authing-guard-text-btn"
-            type="text"
-          >
-            {t('common.hasForgotPwd')}
-          </Button>
-        )}
-        {needRestPwd &&
-          needRegister &&
-          !config.disableResetPwd &&
-          !config.disableRegister && <Divider type="vertical" />}
-        {needRegister && !config.disableRegister && (
-          <div className="authing-guard-tip-btn-comb">
-            <span className="authing-guard-tip">{t('common.noAccYet')}</span>
-            <Button
-              onClick={() => setValue('guardScenes', GuardScenes.Register)}
-              className="authing-guard-text-btn authing-guard-to-register-btn"
-              type="text"
-            >
-              {t('common.registerImmediate')}
-            </Button>
-          </div>
-        )}
-      </div>
-    </>
-  )
-}

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

@@ -1,6 +0,0 @@
-@media only screen and (max-width: 719px) {
-  .authing-guard-form-submit-btn {
-    margin-top: 56px;
-    font-size: 14px;
-  }
-}