@authing/react-ui-components 3.1.1 → 3.1.3-rc.2

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

@@ -1,141 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,96 +0,0 @@
-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

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

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

@@ -1,88 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,26 +0,0 @@
-.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

@@ -1,86 +0,0 @@
-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

@@ -1,113 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

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