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

package/components/DownloadAuthenticator/index.tsx

@@ -1,97 +0,0 @@
-import { Tabs } from 'antd'
-import React, { ReactNode, useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
-import { ImagePro } from '../ImagePro'
-import { IconFont } from '../IconFont'
-import { GuardDownloadATViewProps } from './interface'
-import './styles.less'
-const window: Window = require('global/window')
-
-enum DownloadType {
-  IOS = 'ios',
-  Android = 'Android',
-}
-
-export const GuardDownloadATView: React.FC<GuardDownloadATViewProps> = ({
-  config,
-}) => {
-  const { t } = useTranslation()
-
-  const cdnBase = config.__publicConfig__?.cdnBase
-
-  const downloadConfig: Record<DownloadType, any> = useMemo(
-    () => ({
-      [DownloadType.IOS]: {
-        title: t('common.downloadTotpAppIOS'),
-        google: `${cdnBase}/GoogleAuthenticator-Apple.png`,
-        microsoft: `${cdnBase}/MicrosoftAuthenticator-Apple.png`,
-      },
-      [DownloadType.Android]: {
-        title: t('common.downloadTotpAppAndroid'),
-        google: `${cdnBase}/GoogleAuthenticator-Authing.png`,
-        microsoft: `${cdnBase}/MicrosoftAuthenticator-Baidu.png`,
-      },
-    }),
-    [cdnBase, t]
-  )
-
-  const renderTab = useMemo(
-    () =>
-      (Object.keys(downloadConfig) as DownloadType[]).map<ReactNode>(
-        (value: DownloadType, index: number) => (
-          <Tabs.TabPane
-            tab={downloadConfig[value].title}
-            key={index}
-            className="g2-mfa-download-at-tab"
-          >
-            <span className="g2-mfa-totp-download-subtitle">
-              {t('common.downloadTotpAppDocs')}
-            </span>
-            <div className="g2-mfa-totp-download-qrcode">
-              <div className="g2-mfa-totp-download-qrcode-item">
-                <ImagePro
-                  width={120}
-                  height={120}
-                  className="g2-mfa-totp-download-image"
-                  src={downloadConfig[value].google}
-                  alt="Google Authenticator"
-                />
-                <span className="g2-mfa-totp-download-qrcode-text">
-                  Google Authenticator
-                </span>
-              </div>
-              <div className="g2-mfa-totp-download-qrcode-item">
-                <ImagePro
-                  width={120}
-                  height={120}
-                  className="g2-mfa-totp-download-image"
-                  src={downloadConfig[value].microsoft}
-                  alt="Microsoft Authenticator"
-                />
-                <span className="g2-mfa-totp-download-qrcode-text">
-                  Microsoft Authenticator
-                </span>
-              </div>
-            </div>
-          </Tabs.TabPane>
-        )
-      ),
-    [downloadConfig, t]
-  )
-
-  const onBack = () => window.history.back()
-
-  return (
-    <div className="g2-view-container">
-      <div className="g2-view-back">
-        <span onClick={onBack}>
-          <IconFont type="authing-back" />
-          <span>{t('common.backToMFA')}</span>
-        </span>
-      </div>
-      <div className="g2-view-tabs g2-mfa-totp-download-tabs">
-        <Tabs defaultActiveKey={DownloadType.IOS}>{renderTab}</Tabs>
-      </div>
-    </div>
-  )
-}

package/components/DownloadAuthenticator/interface.ts

@@ -1,22 +0,0 @@
-import { getDefaultG2Config, IG2Config, IG2Events, IG2FCProps } from '../Type'
-
-export interface DownloadATConfig extends IG2Config {}
-
-const defaultConfig: DownloadATConfig = {
-  ...getDefaultG2Config(),
-}
-
-export const getDefaultDownloadAuthenticatorConfig = (): DownloadATConfig => ({
-  ...getDefaultG2Config(),
-  ...defaultConfig,
-})
-
-export interface DownloadATEvents extends IG2Events {}
-
-export interface GuardDownloadATProps extends IG2FCProps, DownloadATEvents {
-  config: Partial<DownloadATConfig>
-}
-
-export interface GuardDownloadATViewProps extends GuardDownloadATProps {
-  config: DownloadATConfig
-}

package/components/DownloadAuthenticator/styles.less

@@ -1,52 +0,0 @@
-.g2-view-container-totp-dl {
-  width: 900px;
-  padding: 0;
-}
-.g2-mfa-totp-title {
-  width: 100%;
-  height: 54px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  color: #293350;
-  border-bottom: 1px solid #eaebee;
-  margin-bottom: 54px;
-}
-.g2-mfa-totp-download-tabs {
-  margin-top: 30px;
-}
-
-.g2-mfa-download-at-tab {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-top: 15px;
-
-  .g2-mfa-totp-download-subtitle {
-    color: #545968;
-  }
-
-  .g2-mfa-totp-download-qrcode-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    margin-top: 35px;
-
-    .g2-mfa-totp-download-image {
-      width: 130px;
-      height: 130px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      box-shadow: 0px 0px 30px rgba(84, 89, 104, 0.15);
-      border-radius: 4px;
-    }
-
-    .g2-mfa-totp-download-qrcode-text {
-      margin-top: 8px;
-      color: #545968;
-    }
-  }
-}

package/components/Error/index.tsx

@@ -1,21 +0,0 @@
-import React from 'react'
-import { ImagePro } from '../ImagePro'
-import { GuardErrorViewProps } from './interface'
-
-import './styles.less'
-
-export const GuardErrorView: React.FC<GuardErrorViewProps> = (props) => {
-  const messages = props?.initData?.messages
-    ? `出错了～：${props?.initData?.messages} `
-    : `未知的错误～ 请您联系管理员进行处理`
-  const imgSrc = require('../assets/images/error.png').default
-
-  return (
-    <div className="g2-view-container">
-      <div className="g2-error-content">
-        <ImagePro width={240} height={162} src={imgSrc} alt="guard error img" />
-        <span>{messages}</span>
-      </div>
-    </div>
-  )
-}

package/components/Error/interface.ts

@@ -1,9 +0,0 @@
-export interface ErrorInitData {
-  messages?: string
-}
-
-export interface GuardErrorProps {
-  initData?: ErrorInitData
-}
-
-export interface GuardErrorViewProps extends GuardErrorProps {}

package/components/Error/styles.less

@@ -1,12 +0,0 @@
-.g2-error-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin: auto 0;
-
-  span {
-    margin-top: 33px;
-    color: #545968;
-    font-size: 14px;
-  }
-}

package/components/ForgetPassword/core/resetPassword.tsx

@@ -1,162 +0,0 @@
-import React, { useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Form, Input } from 'antd'
-import { StoreValue } from 'antd/lib/form/interface'
-
-import { UserOutlined, SafetyOutlined, LockOutlined } from '@ant-design/icons'
-import { SendCode } from '../../SendCode'
-
-import { useAuthClient } from '../../Guard/authClient'
-import { fieldRequiredRule, getPasswordValidate, validate } from '../../_utils'
-import SubmitButton from '../../SubmitButton'
-
-interface ResetPasswordProps {
-  onReset: any
-  publicConfig: any
-  onSend: (type: 'email' | 'phone') => void
-  onSendError: (type: 'email' | 'phone', error: any) => void
-}
-export const ResetPassword = (props: ResetPasswordProps) => {
-  const { t } = useTranslation()
-  let [form] = Form.useForm()
-  let [identify, setIdentify] = useState('')
-  let [codeMethod, setCodeMethod] = useState<'phone' | 'email'>('phone')
-  let client = useAuthClient()
-  let submitButtonRef = useRef<any>(null)
-
-  const verifyCodeLength = props.publicConfig.verifyCodeLength ?? 4
-
-  const onFinish = async (values: any) => {
-    let identify = values.identify
-    let code = values.code
-    let newPassword = values.password
-    let context = new Promise(() => {})
-
-    if (codeMethod === 'email') {
-      context = client.resetPasswordByEmailCode(identify, code, newPassword)
-    }
-    if (codeMethod === 'phone') {
-      context = client.resetPasswordByPhoneCode(identify, code, newPassword)
-    }
-
-    context
-      .then((r) => {
-        props.onSend(codeMethod)
-        props.onReset(r)
-      })
-      .catch((e) => {
-        props.onSendError(codeMethod, e)
-        props.onReset(e)
-      })
-  }
-
-  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="identify"
-          validateFirst={true}
-          rules={[
-            ...fieldRequiredRule(t('common.account')),
-            {
-              validator: async (_, value: StoreValue) => {
-                if (!value) {
-                  return
-                }
-                if (validate('email', value) || validate('phone', value)) {
-                  return
-                } else {
-                  throw new Error(t('login.inputCorrectPhoneOrEmail'))
-                }
-              },
-            },
-          ]}
-        >
-          <Input
-            className="authing-g2-input"
-            autoComplete="tel"
-            size="large"
-            placeholder={t('login.inputPhoneOrEmail')}
-            value={identify}
-            onChange={(e) => {
-              let v = e.target.value
-              setIdentify(v)
-              if (validate('email', v)) {
-                setCodeMethod('email')
-              }
-              if (validate('phone', v)) {
-                setCodeMethod('phone')
-              }
-            }}
-            prefix={<UserOutlined style={{ color: '#878A95' }} />}
-          />
-        </Form.Item>
-        <Form.Item
-          className="authing-g2-input-form"
-          name="code"
-          rules={[...fieldRequiredRule(t('common.captchaCode'))]}
-        >
-          <SendCode
-            className="authing-g2-input"
-            autoComplete="one-time-code"
-            size="large"
-            placeholder={t('common.inputFourVerifyCode', {
-              length: verifyCodeLength,
-            })}
-            prefix={<SafetyOutlined style={{ color: '#878A95' }} />}
-            maxLength={verifyCodeLength}
-            method={codeMethod}
-            data={identify}
-            onSendCodeBefore={async () => {
-              await form.validateFields(['identify'])
-            }}
-
-            // form={form}
-          />
-        </Form.Item>
-        <Form.Item
-          className="authing-g2-input-form"
-          name="password"
-          validateFirst={true}
-          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('user.inputNewPwd')}
-            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/ForgetPassword/index.tsx

@@ -1,78 +0,0 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { message } from 'antd'
-
-import { GuardModuleType } from '../Guard/module'
-import { ResetPassword } from './core/resetPassword'
-
-import { ImagePro } from '../ImagePro'
-import { ForgetPasswordViewProps } from './interface'
-import { useAuthClient } from '../Guard/authClient'
-import { CommonMessage } from '..'
-
-export const GuardForgetPassword: React.FC<ForgetPasswordViewProps> = (
-  props
-) => {
-  const { t } = useTranslation()
-  let publicConfig = props.config.__publicConfig__
-  const authClient = useAuthClient()
-
-  const onReset = (res: any) => {
-    let code = res.code
-    if (code !== 200) {
-      props.onPwdResetError?.(res, authClient)
-      message.error(res.message)
-      return
-    }
-    props.onPwdReset?.(authClient)
-    // 返回登录
-    const initData = {
-      title: t('common.resetSuccess'),
-      message: t('common.resetSuccessMessage'),
-    }
-    props.__changeModule?.(GuardModuleType.SUBMIT_SUCCESS, { ...initData })
-  }
-
-  const onSend = (type: 'phone' | 'email') => {
-    if (type === 'phone') props.onPwdPhoneSend?.(authClient)
-    if (type === 'email') props.onPwdEmailSend?.(authClient)
-  }
-  const onSendError = (type: 'phone' | 'email', error: any) => {
-    if (type === 'phone')
-      props.onPwdPhoneSendError?.(error as CommonMessage, authClient)
-    if (type === 'email')
-      props.onPwdEmailSendError?.(error as CommonMessage, authClient)
-  }
-
-  return (
-    <div className="g2-view-container">
-      <div className="g2-view-header">
-        <ImagePro
-          src={props.config?.logo}
-          size={48}
-          borderRadius={4}
-          alt=""
-          className="icon"
-        />
-        <div className="title">{t('login.resetPwd')}</div>
-        <div className="title-explain">{t('user.resetpasswordText1')}</div>
-      </div>
-      <div className="g2-view-tabs">
-        <ResetPassword
-          onReset={onReset}
-          publicConfig={publicConfig}
-          onSend={onSend}
-          onSendError={onSendError}
-        />
-      </div>
-      <div className="g2-tips-line">
-        <div
-          className="link-like back-to-login"
-          onClick={() => props.__changeModule?.(GuardModuleType.LOGIN)}
-        >
-          {t('common.backLoginPage')}
-        </div>
-      </div>
-    </div>
-  )
-}

package/components/ForgetPassword/interface.ts

@@ -1,32 +0,0 @@
-import { AuthenticationClient, CommonMessage } from '..'
-import { IG2Config, IG2Events, IG2FCProps, IG2FCViewProps } from '../Type'
-
-export interface ForgetPasswordEvents extends IG2Events {
-  onPwdEmailSend?: (authClient: AuthenticationClient) => void
-  onPwdEmailSendError?: (
-    error: CommonMessage,
-    authClient: AuthenticationClient
-  ) => void
-  onPwdPhoneSend?: (authClient: AuthenticationClient) => void
-  onPwdPhoneSendError?: (
-    error: CommonMessage,
-    authClient: AuthenticationClient
-  ) => void
-  onPwdReset?: (authClient: AuthenticationClient) => void
-  onPwdResetError?: (
-    error: CommonMessage,
-    authClient: AuthenticationClient
-  ) => void
-}
-
-export interface ForgetPasswordConfig extends IG2Config {}
-
-export interface ForgetPasswordProps extends IG2FCProps, ForgetPasswordEvents {
-  config: Partial<IG2Config>
-}
-
-export interface ForgetPasswordViewProps
-  extends ForgetPasswordProps,
-    IG2FCViewProps {
-  config: IG2Config
-}