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

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

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

@@ -0,0 +1,61 @@
+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,
+  idpId,
+}) => {
+  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', {
+      extIdpConnId: idpId,
+      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, idpId, 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/src/components/AuthingGuard/Forms/QrCodeLoginForm/style.less

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

@@ -0,0 +1,56 @@
+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/src/components/AuthingGuard/Forms/ResetPwdForm/Footer.tsx

@@ -0,0 +1,21 @@
+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/src/components/AuthingGuard/Forms/ResetPwdForm/Step1.tsx

@@ -0,0 +1,86 @@
+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/src/components/AuthingGuard/Forms/ResetPwdForm/Step2.tsx

@@ -0,0 +1,127 @@
+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>
+  )
+}