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

package/components/MFA/core/sms.tsx

@@ -1,203 +0,0 @@
-import { UserOutlined } from '@ant-design/icons'
-import { message } from 'antd'
-import { Form } from 'antd'
-import { User } from 'authing-js-sdk'
-import React, { useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { VerifyCodeInput } from '../VerifyCodeInput'
-import { useAuthClient } from '../../Guard/authClient'
-import { SendCodeBtn } from '../../SendCode/SendCodeBtn'
-import SubmitButton from '../../SubmitButton'
-import { ICheckProps, PhoneFormItem } from '../../ValidatorRules'
-import { VerifyCodeFormItem } from '../VerifyCodeInput/VerifyCodeFormItem'
-import { MFAConfig } from '../props'
-import { InputNumber } from '../../InputNumber'
-export interface BindMFASmsProps {
-  mfaToken: string
-  onBind: (phone: string) => void
-  config: any
-}
-
-export const BindMFASms: React.FC<BindMFASmsProps> = ({
-  mfaToken,
-  onBind,
-  config,
-}) => {
-  const submitButtonRef = useRef<any>(null)
-  const { t } = useTranslation()
-  const [form] = Form.useForm()
-
-  const ref = useRef<ICheckProps>(null)
-  const onFinish = async ({ phone }: any) => {
-    submitButtonRef.current.onSpin(true)
-    await form.validateFields()
-    try {
-      onBind(phone)
-    } catch (e) {
-      // do nothing
-      submitButtonRef.current?.onError()
-    } finally {
-      submitButtonRef.current?.onSpin(false)
-    }
-  }
-
-  return (
-    <>
-      <h3 className="authing-g2-mfa-title">{t('common.bindPhone')}</h3>
-      <p className="authing-g2-mfa-tips">{t('login.bindPhoneInfo')}</p>
-      <Form
-        form={form}
-        onFinish={onFinish}
-        onFinishFailed={() => submitButtonRef.current.onError()}
-        onValuesChange={(values) => {
-          ref.current?.check(values)
-        }}
-      >
-        <PhoneFormItem
-          className="authing-g2-input-form"
-          name="phone"
-          userPoolId={config.__publicConfig__.userPoolId}
-          form={form}
-          ref={ref}
-          checkRepeat={true}
-        >
-          <InputNumber
-            className="authing-g2-input"
-            autoComplete="tel"
-            size="large"
-            placeholder={t('login.inputPhone')}
-            prefix={<UserOutlined style={{ color: '#878A95' }} />}
-          />
-        </PhoneFormItem>
-        <SubmitButton text={t('common.sure')} ref={submitButtonRef} />
-      </Form>
-    </>
-  )
-}
-
-export interface VerifyMFASmsProps {
-  mfaToken: string
-  phone: string
-  onVerify: (code: number, data: any) => void
-  sendCodeRef: React.RefObject<HTMLButtonElement>
-  codeLength: number
-}
-
-export const VerifyMFASms: React.FC<VerifyMFASmsProps> = ({
-  mfaToken,
-  phone,
-  onVerify,
-  sendCodeRef,
-  codeLength = 4,
-}) => {
-  const authClient = useAuthClient()
-  const submitButtonRef = useRef<any>(null)
-  const { t } = useTranslation()
-  const [form] = Form.useForm()
-
-  const [sent, setSent] = useState(false)
-
-  const onFinish = async (values: any) => {
-    submitButtonRef.current.onSpin(true)
-    const mfaCode = form.getFieldValue('mfaCode')
-    try {
-      const user: User = await authClient.mfa.verifyAppSmsMfa({
-        mfaToken,
-        phone: phone!,
-        code: mfaCode.join(''),
-      })
-      // TODO
-      onVerify(200, user)
-    } catch (e) {
-      const error = JSON.parse(e.message)
-      submitButtonRef.current.onError()
-      onVerify(error.code as number, error)
-    } finally {
-      submitButtonRef.current?.onSpin(false)
-    }
-  }
-
-  const sendVerifyCode = async () => {
-    try {
-      await authClient.sendSmsCode(phone!)
-      setSent(true)
-      return true
-    } catch (e) {
-      const errorMessage = JSON.parse(e.message)
-      message.error(errorMessage.message)
-      return false
-    }
-  }
-
-  return (
-    <>
-      <h3 className="authing-g2-mfa-title">{t('login.inputPhoneCode')}</h3>
-      <p className="authing-g2-mfa-tips">
-        {sent
-          ? `${t('login.verifyCodeSended')} ${phone}`
-          : t('login.clickSent')}
-      </p>
-      <Form
-        form={form}
-        onFinish={onFinish}
-        onFinishFailed={() => submitButtonRef.current.onError()}
-      >
-        <VerifyCodeFormItem
-          codeLength={codeLength}
-          ruleKeyword={t('common.captchaCode')}
-        >
-          <VerifyCodeInput length={codeLength} />
-        </VerifyCodeFormItem>
-
-        <SendCodeBtn
-          btnRef={sendCodeRef}
-          beforeSend={() => sendVerifyCode()}
-          type="link"
-        />
-
-        <SubmitButton
-          text={t('common.sure')}
-          ref={submitButtonRef}
-          className="g2-mfa-submit-button"
-        />
-      </Form>
-    </>
-  )
-}
-
-export const MFASms: React.FC<{
-  mfaToken: string
-  phone?: string
-  mfaLogin: any
-  config: MFAConfig
-}> = ({ phone: userPhone, mfaToken, mfaLogin, config }) => {
-  const [phone, setPhone] = useState(userPhone)
-  const sendCodeRef = useRef<HTMLButtonElement>(null)
-
-  const codeLength = config.__publicConfig__?.verifyCodeLength
-
-  return (
-    <>
-      {phone ? (
-        <VerifyMFASms
-          mfaToken={mfaToken}
-          phone={phone}
-          onVerify={(code, data) => {
-            mfaLogin(code, data)
-          }}
-          codeLength={codeLength ?? 4}
-          sendCodeRef={sendCodeRef}
-        />
-      ) : (
-        <BindMFASms
-          config={config}
-          mfaToken={mfaToken}
-          onBind={(phone: string) => {
-            setPhone(phone)
-            sendCodeRef.current?.click()
-          }}
-        />
-      )}
-    </>
-  )
-}

package/components/MFA/core/totp.tsx

@@ -1,122 +0,0 @@
-import { Form } 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 { GuardMFAInitData, MFAConfig } from '../props'
-import { message as Message } from 'antd'
-import SubmitButton from '../../SubmitButton'
-import { VerifyCodeFormItem } from '../VerifyCodeInput/VerifyCodeFormItem'
-import { VerifyCodeInput } from '../VerifyCodeInput'
-export interface BindMFATotpProps {
-  initData: GuardMFAInitData
-  changeModule: any
-}
-
-export const BindMFATotp: React.FC<BindMFATotpProps> = ({
-  changeModule,
-  initData,
-}) => {
-  const { t } = useTranslation()
-
-  const next = () => changeModule(GuardModuleType.BIND_TOTP, initData)
-  return (
-    <>
-      <p className="authing-g2-mfa-title">{t('common.bindTotp')}</p>
-      <p className="authing-g2-mfa-tips">{t('common.otpText1')}</p>
-      <SubmitButton
-        text={t('common.sure')}
-        onClick={next}
-        className="g2-mfa-submit-button bind-totp"
-      />
-    </>
-  )
-}
-
-export interface VerifyMFATotpProps {
-  mfaToken: string
-  mfaLogin: any
-}
-
-export const VerifyMFATotp: React.FC<VerifyMFATotpProps> = ({
-  mfaToken,
-  mfaLogin,
-}) => {
-  const { t } = useTranslation()
-  const [form] = Form.useForm()
-
-  const submitButtonRef = useRef<any>(null)
-
-  const { post } = useGuardHttp()
-
-  const [, onFinish] = useAsyncFn(async () => {
-    submitButtonRef.current.onSpin(true)
-
-    const mfaCode = form.getFieldValue('mfaCode')
-    try {
-      const { code, data, message } = await post(
-        '/api/v2/mfa/totp/verify',
-        {
-          totp: mfaCode.join(''),
-        },
-        {
-          headers: {
-            authorization: mfaToken,
-          },
-        }
-      )
-
-      if (code !== 200) {
-        mfaLogin(200, message)
-        Message.error(message)
-      } else {
-        mfaLogin(200, data)
-      }
-    } finally {
-      submitButtonRef.current.onSpin(false)
-    }
-  }, [mfaToken])
-
-  return (
-    <>
-      <p className="authing-g2-mfa-title">{t('login.accPwdLoginVerify')}</p>
-      <p className="authing-g2-mfa-tips">{t('login.inputSixCode')}</p>
-      <Form
-        form={form}
-        onSubmitCapture={() => {}}
-        onFinish={onFinish}
-        onFinishFailed={() => submitButtonRef.current.onError()}
-      >
-        <VerifyCodeFormItem codeLength={6}>
-          <VerifyCodeInput length={6} showDivider={true} gutter={'10px'} />
-        </VerifyCodeFormItem>
-
-        <SubmitButton text={t('common.sure')} ref={submitButtonRef} />
-      </Form>
-    </>
-  )
-}
-
-export interface MFATotpProps {
-  changeModule: any
-  config: MFAConfig
-  initData: GuardMFAInitData
-  mfaLogin: any
-}
-
-export const MFATotp: React.FC<MFATotpProps> = ({
-  changeModule,
-  initData,
-  mfaLogin,
-}) => {
-  return (
-    <>
-      {initData.totpMfaEnabled ? (
-        <VerifyMFATotp mfaToken={initData.mfaToken} mfaLogin={mfaLogin} />
-      ) : (
-        <BindMFATotp initData={initData} changeModule={changeModule} />
-      )}
-    </>
-  )
-}

package/components/MFA/index.tsx

@@ -1,143 +0,0 @@
-import React, { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { GuardModuleType } from '../Guard/module'
-import { IconFont } from '../IconFont'
-import { MFAEmail } from './core/email'
-import { MFASms } from './core/sms'
-import { MFAFace } from './core/face'
-import { MFATotp } from './core/totp'
-import { MFAMethods } from './mfaMethods'
-import { GuardMFAViewProps, MFAType } from './props'
-import { useAuthClient } from '../Guard/authClient'
-import { codeMap } from './codemap'
-import './styles.less'
-import { message } from 'antd'
-const window: Window = require('global/window')
-
-const ComponentsMapping: Record<MFAType, (props: any) => React.ReactNode> = {
-  [MFAType.EMAIL]: ({ config, initData, mfaLogin }) => (
-    <MFAEmail
-      config={config}
-      mfaToken={initData.mfaToken}
-      email={initData.email}
-      mfaLogin={mfaLogin}
-    />
-  ),
-  [MFAType.SMS]: ({ config, initData, mfaLogin }) => (
-    <MFASms
-      config={config}
-      mfaToken={initData.mfaToken}
-      phone={initData.phone}
-      mfaLogin={mfaLogin}
-    />
-  ),
-  [MFAType.TOTP]: ({ initData, config, changeModule, mfaLogin }) => (
-    <MFATotp
-      changeModule={changeModule}
-      config={config}
-      initData={initData}
-      mfaLogin={mfaLogin}
-    />
-  ),
-  [MFAType.FACE]: ({ config, initData, mfaLogin, setShowMethods }) => (
-    <MFAFace
-      config={config}
-      initData={initData}
-      mfaLogin={mfaLogin}
-      setShowMethods={setShowMethods}
-    />
-  ),
-}
-
-export const GuardMFAView: React.FC<GuardMFAViewProps> = ({
-  initData,
-  config,
-  __changeModule,
-  onLogin,
-}) => {
-  const [currentMethod, setCurrentMethod] = useState(
-    initData.current ??
-      initData.applicationMfa?.sort((a, b) => a.sort - b.sort)[0].mfaPolicy
-  )
-  const [showMethods, setShowMethods] = useState(true)
-  const client = useAuthClient()
-  const { t } = useTranslation()
-
-  const onBack = () => window.history.back()
-
-  const __codePaser = (code: number) => {
-    const action = codeMap[code]
-    if (code === 200) {
-      return (data: any) => {
-        onLogin?.(data, client) // 登录成功
-      }
-    }
-
-    if (!action) {
-      return () => {
-        console.error('not catch code', code)
-        // props.onLoginError?.(data, client) // 未捕获 code
-      }
-    }
-
-    // 解析成功
-    if (action?.action === 'changeModule') {
-      let m = action.module ? action.module : GuardModuleType.ERROR
-      return (initData?: any) => __changeModule?.(m, initData)
-    }
-    if (action?.action === 'insideFix') {
-      return () => {}
-    }
-
-    if (action?.action === 'message') {
-      return (data: any) => {
-        message.error(data.message)
-      }
-    }
-
-    // 最终结果
-    return () => {
-      // props.onLoginError?.(data, client!) // 未捕获 code
-      console.error('last action at mfaview')
-    }
-  }
-
-  const mfaLogin = (code: any, data: any, message?: string) => {
-    const callback = __codePaser?.(code)
-
-    if (!data) {
-      data = {}
-    }
-    data.__message = message
-    callback?.(data)
-  }
-
-  return (
-    <div className="g2-view-container">
-      <div className="g2-view-back">
-        <span onClick={onBack}>
-          <IconFont type="authing-back" />
-          <span>{t('common.backLoginPage')}</span>
-        </span>
-      </div>
-      <div className="g2-mfa-content">
-        {ComponentsMapping[currentMethod]({
-          config: config,
-          initData: initData,
-          changeModule: __changeModule,
-          mfaLogin: mfaLogin,
-          setShowMethods: setShowMethods,
-        })}
-      </div>
-      {showMethods && (
-        <MFAMethods
-          applicationMfa={initData.applicationMfa}
-          method={currentMethod}
-          onChangeMethod={(type) => {
-            setCurrentMethod(type)
-          }}
-        />
-      )}
-    </div>
-  )
-}

package/components/MFA/mfaMethods/index.tsx

@@ -1,88 +0,0 @@
-import React, { useMemo, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Button } from 'antd'
-import { IconFont } from '../../IconFont'
-import { GuardMFAInitData, MFAType } from '../props'
-import { i18n } from '../../_utils/locales'
-import './style.less'
-
-export interface MFAMethodsProps {
-  applicationMfa: GuardMFAInitData['applicationMfa']
-  method: MFAType
-  onChangeMethod: (type: MFAType) => void
-}
-
-const methodTitleMapping: Record<
-  MFAType,
-  {
-    title: () => string
-    icon: string
-  }
-> = {
-  [MFAType.EMAIL]: {
-    title: () => i18n.t('common.EmailVerification'),
-    icon: 'authing-mail',
-  },
-  [MFAType.SMS]: {
-    title: () => i18n.t('common.SMS'),
-    icon: 'authing-phone',
-  },
-  [MFAType.TOTP]: {
-    title: () => i18n.t('common.OTPVerification'),
-    icon: 'authing-totp',
-  },
-  [MFAType.FACE]: {
-    title: () => i18n.t('common.faceVerification'),
-    icon: 'authing-face',
-  },
-}
-
-export const MFAMethods: React.FC<MFAMethodsProps> = ({
-  applicationMfa = [],
-  method,
-  onChangeMethod,
-}) => {
-  const [currentMethod, setCurrentMethod] = useState(method)
-  const { t } = useTranslation()
-
-  const otherMethods = useMemo(
-    () =>
-      applicationMfa
-        .filter((item) => item.mfaPolicy !== currentMethod)
-        .sort((a, b) => a.sort - b.sort)
-        .map((item) => (
-          <Button
-            className="g2-guard-mfa-methods-btn"
-            onClick={(e) => {
-              onChangeMethod(item.mfaPolicy)
-              setCurrentMethod(item.mfaPolicy)
-            }}
-            key={item.mfaPolicy}
-          >
-            <IconFont type={methodTitleMapping[item.mfaPolicy].icon} />
-            {`${methodTitleMapping[item.mfaPolicy].title()}`}
-          </Button>
-        )),
-    [applicationMfa, currentMethod, onChangeMethod]
-  )
-
-  return (
-    <>
-      {otherMethods.length !== 0 && (
-        <>
-          <div
-            style={{
-              minHeight: 32,
-            }}
-          />
-          <div className="g2-mfa-method">
-            <div className="g2-mfa-method-title">
-              {t('login.otherVerifyWay')}
-            </div>
-            {otherMethods}
-          </div>
-        </>
-      )}
-    </>
-  )
-}

package/components/MFA/mfaMethods/style.less

@@ -1,39 +0,0 @@
-.g2-mfa-method {
-  padding: 0 38px;
-}
-
-.g2-mfa-method-title {
-  text-align: center;
-  font-size: 14px;
-  color: #c8c9cc;
-  margin-bottom: 8px;
-  width: 100%;
-}
-
-.g2-mfa-method-title::before,
-.g2-mfa-method-title::after {
-  content: '——';
-  color: #eeeeee;
-  margin: 0 11px;
-}
-
-.g2-guard-mfa-methods-btn {
-  border: none !important;
-  background-color: #f5f6f7 !important;
-  border-radius: 4px !important;
-  color: #282d3c !important;
-  font-size: 14px !important;
-  height: 49px !important;
-  margin-top: 8px !important;
-  width: 100%;
-
-  justify-content: center;
-  align-items: center;
-
-  font-size: 14px;
-
-  .g2-icon {
-    font-size: 16px;
-    margin-right: 8px;
-  }
-}

package/components/MFA/props.ts

@@ -1,51 +0,0 @@
-import { getDefaultG2Config, IG2Config, IG2Events, IG2FCProps } from '../Type'
-import { AuthenticationClient, User } from '..'
-
-export interface MFAConfig extends IG2Config {}
-
-const defaultConfig: MFAConfig = {
-  ...getDefaultG2Config(),
-}
-
-export const getDefaultMFAConfig = (): MFAConfig => ({
-  ...getDefaultG2Config(),
-  ...defaultConfig,
-})
-
-export interface MFAEvents extends IG2Events {
-  onLogin?: (user: User, authClient: AuthenticationClient) => void
-}
-
-export enum MFAType {
-  SMS = 'SMS',
-  EMAIL = 'EMAIL',
-  TOTP = 'OTP',
-  FACE = 'FACE',
-}
-
-export interface GuardMFAInitData {
-  mfaToken: string
-  applicationMfa: {
-    mfaPolicy: MFAType
-    sort: number
-    status: 0 | 1
-  }[]
-  faceMfaEnabled: boolean
-  totpMfaEnabled: boolean
-  email?: string
-  phone?: string
-  avatar?: string
-  nickme?: string
-  username?: string
-  current?: MFAType
-}
-
-export interface GuardMFAProps extends IG2FCProps, MFAEvents {
-  config: Partial<MFAConfig>
-  initData: GuardMFAInitData
-}
-
-export interface GuardMFAViewProps extends GuardMFAProps {
-  config: MFAConfig
-  initData: GuardMFAInitData
-}