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

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

@@ -1,50 +0,0 @@
-import { message } from 'antd'
-import React, { FC } from 'react'
-import { CommonMessage } from 'authing-js-sdk'
-
-import { SendCodeBtn } from './SendCodeBtn'
-import { validate } from '../../../_utils'
-import { useGuardContext } from '../../../context/global/context'
-
-import './style.less'
-import { useTranslation } from 'react-i18next'
-
-export interface SendPhoneCodeProps {
-  phone: string
-  onSend?: () => void
-  onError?: (error: CommonMessage) => void
-}
-
-export const SendPhoneCode: FC<SendPhoneCodeProps> = ({
-  phone,
-  onSend,
-  onError,
-}) => {
-  const { t } = useTranslation()
-  const {
-    state: { authClient },
-  } = useGuardContext()
-
-  return (
-    <SendCodeBtn
-      beforeSend={async () => {
-        if (!phone) {
-          message.error(t('login.inputPhone'))
-          return false
-        }
-        if (!validate('phone', phone)) {
-          message.error(t('common.phoneFormateError'))
-          return false
-        }
-        try {
-          await authClient.sendSmsCode(phone)
-          onSend?.()
-          return true
-        } catch (error) {
-          onError?.(error)
-          return false
-        }
-      }}
-    />
-  )
-}

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

@@ -1,26 +0,0 @@
-.authing-send-code-btn {
-  display: inline-block;
-  border: none;
-  background-color: transparent;
-  font-size: inherit;
-  color: #396aff;
-  cursor: pointer;
-  padding: 0;
-  user-select: none;
-  outline: none;
-}
-
-.authing-send-code-btn:focus {
-  outline: none;
-}
-
-.authing-send-code-btn[disabled] {
-  cursor: not-allowed;
-  filter: opacity(0.5);
-}
-
-@media only screen and (max-width: 719px) {
-  .authing-send-code-btn {
-    font-size: 14px;
-  }
-}

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

package/components/AuthingGuard/Forms/SmsMfaVerifyForm/VerifyCodeForm.tsx

@@ -1,113 +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 { SmsMFAVerifyFormProps } from '../../../../components/AuthingGuard/types'
-
-import './style.less'
-import { SendCodeBtn } from '../SendPhoneCode/SendCodeBtn'
-import { useTranslation } from 'react-i18next'
-
-const CODE_LEN = 4
-
-export const VerifyCodeForm: FC<SmsMFAVerifyFormProps> = ({
-  onSuccess,
-  onFail,
-  phone,
-  mfaToken,
-  sendCodeRef,
-}) => {
-  const {
-    state: { authClient },
-  } = useGuardContext()
-  const { t } = useTranslation()
-
-  const [rawForm] = Form.useForm()
-
-  const [MfaCode, setMFACode] = useState(new Array(CODE_LEN).fill(''))
-  const [loading, setLoading] = useState(false)
-  const [sending, setSending] = useState(false)
-  const [sent, setSent] = useState(false)
-
-  const onFinish = async (values: any) => {
-    try {
-      const user: User = await authClient.mfa.verifyAppSmsMfa({
-        mfaToken,
-        phone: phone!,
-        code: MfaCode.join(''),
-      })
-      onSuccess && onSuccess(user)
-    } catch (e) {
-      onFail?.(e)
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const sendVerifyCode = async () => {
-    setSending(true)
-    try {
-      await authClient.sendSmsCode(phone!)
-      setSent(true)
-      return true
-    } catch (e) {
-      return false
-    } finally {
-      setSending(false)
-    }
-  }
-
-  return (
-    <>
-      <h3 className="authing-guard-mfa-title">{t('login.inputPhoneCode')}</h3>
-      <p className="authing-guard-mfa-tips">
-        {sending
-          ? t('login.sendingVerifyCode')
-          : sent
-          ? `${t('login.verifyCodeSended')} ${phone}`
-          : t('login.clickSent')}
-      </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
-            length={CODE_LEN}
-            verifyCode={MfaCode}
-            setVerifyCode={setMFACode}
-          />
-        </Form.Item>
-        <SendCodeBtn btnRef={sendCodeRef} beforeSend={() => sendVerifyCode()} />
-
-        <Button
-          className="authing-guard-mfa-confirm-btn"
-          loading={loading}
-          block
-          htmlType="submit"
-          type="primary"
-          size="large"
-        >
-          {t('common.sure')}
-        </Button>
-      </Form>
-    </>
-  )
-}

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

@@ -1,40 +0,0 @@
-import React, { FC, useRef, useState } from 'react'
-import { useGuardContext } from '../../../context/global/context'
-import { CheckPhoneForm } from './CheckPhoneForm'
-import { VerifyCodeForm } from './VerifyCodeForm'
-import { SmsMFAFormProps } from '../../types'
-
-export const SmsMfaVerifyForm: FC<SmsMFAFormProps> = ({
-  onSuccess,
-  onFail,
-}) => {
-  const {
-    state: {
-      mfaData: { mfaToken, phone: userPhone },
-    },
-  } = useGuardContext()
-  const [phone, setPhone] = useState(userPhone)
-  const sendCodeRef = useRef<HTMLButtonElement>(null)
-
-  return (
-    <>
-      {phone ? (
-        <VerifyCodeForm
-          sendCodeRef={sendCodeRef}
-          onSuccess={onSuccess}
-          onFail={onFail}
-          phone={phone!}
-          mfaToken={mfaToken}
-        ></VerifyCodeForm>
-      ) : (
-        <CheckPhoneForm
-          mfaToken={mfaToken}
-          onSuccess={(phone) => {
-            setPhone(phone)
-            sendCodeRef.current?.click()
-          }}
-        ></CheckPhoneForm>
-      )}
-    </>
-  )
-}

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

@@ -1,3 +0,0 @@
-.authing-mfa-check-phone-from {
-  text-align: center;
-}

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

@@ -1,325 +0,0 @@
-import qs from 'qs'
-import shortid from 'shortid'
-import React, { FC, useEffect } from 'react'
-import { Button, Avatar, Space, Tooltip, message } from 'antd'
-
-import { isWechatBrowser, popupCenter } from '../../../_utils'
-import { useGuardContext } from '../../../context/global/context'
-import {
-  APP_MFA_CODE,
-  OTP_MFA_CODE,
-} from '../../../../components/AuthingGuard/constants'
-import {
-  Lang,
-  Protocol,
-  SocialAndIdpLoginProps,
-} from '../../../../components/AuthingGuard/types'
-import {
-  OIDCConnectionConfig,
-  ICasConnectionConfig,
-  ISamlConnectionConfig,
-  IAzureAdConnectionConfig,
-  IOAuthConnectionConfig,
-} from '../../../../components/AuthingGuard/api'
-import { requestClient } from '../../../_utils/http'
-
-import './style.less'
-import { IconFont } from '../../IconFont'
-import { useScreenSize } from '../../hooks/useScreenSize'
-import { SocialConnectionProvider } from 'authing-js-sdk'
-import { useTranslation } from 'react-i18next'
-import { i18n } from '../../../_utils/locales'
-
-export const SocialAndIdpLogin: FC<SocialAndIdpLoginProps> = ({
-  onFail = () => {},
-  onSuccess = () => {},
-}) => {
-  const {
-    state: { config, userPoolId, appId, authClient },
-  } = useGuardContext()
-  const { t } = useTranslation()
-
-  const noForm = !config.loginMethods?.length
-
-  const [screenSize] = useScreenSize()
-
-  useEffect(() => {
-    const onMessage = (evt: MessageEvent) => {
-      // TODO: event.origin是指发送的消息源，一定要进行验证！！！
-
-      const { code, message: errMsg, data, event } = evt.data
-
-      const { source, eventType } = event || {}
-
-      // 社会化登录是用 authing-js-sdk 实现的，不用再在这里回调了
-      if (source === 'authing' && eventType === 'socialLogin') {
-        return
-      }
-
-      try {
-        const parsedMsg = JSON.parse(errMsg)
-        const { code: authingCode } = parsedMsg
-        if ([OTP_MFA_CODE, APP_MFA_CODE].includes(authingCode)) {
-          onFail(parsedMsg)
-          return
-        }
-      } catch (e) {
-        // do nothing...
-      }
-
-      if (code !== undefined) {
-        if (code === 200) {
-          localStorage.setItem('_authing_token', data?.token)
-          onSuccess(data)
-        } else {
-          message.error(errMsg)
-        }
-      }
-    }
-    window.addEventListener('message', onMessage)
-    return () => {
-      window.removeEventListener('message', onMessage)
-    }
-  }, [onFail, onSuccess])
-
-  const idpButtons = config.enterpriseConnectionObjs.map((i) => {
-    if (i.protocol === Protocol.OIDC) {
-      const configItem = i.config as OIDCConnectionConfig
-      const state = shortid.generate()
-
-      const query = qs.stringify({
-        client_id: configItem.clientId,
-        redirect_uri: configItem.redirectUri,
-        scope: configItem.scopes,
-        response_type: configItem.responseType,
-        state,
-        nonce: shortid.generate(),
-      })
-      const url = `${configItem.authorizationEdpoint}?${query}`
-
-      return (
-        <Button
-          key={i.identifier}
-          className="authing-guard-third-login-btn"
-          block
-          size="large"
-          icon={<Avatar size={20} src={i.logo} style={{ marginRight: 8 }} />}
-          onClick={async () => {
-            await requestClient.post(
-              '/api/v2/connections/oidc/start-interaction',
-              {
-                state,
-                protocol: i.protocol,
-                userPoolId,
-                appId,
-                referer: window.location.href,
-                connection: { providerIentifier: i.identifier },
-              }
-            )
-            popupCenter(url)
-          }}
-        >
-          {t('login.loginBy', {
-            name: i.displayName,
-          })}
-        </Button>
-      )
-    } else if (i.protocol === Protocol.SAML) {
-      const config = i.config as ISamlConnectionConfig
-      return (
-        <Button
-          key={i.identifier}
-          className="authing-guard-third-login-btn"
-          block
-          size="large"
-          icon={<Avatar size={20} src={i.logo} style={{ marginRight: 8 }} />}
-          onClick={async () => {
-            popupCenter(config.samlRequest!)
-          }}
-        >
-          {t('login.loginBy', {
-            name: i.displayName,
-          })}
-        </Button>
-      )
-    } else if (i.protocol === Protocol.CAS) {
-      const config = i.config as ICasConnectionConfig
-
-      return (
-        <Button
-          key={i.identifier}
-          className="authing-guard-third-login-btn"
-          block
-          size="large"
-          icon={<Avatar size={20} src={i.logo} style={{ marginRight: 8 }} />}
-          onClick={async () => {
-            popupCenter(config.casConnectionLoginUrl!)
-          }}
-        >
-          {t('login.loginBy', {
-            name: i.displayName,
-          })}
-        </Button>
-      )
-    } else if (i.protocol === Protocol.OAUTH) {
-      const config = i.config as IOAuthConnectionConfig
-
-      return (
-        <Button
-          key={i.identifier}
-          className="authing-guard-third-login-btn"
-          block
-          size="large"
-          icon={<Avatar size={20} src={i.logo} style={{ marginRight: 8 }} />}
-          onClick={async () => {
-            popupCenter(config.authUrl!)
-          }}
-        >
-          {t('login.loginBy', {
-            name: i.displayName,
-          })}
-        </Button>
-      )
-    } else if (i.protocol === Protocol.AZURE_AD) {
-      const configItem = i.config as IAzureAdConnectionConfig
-      return (
-        <Button
-          key={i.identifier}
-          className="authing-guard-third-login-btn"
-          block
-          size="large"
-          icon={<Avatar size={20} src={i.logo} style={{ marginRight: 8 }} />}
-          onClick={async () => {
-            popupCenter(configItem.authorizationUrl)
-          }}
-        >
-          {t('login.loginBy', {
-            name: i.displayName,
-          })}
-        </Button>
-      )
-    } else {
-      return null
-    }
-  })
-
-  const socialLoginButtons = config.socialConnectionObjs
-    .filter((item) =>
-      isWechatBrowser()
-        ? item.provider === SocialConnectionProvider.WECHATMP
-        : item.provider !== SocialConnectionProvider.WECHATMP
-    )
-    .map((item) => {
-      const iconType = `authing-${item.provider.replace(/:/g, '-')}`
-
-      const authorization_params: Record<string, any> = {}
-      if (item.provider === SocialConnectionProvider.BAIDU) {
-        authorization_params.display = screenSize
-      }
-
-      const onLogin = () => {
-        authClient.social.authorize(item.provider, {
-          onSuccess(user) {
-            onSuccess(user)
-          },
-          onError(code, msg) {
-            try {
-              const parsedMsg = JSON.parse(msg)
-              const { code: authingCode } = parsedMsg
-              if ([OTP_MFA_CODE, APP_MFA_CODE].includes(authingCode)) {
-                onFail(parsedMsg)
-                return
-              }
-            } catch (e) {
-              // do nothing...
-            }
-
-            message.error(msg)
-          },
-          authorization_params,
-        })
-      }
-
-      return noForm ? (
-        <Button
-          key={item.provider}
-          block
-          size="large"
-          className="authing-guard-third-login-btn"
-          icon={
-            <IconFont
-              type={iconType}
-              style={{ fontSize: 20, marginRight: 8 }}
-            />
-          }
-          onClick={onLogin}
-        >
-          {item.tooltip?.[i18n.language as Lang] || item.name}
-        </Button>
-      ) : (
-        <Tooltip
-          key={item.provider}
-          title={item.tooltip?.[i18n.language as Lang] || item.name}
-        >
-          <div className="authing-social-login-item" onClick={onLogin}>
-            <IconFont type={iconType} />
-          </div>
-        </Tooltip>
-      )
-    })
-
-  const idp =
-    config.enterpriseConnectionObjs.length > 0 ? (
-      <>
-        {!noForm && <div className="authing-social-login-title">OR</div>}
-        <Space
-          size={12}
-          className="authing-guard-full-width-space"
-          direction="vertical"
-        >
-          {idpButtons}
-        </Space>
-      </>
-    ) : null
-
-  const socialLogin =
-    socialLoginButtons.length > 0 && noForm ? (
-      <Space
-        size={12}
-        className="authing-guard-full-width-space"
-        direction="vertical"
-      >
-        {socialLoginButtons}
-      </Space>
-    ) : (
-      socialLoginButtons.length > 0 && (
-        <>
-          <div className="authing-social-login-title">
-            {t('login.thridAccLogin')}
-          </div>
-          <div className="authing-social-login-list">{socialLoginButtons}</div>
-        </>
-      )
-    )
-
-  return (
-    <>
-      {!noForm && (
-        <div
-          style={{
-            flex: 1,
-            minHeight: 26,
-          }}
-        ></div>
-      )}
-      <Space
-        size={12}
-        direction="vertical"
-        className="authing-guard-full-width-space"
-      >
-        {idp}
-        {socialLogin}
-      </Space>
-    </>
-  )
-}