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

package/components/Login/socialLogin/index.tsx

@@ -1,407 +0,0 @@
-import { Button, message, Space, Tooltip } from 'antd'
-import Avatar from 'antd/lib/avatar/avatar'
-import { Protocol, SocialConnectionProvider } from 'authing-js-sdk'
-import { Lang } from 'authing-js-sdk/build/main/types'
-import qs from 'qs'
-import React, { useEffect } from 'react'
-import { useTranslation } from 'react-i18next'
-import shortid from 'shortid'
-import { i18n } from '../../_utils/locales'
-import { isWechatBrowser, popupCenter } from '../../_utils'
-import { useGuardHttp } from '../../_utils/guradHttp'
-import {
-  ApplicationConfig,
-  IAzureAdConnectionConfig,
-  ICasConnectionConfig,
-  IOAuthConnectionConfig,
-  ISamlConnectionConfig,
-  OIDCConnectionConfig,
-  SocialConnectionItem,
-} from '../../AuthingGuard/api'
-import {
-  APP_MFA_CODE,
-  HIDE_SOCIALS,
-  OTP_MFA_CODE,
-} from '../../AuthingGuard/constants'
-import { useScreenSize } from '../../AuthingGuard/hooks/useScreenSize'
-import { useAuthClient } from '../../Guard/authClient'
-import { IconFont } from '../../IconFont'
-import { LoginConfig } from '../props'
-import './style.less'
-
-export interface SocialLoginProps {
-  appId: string
-  config: LoginConfig
-  onLogin: any
-}
-
-export const SocialLogin: React.FC<SocialLoginProps> = ({
-  appId,
-  config,
-  onLogin: onGuardLogin,
-}) => {
-  const noLoginMethods = !config.loginMethods.length
-
-  const userPoolId = config.__publicConfig__?.userPoolId
-
-  const publicConfig = config.__publicConfig__
-
-  const { t } = useTranslation()
-
-  const { post } = useGuardHttp()
-
-  const [screenSize] = useScreenSize()
-
-  const authClient = useAuthClient()
-
-  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)
-          // TODO
-          return
-        }
-      } catch (e) {
-        // do nothing...
-      }
-
-      if (code !== undefined) {
-        if (code === 200) {
-          localStorage.setItem('_authing_token', data?.token)
-          //   onSuccess(data)
-          // TODO
-        } else {
-          message.error(errMsg)
-        }
-      }
-    }
-    window.addEventListener('message', onMessage)
-    return () => {
-      window.removeEventListener('message', onMessage)
-    }
-  }, [])
-
-  let enterpriseConnectionObjs: ApplicationConfig['identityProviders']
-
-  if (config.enterpriseConnections) {
-    enterpriseConnectionObjs =
-      config.__publicConfig__?.identityProviders?.filter?.((item) =>
-        config.enterpriseConnections!.includes(item.identifier)
-      ) || []
-  } else {
-    enterpriseConnectionObjs = config.__publicConfig__?.identityProviders || []
-  }
-
-  const idpButtons = 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="g2-guard-third-login-btn"
-          block
-          size="large"
-          icon={<Avatar size={20} src={i.logo} style={{ marginRight: 8 }} />}
-          onClick={async () => {
-            await 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="g2-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="g2-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="g2-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="g2-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
-    }
-  })
-
-  let socialConnectionObjs: SocialConnectionItem[]
-
-  if (!config.socialConnections) {
-    socialConnectionObjs = [...(publicConfig?.socialConnections || [])]
-  } else {
-    const socials = config.socialConnections
-    socialConnectionObjs =
-      publicConfig?.socialConnections?.filter?.((item) =>
-        socials.includes(item.provider)
-      ) ?? []
-  }
-
-  // 某些社会化登录会在 tabs 中显示，或者无法在 Guard 中使用，所以底部不显示了
-  socialConnectionObjs = socialConnectionObjs?.filter(
-    (item) => !HIDE_SOCIALS.includes(item.provider)
-  )
-
-  const socialLoginButtons = 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) {
-            // TODO
-            // onSuccess(user)
-            onGuardLogin(200, user)
-          },
-          onError(code, msg) {
-            try {
-              const parsedMsg = JSON.parse(msg)
-              const {
-                code: authingCode,
-                message: authingMessage,
-                data: authingData,
-              } = parsedMsg
-              // if ([OTP_MFA_CODE, APP_MFA_CODE].includes(authingCode)) {
-              //   // TODO
-              //   onGuardLogin(authingCode, authingData, authingMessage)
-              //   return
-              // }
-              onGuardLogin(authingCode, authingData, authingMessage)
-            } catch (e) {
-              // do nothing...
-            }
-
-            message.error(msg)
-          },
-          authorization_params,
-        })
-      }
-
-      const shape = config.socialConnectionsBtnShape
-
-      if (shape === 'button') {
-        return (
-          <Button
-            key={item.provider}
-            block
-            size="large"
-            className="g2-guard-third-login-btn"
-            icon={
-              <IconFont
-                type={`${iconType}-fill`}
-                style={{ fontSize: 20, marginRight: 8 }}
-              />
-            }
-            onClick={onLogin}
-            style={{
-              marginBottom: 8,
-            }}
-          >
-            {i18n.language === 'zh-CN'
-              ? item.name
-              : item.name_en ?? item.provider}
-          </Button>
-        )
-      } else if (shape === 'icon') {
-        return (
-          <Tooltip
-            key={item.provider}
-            title={item.tooltip?.[i18n.language as Lang] || item.name}
-          >
-            <div className="g2-social-login-item" onClick={onLogin}>
-              <IconFont type={`${iconType}-fill`} />
-            </div>
-          </Tooltip>
-        )
-      } else {
-        return noLoginMethods ? (
-          <Button
-            key={item.provider}
-            block
-            size="large"
-            className="g2-guard-third-login-btn"
-            icon={
-              <IconFont
-                type={`${iconType}-fill`}
-                style={{ fontSize: 20, marginRight: 8 }}
-              />
-            }
-            onClick={onLogin}
-          >
-            {i18n.language === 'zh-CN'
-              ? item.name
-              : item.name_en ?? item.provider}
-          </Button>
-        ) : (
-          <Tooltip
-            key={item.provider}
-            title={item.tooltip?.[i18n.language as Lang] || item.name}
-          >
-            <div className="g2-social-login-item" onClick={onLogin}>
-              <IconFont type={`${iconType}-fill`} />
-            </div>
-          </Tooltip>
-        )
-      }
-    })
-  const idp =
-    enterpriseConnectionObjs.length > 0 ? (
-      <>
-        {!noLoginMethods && <div className="g2-social-login-title">OR</div>}
-        <div className="g2-social-login-list">{idpButtons}</div>
-      </>
-    ) : null
-
-  // let socialLogin
-  // const shape = config.socialConnectionsBtnShape
-
-  const socialLogin =
-    socialLoginButtons.length > 0 && noLoginMethods ? (
-      <Space
-        size={12}
-        className="g2-guard-full-width-space no-login-methods"
-        direction="vertical"
-      >
-        {socialLoginButtons}
-      </Space>
-    ) : (
-      socialLoginButtons.length > 0 && (
-        <>
-          <div className="g2-social-login-title">
-            {t('login.thridAccLogin')}
-          </div>
-          <div className="g2-social-login-list">{socialLoginButtons}</div>
-        </>
-      )
-    )
-
-  return (
-    <>
-      {!noLoginMethods && (
-        <div
-          style={{
-            flex: 1,
-            minHeight: 47,
-          }}
-        />
-      )}
-      <Space
-        size={12}
-        direction="vertical"
-        className="g2-guard-full-width-space"
-      >
-        {idp}
-        {socialLogin}
-      </Space>
-    </>
-  )
-}

package/components/Login/socialLogin/style.less

@@ -1,69 +0,0 @@
-.g2-guard-full-width-space {
-  width: 100%;
-}
-
-.no-login-methods {
-  padding: 38px;
-}
-
-.g2-guard-third-login-btn {
-  display: flex !important;
-
-  border: none !important;
-  background-color: #f5f6f7 !important;
-  border-radius: 4px !important;
-  color: #282d3c !important;
-  font-size: 14px !important;
-
-  justify-content: center;
-  align-items: center;
-}
-
-.g2-social-login-item {
-  display: inline-flex;
-  margin: 12px;
-  width: 56px;
-  height: 48px;
-  background-color: #f5f6f7;
-  border-radius: 4px;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-  user-select: none;
-
-  .g2-icon {
-    font-size: 24px;
-    transition: color 0.3s ease-in-out;
-  }
-
-  &:hover {
-    background: rgba(84, 89, 104, 0.2);
-  }
-}
-
-.g2-social-login-title {
-  text-align: center;
-  font-size: 14px;
-  color: #c8c9cc;
-}
-
-.g2-social-login-title::before,
-.g2-social-login-title::after {
-  content: '——';
-  color: #eeeeee;
-  margin: 0 11px;
-}
-
-.g2-social-login-list {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  padding: 0 35px;
-}
-
-.authing-ant-avatar > img {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}

package/components/Login/styles.less

@@ -1,53 +0,0 @@
-.g2-qrcode-switch {
-  position: absolute;
-  display: flex;
-  right: 16px;
-
-  .switch-text {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: rgba(84, 89, 104, 0.1);
-    height: 26px;
-    margin-right: 4px;
-    font-size: 12px;
-    padding: 0 12px;
-    border-radius: 4px;
-    color: #545968;
-  }
-  .switch-img {
-    &:hover {
-      .imgae-mask {
-        border-width: 0;
-        right: 50px;
-        top: 50px;
-      }
-    }
-  }
-  .imgae-mask {
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 50px 0 0 50px;
-    border-color: transparent transparent transparent #fff;
-    position: absolute;
-    right: 0;
-    top: 0;
-    transition: 0.2s all;
-  }
-  .qrcode-switch-image {
-    // width: 50px;
-    // height: 50px;
-    font-size: 50px;
-    color: #396aff;
-    cursor: pointer;
-  }
-}
-
-.authing-g2-login-app-qrcode {
-  min-height: 288px;
-  height: 300px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}

package/components/MFA/VerifyCodeInput/VerifyCodeFormItem.tsx

@@ -1,41 +0,0 @@
-import Form, { FormItemProps } from 'antd/lib/form'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-
-export interface VerifyCodeFormItemProps extends FormItemProps {
-  codeLength: number
-  ruleKeyword?: string
-}
-
-export const VerifyCodeFormItem: React.FC<VerifyCodeFormItemProps> = (
-  props
-) => {
-  const { t } = useTranslation()
-  const {
-    codeLength,
-    ruleKeyword = t('common.totpCode'),
-    ...formItemProps
-  } = props
-  return (
-    <Form.Item
-      name="mfaCode"
-      className="g2-mfa-totp-verify-input"
-      // validateTrigger={'onBlur'}
-      rules={[
-        {
-          validator(_, value: string[]) {
-            if ((value ?? []).join('').length !== codeLength) {
-              return Promise.reject(
-                t('common.isMissing', {
-                  name: ruleKeyword,
-                })
-              )
-            }
-            return Promise.resolve()
-          },
-        },
-      ]}
-      {...formItemProps}
-    />
-  )
-}

package/components/MFA/VerifyCodeInput/index.tsx

@@ -1,145 +0,0 @@
-import { Divider, Input } from 'antd'
-import React, {
-  FC,
-  Fragment,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react'
-import './style.less'
-
-interface VerifyCodeInputProps extends React.HTMLAttributes<HTMLDivElement> {
-  length?: number
-  size?: string
-  gutter?: string
-  onEenter?: Function
-  showDivider?: boolean
-  onChange?: any
-  value?: Array<number | string>
-}
-
-export const VerifyCodeInput: FC<VerifyCodeInputProps> = ({
-  length = 4,
-  size = '46px',
-  gutter = length > 4 ? '14px' : '24px',
-  className,
-  onEenter,
-  showDivider,
-  onChange,
-  value,
-  ...rest
-}) => {
-  const inputRef = useRef<any[]>([])
-
-  const codeInputRef = useRef<HTMLDivElement>(null)
-
-  const [verifyCode, setVerifyCode] = useState(value ?? [])
-
-  const handleChange = useCallback(
-    (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)
-      onChange?.(codes)
-
-      if (val && inputRef.current[index + 1]) {
-        inputRef.current[index + 1].focus()
-      }
-    },
-    [verifyCode, onChange]
-  )
-
-  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:
-        onEenter?.()
-        break
-      default:
-        break
-    }
-  }
-
-  useEffect(() => {
-    const el = codeInputRef.current
-
-    const pasteEvent = (e: ClipboardEvent) => {
-      e.preventDefault()
-      e.stopPropagation()
-
-      let paste = e.clipboardData?.getData('text')
-
-      if (paste && !isNaN(parseInt(paste))) {
-        if (paste.length < length) {
-          const data = verifyCode.map((_i, index) => paste?.[index] ?? '')
-          setVerifyCode(data)
-          onChange?.(data)
-          inputRef.current[paste.length].focus()
-        } else {
-          const data = paste.slice(0, length).split('')
-          setVerifyCode(data)
-          onChange?.(data)
-          inputRef.current[length - 1].focus()
-        }
-      }
-    }
-    el?.addEventListener('paste', pasteEvent)
-
-    return () => {
-      el?.removeEventListener('paste', pasteEvent)
-    }
-  }, [length, onChange, setVerifyCode, verifyCode])
-
-  return (
-    <div ref={codeInputRef} className="authing-g2-code-input" {...rest}>
-      {new Array(length).fill(0).map((_, index) => (
-        <Fragment key={index}>
-          <Input
-            ref={(el) => (inputRef.current[index] = el)}
-            style={{
-              width: size,
-              minWidth: size,
-              minHeight: size,
-              height: size,
-              lineHeight: size,
-              marginLeft: index === 0 ? 0 : gutter,
-            }}
-            className="authing-g2-code-input-item"
-            size="large"
-            autoFocus={index === 0}
-            onKeyDown={(evt) => handleKeyDown(evt, index)}
-            value={verifyCode[index]}
-            onChange={(evt) => {
-              evt.persist()
-              // @ts-ignore
-              if (evt.nativeEvent.isComposing) {
-                return
-              }
-              handleChange(evt.target.value, index)
-            }}
-            pattern="[0-9]*"
-            type="tel"
-          />
-          {showDivider && index === Math.floor(length / 2 - 1) && (
-            <Divider className="authing-g2-code-input-divider" />
-          )}
-        </Fragment>
-      ))}
-    </div>
-  )
-}