@authing/react-ui-components 3.1.1-rc.8 → 3.1.2

package/src/common/VerifyCodeInput/style.less

@@ -1,24 +0,0 @@
-.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

@@ -1,74 +0,0 @@
-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

@@ -1,12 +0,0 @@
-.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

@@ -1,29 +0,0 @@
-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

@@ -1,8 +0,0 @@
-.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

@@ -1,117 +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 {
-  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

@@ -1,81 +0,0 @@
-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

@@ -1,44 +0,0 @@
-.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

@@ -1,139 +0,0 @@
-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

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