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

package/src/common/VerifyCodeInput/index.tsx

@@ -0,0 +1,76 @@
+import { Divider, Input } from 'antd'
+import React, { FC, Fragment, useRef } from 'react'
+
+import './style.less'
+
+interface VerifyCodeInputProps extends React.HTMLAttributes<HTMLDivElement> {
+  verifyCode: string[]
+  setVerifyCode: (code: string[]) => void
+  length?: number
+  onEnter?: Function
+}
+
+export const VerifyCodeInput: FC<VerifyCodeInputProps> = ({
+  verifyCode,
+  setVerifyCode,
+  length = 6,
+  onEnter,
+}) => {
+  const inputRef = useRef<any[]>([])
+
+  const handleChange = (val: string | undefined = '', index: number) => {
+    const num = parseInt(val)
+    if (isNaN(num)) {
+      val = ''
+    } else {
+      val = String(num)
+    }
+    const codes = [...verifyCode]
+    codes[index] = val.split('').slice(-1)[0] || ''
+    setVerifyCode(codes)
+
+    if (val && inputRef.current[index + 1]) {
+      inputRef.current[index + 1].focus()
+    }
+  }
+
+  const handleKeyDown = (evt: any, index: number) => {
+    const currentVal = verifyCode[index]
+
+    switch (evt.keyCode) {
+      case 8:
+        if (!currentVal && inputRef.current[index - 1]) {
+          handleChange('', index - 1)
+          inputRef.current[index - 1].focus()
+        }
+        break
+
+      case 13:
+        onEnter?.()
+        break
+      default:
+        break
+    }
+  }
+
+  return (
+    <div className="authing-code-input">
+      {new Array(length).fill(0).map((_, index) => (
+        <Fragment key={index}>
+          <Input
+            ref={(el) => (inputRef.current[index] = el)}
+            className="authing-code-input-item"
+            size="large"
+            autoFocus={index === 0}
+            onKeyDown={(evt) => handleKeyDown(evt, index)}
+            value={verifyCode[index]}
+            onChange={(evt) => handleChange(evt.target.value, index)}
+          />
+          {index === Math.floor(length / 2 - 1) && (
+            <Divider className="authing-code-input-divider" />
+          )}
+        </Fragment>
+      ))}
+    </div>
+  )
+}

package/src/components/AuthingGuard/AppMFALayout/index.tsx

@@ -0,0 +1,74 @@
+import { message } from 'antd'
+import { User } from 'authing-js-sdk'
+import React, { FC, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { AuthingDropdown } from 'src/common/AuthingDropdown'
+
+import {
+  EmailMfaVerifyForm,
+  SmsMfaVerifyForm,
+} from '../../../components/AuthingGuard/Forms'
+import { useGuardContext } from '../../../context/global/context'
+import { ApplicationMfaType, ApplicationMfaTypeLabel } from '../api'
+
+import './style.less'
+
+export interface MfaLayoutProps {}
+
+export const AppMfaLayout: FC<MfaLayoutProps> = () => {
+  const { t } = useTranslation()
+  const {
+    state: { guardEvents, authClient, mfaData },
+  } = useGuardContext()
+
+  const [type, setType] = useState(ApplicationMfaType.SMS)
+
+  const onSuccess = (user: User) => {
+    message.success(t('common.LoginSuccess'))
+    guardEvents.onLogin?.(user, authClient)
+  }
+
+  const onFail = (error: any) => {
+    guardEvents.onLoginError?.(error, authClient)
+  }
+
+  const formProps = {
+    onSuccess,
+    onFail,
+  }
+
+  const formMap = {
+    [ApplicationMfaType.EMAIL]: <EmailMfaVerifyForm {...formProps} />,
+    [ApplicationMfaType.SMS]: <SmsMfaVerifyForm {...formProps} />,
+  }
+
+  const availableMfaType = mfaData.applicationMfa
+    ?.filter(
+      (item) =>
+        item.status && Object.keys(ApplicationMfaType).includes(item.mfaPolicy)
+    )
+    ?.sort((a, b) => a.sort - b.sort)
+    ?.map((item) => ({
+      label: ApplicationMfaTypeLabel()[item.mfaPolicy],
+      key: item.mfaPolicy,
+      onClick() {
+        setType(item.mfaPolicy)
+      },
+    }))
+
+  return (
+    <div className="authing-text-center">
+      {formMap[type]}
+      {(availableMfaType?.length || 0 > 1) && (
+        <AuthingDropdown
+          className="toggle-mfa-dropdown"
+          menus={availableMfaType!}
+        >
+          <span className="authing-toggle-mfa">
+            {t('login.otherVerifyWay')}
+          </span>
+        </AuthingDropdown>
+      )}
+    </div>
+  )
+}

package/src/components/AuthingGuard/CompleteUserInfoLayout/index.tsx

@@ -0,0 +1,29 @@
+import React, { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useGuardContext } from '../../../context/global/context'
+import { CompleteUserInfoForm } from '../Forms/CompleteUserInfoForm'
+
+import './style.less'
+
+export const CompleteUserInfoLayout: FC = () => {
+  const {
+    state: { guardTitle },
+  } = useGuardContext()
+
+  const { t } = useTranslation()
+  return (
+    <div>
+      <h2 className="authing-guard-complete-info-title">
+        {t('common.perfectUserInfo')}
+      </h2>
+
+      <p className="authing-guard-complete-info-msg">
+        {t('common.welcomeDoc', {
+          name: guardTitle,
+        })}
+      </p>
+
+      <CompleteUserInfoForm />
+    </div>
+  )
+}

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

@@ -0,0 +1,117 @@
+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 {
+  ADLoginFormProps,
+  LoginMethods,
+} from '../../../../components/AuthingGuard/types'
+import { LoginFormFooter } from '../../../../components/AuthingGuard/Forms/LoginFormFooter'
+import { useTranslation } from 'react-i18next'
+
+export const ADLoginForm = forwardRef<FormInstance, ADLoginFormProps>(
+  ({ onSuccess, onValidateFail, onFail }, ref) => {
+    const { t } = useTranslation()
+    const { state } = useGuardContext()
+    const { authClient, guardEvents } = state
+
+    const [loading, setLoading] = useState(false)
+
+    const onFinishFailed = (errorInfo: any) => {
+      setLoading(false)
+      onValidateFail && onValidateFail(errorInfo)
+    }
+
+    const [rawForm] = Form.useForm()
+
+    const onFinish = async (values: any) => {
+      if (guardEvents.onBeforeLogin) {
+        try {
+          const canLogin = await guardEvents.onBeforeLogin(
+            {
+              type: LoginMethods.AD,
+              data: {
+                identity: values.identity,
+                password: values.password,
+              },
+            },
+            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 user = await authClient.loginByAd(identity, password)
+        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 (_) {
+            // do nothing
+          }
+        }
+        onFail && onFail(error)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    useImperativeHandle(ref, () => rawForm)
+
+    return (
+      <Form
+        form={rawForm}
+        onSubmitCapture={() => setLoading(true)}
+        onFinishFailed={onFinishFailed}
+        onFinish={onFinish}
+      >
+        <Form.Item
+          name="identity"
+          rules={getRequiredRules(t('login.inputAdUsername'))}
+        >
+          <Input
+            autoComplete="email,username,tel"
+            size="large"
+            placeholder={t('login.inputAdUsername')}
+            prefix={<UserOutlined style={{ color: '#ddd' }} />}
+          />
+        </Form.Item>
+        <Form.Item
+          name="password"
+          rules={getRequiredRules(t('login.inputAdPwd'))}
+        >
+          <Input.Password
+            autoComplete="current-password"
+            size="large"
+            visibilityToggle={false}
+            placeholder={t('login.inputAdPwd')}
+            prefix={<LockOutlined style={{ color: '#ddd' }} />}
+          />
+        </Form.Item>
+        <LoginFormFooter loading={loading}></LoginFormFooter>
+      </Form>
+    )
+  }
+)

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

@@ -0,0 +1,81 @@
+import React, { FC, useState, useMemo, useEffect } from 'react'
+import { Space, Checkbox } from 'antd'
+import { Agreement } from '../../api'
+import { getClassnames } from '../../../../utils'
+import './style.less'
+
+export interface AgreementsProps {
+  value?: boolean
+  onChange?: (value: boolean) => void
+  style?: React.CSSProperties
+  agreements: Agreement[]
+  showError?: boolean
+}
+
+export const Agreements: FC<AgreementsProps> = ({
+  showError,
+  onChange = () => {},
+  style,
+  agreements,
+}) => {
+  const [acceptList, setAcceptList] = useState<(string | number)[]>([])
+
+  const toggleItemCheck = (id: string | number) => {
+    setAcceptList((prev) => {
+      if (prev.includes(id)) {
+        return prev.filter((item) => item !== id)
+      }
+      return [...prev, id]
+    })
+  }
+
+  /** 是否可以注册 */
+  const isAccept = useMemo(() => {
+    /** 所有必须勾选的都勾了就可以通过 */
+    return agreements
+      .filter((item) => item.required)
+      .every((item) => acceptList.includes(item.id))
+  }, [acceptList, agreements])
+
+  useEffect(() => {
+    onChange(isAccept)
+  }, [isAccept, onChange])
+
+  return (
+    <div
+      className={getClassnames([
+        'authing-agreements',
+        showError && 'authing-agreements-error',
+      ])}
+    >
+      {agreements.map((item) => {
+        return (
+          <div
+            key={item.id}
+            style={{ ...style }}
+            className={getClassnames([
+              'authing-agreements-item',
+              item.required &&
+                !acceptList.includes(item.id) &&
+                'authing-agreements-item-invalid',
+            ])}
+            onClick={() => toggleItemCheck(item.id)}
+          >
+            <Space align="start" size={5}>
+              <Checkbox
+                className="authing-agreements-checkbox"
+                checked={acceptList.includes(item.id)}
+              />
+              <div
+                className="authing-agreements-item-content"
+                dangerouslySetInnerHTML={{
+                  __html: item.title,
+                }}
+              ></div>
+            </Space>
+          </div>
+        )
+      })}
+    </div>
+  )
+}

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

@@ -0,0 +1,139 @@
+import { Button, Form, Input, message, Spin } from 'antd'
+import { useForm } from 'antd/lib/form/Form'
+import React, { FC, useEffect, useState } from 'react'
+import { useGuardContext } from '../../../../context/global/context'
+import { User } from 'authing-js-sdk'
+import { UploadImage } from '../UploadImage'
+import { requestClient } from '../../api/http'
+import { CompleteUserInfoFormProps } from '../../types'
+import { useTranslation } from 'react-i18next'
+import { i18n } from '../../locales'
+
+export const CompleteUserInfoForm: FC<CompleteUserInfoFormProps> = ({
+  onSuccess,
+}) => {
+  const { t } = useTranslation()
+  const [rawForm] = useForm()
+  const [submitting, setSubmitting] = useState(false)
+
+  const [loading, setLoading] = useState(false)
+
+  const {
+    state: { config, authClient, guardEvents, userPoolId },
+  } = useGuardContext()
+
+  const { extendsFields } = config
+
+  const [, setUser] = useState<User | null>()
+  const [definitions, setDefinitions] = useState<any[]>([])
+
+  const onFinish = async (values: any) => {
+    const internalFields: any = {}
+    const userFields: any[] = []
+    Object.entries(values).forEach(([key, value]) => {
+      const [type, nameOrId] = key.split(' ')
+      if (type === 'internal') {
+        internalFields[nameOrId] = value
+      } else if (type === 'user') {
+        userFields.push({ nameOrId, value })
+      }
+    })
+
+    const udfs = userFields.map(({ nameOrId, value }) => ({
+      definition: definitions.find((def) => def.id === nameOrId),
+      value,
+    }))
+
+    try {
+      const user = await authClient.updateProfile(internalFields)
+
+      setUser(user)
+
+      await requestClient.post(
+        `/api/v2/udfs/values`,
+        {
+          udfs,
+        },
+        {
+          headers: {
+            authorization: user?.token,
+            'x-authing-userpool-id': userPoolId,
+          },
+        }
+      )
+
+      message.success(t('common.saveSuccess'))
+      guardEvents.onRegisterInfoCompleted?.(user, udfs, authClient)
+      onSuccess?.(user)
+    } catch (e) {
+      guardEvents.onRegisterInfoCompletedError?.(e, udfs, authClient)
+      setSubmitting(false)
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  useEffect(() => {
+    setLoading(true)
+    ;(async () => {
+      const user = await authClient.getCurrentUser()
+      setUser(user)
+      const { data } = await requestClient.get<any>(
+        '/api/v2/udfs/definitions',
+        undefined,
+        {
+          headers: {
+            authorization: user?.token!,
+            'x-authing-userpool-id': userPoolId,
+          },
+        }
+      )
+      setDefinitions(data)
+      setLoading(false)
+    })()
+  }, [authClient, userPoolId])
+
+  const onFinishFailed = () => {}
+
+  const INPUT_MAP: Record<string, React.ReactNode | undefined> = {
+    image: <UploadImage />,
+  }
+
+  const formFields = extendsFields.map((def) => {
+    const key = `${def.type} ${def.type === 'internal' ? def.name : def.id}`
+
+    const label = i18n.language === 'zh-CN' ? def.label : def.name
+
+    return (
+      <Form.Item key={key} name={key} label={label} style={{ marginBottom: 8 }}>
+        {INPUT_MAP[def.inputType] || (
+          <Input type={def.inputType} size="large" />
+        )}
+      </Form.Item>
+    )
+  })
+
+  return (
+    <Spin spinning={loading}>
+      <Form
+        layout="vertical"
+        form={rawForm}
+        onSubmitCapture={() => setSubmitting(true)}
+        onFinishFailed={onFinishFailed}
+        onFinish={onFinish}
+      >
+        {formFields}
+
+        <Button
+          size="large"
+          loading={submitting}
+          type="primary"
+          block
+          htmlType="submit"
+        >
+          {t('common.problem.form.submit')}
+        </Button>
+      </Form>
+    </Spin>
+  )
+}

package/src/components/AuthingGuard/Forms/EmailMfaVerifyForm/CheckEmailForm.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 { MFACheckEmailFormProps } from '../../types'
+
+import './style.less'
+import { VALIDATE_PATTERN } from '../../../../utils'
+import { useTranslation } from 'react-i18next'
+
+export const CheckEmailForm: FC<MFACheckEmailFormProps> = ({
+  onSuccess,
+  mfaToken,
+}) => {
+  const {
+    state: { authClient },
+  } = useGuardContext()
+
+  const { t } = useTranslation()
+
+  const [rawForm] = Form.useForm()
+
+  const [loading, setLoading] = useState(false)
+
+  const onFinish = async ({ email }: any) => {
+    try {
+      const bindable = await authClient.mfa.phoneOrEmailBindable({
+        mfaToken,
+        email,
+      })
+      if (!bindable) {
+        message.error(
+          t('common.unBindEmaileDoc', {
+            email: email,
+          })
+        )
+        return
+      }
+      onSuccess(email!)
+    } catch (e) {
+      // do nothing
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <>
+      <h3 className="authing-guard-mfa-title">{t('common.bindEmail')}</h3>
+      <p className="authing-guard-mfa-tips">{t('common.bindEmailDoc')}</p>
+      <Form
+        form={rawForm}
+        onSubmitCapture={() => setLoading(true)}
+        onFinish={onFinish}
+        onFinishFailed={() => setLoading(false)}
+      >
+        <Form.Item
+          name="email"
+          rules={[
+            {
+              required: true,
+              message: t('login.inputEmail'),
+            },
+            {
+              pattern: VALIDATE_PATTERN.email,
+              message: t('login.emailError'),
+            },
+          ]}
+        >
+          <Input placeholder={t('login.inputEmail')}></Input>
+        </Form.Item>
+
+        <Button
+          className="authing-guard-mfa-confirm-btn"
+          loading={loading}
+          block
+          htmlType="submit"
+          type="primary"
+          size="large"
+        >
+          {t('common.sure')}
+        </Button>
+      </Form>
+    </>
+  )
+}