@authing/react-ui-components 3.0.2-beta.9 → 3.1.1-rc.1

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

@@ -0,0 +1,116 @@
+import { EmailScene, User } from 'authing-js-sdk'
+import React, { FC, useState } from 'react'
+import { Button, Form } from 'antd'
+
+import { VerifyCodeInput } from '../../../../common/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/src/components/AuthingGuard/Forms/EmailMfaVerifyForm/index.tsx

@@ -0,0 +1,40 @@
+import React, { FC, useRef, useState } from 'react'
+import { useGuardContext } from 'src/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/src/components/AuthingGuard/Forms/EmailRegisterForm/index.tsx

@@ -0,0 +1,181 @@
+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/src/components/AuthingGuard/Forms/LdapLoginForm/index.tsx

@@ -0,0 +1,161 @@
+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 { authClient, realHost, guardEvents } = state
+
+    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 user = await authClient.loginByLdap(identity, password)
+        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/src/components/AuthingGuard/Forms/LoginFormFooter/index.tsx

@@ -0,0 +1,76 @@
+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/src/components/AuthingGuard/Forms/LoginFormFooter/style.less

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

package/src/components/AuthingGuard/Forms/MfaResetCodeForm/Step1.tsx

@@ -0,0 +1,86 @@
+import { Input, Form, Button } from 'antd'
+import React, { FC, useState } from 'react'
+import { LockOutlined } from '@ant-design/icons'
+import { getRequiredRules } from '../../../../utils'
+import { useGuardContext } from '../../../../context/global/context'
+import { User } from 'authing-js-sdk'
+import { useTranslation } from 'react-i18next'
+
+export const MfaResetStep1: FC<{
+  mfaToken: string
+  onSuccess: (
+    user: User & {
+      recoveryCode: string
+    }
+  ) => void
+  goVerify: () => void
+  onFail?: (error: any) => void
+}> = ({ mfaToken, onSuccess, goVerify, onFail }) => {
+  const [loading, setLoading] = useState(false)
+  const { t } = useTranslation()
+
+  const {
+    state: { authClient },
+  } = useGuardContext()
+
+  const onFinish = async (values: any) => {
+    try {
+      const user = await authClient.mfa.verifyTotpRecoveryCode({
+        recoveryCode: values.recoverCode,
+        mfaToken,
+      })
+      onSuccess(
+        user as User & {
+          recoveryCode: string
+        }
+      )
+    } catch (e) {
+      onFail?.(e)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Form
+      onSubmitCapture={() => setLoading(true)}
+      onFinishFailed={() => setLoading(false)}
+      onFinish={onFinish}
+    >
+      <Form.Item
+        rules={getRequiredRules(t('common.recoverCodeNotNull'))}
+        name="recoverCode"
+      >
+        <Input
+          prefix={<LockOutlined style={{ color: '#ddd' }} />}
+          placeholder={t('login.inputRecoverCode')}
+          size="large"
+        ></Input>
+      </Form.Item>
+
+      <Button
+        className="authing-guard-mfa-confirm-btn"
+        loading={loading}
+        htmlType="submit"
+        block
+        type="primary"
+        size="large"
+      >
+        {t('common.sure')}
+      </Button>
+
+      <div className="authing-guard-form-actions">
+        <div className="authing-guard-tip-btn-comb">
+          <Button
+            htmlType="button"
+            onClick={goVerify}
+            className="authing-guard-text-btn"
+            type="text"
+          >
+            {t('login.findedSafetyCode')}
+          </Button>
+        </div>
+      </div>
+    </Form>
+  )
+}