@authing/react-ui-components 3.0.1-alpha.1 → 3.0.1-beta.1

package/components/BindTotp/core/bindSuccess.tsx

@@ -1,61 +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()
-      submitButtonRef.current?.onSpin(true)
-      onBind()
-    } finally {
-      submitButtonRef.current?.onSpin(true)
-    }
-  }
-
-  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%' }}>
-        <Form.Item
-          className="authing-g2-input-form"
-          name="remember"
-          rules={[
-            {
-              required: true,
-              message: t('common.pleaseRecordKey'),
-            },
-          ]}
-          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,119 +0,0 @@
-import { Form, message } from 'antd'
-import React, { useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useAsyncFn } from 'react-use'
-import { VerifyCodeInput } from '../../VerifyCodeInput'
-import { GuardModuleType } from '../../Guard/module'
-import { useGuardHttp } from '../../_utils/guradHttp'
-import SubmitButton from '../../SubmitButton'
-
-const CODE_LEN = 6
-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 [saftyCode, setSaftyCode] = useState(new Array(CODE_LEN).fill(''))
-  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 {
-      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) {
-        message.error(resMessage)
-      } else {
-        onNext(data)
-      }
-    } finally {
-      submitButtonRef.current?.onSpin(false)
-    }
-  }, [mfaToken, saftyCode])
-
-  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>
-      <img className="g2-mfa-bindTotp-qrcode" src={qrcode} alt="qrcode" />
-      <Form
-        className="g2-mfa-bindTotp-securityCode-form"
-        form={form}
-        onSubmitCapture={() => {}}
-        onFinish={bindTotp}
-      >
-        <Form.Item
-          name="mfaCode"
-          className="g2-mfa-totp-verify-input"
-          rules={[
-            {
-              validateTrigger: [],
-              validator(r, v, cb) {
-                if (saftyCode.some((item) => !item)) {
-                  cb(t('login.inputFullMfaCode'))
-                  return
-                }
-                cb()
-              },
-            },
-          ]}
-        >
-          <VerifyCodeInput
-            length={CODE_LEN}
-            verifyCode={saftyCode}
-            setVerifyCode={setSaftyCode}
-          />
-        </Form.Item>
-        <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 './props'
-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: GuardConfig,
-  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/props.ts

@@ -1,30 +0,0 @@
-import { getDefaultG2Config, IG2Config, IG2Events, IG2FCProps } from '../Type'
-import { AuthenticationClient, User } from '..'
-import { GuardMFAInitData } from '../MFA/props'
-
-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>
-  )
-}

package/components/ChangePassword/core/firstLoginReset.tsx

@@ -1,104 +0,0 @@
-import React, { useRef } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Form, Input } from 'antd'
-
-import { LockOutlined } from '@ant-design/icons'
-
-import { useAuthClient } from '../../Guard/authClient'
-import { getPasswordValidate } from '../../_utils'
-import SubmitButton from '../../SubmitButton'
-
-interface FirstLoginResetProps {
-  onReset: any
-  publicConfig: any
-  initData: any
-}
-export const FirstLoginReset = (props: FirstLoginResetProps) => {
-  const { t } = useTranslation()
-  let [form] = Form.useForm()
-  let client = useAuthClient()
-  let submitButtonRef = useRef<any>(null)
-
-  const onFinish = async (values: any) => {
-    let newPassword = values.password
-    // let newPassword2 = values.password2
-    let res = await client.resetPasswordByFirstLoginToken({
-      token: props.initData.token,
-      password: newPassword,
-    })
-    props.onReset(res)
-  }
-
-  return (
-    <div className="authing-g2-login-phone-code">
-      <Form
-        name="resetPassword"
-        form={form}
-        onFinish={onFinish}
-        onFinishFailed={() => {
-          submitButtonRef?.current?.onError()
-        }}
-        autoComplete="off"
-      >
-        <Form.Item
-          className="authing-g2-input-form"
-          name="password"
-          rules={[
-            {
-              validator(_, value) {
-                if (value && value.indexOf(' ') !== -1) {
-                  return Promise.reject(t('common.checkPasswordHasSpace'))
-                }
-                return Promise.resolve()
-              },
-            },
-            ...getPasswordValidate(
-              props.publicConfig?.passwordStrength,
-              props.publicConfig?.customPasswordStrength
-            ),
-          ]}
-        >
-          <Input.Password
-            className="authing-g2-input"
-            size="large"
-            placeholder={t('login.inputPwd')}
-            prefix={<LockOutlined style={{ color: '#878A95' }} />}
-          />
-        </Form.Item>
-        <Form.Item
-          className="authing-g2-input-form"
-          name="password2"
-          rules={[
-            {
-              validator(_, value) {
-                let pwd = form.getFieldValue('password')
-                if (!value) {
-                  return Promise.reject(t('login.inputPwd'))
-                }
-                if (value !== pwd) {
-                  return Promise.reject(t('common.repeatPasswordDoc'))
-                }
-                return Promise.resolve()
-              },
-            },
-          ]}
-        >
-          <Input.Password
-            className="authing-g2-input"
-            size="large"
-            placeholder={t('login.inputPwdAgain')}
-            prefix={<LockOutlined style={{ color: '#878A95' }} />}
-          />
-        </Form.Item>
-
-        <Form.Item className="authing-g2-input-form submit-form">
-          <SubmitButton
-            className="forget-password"
-            text={t('common.confirm')}
-            ref={submitButtonRef}
-          />
-        </Form.Item>
-      </Form>
-    </div>
-  )
-}

package/components/ChangePassword/core/rotateReset.tsx

@@ -1,114 +0,0 @@
-import React, { useRef } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Form, Input } from 'antd'
-
-import { LockOutlined } from '@ant-design/icons'
-
-import { getPasswordValidate } from '../../_utils'
-import SubmitButton from '../../SubmitButton'
-
-interface RotateResetProps {
-  onReset: any
-  publicConfig: any
-  initData: any
-}
-
-export const RotateReset = (props: RotateResetProps) => {
-  const { t } = useTranslation()
-  let [form] = Form.useForm()
-  // let client = useAuthClient()
-  let submitButtonRef = useRef<any>(null)
-
-  const onFinish = async (values: any) => {
-    // let newPassword = values.password
-    // let res = await client.resetPasswordByFirstLoginToken({
-    //   token: props.initData.token,
-    //   password: newPassword,
-    // })
-    // props.onReset(res)
-  }
-
-  return (
-    <div className="authing-g2-login-phone-code">
-      <Form
-        name="resetPassword"
-        form={form}
-        onFinish={onFinish}
-        onFinishFailed={() => {
-          submitButtonRef?.current?.onError()
-        }}
-        autoComplete="off"
-      >
-        <Form.Item
-          className="authing-g2-input-form"
-          name="oldPassword"
-          rules={[{ required: true }]}
-        >
-          <Input.Password
-            className="authing-g2-input"
-            size="large"
-            placeholder={t('user.inputCurrPwd')}
-            prefix={<LockOutlined style={{ color: '#878A95' }} />}
-          />
-        </Form.Item>
-        <Form.Item
-          className="authing-g2-input-form"
-          name="password"
-          rules={[
-            {
-              validator(_, value) {
-                if (value && value.indexOf(' ') !== -1) {
-                  return Promise.reject(t('common.checkPasswordHasSpace'))
-                }
-                return Promise.resolve()
-              },
-            },
-            ...getPasswordValidate(
-              props.publicConfig?.passwordStrength,
-              props.publicConfig?.customPasswordStrength
-            ),
-          ]}
-        >
-          <Input.Password
-            className="authing-g2-input"
-            size="large"
-            placeholder={t('login.inputPwd')}
-            prefix={<LockOutlined style={{ color: '#878A95' }} />}
-          />
-        </Form.Item>
-        <Form.Item
-          className="authing-g2-input-form"
-          name="password2"
-          rules={[
-            {
-              validator(_, value) {
-                let pwd = form.getFieldValue('password')
-                if (!value) {
-                  return Promise.reject(t('login.inputPwd'))
-                }
-                if (value !== pwd) {
-                  return Promise.reject(t('common.repeatPasswordDoc'))
-                }
-                return Promise.resolve()
-              },
-            },
-          ]}
-        >
-          <Input.Password
-            className="authing-g2-input"
-            size="large"
-            placeholder={t('login.inputPwdAgain')}
-            prefix={<LockOutlined style={{ color: '#878A95' }} />}
-          />
-        </Form.Item>
-        <Form.Item className="authing-g2-input-form submit-form">
-          <SubmitButton
-            className="forget-password"
-            text={t('common.confirm')}
-            ref={submitButtonRef}
-          />
-        </Form.Item>
-      </Form>
-    </div>
-  )
-}