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

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

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

package/components/AuthingGuard/Forms/MfaResetCodeForm/Step2.tsx

@@ -1,53 +0,0 @@
-import React, { FC } from 'react'
-
-import { Button, Checkbox, Form } from 'antd'
-import { CopyAbleText } from '../../../CopyAbleText'
-import { useTranslation } from 'react-i18next'
-
-export interface MfaResetStep2Props {
-  recoverCode: string
-  onFinish: () => void
-}
-
-export const MfaResetStep2: FC<MfaResetStep2Props> = ({
-  recoverCode,
-  onFinish,
-}) => {
-  const { t } = useTranslation()
-  return (
-    <Form onFinish={onFinish}>
-      <CopyAbleText className="authing-guard-secret-block">
-        {recoverCode}
-      </CopyAbleText>
-      <Form.Item
-        valuePropName="checked"
-        rules={[
-          {
-            validateTrigger: [],
-            validator(r, v) {
-              return new Promise((resolve, reject) => {
-                if (!v) {
-                  reject(t('login.confirmSavedCode'))
-                }
-                resolve(true)
-              })
-            },
-          },
-        ]}
-        name="MfaCopyRecoverCode"
-      >
-        <Checkbox>{t('login.rememberedSecret')}</Checkbox>
-      </Form.Item>
-
-      <Button
-        className="authing-guard-mfa-confirm-btn"
-        htmlType="submit"
-        block
-        type="primary"
-        size="large"
-      >
-        {t('common.sure')}
-      </Button>
-    </Form>
-  )
-}

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

@@ -1,65 +0,0 @@
-import { User } from 'authing-js-sdk'
-import React, { FC, useState } from 'react'
-
-import { MfaResetStep1 } from './Step1'
-import { MfaResetStep2 } from './Step2'
-import { useGuardContext } from '../../../context/global/context'
-import { MfaResetForm } from '../../../../components/AuthingGuard/types'
-
-import './style.less'
-import { useTranslation } from 'react-i18next'
-
-export const MfaResetCodeForm: FC<MfaResetForm> = ({
-  goVerify,
-  onSuccess,
-  onFail,
-}) => {
-  const { t } = useTranslation()
-
-  const {
-    state: {
-      mfaData: { mfaToken },
-    },
-  } = useGuardContext()
-
-  const [step, setStep] = useState(1)
-  const [user, setUser] = useState<User | null>(null)
-  const [recoverCode, setRecoverCode] = useState('')
-
-  const onReset = (
-    user: User & {
-      recoveryCode: string
-    }
-  ) => {
-    setStep(2)
-    setUser(user)
-    setRecoverCode(user.recoveryCode)
-  }
-
-  const stepMap: Record<number, JSX.Element | undefined> = {
-    1: (
-      <MfaResetStep1
-        onFail={onFail}
-        goVerify={goVerify}
-        onSuccess={onReset}
-        mfaToken={mfaToken}
-      />
-    ),
-    2: (
-      <MfaResetStep2
-        onFinish={() => onSuccess?.(user!)}
-        recoverCode={recoverCode}
-      />
-    ),
-  }
-
-  return (
-    <>
-      <h2 className="authing-guard-mfa-reset-title">
-        {t('common.useRecoverCode')}
-      </h2>
-      <p className="authing-guard-mfa-reset-tips">{t('login.mfaAfterReset')}</p>
-      {stepMap[step]}
-    </>
-  )
-}

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

@@ -1,20 +0,0 @@
-.authing-guard-secret-block {
-  border: 1px solid #ddd;
-  justify-content: center;
-  border-radius: 2px;
-  padding: 12px 0;
-  text-align: center;
-}
-
-.authing-guard-mfa-reset-title {
-  color: #181818;
-  font-size: 18px;
-  font-weight: 600;
-  text-align: center;
-  margin: 0;
-}
-
-.authing-guard-mfa-reset-tips {
-  margin: 38px 0;
-  text-align: center;
-}

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

@@ -1,105 +0,0 @@
-import { 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 { MfaVerifyForm } from '../../../../components/AuthingGuard/types'
-
-import './style.less'
-import { useTranslation } from 'react-i18next'
-
-const CODE_LEN = 6
-
-export const MFAVerifyForm: FC<MfaVerifyForm> = ({
-  onSuccess,
-  onFail,
-  goReset,
-}) => {
-  const {
-    state: {
-      authClient,
-      mfaData: { mfaToken },
-    },
-  } = useGuardContext()
-
-  const { t } = useTranslation()
-
-  const [rawForm] = Form.useForm()
-
-  const [MfaCode, setMFACode] = useState(new Array(CODE_LEN).fill(''))
-  const [loading, setLoading] = useState(false)
-
-  const onFinish = async (values: any) => {
-    try {
-      const user: User = await authClient.mfa.verifyTotpMfa({
-        mfaToken,
-        totp: MfaCode.join(''),
-      })
-      onSuccess && onSuccess(user)
-    } catch (e) {
-      onFail?.(e)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  return (
-    <>
-      <h3 className="authing-guard-mfa-title">
-        {t('login.accPwdLoginVerify')}
-      </h3>
-      <p className="authing-guard-mfa-tips">{t('login.inputSixCode')}</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 verifyCode={MfaCode} setVerifyCode={setMFACode} />
-        </Form.Item>
-
-        <Button
-          className="authing-guard-mfa-confirm-btn"
-          loading={loading}
-          block
-          htmlType="submit"
-          type="primary"
-          size="large"
-        >
-          {t('common.sure')}
-        </Button>
-
-        <div className="authing-guard-form-actions">
-          <div className="authing-guard-tip-btn-comb">
-            <span className="authing-guard-tip">
-              {t('common.hasLooseSaftyCode')}
-            </span>
-            <Button
-              htmlType="button"
-              onClick={goReset}
-              className="authing-guard-text-btn"
-              type="text"
-            >
-              {t('common.useRecoverCode')}
-            </Button>
-          </div>
-        </div>
-      </Form>
-    </>
-  )
-}

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

@@ -1,12 +0,0 @@
-.authing-guard-mfa-title {
-  color: #181818;
-  font-size: 18px;
-  font-weight: 600;
-  text-align: center;
-  margin: 0;
-}
-
-.authing-guard-mfa-tips {
-  margin: 38px 0;
-  text-align: center;
-}

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

@@ -1,261 +0,0 @@
-import { Input, Form, Alert, message as Message, message } from 'antd'
-import { FormInstance, Rule } from 'antd/lib/form'
-import { UserOutlined, LockOutlined } from '@ant-design/icons'
-import React, {
-  forwardRef,
-  useImperativeHandle,
-  useMemo,
-  useState,
-} from 'react'
-
-import { getRequiredRules, getUserRegisterParams } from '../../../_utils'
-import { useGuardContext } from '../../../context/global/context'
-import { NEED_CAPTCHA } from '../../../../components/AuthingGuard/constants'
-import {
-  LoginMethods,
-  PasswordLoginFormProps,
-  User,
-} from '../../../../components/AuthingGuard/types'
-import { LoginFormFooter } from '../../../../components/AuthingGuard/Forms/LoginFormFooter'
-import { useTranslation } from 'react-i18next'
-import { PasswordLoginMethods } from '../../api'
-import { requestClient } from '../../../_utils/http'
-
-export const PasswordLoginForm = forwardRef<
-  FormInstance,
-  PasswordLoginFormProps
->(({ onSuccess, onValidateFail, onFail }, ref) => {
-  const { state, getValue } = useGuardContext()
-  const { t } = useTranslation()
-
-  const { config, authClient, realHost, userPoolId, appId, guardEvents } = state
-  const autoRegister = config.autoRegister
-
-  const captchaUrl = `${realHost}/api/v2/security/captcha`
-  const getCaptchaUrl = () => `${captchaUrl}?r=${+new Date()}`
-
-  const [rawForm] = Form.useForm()
-
-  const [needCaptcha, setNeedCaptcha] = useState(false)
-  const [verifyCodeUrl, setVerifyCodeUrl] = useState<string | null>(null)
-  const [loading, setLoading] = useState(false)
-
-  const onFinishFailed = (errorInfo: any) => {
-    setLoading(false)
-    onValidateFail && onValidateFail(errorInfo)
-  }
-
-  const loginMethodsText = useMemo<
-    Record<
-      PasswordLoginMethods,
-      {
-        t: string
-        sort: number
-      }
-    >
-  >(
-    () => ({
-      'email-password': {
-        t: t('common.email'),
-        sort: 2,
-      },
-      'phone-password': {
-        t: t('common.phoneNumber'),
-        sort: 1,
-      },
-      'username-password': {
-        t: t('common.username'),
-        sort: 0,
-      },
-    }),
-    [t]
-  )
-
-  const usernamePlaceholder = useMemo(
-    () =>
-      t('login.inputAccount', {
-        text: config.passwordLoginMethods
-          ?.map((item) => loginMethodsText[item])
-          .sort((a, b) => a.sort - b.sort)
-          .map((item) => item.t)
-          .join(' / '),
-      }),
-    [config.passwordLoginMethods, loginMethodsText, t]
-  )
-
-  const identityRules = useMemo(() => {
-    const rules: Rule[] = getRequiredRules(t('common.accNotNull'))
-
-    const loginMethods = config.passwordLoginMethods
-
-    if (
-      loginMethods?.includes('email-password') &&
-      loginMethods?.length === 1
-    ) {
-      rules.push({
-        type: 'email',
-        message: t('common.emailFormatError'),
-      })
-    }
-
-    return rules
-  }, [config, t])
-
-  const login = async (values: any) => {
-    const identity = values.identity && values.identity.trim()
-    const password = values.password && values.password.trim()
-    const captchaCode = values.captchaCode && values.captchaCode.trim()
-
-    const encrypt = authClient.options.encryptFunction
-
-    const { publicKey, autoRegister } = getValue('config')
-    const { code, data, message } = await requestClient.post<User>(
-      '/api/v2/login/account',
-      {
-        account: identity,
-        password: await encrypt!(password, publicKey),
-        captchaCode,
-        customData: getUserRegisterParams(),
-        autoRegister: autoRegister,
-      },
-      {
-        headers: {
-          'x-authing-userpool-id': userPoolId,
-          'x-authing-app-id': appId,
-        },
-      }
-    )
-
-    if (code === 200) {
-      return data
-    } else {
-      Message.error(message)
-      // eslint-disable-next-line no-throw-literal
-      throw {
-        code,
-        message,
-        data,
-      }
-    }
-  }
-
-  const onFinish = async (values: any) => {
-    if (guardEvents.onBeforeLogin) {
-      try {
-        const canLogin = await guardEvents.onBeforeLogin(
-          {
-            type: LoginMethods.Password,
-            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 {
-      let user: User | undefined
-      user = await login(values)
-      user && onSuccess && onSuccess(user)
-    } catch (error) {
-      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="email,username,tel"
-          size="large"
-          placeholder={usernamePlaceholder}
-          prefix={<UserOutlined style={{ color: '#ddd' }} />}
-        />
-      ),
-      name: 'identity',
-      rules: identityRules,
-    },
-    {
-      component: (
-        <Input.Password
-          size="large"
-          placeholder={t('login.inputLoginPwd')}
-          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}
-    >
-      {autoRegister && (
-        <Alert message={t('login.autoRegister')} style={{ marginBottom: 24 }} />
-      )}
-      {formItems.map(
-        (item) =>
-          !item.hide && (
-            <Form.Item key={item.name} name={item.name} rules={item.rules}>
-              {item.component}
-            </Form.Item>
-          )
-      )}
-
-      <LoginFormFooter
-        needRegister
-        needRestPwd
-        loading={loading}
-      ></LoginFormFooter>
-    </Form>
-  )
-})