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

package/src/components/AuthingGuard/Forms/ResetPwdForm/Step3.tsx

@@ -0,0 +1,141 @@
+import React, { FC, useState } from 'react'
+import { Form, Button, Input, message } from 'antd'
+import { SafetyOutlined, LockOutlined } from '@ant-design/icons'
+import { EmailScene } from 'authing-js-sdk'
+
+import { getRequiredRules } from '../../../../utils'
+import { useGuardContext } from '../../../../context/global/context'
+import { ResetPasswordStep3Props } from '../../../../components/AuthingGuard/types'
+import { useTranslation } from 'react-i18next'
+
+export const ResetPasswordStep3: FC<ResetPasswordStep3Props> = ({
+  email,
+  onSuccess = () => {},
+  onFail,
+}) => {
+  const {
+    state: { authClient, guardEvents },
+  } = useGuardContext()
+  const [rawForm] = Form.useForm()
+  const { t } = useTranslation()
+
+  const [reseting, setReseting] = useState(false)
+  const [sending, setSending] = useState(false)
+
+  const onSendResetMail = async () => {
+    setSending(true)
+    try {
+      await authClient.sendEmail(email, EmailScene.ResetPassword)
+      message.success(t('login.emailSent'))
+      guardEvents.onPwdEmailSend?.(authClient)
+    } catch (e) {
+      guardEvents.onPwdEmailSendError?.(e, authClient)
+    } finally {
+      setSending(false)
+    }
+  }
+
+  const onStep3Finish = async (values: any) => {
+    const code = values.code
+    const password = values.password
+    try {
+      await authClient.resetPasswordByEmailCode(email, code, password)
+      onSuccess()
+    } catch (error) {
+      onFail?.(error)
+    } finally {
+      setReseting(false)
+    }
+  }
+
+  return (
+    <>
+      <p
+        style={{
+          marginBottom: 24,
+          padding: '0 12px',
+        }}
+      >
+        {t('login.resetEmailSent', {
+          email: email,
+        })}
+      </p>
+
+      <Form
+        form={rawForm}
+        onFinishFailed={() => setReseting(false)}
+        onSubmitCapture={() => setReseting(true)}
+        onFinish={onStep3Finish}
+      >
+        <Form.Item
+          name="code"
+          rules={getRequiredRules(t('common.repeatPassword')).concat({
+            len: 4,
+            message: t('common.inputFourVerifyCode', {
+              length: 4,
+            }),
+          })}
+        >
+          <Input
+            name="code"
+            size="large"
+            placeholder={t('login.fourVerifyCode', {
+              length: 4,
+            })}
+            prefix={<SafetyOutlined style={{ color: '#ddd' }} />}
+          />
+        </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>
+        <Form.Item>
+          <Button
+            className="authing-reset-pwd-btn"
+            block
+            loading={reseting}
+            type="primary"
+            size="large"
+            htmlType="submit"
+          >
+            {t('login.resetPwd')}
+          </Button>
+        </Form.Item>
+        <Button
+          block
+          type="primary"
+          ghost
+          loading={sending}
+          size="large"
+          onClick={onSendResetMail}
+        >
+          {t('login.resetPwdEmail')}
+        </Button>
+      </Form>
+    </>
+  )
+}

package/src/components/AuthingGuard/Forms/ResetPwdForm/Step4.tsx

@@ -0,0 +1,51 @@
+import { useGuardContext } from '../../../../context/global/context'
+import React, { FC, useEffect, useRef, useState } from 'react'
+
+import { GuardScenes } from '../../../../components/AuthingGuard/types'
+import { useTranslation } from 'react-i18next'
+
+const TIME = 3
+export const ResetPasswordStep4: FC = () => {
+  const [countDown, setCountDown] = useState(TIME)
+  const timerRef = useRef<any>(0)
+  const { t } = useTranslation()
+  const { setValue } = useGuardContext()
+
+  useEffect(() => {
+    timerRef.current = setInterval(() => {
+      setCountDown((prev) => {
+        return prev - 1
+      })
+    }, 1000)
+
+    return () => clearInterval(timerRef.current)
+  }, [])
+
+  useEffect(() => {
+    if (countDown <= 0) {
+      clearInterval(timerRef.current)
+
+      setValue('guardScenes', GuardScenes.Login)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [countDown])
+
+  return (
+    <div style={{ textAlign: 'center' }}>
+      <h3
+        style={{
+          fontSize: 20,
+          fontFamily: 'PingFangSC-Medium',
+          marginBottom: 0,
+        }}
+      >
+        {t('common.pwdModifySuccess')}
+      </h3>
+      <p style={{ fontSize: 12 }}>
+        {t('common.jumpAfterCount', {
+          number: countDown,
+        })}
+      </p>
+    </div>
+  )
+}

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

@@ -0,0 +1,96 @@
+import React, { FC, useEffect, useState } from 'react'
+
+import { ResetPasswordStep1 } from './Step1'
+import { ResetPasswordStep2 } from './Step2'
+import { ResetPasswordStep3 } from './Step3'
+import { ResetPasswordStep4 } from './Step4'
+import { ResetPwdFormFooter } from './Footer'
+import { useGuardContext } from '../../../../context/global/context'
+import { ResetPasswordFormProps } from '../../../../components/AuthingGuard/types'
+
+import './style.less'
+import { useTranslation } from 'react-i18next'
+
+export const ResetPasswordForm: FC<ResetPasswordFormProps> = ({
+  onSuccess,
+  onFail,
+}) => {
+  const { setValue } = useGuardContext()
+  const { t } = useTranslation()
+
+  const [step, setStep] = useState(1)
+  const [phone, setPhone] = useState('')
+  const [email, setEmail] = useState('')
+
+  useEffect(() => {
+    switch (step) {
+      case 1:
+        setValue('guardTitle', t('common.retrievePassword'))
+        break
+      case 2:
+      case 3:
+      case 4:
+        setValue('guardTitle', t('login.resetPwd'))
+        break
+      default:
+        setValue('guardTitle', t('common.retrievePassword'))
+        break
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [step])
+
+  const onStep1Finish = async (type: string, value: string) => {
+    if (type === 'phone') {
+      setPhone(value)
+      setStep(2)
+    } else if (type === 'email') {
+      setEmail(value)
+      setStep(3)
+    }
+  }
+
+  const onStep2OrStep3Finish = () => {
+    setStep(4)
+    onSuccess?.()
+  }
+
+  const onStep2OrStep3Fail = (error: any) => {
+    onFail?.(error)
+  }
+
+  const getForm = () => {
+    switch (step) {
+      case 1:
+        return (
+          <ResetPasswordStep1 onSuccess={onStep1Finish}></ResetPasswordStep1>
+        )
+      case 2:
+        return (
+          <ResetPasswordStep2
+            phone={phone}
+            onFail={onStep2OrStep3Fail}
+            onSuccess={onStep2OrStep3Finish}
+          ></ResetPasswordStep2>
+        )
+      case 3:
+        return (
+          <ResetPasswordStep3
+            email={email}
+            onFail={onStep2OrStep3Fail}
+            onSuccess={onStep2OrStep3Finish}
+          ></ResetPasswordStep3>
+        )
+      case 4:
+        return <ResetPasswordStep4></ResetPasswordStep4>
+      default:
+        return null
+    }
+  }
+
+  return (
+    <div>
+      {getForm()}
+      {step !== 4 && <ResetPwdFormFooter />}
+    </div>
+  )
+}

package/src/components/AuthingGuard/Forms/ResetPwdForm/style.less

@@ -0,0 +1,3 @@
+.authing-reset-pwd-btn {
+  margin-top: 24px;
+}

package/src/components/AuthingGuard/Forms/SendPhoneCode/SendCodeBtn.tsx

@@ -0,0 +1,88 @@
+import { Spin } from 'antd'
+import React, { FC, useState, useRef, useEffect, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { LoadingOutlined } from '@ant-design/icons'
+
+const TIME = 60
+export interface SendCodeProps {
+  beforeSend: () => Promise<boolean>
+  btnRef?: React.RefObject<HTMLButtonElement>
+}
+
+const useSentCounter = () => {
+  const [countDown, setCountDown] = useState(0)
+  const timerRef = useRef<any>(0)
+
+  useEffect(() => {
+    return () => clearInterval(timerRef.current)
+  }, [])
+
+  useEffect(() => {
+    if (countDown <= 0) {
+      clearInterval(timerRef.current)
+    }
+  }, [countDown])
+
+  const enabled = useMemo(() => countDown <= 0, [countDown])
+
+  const send = () => {
+    setCountDown(TIME)
+
+    timerRef.current = setInterval(() => {
+      setCountDown((prev) => {
+        return prev - 1
+      })
+    }, 1000)
+  }
+
+  return {
+    enabled,
+    send,
+    countDown,
+  }
+}
+
+export const SendCodeBtn: FC<SendCodeProps> = ({ beforeSend, btnRef }) => {
+  const { enabled, send, countDown } = useSentCounter()
+  const [loading, setLoading] = useState(false)
+  const { t } = useTranslation()
+  const disabled = useMemo(() => {
+    return !enabled || loading
+  }, [enabled, loading])
+
+  const onClick = async (e: React.MouseEvent<HTMLButtonElement>) => {
+    setLoading(true)
+    if (disabled) {
+      return
+    }
+
+    if (!(await beforeSend())) {
+      setLoading(false)
+      return
+    }
+    setLoading(false)
+    send()
+  }
+
+  return (
+    <button
+      type="button"
+      className="authing-send-code-btn"
+      disabled={disabled}
+      onClick={onClick}
+      ref={btnRef}
+    >
+      <Spin
+        spinning={loading}
+        indicator={<LoadingOutlined spin />}
+        size="small"
+      >
+        {enabled
+          ? t('common.sendVerifyCode')
+          : t('common.retryAfterTime', {
+              time: countDown,
+            })}
+      </Spin>
+    </button>
+  )
+}

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

@@ -0,0 +1,50 @@
+import { message } from 'antd'
+import React, { FC } from 'react'
+import { CommonMessage } from 'authing-js-sdk'
+
+import { SendCodeBtn } from './SendCodeBtn'
+import { validate } from '../../../../utils'
+import { useGuardContext } from '../../../../context/global/context'
+
+import './style.less'
+import { useTranslation } from 'react-i18next'
+
+export interface SendPhoneCodeProps {
+  phone: string
+  onSend?: () => void
+  onError?: (error: CommonMessage) => void
+}
+
+export const SendPhoneCode: FC<SendPhoneCodeProps> = ({
+  phone,
+  onSend,
+  onError,
+}) => {
+  const { t } = useTranslation()
+  const {
+    state: { authClient },
+  } = useGuardContext()
+
+  return (
+    <SendCodeBtn
+      beforeSend={async () => {
+        if (!phone) {
+          message.error(t('login.inputPhone'))
+          return false
+        }
+        if (!validate('phone', phone)) {
+          message.error(t('common.phoneFormateError'))
+          return false
+        }
+        try {
+          await authClient.sendSmsCode(phone)
+          onSend?.()
+          return true
+        } catch (error) {
+          onError?.(error)
+          return false
+        }
+      }}
+    />
+  )
+}

package/src/components/AuthingGuard/Forms/SendPhoneCode/style.less

@@ -0,0 +1,26 @@
+.authing-send-code-btn {
+  display: inline-block;
+  border: none;
+  background-color: transparent;
+  font-size: inherit;
+  color: #396aff;
+  cursor: pointer;
+  padding: 0;
+  user-select: none;
+  outline: none;
+}
+
+.authing-send-code-btn:focus {
+  outline: none;
+}
+
+.authing-send-code-btn[disabled] {
+  cursor: not-allowed;
+  filter: opacity(0.5);
+}
+
+@media only screen and (max-width: 719px) {
+  .authing-send-code-btn {
+    font-size: 14px;
+  }
+}

package/src/components/AuthingGuard/Forms/SmsMfaVerifyForm/CheckPhoneForm.tsx

@@ -0,0 +1,86 @@
+import React, { FC, useState } from 'react'
+import { Button, Form, Input, message } from 'antd'
+
+import { useGuardContext } from '../../../../context/global/context'
+import { MFACheckPhoneFormProps } from '../../types'
+
+import './style.less'
+import { VALIDATE_PATTERN } from '../../../../utils'
+import { useTranslation } from 'react-i18next'
+
+export const CheckPhoneForm: FC<MFACheckPhoneFormProps> = ({
+  onSuccess,
+  mfaToken,
+}) => {
+  const {
+    state: { authClient },
+  } = useGuardContext()
+  const { t } = useTranslation()
+
+  const [rawForm] = Form.useForm()
+
+  const [loading, setLoading] = useState(false)
+
+  const onFinish = async ({ phone }: any) => {
+    try {
+      const bindable = await authClient.mfa.phoneOrEmailBindable({
+        mfaToken,
+        phone,
+      })
+      if (!bindable) {
+        message.error(
+          t('common.unBindEmaileDoc', {
+            email: phone,
+          })
+        )
+        return
+      }
+      onSuccess(phone!)
+    } catch (e) {
+      // do nothing
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <>
+      <h3 className="authing-guard-mfa-title">{t('common.bindPhone')}</h3>
+      <p className="authing-guard-mfa-tips">{t('login.bindPhoneInfo')}</p>
+      <Form
+        className="authing-mfa-check-phone-from"
+        form={rawForm}
+        onSubmitCapture={() => setLoading(true)}
+        onFinish={onFinish}
+        onFinishFailed={() => setLoading(false)}
+      >
+        <Form.Item
+          name="phone"
+          rules={[
+            {
+              required: true,
+              message: t('login.inputPhone'),
+            },
+            {
+              pattern: VALIDATE_PATTERN.phone,
+              message: t('login.phoneError'),
+            },
+          ]}
+        >
+          <Input size="large" placeholder={t('login.inputPhone')} />
+        </Form.Item>
+
+        <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/SmsMfaVerifyForm/VerifyCodeForm.tsx

@@ -0,0 +1,113 @@
+import { 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 { SmsMFAVerifyFormProps } 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<SmsMFAVerifyFormProps> = ({
+  onSuccess,
+  onFail,
+  phone,
+  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.verifyAppSmsMfa({
+        mfaToken,
+        phone: phone!,
+        code: MfaCode.join(''),
+      })
+      onSuccess && onSuccess(user)
+    } catch (e) {
+      onFail?.(e)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const sendVerifyCode = async () => {
+    setSending(true)
+    try {
+      await authClient.sendSmsCode(phone!)
+      setSent(true)
+      return true
+    } catch (e) {
+      return false
+    } finally {
+      setSending(false)
+    }
+  }
+
+  return (
+    <>
+      <h3 className="authing-guard-mfa-title">{t('login.inputPhoneCode')}</h3>
+      <p className="authing-guard-mfa-tips">
+        {sending
+          ? t('login.sendingVerifyCode')
+          : sent
+          ? `${t('login.verifyCodeSended')} ${phone}`
+          : 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/SmsMfaVerifyForm/index.tsx

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

package/src/components/AuthingGuard/Forms/SmsMfaVerifyForm/style.less

@@ -0,0 +1,3 @@
+.authing-mfa-check-phone-from {
+  text-align: center;
+}