@authing/react-ui-components 2.4.54-alpha.0 → 2.4.55-alpha.2

package/src/components/AuthingGuard/Forms/TotpMfaVerifyForm/BindTotpForm/AppDownload.tsx

@@ -1,198 +0,0 @@
-import React, { FC } from 'react'
-import { Button } from 'antd'
-import { useTranslation } from 'react-i18next'
-import { IconFont } from '../../../IconFont'
-import './styles.less'
-import { getOS } from '../../../../../utils'
-
-export interface AppDownloadProps {}
-
-export const download_authenticator_config = {
-  Android: {
-    google:
-      'https://authing-public-cn.oss-cn-beijing.aliyuncs.com/public/Google%20Authenticator.apk',
-    microsoft: 'https://mobile.baidu.com/item?docid=27175919',
-    googleQRcode:
-      'https://files.authing.co/authing-user-portal/GoogleAuthenticator-Authing.png',
-    microsoftQRcode:
-      'https://files.authing.co/authing-user-portal/MicrosoftAuthenticator-Baidu.png',
-  },
-  iOS: {
-    google: 'https://apps.apple.com/us/app/google-authenticator/id388497605',
-    microsoft:
-      'https://apps.apple.com/us/app/microsoft-authenticator/id983156458',
-    googleQRcode:
-      'https://files.authing.co/authing-user-portal/GoogleAuthenticator-Apple.png',
-    microsoftQRcode:
-      'https://files.authing.co/authing-user-portal/MicrosoftAuthenticator-Apple.png',
-  },
-}
-
-const GoogleApple = download_authenticator_config.iOS.googleQRcode
-const MicrosoftApple = download_authenticator_config.iOS.microsoftQRcode
-const GoogleAuthing = download_authenticator_config.Android.googleQRcode
-const MicrosoftBaidu = download_authenticator_config.Android.microsoftQRcode
-
-export const AppDownload: FC<AppDownloadProps> = () => {
-  const { t } = useTranslation()
-
-  return (
-    <div className="appDownload">
-      <div className="item">
-        <div
-          className="logo"
-          style={{
-            background: '#EFF2F6',
-          }}
-        >
-          <IconFont
-            type="authing-apple-web"
-            style={{
-              fontSize: 30,
-              color: '#293350',
-            }}
-          />
-        </div>
-        <span className="title">{t('common.downloadTotpAppIOS')}</span>
-        <span className="subtitle">{t('common.downloadTotpAppDocs')}</span>
-        <div className="QRCode">
-          <div className="QRCodeItem">
-            <div
-              className="image"
-              style={{
-                backgroundSize: 'contain',
-                backgroundRepeat: 'no-repeat',
-                backgroundPosition: 'center',
-                backgroundImage: `url('${GoogleApple}')`,
-              }}
-            />
-            <span className="QRCodeText">Google Authenticator</span>
-          </div>
-          <div className="QRCodeItem">
-            <div
-              className="image"
-              style={{
-                backgroundSize: 'contain',
-                backgroundRepeat: 'no-repeat',
-                backgroundPosition: 'center',
-                backgroundImage: `url('${MicrosoftApple}')`,
-              }}
-            />
-            <span className="QRCodeText">Microsoft Authenticator</span>
-          </div>
-        </div>
-      </div>
-      <div className="item">
-        <div
-          className="logo"
-          style={{
-            background: '#28B1B0',
-          }}
-        >
-          <IconFont
-            type="authing-anzhuo"
-            style={{
-              fontSize: 30,
-              color: '#FFF',
-            }}
-          />
-        </div>
-        <span className="title">{t('common.downloadTotpAppAndroid')}</span>
-        <span className="subtitle">{t('common.downloadTotpAppDocs')}</span>
-        <div className="QRCode">
-          <div className="QRCodeItem">
-            <div
-              className="image"
-              style={{
-                backgroundSize: 'contain',
-                backgroundRepeat: 'no-repeat',
-                backgroundPosition: 'center',
-                backgroundImage: `url('${GoogleAuthing}')`,
-              }}
-            />
-            <span className="QRCodeText">Google Authenticator</span>
-          </div>
-          <div className="QRCodeItem">
-            <div
-              className="image"
-              style={{
-                backgroundSize: 'contain',
-                backgroundRepeat: 'no-repeat',
-                backgroundPosition: 'center',
-                backgroundImage: `url('${MicrosoftBaidu}')`,
-              }}
-            />
-            <span className="QRCodeText">Microsoft Authenticator</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export const DOWNLOAD_AUTHENTICATOR_CONFIG = {
-  Android: {
-    google:
-      'https://authing-public-cn.oss-cn-beijing.aliyuncs.com/public/Google%20Authenticator.apk',
-    microsoft: 'https://mobile.baidu.com/item?docid=27175919',
-  },
-  iOS: {
-    google: 'https://apps.apple.com/us/app/google-authenticator/id388497605',
-    microsoft:
-      'https://apps.apple.com/us/app/microsoft-authenticator/id983156458',
-  },
-}
-
-export const MediaAppDownload: FC = () => {
-  const { t } = useTranslation()
-  const os = getOS()
-
-  const appDownloadConfig = [
-    {
-      name: 'Google Authenticator',
-      imageUrl:
-        'https://files.authing.co/authing-user-portal/logo-google%402x.png',
-      download: () => {
-        if (os && Object.keys(DOWNLOAD_AUTHENTICATOR_CONFIG).includes(os)) {
-          // @ts-ignore
-          window.open(`${DOWNLOAD_AUTHENTICATOR_CONFIG?.[os as never].google}`)
-        }
-      },
-    },
-    {
-      name: 'Microsoft Authenticator',
-      imageUrl:
-        'https://files.authing.co/authing-user-portal/logo-microsoft%402x.png',
-      download: () => {
-        if (os && Object.keys(DOWNLOAD_AUTHENTICATOR_CONFIG).includes(os)) {
-          window.open(
-            // @ts-ignore
-            `${DOWNLOAD_AUTHENTICATOR_CONFIG?.[os as never].microsoft}`
-          )
-        }
-      },
-    },
-  ]
-
-  return (
-    <div className={'mediaAppDownload'}>
-      {appDownloadConfig.map((item, index) => (
-        <div className={'mediaAppDownloadItem'} key={index}>
-          <div className={'itemHeader'}>
-            <img src={item.imageUrl} alt="app logo" />
-            <span className="authing-mfa-dowload-item-title">{item.name}</span>
-            <span className=""></span>
-          </div>
-          <Button
-            className={'btnItem'}
-            size="large"
-            type="primary"
-            onClick={item.download}
-          >
-            {t('common.download')}
-          </Button>
-        </div>
-      ))}
-    </div>
-  )
-}

package/src/components/AuthingGuard/Forms/TotpMfaVerifyForm/BindTotpForm/BindSuccess.tsx

@@ -1,48 +0,0 @@
-import React, { FC, useEffect } from 'react'
-import { Space } from 'antd'
-import { TotpSource } from '../UserMfa'
-import { User } from 'authing-js-sdk'
-import { useTranslation } from 'react-i18next'
-import { useGuardContext } from '../../../../../context/global/context'
-
-export const BindSuccess: FC<{
-  totpSource?: TotpSource
-  user?: User
-}> = ({ totpSource = TotpSource.SELF, user }) => {
-  const { t } = useTranslation()
-
-  const {
-    state: { guardEvents, authClient },
-  } = useGuardContext()
-
-  useEffect(() => {
-    if (user && totpSource === TotpSource.APPLICATION) {
-      setTimeout(() => {
-        guardEvents.onLogin?.(user as any, authClient)
-      }, 1000)
-    }
-  }, [guardEvents, user, totpSource, authClient])
-
-  return (
-    <Space size={16} direction="vertical">
-      <img
-        width="148"
-        height="148"
-        style={{
-          marginBottom: '34px',
-        }}
-        src={
-          'https://files.authing.co/authing-user-portal/mfa-bind-success.png'
-        }
-        alt="bind success"
-      />
-      <h4 className={'subtitle'}>{t('user.bindSuccess')}</h4>
-      {/* {totpSource === TotpSource.APPLICATION ? (
-        <p className={'desc'}>{t('common.bindAppTotp')}</p>
-      ) : (
-        <p className={'desc'}>{t('user.bindedMfa')}</p>
-		  )} */}
-      <p className={'desc'}>{t('user.bindedMfa')}</p>
-    </Space>
-  )
-}

package/src/components/AuthingGuard/Forms/TotpMfaVerifyForm/BindTotpForm/CopyIcon.tsx

@@ -1,52 +0,0 @@
-import React, { FC, useState } from 'react'
-import { CheckOutlined, CopyOutlined } from '@ant-design/icons'
-import { Tooltip } from 'antd'
-import { useTranslation } from 'react-i18next'
-
-export interface CopyIconProps {
-  copyValue: string
-  style?: React.CSSProperties
-  className?: string
-}
-const CopyIcon: FC<CopyIconProps> = ({ copyValue, className, style }) => {
-  const { t } = useTranslation()
-
-  const [isCopy, setIsCopy] = useState(false)
-
-  const onCopy = () => {
-    setIsCopy(true)
-
-    copyFunction(copyValue)
-
-    setTimeout(() => {
-      setIsCopy(false)
-    }, 1000)
-  }
-
-  return !isCopy ? (
-    <div className={className} style={style}>
-      <CopyOutlined onClick={onCopy} />
-    </div>
-  ) : (
-    <div className={className} style={style}>
-      <Tooltip title={t('common.copyed')} visible={true}>
-        <CheckOutlined style={{ color: '#52c41a' }} />
-      </Tooltip>
-    </div>
-  )
-}
-
-export const copyFunction = (copyValue: string) => {
-  let transfer = document.createElement('input')
-  document.body.appendChild(transfer)
-  transfer.value = copyValue
-  transfer.focus()
-  transfer.select()
-  if (document.execCommand('copy')) {
-    document.execCommand('copy')
-  }
-  transfer.blur()
-  document.body.removeChild(transfer)
-}
-
-export default CopyIcon

package/src/components/AuthingGuard/Forms/TotpMfaVerifyForm/BindTotpForm/InputSaftyCode.tsx

@@ -1,25 +0,0 @@
-import React, { FC } from 'react'
-import { Space } from 'antd'
-import { useTranslation } from 'react-i18next'
-import { VerifyCodeInput } from '../../../../../common/VerifyCodeInput'
-
-export const InputSaftyCode: FC<{
-  saftyCode: string[]
-  isPhoneMedia: boolean
-  setSaftyCode: (code: string[]) => void
-}> = ({ saftyCode, setSaftyCode, isPhoneMedia }) => {
-  const { t } = useTranslation()
-
-  return (
-    <Space size={14} direction="vertical">
-      <h4 className={'subtitle'}>{t('user.inputSafteyCode')}</h4>
-      <p className={'desc'}>{t('user.viewInputSixCode')}</p>
-      <VerifyCodeInput
-        className={'saftyCodeInput'}
-        verifyCode={saftyCode}
-        setVerifyCode={setSaftyCode}
-      />
-      <p className={'saftyCodeTip'}>{t('user.numberSafteyCode')}</p>
-    </Space>
-  )
-}

package/src/components/AuthingGuard/Forms/TotpMfaVerifyForm/BindTotpForm/SaveSecretKey.tsx

@@ -1,34 +0,0 @@
-import React, { FC } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Checkbox, Typography, Space } from 'antd'
-
-const { Paragraph } = Typography
-
-export const SaveSecretKey: FC<{
-  setIsSaved: Function
-  isSaved: boolean
-  secret: string
-}> = ({ secret, isSaved, setIsSaved }) => {
-  const { t } = useTranslation()
-
-  const handleChange = (val: boolean) => {
-    setIsSaved(val)
-  }
-  return (
-    <Space size={16} direction="vertical">
-      <h4 className="subtitle">{t('user.saveSecret')}</h4>
-      <p className={'desc'}>{t('user.resetCodeDoWhat')}</p>
-
-      <Paragraph className={'secretParagraph'} copyable>
-        {secret}
-      </Paragraph>
-
-      <Checkbox
-        onChange={(evt: any) => handleChange(evt.target.checked)}
-        checked={isSaved}
-      >
-        {t('login.rememberedSecret')}
-      </Checkbox>
-    </Space>
-  )
-}

package/src/components/AuthingGuard/Forms/TotpMfaVerifyForm/BindTotpForm/ScanQrcode.tsx

@@ -1,44 +0,0 @@
-import React, { FC, useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
-import { IconFont } from '../../../IconFont'
-import CopyIcon from './CopyIcon'
-
-export const ScanQrcode: FC<{
-  qrcode: string
-  secret: string
-  isPhoneMedia: boolean
-  userpoolName: string
-}> = ({ qrcode, secret, isPhoneMedia, userpoolName }) => {
-  const { t } = useTranslation()
-
-  const desc = useMemo(
-    () =>
-      isPhoneMedia
-        ? t('user.pleaseDownloadAuthenticatorMedia')
-        : t('user.pleaseDownloadAuthenticator'),
-    [t, isPhoneMedia]
-  )
-
-  return (
-    <div className="ScanQrcode">
-      {!isPhoneMedia ? (
-        <>
-          <h4 className="subtitle">{t('user.scanQrcode')}</h4>
-          <p className="desc">{desc}</p>
-          <img className="qrcode" src={qrcode} alt="qrcode" />
-        </>
-      ) : (
-        <>
-          <h4 className="subtitle">{t('user.saveSecret')}</h4>
-          <div className="secretInput">
-            <div className="iconBox">
-              <IconFont type="authing-key-2-line" />
-            </div>
-            {t('common.secret')}: {secret}
-            <CopyIcon copyValue={secret} style={{ marginLeft: 'auto' }} />
-          </div>
-        </>
-      )}
-    </div>
-  )
-}

package/src/components/AuthingGuard/Forms/TotpMfaVerifyForm/BindTotpForm/index.tsx

@@ -1,40 +0,0 @@
-import React, { FC, useEffect } from 'react'
-import { useGuardContext } from 'src/context/global/context'
-import { UserMfa, TotpSource } from '../UserMfa/'
-
-export const BindTotpForm: FC<any> = (props) => {
-  const { onSuccess, onFail } = props
-  const {
-    state: { mfaData, userPoolId, appId },
-    setValue,
-  } = useGuardContext()
-
-  const { state } = useGuardContext()
-
-  console.log(state)
-
-  // 略微调整一下 Layout
-  useEffect(() => {
-    setValue('guardSize', 'large')
-    setValue('showHeader', false)
-    setValue('showBottom', false)
-
-    return () => {
-      setValue('guardSize', 'middle')
-      setValue('showHeader', true)
-      setValue('showBottom', true)
-    }
-  }, [setValue])
-
-  return (
-    <UserMfa
-      userpoolName={''}
-      userPoolId={userPoolId}
-      appId={appId}
-      totpSource={TotpSource.APPLICATION}
-      MFAToken={mfaData.mfaToken as string}
-      onSuccess={onSuccess}
-      onFail={onFail}
-    />
-  )
-}