@authing/react-ui-components 3.0.2-beta.7 → 3.0.2-beta.9

package/components/AuthingTabs/index.tsx

@@ -1,98 +0,0 @@
-import { Button } from 'antd'
-import React, { FC, useMemo } from 'react'
-import { EllipsisOutlined } from '@ant-design/icons'
-
-import { getClassnames } from '../_utils'
-
-import './style.less'
-
-export interface AuthingTabsProps extends React.HTMLAttributes<HTMLDivElement> {
-  activeKey?: string
-  onTabClick: (key: string) => void
-  showLen?: number
-  tabs: {
-    key: string
-    label: string
-    component: JSX.Element
-  }[]
-}
-
-export const AuthingTabs: FC<AuthingTabsProps> = ({
-  tabs,
-  showLen = 3,
-  className,
-  activeKey,
-  onTabClick,
-}) => {
-  const activeIndex = useMemo(
-    () => tabs.findIndex((item) => item.key === activeKey),
-    [tabs, activeKey]
-  )
-
-  const showTabs = useMemo(() => {
-    if (tabs.length <= showLen) {
-      return [...tabs]
-    }
-
-    let startIndex = Math.max(activeIndex - 1, 0)
-    if (startIndex + showLen > tabs.length - 1) {
-      startIndex = tabs.length - showLen
-    }
-
-    return tabs.slice(startIndex, startIndex + showLen)
-  }, [showLen, activeIndex, tabs])
-
-  const hideTabs = useMemo(() => {
-    const showKeys = showTabs.map((item) => item.key)
-    return tabs.filter((item) => !showKeys.find((key) => item.key === key))
-  }, [tabs, showTabs])
-
-  return (
-    <>
-      <div className={getClassnames(['authing-tabs', className])}>
-        <div
-          className={getClassnames([
-            'authing-tabs-inner',
-            Boolean(hideTabs.length) && 'authing-tabs-inner--more',
-          ])}
-        >
-          {showTabs.map((item, index) => (
-            <div
-              onClick={() => onTabClick(item.key)}
-              className={getClassnames([
-                'authing-tab-item',
-                activeKey === item.key && 'authing-tab-item__active',
-              ])}
-              key={item.key}
-            >
-              {item.label}
-            </div>
-          ))}
-        </div>
-        {Boolean(hideTabs.length) && (
-          <Button
-            className="authing-tabs-show-more"
-            type="text"
-            icon={<EllipsisOutlined />}
-          >
-            <ul className="authing-tabs-more-panel">
-              {hideTabs.map((item) => (
-                <li
-                  key={item.key}
-                  onClick={() => onTabClick(item.key)}
-                  className="authing-tabs-more-panel-item"
-                >
-                  {item.label}
-                </li>
-              ))}
-            </ul>
-          </Button>
-        )}
-      </div>
-
-      <div className="authing-tab-pane">
-        {tabs.find((item) => item.key === activeKey)?.component}
-      </div>
-    </>
-  )
-}

package/components/AuthingTabs/style.less

@@ -1,135 +0,0 @@
-.authing-tabs {
-  display: flex;
-  margin-bottom: 36px;
-  align-items: center;
-}
-.authing-tabs-inner {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  flex: 1;
-}
-.authing-tabs-inner--more {
-  box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);
-}
-.authing-tab-item {
-  color: #aeb9d4;
-  font-size: 16px;
-  transition: all 0.3s ease-in-out;
-  white-space: nowrap;
-  cursor: pointer;
-  position: relative;
-  height: 28px;
-  margin-right: 32px;
-  &:last-child {
-    margin-right: 12px;
-  }
-  &:only-child {
-    margin-right: 0;
-  }
-  &::after {
-    content: '';
-    width: 0;
-    height: 2px;
-    display: block;
-    position: absolute;
-    left: 50%;
-    bottom: -4px;
-    transform: translateX(-50%);
-    background-color: transparent;
-    transition: all 0.3s ease-in-out;
-  }
-}
-.authing-tab-item__active {
-  color: #396aff;
-  font-size: 18px;
-  &::after {
-    width: 26px;
-    background-color: #396aff;
-  }
-}
-.authing-tabs-show-more {
-  position: relative;
-  z-index: 2;
-  &.ant-btn {
-    padding: 0 12px;
-  }
-  &:hover,
-  &:focus,
-  &:active {
-    background-color: #fff;
-  }
-  &:hover {
-    .authing-tabs-more-panel {
-      height: auto;
-      opacity: 1;
-      padding: 4px 0;
-    }
-  }
-
-  &:after {
-    content: '';
-    display: block;
-    width: 100%;
-    height: 6px;
-    top: 100%;
-    left: 0;
-    position: absolute;
-  }
-}
-.authing-tabs-more-panel {
-  position: absolute;
-  box-sizing: border-box;
-  transition: all 0.3s;
-  height: 0;
-  opacity: 0;
-  right: 0;
-  top: 100%;
-  transform: translateY(6px);
-  background-color: #fff;
-  max-height: 200px;
-  margin: 0;
-  padding: 0;
-  overflow-x: hidden;
-  overflow-y: auto;
-  text-align: left;
-  list-style-type: none;
-  background-clip: padding-box;
-  border-radius: 2px;
-  outline: none;
-  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
-    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
-}
-.authing-tabs-more-panel-item {
-  min-width: 120px;
-  margin: 0;
-  padding: 5px 12px;
-  overflow: hidden;
-  color: rgba(0, 0, 0, 0.85);
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 22px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  cursor: pointer;
-  transition: all 0.3s;
-  &:hover {
-    background-color: #f5f5f5;
-  }
-}
-
-@media only screen and (max-width: 719px) {
-  .authing-tabs-inner {
-    justify-content: flex-start;
-  }
-  .authing-tab-item {
-    margin-right: 40px;
-    font-size: 14px;
-  }
-  .authing-tab-item__active {
-    font-size: 16px;
-  }
-  .authing-tab-pane {
-    padding-bottom: 70px;
-  }
-}

package/components/BindTotp/core/bindSuccess.tsx

@@ -1,72 +0,0 @@
-import { Form, Checkbox, Typography } from 'antd'
-import React, { useRef } from 'react'
-import { useTranslation } from 'react-i18next'
-import SubmitButton from '../../SubmitButton'
-
-const { Paragraph } = Typography
-
-export interface BindSuccessProps {
-  onBind: any
-  secret: string
-}
-
-export const BindSuccess: React.FC<BindSuccessProps> = ({ secret, onBind }) => {
-  // const [isSaved, setIsSaved] = useState(false)
-  const submitButtonRef = useRef<any>(null)
-  const [form] = Form.useForm()
-
-  const { t } = useTranslation()
-
-  const bindSuccess = async () => {
-    submitButtonRef.current?.onSpin(true)
-    try {
-      await form.validateFields()
-      onBind()
-    } catch (e: any) {
-      submitButtonRef.current?.onError()
-    } finally {
-      submitButtonRef.current?.onSpin(false)
-    }
-  }
-
-  return (
-    <>
-      <p className="authing-g2-mfa-title">{t('common.totpText1')}</p>
-      <p className="authing-g2-mfa-tips">{t('common.totpText2')}</p>
-
-      <div className="g2-mfa-bindTotp-copySecret">
-        <Paragraph copyable>{secret}</Paragraph>
-      </div>
-
-      <Form
-        form={form}
-        onFinish={bindSuccess}
-        style={{ width: '100%' }}
-        onFinishFailed={() => submitButtonRef.current?.onError()}
-      >
-        <Form.Item
-          className="authing-g2-input-form g2-mfa-totp-verify-input"
-          name="remember"
-          rules={[
-            {
-              validator: (_, value) => {
-                console.log(value)
-                if (!value) {
-                  return Promise.reject(t('common.pleaseRecordKey'))
-                }
-                return Promise.resolve()
-              },
-            },
-          ]}
-          valuePropName="checked"
-        >
-          <Checkbox className="g2-mfa-bindTotp-secretSave">
-            {t('login.rememberedSecret')}
-          </Checkbox>
-        </Form.Item>
-
-        <SubmitButton text={t('common.bindSuccess')} ref={submitButtonRef} />
-      </Form>
-    </>
-  )
-}

package/components/BindTotp/core/securityCode.tsx

@@ -1,108 +0,0 @@
-import { Form, message } from 'antd'
-import React, { useRef } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useAsyncFn } from 'react-use'
-
-import { GuardModuleType } from '../../Guard/module'
-import { useGuardHttp } from '../../_utils/guradHttp'
-import SubmitButton from '../../SubmitButton'
-import { ImagePro } from '../../ImagePro'
-import { VerifyCodeFormItem } from '../../MFA/VerifyCodeInput/VerifyCodeFormItem'
-import { VerifyCodeInput } from '../../MFA/VerifyCodeInput'
-export interface SecurityCodeProps {
-  mfaToken: string
-  qrcode: string
-  onNext: any
-  changeModule: any
-}
-
-export const SecurityCode: React.FC<SecurityCodeProps> = ({
-  mfaToken,
-  qrcode,
-  onNext,
-  changeModule,
-}) => {
-  const [form] = Form.useForm()
-  const submitButtonRef = useRef<any>(null)
-
-  const { t } = useTranslation()
-
-  const { post } = useGuardHttp()
-
-  const onJump = () => {
-    changeModule?.(GuardModuleType.DOWNLOAD_AT)
-  }
-
-  const [, bindTotp] = useAsyncFn(async () => {
-    submitButtonRef.current.onSpin(true)
-
-    try {
-      await form.validateFields()
-      const saftyCode = form.getFieldValue('saftyCode')
-
-      const { code, data, message: resMessage } = await post(
-        '/api/v2/mfa/totp/associate/confirm',
-        {
-          authenticator_type: 'totp',
-          totp: saftyCode.join(''),
-          source: 'APPLICATION',
-        },
-        {
-          headers: {
-            authorization: mfaToken,
-          },
-        }
-      )
-
-      if (code !== 200) {
-        submitButtonRef.current.onError()
-        message.error(resMessage)
-      } else {
-        onNext(data)
-      }
-    } catch (e: any) {
-      submitButtonRef.current.onError()
-    } finally {
-      submitButtonRef.current?.onSpin(false)
-    }
-  }, [mfaToken])
-
-  return (
-    <>
-      <p className="authing-g2-mfa-title">{t('user.mfaBind')}</p>
-      <p
-        className="authing-g2-mfa-tips"
-        style={{
-          textAlign: 'left',
-        }}
-      >
-        {t('common.usePhoneOpen')} Google Authenticator or Microsoft
-        Authenticator（{t('common.noValidator')}{' '}
-        <span
-          style={{
-            color: '#396AFF',
-            cursor: 'pointer',
-          }}
-          onClick={onJump}
-        >
-          {t('common.clickTodownload')}
-        </span>
-        ） {t('common.mfaText1')}
-      </p>
-      <ImagePro className="g2-mfa-bindTotp-qrcode" src={qrcode} alt="qrcode" />
-      <Form
-        className="g2-mfa-bindTotp-securityCode-form"
-        form={form}
-        onSubmitCapture={() => {}}
-        onFinish={bindTotp}
-        onFinishFailed={() => submitButtonRef.current.onError()}
-      >
-        <VerifyCodeFormItem codeLength={6} name="saftyCode">
-          <VerifyCodeInput length={6} showDivider={true} gutter={'10px'} />
-        </VerifyCodeFormItem>
-        <p>{t('user.numberSafteyCode')}</p>
-        <SubmitButton text={t('user.nextStep')} ref={submitButtonRef} />
-      </Form>
-    </>
-  )
-}

package/components/BindTotp/index.tsx

@@ -1,134 +0,0 @@
-import { message } from 'antd'
-import { User } from 'authing-js-sdk'
-import React, { useEffect, useMemo, useState } from 'react'
-import { useAsyncFn } from 'react-use'
-import { ErrorCode } from '../_utils/GuardErrorCode'
-import { useGuardHttp } from '../_utils/guradHttp'
-import { useAuthClient } from '../Guard/authClient'
-import { GuardModuleType } from '../Guard/module'
-import { IconFont } from '../IconFont'
-import { ShieldSpin, Spin } from '../ShieldSpin'
-import { BindSuccess } from './core/bindSuccess'
-import { SecurityCode } from './core/securityCode'
-import { GuardBindTotpViewProps } from './interface'
-import { useTranslation } from 'react-i18next'
-import './styles.less'
-const window: Window = require('global/window')
-
-enum BindTotpType {
-  SECURITY_CODE = 'securityCode',
-  BIND_SUCCESS = 'bindSuccess',
-}
-
-export const GuardBindTotpView: React.FC<GuardBindTotpViewProps> = ({
-  config: GuardLocalConfig,
-  initData,
-  onLogin,
-  __changeModule,
-}) => {
-  const { get, post } = useGuardHttp()
-  const { t } = useTranslation()
-  const [secret, setSecret] = useState('')
-  const [qrcode, setQrcode] = useState('')
-  const [user, setUser] = useState<User>()
-  const [bindTotpType, setBindTotpType] = useState<BindTotpType>(
-    BindTotpType.SECURITY_CODE
-  )
-
-  const authClient = useAuthClient()
-
-  const [bindInfo, fetchBindInfo] = useAsyncFn(async () => {
-    const query = {
-      type: 'totp',
-      source: 'APPLICATION',
-    }
-    const config = {
-      headers: {
-        authorization: initData.mfaToken,
-      },
-    }
-
-    try {
-      const { data } = await get<any>(
-        `/api/v2/mfa/authenticator`,
-        query,
-        config
-      )
-
-      if (data.code === ErrorCode.LOGIN_INVALID) {
-        message.error(data.message)
-        __changeModule?.(GuardModuleType.LOGIN, {})
-        return
-      }
-    } catch (error: any) {
-      message.error(error?.message)
-    }
-
-    const { data } = await post<any>(
-      '/api/v2/mfa/totp/associate',
-      query,
-      config
-    )
-
-    setSecret(data.recovery_code)
-    setQrcode(data.qrcode_data_url)
-  }, [initData.mfaToken])
-
-  const onBind = () => {
-    if (user) onLogin?.(user, authClient)
-  }
-
-  const onNext = (user: User) => {
-    setUser(user)
-    setBindTotpType(BindTotpType.BIND_SUCCESS)
-  }
-
-  useEffect(() => {
-    fetchBindInfo()
-  }, [fetchBindInfo])
-
-  const renderContent = useMemo<
-    Record<BindTotpType, (props: any) => React.ReactNode>
-  >(
-    () => ({
-      [BindTotpType.SECURITY_CODE]: (props) => <SecurityCode {...props} />,
-      [BindTotpType.BIND_SUCCESS]: (props) => <BindSuccess {...props} />,
-    }),
-    []
-  )
-
-  const onBack = () => {
-    window.history.back()
-  }
-
-  return (
-    <>
-      {bindInfo.loading ? (
-        <Spin />
-      ) : (
-        <div className="g2-view-container">
-          <div className="g2-view-back">
-            <span onClick={onBack}>
-              <IconFont type="authing-back" />
-              <span>{t('common.backToVerify')}</span>
-            </span>
-          </div>
-          <div className="g2-mfa-content g2-mfa-bindTotp">
-            {bindInfo.loading ? (
-              <ShieldSpin />
-            ) : (
-              renderContent[bindTotpType]({
-                mfaToken: initData.mfaToken,
-                qrcode,
-                secret,
-                onBind,
-                onNext,
-                changeModule: __changeModule,
-              })
-            )}
-          </div>
-        </div>
-      )}
-    </>
-  )
-}

package/components/BindTotp/interface.ts

@@ -1,30 +0,0 @@
-import { getDefaultG2Config, IG2Config, IG2Events, IG2FCProps } from '../Type'
-import { AuthenticationClient, User } from '..'
-import { GuardMFAInitData } from '../MFA/interface'
-
-export interface BindTotpConfig extends IG2Config {}
-
-const defaultConfig: BindTotpConfig = {
-  ...getDefaultG2Config(),
-}
-
-export const getDefaultMFAConfig = (): BindTotpConfig => ({
-  ...getDefaultG2Config(),
-  ...defaultConfig,
-})
-
-export interface BindTotpEvents extends IG2Events {
-  onLogin?: (user: User, authClient: AuthenticationClient) => void
-}
-
-export interface GuardBindTotpInitData extends GuardMFAInitData {}
-
-export interface GuardBindTotpProps extends IG2FCProps, BindTotpEvents {
-  config: Partial<BindTotpConfig>
-  initData: GuardBindTotpInitData
-}
-
-export interface GuardBindTotpViewProps extends GuardBindTotpProps {
-  config: BindTotpConfig
-  initData: GuardBindTotpInitData
-}

package/components/BindTotp/styles.less

@@ -1,57 +0,0 @@
-.g2-mfa-bindTotp {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  height: 100%;
-
-  .g2-mfa-bindTotp-copySecret {
-    width: 100%;
-    height: 48px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: #f5f6f7;
-    border-radius: 4px;
-
-    .authing-ant-typography {
-      margin: 0;
-
-      svg {
-        color: #878a95 !important;
-        margin-left: 30px;
-      }
-    }
-  }
-  .g2-mfa-bindTotp-secretSave {
-    margin-top: 16px;
-  }
-
-  .g2-mfa-submit-button {
-    margin-top: 80px !important;
-  }
-
-  .g2-mfa-bindTotp-qrcode {
-    box-shadow: 0px 0px 30px rgba(84, 89, 104, 0.15);
-    border-radius: 4px;
-  }
-
-  .g2-mfa-bindTotp-securityCode-form {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    .g2-mfa-submit-button {
-      margin-top: 64px !important;
-    }
-
-    .g2-mfa-totp-verify-input {
-      text-align: center;
-      margin-bottom: 8px !important;
-      margin-top: 40px !important;
-    }
-
-    p {
-      color: #878a95;
-    }
-  }
-}

package/components/ChangeLanguage/index.tsx

@@ -1,35 +0,0 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { IconFont } from '../IconFont'
-import { changeLang } from '../_utils/locales'
-
-export const ChangeLanguage = (props: any) => {
-  const { i18n } = useTranslation()
-  if (props.langRange.length <= 1) {
-    return <></>
-  }
-
-  let switchText = '简体中文'
-  if (i18n.language === 'en-US') {
-    switchText = 'English'
-  }
-  return (
-    <div className="g2-change-language-container">
-      <span
-        className="g2-change-language-button"
-        onClick={() => {
-          if (i18n.language === 'zh-CN') {
-            changeLang('en-US')
-            props.onLangChange?.('en-US')
-          } else if (i18n.language === 'en-US') {
-            changeLang('zh-CN')
-            props.onLangChange?.('zh-CN')
-          }
-        }}
-      >
-        <IconFont type="authing-global-line" />
-        <span className="g2-change-language-text">{switchText}</span>
-      </span>
-    </div>
-  )
-}