@authing/react-ui-components 3.0.1-beta.4 → 3.0.1-rc.3

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

@@ -0,0 +1,53 @@
+import React, { FC } from 'react'
+
+import { Button, Checkbox, Form } from 'antd'
+import { CopyAbleText } from '../../../../common/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/src/components/AuthingGuard/Forms/MfaResetCodeForm/index.tsx

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

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

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

@@ -0,0 +1,261 @@
+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 '../../api/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>
+  )
+})

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

@@ -0,0 +1,133 @@
+import React, { forwardRef, useImperativeHandle, useState } from 'react'
+import { FormInstance, Rule } from 'antd/lib/form'
+import { Alert, Form, Input, message } from 'antd'
+import { UserOutlined, SafetyOutlined } from '@ant-design/icons'
+
+import {
+  getRequiredRules,
+  getUserRegisterParams,
+  VALIDATE_PATTERN,
+} from '../../../../utils'
+import { useGuardContext } from '../../../../context/global/context'
+import {
+  LoginMethods,
+  PhoneCodeLoginFormProps,
+} from '../../../../components/AuthingGuard/types'
+import { SendPhoneCode } from '../../../../components/AuthingGuard/Forms/SendPhoneCode'
+import { LoginFormFooter } from '../../../../components/AuthingGuard/Forms/LoginFormFooter'
+import { useTranslation } from 'react-i18next'
+
+export const PhoneCodeLoginForm = forwardRef<
+  FormInstance,
+  PhoneCodeLoginFormProps
+>(({ onSuccess, onFail, onValidateFail }, ref) => {
+  const {
+    state: { authClient, config, guardEvents },
+  } = useGuardContext()
+  const { t } = useTranslation()
+
+  const rulesMap: Record<string, Rule[]> = {
+    phone: getRequiredRules(t('login.inputPhone')).concat({
+      pattern: VALIDATE_PATTERN.phone,
+      message: t('common.phoneFormateError'),
+    }),
+    code: getRequiredRules(t('common.inputVerifyCode')),
+  }
+
+  const [rawForm] = Form.useForm()
+
+  const [phone, setPhone] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  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.PhoneCode,
+            data: {
+              phone: values.phone,
+              code: values.code,
+            },
+          },
+          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 { phone, code } = values
+      const user = await authClient.loginByPhoneCode(phone, code, {
+        params: getUserRegisterParams(),
+      })
+      onSuccess && onSuccess(user)
+    } catch (error) {
+      onFail && onFail(error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useImperativeHandle(ref, () => rawForm)
+
+  return (
+    <Form
+      form={rawForm}
+      onSubmitCapture={() => setLoading(true)}
+      onFinishFailed={onFinishFailed}
+      onFinish={onFinish}
+    >
+      {config.autoRegister && (
+        <Alert
+          message={t('login.phoneAutoRegister')}
+          style={{ marginBottom: 24 }}
+        />
+      )}
+      <Form.Item name="phone" rules={rulesMap.phone}>
+        <Input
+          autoComplete="tel"
+          onChange={(e) => {
+            setPhone(e.target.value)
+          }}
+          size="large"
+          placeholder={t('login.inputPhone')}
+          prefix={<UserOutlined style={{ color: '#ddd' }} />}
+        />
+      </Form.Item>
+      <Form.Item name="code" rules={rulesMap.code}>
+        <Input
+          size="large"
+          placeholder={t('common.inputFourVerifyCode', {
+            length: 4,
+          })}
+          prefix={<SafetyOutlined style={{ color: '#ddd' }} />}
+          suffix={<SendPhoneCode phone={phone} />}
+        />
+      </Form.Item>
+
+      <LoginFormFooter
+        needRestPwd
+        needRegister
+        loading={loading}
+      ></LoginFormFooter>
+    </Form>
+  )
+})