@authing/react-ui-components 3.0.0-alpha → 3.0.0-rc.3

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

@@ -1,166 +0,0 @@
-import { Input, Form, message } from 'antd'
-import { FormInstance } from 'antd/lib/form'
-import { UserOutlined, LockOutlined } from '@ant-design/icons'
-import React, { forwardRef, useImperativeHandle, useState } from 'react'
-
-import { getRequiredRules } from '../../../_utils'
-import { useGuardContext } from '../../../context/global/context'
-import { NEED_CAPTCHA } from '../../../../components/AuthingGuard/constants'
-import {
-  LoginMethods,
-  PasswordLoginFormProps,
-} from '../../../../components/AuthingGuard/types'
-import { LoginFormFooter } from '../../../../components/AuthingGuard/Forms/LoginFormFooter'
-import { useTranslation } from 'react-i18next'
-
-export const LdapLoginForm = forwardRef<FormInstance, PasswordLoginFormProps>(
-  ({ onSuccess, onValidateFail, onFail }, ref) => {
-    const { t } = useTranslation()
-
-    const { state } = useGuardContext()
-    const { config, authClient, realHost, guardEvents } = state
-    const autoRegister = config.autoRegister
-
-    const [rawForm] = Form.useForm()
-
-    const [needCaptcha, setNeedCaptcha] = useState(false)
-    const [verifyCodeUrl, setVerifyCodeUrl] = useState<string | null>(null)
-    const [loading, setLoading] = useState(false)
-
-    const captchaUrl = `${realHost}/api/v2/security/captcha`
-    const getCaptchaUrl = () => `${captchaUrl}?r=${+new Date()}`
-
-    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.LDAP,
-              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 {
-        const identity = values.identity && values.identity.trim()
-        const password = values.password && values.password.trim()
-        const captchaCode = values.captchaCode && values.captchaCode.trim()
-
-        const user = await authClient.loginByLdap(identity, password, {
-          autoRegister,
-          captchaCode,
-        })
-        onSuccess && onSuccess(user)
-      } catch (error) {
-        if (typeof error.message === 'string') {
-          // js sdk httpclient 的报错，这里只有一种情况就是用户开启了 mfa 的报错
-          try {
-            const errorData = JSON.parse(error.message)
-            onFail && onFail(errorData)
-            return
-          } catch (_) {}
-        }
-
-        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="ldap,username"
-            size="large"
-            placeholder={t('login.inputLdapUsername')}
-            prefix={<UserOutlined style={{ color: '#ddd' }} />}
-          />
-        ),
-        name: 'identity',
-        rules: getRequiredRules(t('common.LDAPAccountNotNull')),
-      },
-      {
-        component: (
-          <Input.Password
-            size="large"
-            placeholder={t('login.inputLdapPwd')}
-            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}
-      >
-        {formItems.map(
-          (item) =>
-            !item.hide && (
-              <Form.Item key={item.name} name={item.name} rules={item.rules}>
-                {item.component}
-              </Form.Item>
-            )
-        )}
-
-        <LoginFormFooter loading={loading}></LoginFormFooter>
-      </Form>
-    )
-  }
-)

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

@@ -1,76 +0,0 @@
-import { Button, Divider } 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 LoginFormFooterProps {
-  loading: boolean
-  needRestPwd?: boolean
-  needRegister?: boolean
-}
-
-export const LoginFormFooter: FC<LoginFormFooterProps> = ({
-  loading,
-  needRestPwd = false,
-  needRegister = false,
-}) => {
-  const { t } = useTranslation()
-
-  const {
-    setValue,
-    state: { config },
-  } = useGuardContext()
-
-  return (
-    <>
-      <Button
-        htmlType="submit"
-        className="authing-guard-form-submit-btn"
-        size="large"
-        type="primary"
-        loading={loading}
-        block
-      >
-        {loading
-          ? t(
-              `map.${config.text?.loginBtn?.loading}`,
-              config.text?.loginBtn?.loading
-            )
-          : t(
-              `map.${config.text?.loginBtn?.normal}`,
-              config.text?.loginBtn?.normal
-            )}
-      </Button>
-
-      <div className="authing-guard-form-actions">
-        {needRestPwd && !config.disableResetPwd && (
-          <Button
-            onClick={() => setValue('guardScenes', GuardScenes.RestPassword)}
-            className="authing-guard-text-btn"
-            type="text"
-          >
-            {t('common.hasForgotPwd')}
-          </Button>
-        )}
-        {needRestPwd &&
-          needRegister &&
-          !config.disableResetPwd &&
-          !config.disableRegister && <Divider type="vertical" />}
-        {needRegister && !config.disableRegister && (
-          <div className="authing-guard-tip-btn-comb">
-            <span className="authing-guard-tip">{t('common.noAccYet')}</span>
-            <Button
-              onClick={() => setValue('guardScenes', GuardScenes.Register)}
-              className="authing-guard-text-btn authing-guard-to-register-btn"
-              type="text"
-            >
-              {t('common.registerImmediate')}
-            </Button>
-          </div>
-        )}
-      </div>
-    </>
-  )
-}

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

@@ -1,6 +0,0 @@
-@media only screen and (max-width: 719px) {
-  .authing-guard-form-submit-btn {
-    margin-top: 56px;
-    font-size: 14px;
-  }
-}

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;
-}