@authing/react-ui-components 3.0.2-beta.9 → 3.1.1-rc.1

package/src/common/VerifyCodeInput/style.less

@@ -0,0 +1,24 @@
+.authing-code-input-item {
+  text-align: center;
+  width: 40px;
+  min-width: 40px;
+  min-height: 40px;
+  height: 40px;
+  line-height: 40px;
+  &:not(:first-child) {
+    margin-left: 18px;
+  }
+  input {
+    text-align: center;
+  }
+}
+.authing-code-input-divider {
+  width: 14px;
+  min-width: 14px;
+  max-width: 14px;
+  margin-left: 18px;
+}
+.authing-code-input {
+  display: flex;
+  align-items: center;
+}

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/AppMFALayout/style.less

@@ -0,0 +1,12 @@
+.authing-toggle-mfa,
+.toggle-mfa-dropdown .authing-dropdown-icon {
+  color: #999;
+}
+
+.toggle-mfa-dropdown {
+  margin-top: 30px;
+  align-self: center;
+  .authing-dropdown-menu-item {
+    white-space: nowrap;
+  }
+}

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/CompleteUserInfoLayout/style.less

@@ -0,0 +1,8 @@
+.authing-guard-complete-info-title {
+  font-size: 20px;
+  text-align: center;
+  color: #333;
+}
+.authing-guard-complete-info-msg {
+  color: #b2b2b2;
+}

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/Agreements/style.less

@@ -0,0 +1,44 @@
+.authing-agreements {
+  margin-top: 20px;
+  margin-bottom: 20px;
+  &.authing-agreements-error {
+    .authing-agreements-item-invalid {
+      color: #ff4d4f;
+      a {
+        color: #ff4d4f;
+      }
+      :global(.ant-checkbox-inner) {
+        border-color: #ff4d4f;
+      }
+    }
+  }
+}
+
+.authing-agreements-item {
+  color: #999999;
+  user-select: none;
+  cursor: pointer;
+  font-size: 12px;
+  &:not(:first-child) {
+    margin-top: 4px;
+  }
+  p {
+    margin-bottom: 0;
+    display: inline-block;
+  }
+}
+
+.authing-agreements-checkbox {
+  margin-bottom: 2px;
+  :global(.ant-checkbox-inner) {
+    width: 14px;
+    height: 14px;
+    &::after {
+      left: 20%;
+    }
+  }
+}
+
+.authing-agreements-item-content {
+  line-height: 23px;
+}

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>
+    </>
+  )
+}