@authing/react-ui-components 3.0.2-Beta.0 → 3.0.2-beta.10

package/components/Login/core/withLDAP.tsx

@@ -1,146 +0,0 @@
-import React, { useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { LockOutlined, UserOutlined } from '@ant-design/icons'
-import { Form, Input } from 'antd'
-import { LoginMethods } from '../../'
-import { ErrorCode } from '../../_utils/GuardErrorCode'
-import { useAuthClient } from '../../Guard/authClient'
-import SubmitButton from '../../SubmitButton'
-import { fieldRequiredRule } from '../../_utils'
-
-interface LoginWithLDAPProps {
-  // configs
-  publicKey: string
-  autoRegister?: boolean
-  host?: string
-
-  // events
-  onLogin: any
-  onBeforeLogin: any
-}
-
-export const LoginWithLDAP = (props: LoginWithLDAPProps) => {
-  let client = useAuthClient()
-  const { t } = useTranslation()
-  let submitButtonRef = useRef<any>(null)
-
-  const [showCaptcha, setShowCaptcha] = useState(false)
-  const [verifyCodeUrl, setVerifyCodeUrl] = useState('')
-  const captchaUrl = `${props.host}/api/v2/security/captcha`
-  const getCaptchaUrl = () => `${captchaUrl}?r=${+new Date()}`
-
-  const onFinish = async (values: any) => {
-    // onBeforeLogin
-    submitButtonRef.current.onSpin(true)
-    let loginInfo = {
-      type: LoginMethods.LDAP,
-      data: {
-        identity: values.account,
-        password: values.password,
-        captchaCode: values.captchaCode,
-      },
-    }
-    let context = await props.onBeforeLogin(loginInfo)
-    if (!context) {
-      submitButtonRef.current.onSpin(false)
-      return
-    }
-
-    // onLogin
-    let account = values.account && values.account.trim()
-    let password = values.password && values.password.trim()
-    let captchaCode = values.captchaCode && values.captchaCode.trim()
-    try {
-      const user = await client.loginByLdap(account, password, {
-        autoRegister: props.autoRegister,
-        captchaCode,
-      })
-      props.onLogin(200, user)
-    } catch (error: any) {
-      if (typeof error?.message === 'string') {
-        let e = { code: 2333, data: {}, message: t('common.timeoutLDAP') }
-        try {
-          e = JSON.parse(error?.message)
-          console.log('paser error.message error，cheke error', error)
-          // onFail && onFail(errorData)
-          submitButtonRef.current.onSpin(false)
-          return
-        } catch {}
-        if (e.code === ErrorCode.INPUT_CAPTCHACODE) {
-          setVerifyCodeUrl(getCaptchaUrl())
-          setShowCaptcha(true)
-        }
-        submitButtonRef.current.onSpin(false)
-        props.onLogin(e.code, e.data, e.message)
-        // onFail && onFail(error)
-      }
-    }
-  }
-
-  return (
-    <div className="authing-g2-login-ldap">
-      <Form
-        name="passworLogin"
-        onFinish={onFinish}
-        onFinishFailed={() => submitButtonRef.current.onError()}
-        autoComplete="off"
-      >
-        <Form.Item
-          className="authing-g2-input-form"
-          name="account"
-          rules={fieldRequiredRule(t('common.account'))}
-        >
-          <Input
-            className="authing-g2-input"
-            autoComplete="email,username,tel"
-            size="large"
-            placeholder={t('login.inputLdapUsername')}
-            prefix={<UserOutlined style={{ color: '#878A95' }} />}
-          />
-        </Form.Item>
-        <Form.Item
-          className="authing-g2-input-form"
-          name="password"
-          rules={fieldRequiredRule(t('common.password'))}
-        >
-          <Input.Password
-            className="authing-g2-input"
-            size="large"
-            placeholder={t('login.inputLdapPwd')}
-            prefix={<LockOutlined style={{ color: '#878A95' }} />}
-          />
-        </Form.Item>
-        {showCaptcha && (
-          <Form.Item
-            className="authing-g2-input-form"
-            name="captchaCode"
-            rules={[{ required: true, message: t('login.inputCaptchaCode') }]}
-          >
-            <Input
-              className="authing-g2-input add-after"
-              size="large"
-              placeholder={t('login.inputCaptchaCode')}
-              addonAfter={
-                <img
-                  className="g2-captcha-code-image"
-                  src={verifyCodeUrl}
-                  alt={t('login.captchaCode')}
-                  style={{ height: '2em', cursor: 'pointer' }}
-                  onClick={() => setVerifyCodeUrl(getCaptchaUrl())}
-                />
-              }
-            />
-          </Form.Item>
-        )}
-
-        <Form.Item>
-          <SubmitButton
-            text={t('common.login')}
-            className="password"
-            ref={submitButtonRef}
-          />
-        </Form.Item>
-      </Form>
-    </div>
-  )
-}

package/components/Login/core/withPassword/FormItemAccount.tsx

@@ -1,42 +0,0 @@
-import { FormItemProps } from 'antd/lib/form'
-import FormItem from 'antd/lib/form/FormItem'
-import React, { useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
-import { PasswordLoginMethods } from '../../../AuthingGuard/api'
-import { EmailFormItem, PhoneFormItem } from '../../../ValidatorRules'
-import { fieldRequiredRule } from '../../../_utils'
-
-export interface FormItemAccountProps extends FormItemProps {
-  passwordLoginMethods: PasswordLoginMethods[]
-}
-
-export const FormItemAccount: React.FC<FormItemAccountProps> = (props) => {
-  const { passwordLoginMethods: methods, ...formItemPtops } = props
-  const { t } = useTranslation()
-
-  const runderTemplate = useMemo(() => {
-    if (methods.length !== 1)
-      return (
-        <FormItem
-          rules={fieldRequiredRule(t('common.account'))}
-          {...formItemPtops}
-        />
-      )
-
-    switch (methods[0]) {
-      case 'phone-password':
-        return <PhoneFormItem {...formItemPtops} />
-      case 'email-password':
-        return <EmailFormItem {...formItemPtops} />
-      case 'username-password':
-        return (
-          <FormItem
-            rules={fieldRequiredRule(t('common.username'))}
-            {...formItemPtops}
-          />
-        )
-    }
-  }, [formItemPtops, methods, t])
-
-  return <>{runderTemplate}</>
-}

package/components/Login/core/withPassword/GraphicVerifyCode.tsx

@@ -1,31 +0,0 @@
-import { Row, Col } from 'antd'
-import Input, { InputProps } from 'antd/lib/input'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { ImagePro } from '../../../ImagePro'
-
-export interface GraphicVerifyCodeProps extends InputProps {
-  verifyCodeUrl: string
-  changeCode: () => void
-}
-
-export const GraphicVerifyCode: React.FC<GraphicVerifyCodeProps> = (props) => {
-  const { verifyCodeUrl, changeCode, ...inputProps } = props
-
-  const { t } = useTranslation()
-
-  return (
-    <div className="g2-graphic-verify-code">
-      <Input {...inputProps} />
-
-      <ImagePro
-        className="g2-captcha-code-image"
-        src={verifyCodeUrl}
-        alt={t('login.captchaCode')}
-        height="46px"
-        style={{ cursor: 'pointer' }}
-        onClick={() => changeCode()}
-      />
-    </div>
-  )
-}

package/components/Login/core/withPassword/InputAccount.tsx

@@ -1,64 +0,0 @@
-import Input, { InputProps } from 'antd/lib/input'
-import React, { useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
-import { PasswordLoginMethods } from '../../../AuthingGuard/api'
-import { InputNumber } from '../../../InputNumber'
-
-export interface InputAccountProps extends InputProps {
-  passwordLoginMethods: PasswordLoginMethods[]
-}
-
-export const InputAccount: React.FC<InputAccountProps> = (props) => {
-  const { passwordLoginMethods: methods, ...inputProps } = props
-
-  const { t } = useTranslation()
-
-  const loginMethodsText = useMemo<
-    Record<
-      PasswordLoginMethods,
-      {
-        t: string
-        sort: number
-      }
-    >
-  >(
-    () => ({
-      'email-password': {
-        t: t('common.email'),
-        sort: 2,
-      },
-      'phone-password': {
-        t: t('common.phoneNumber'),
-        sort: 1,
-      },
-      'username-password': {
-        t: t('common.username'),
-        sort: 0,
-      },
-    }),
-    [t]
-  )
-
-  const placeholder = useMemo(
-    () =>
-      t('login.inputAccount', {
-        text: methods
-          ?.map((item) => loginMethodsText[item])
-          .sort((a, b) => a.sort - b.sort)
-          .map((item) => item.t)
-          .join(' / '),
-      }),
-    [loginMethodsText, methods, t]
-  )
-
-  const runderInput = useMemo(() => {
-    if (methods.length === 1 && methods[0] === 'phone-password')
-      return (
-        <InputNumber maxLength={11} placeholder={placeholder} {...inputProps} />
-      )
-
-    return <Input placeholder={placeholder} {...inputProps} />
-  }, [inputProps, methods, placeholder])
-
-  return <>{runderInput}</>
-}

package/components/Login/core/withPassword/index.tsx

@@ -1,173 +0,0 @@
-import React, { useRef, useState } from 'react'
-import { Form, Input } from 'antd'
-import { UserOutlined, LockOutlined } from '@ant-design/icons'
-import { useTranslation } from 'react-i18next'
-
-import { useGuardHttp } from '../../../_utils/guradHttp'
-import { useAuthClient } from '../../../Guard/authClient'
-import { fieldRequiredRule, getUserRegisterParams } from '../../../_utils'
-import { ErrorCode } from '../../../_utils/GuardErrorCode'
-import SubmitButton from '../../../SubmitButton'
-import { PasswordLoginMethods } from '../../../AuthingGuard/api'
-import { LoginMethods } from '../../..'
-import { FormItemAccount } from './FormItemAccount'
-import { InputAccount } from './InputAccount'
-import { GraphicVerifyCode } from './GraphicVerifyCode'
-
-interface LoginWithPasswordProps {
-  // configs
-  publicKey: string
-  autoRegister?: boolean
-  host?: string
-
-  // events
-  onLogin: any
-  onBeforeLogin: any
-  passwordLoginMethods: PasswordLoginMethods[]
-}
-
-export const LoginWithPassword = (props: LoginWithPasswordProps) => {
-  let { t } = useTranslation()
-  let { post } = useGuardHttp()
-  let client = useAuthClient()
-
-  let submitButtonRef = useRef<any>(null)
-
-  const [showCaptcha, setShowCaptcha] = useState(false)
-  const [verifyCodeUrl, setVerifyCodeUrl] = useState('')
-  const [remainCount, setRemainCount] = useState(0)
-
-  const captchaUrl = `${props.host}/api/v2/security/captcha`
-  const getCaptchaUrl = () => `${captchaUrl}?r=${+new Date()}`
-
-  const encrypt = client.options.encryptFunction
-
-  const onFinish = async (values: any) => {
-    setRemainCount(0)
-    // onBeforeLogin
-    submitButtonRef.current.onSpin(true)
-    let loginInfo = {
-      type: LoginMethods.Password,
-      data: {
-        identity: values.account,
-        password: values.password,
-        captchaCode: values.captchaCode,
-      },
-    }
-    let context = await props.onBeforeLogin(loginInfo)
-    if (!context) {
-      submitButtonRef.current.onSpin(false)
-      return
-    }
-
-    // onLogin
-    let url = '/api/v2/login/account'
-    let account = values.account && values.account.trim()
-    let password = values.password && values.password.trim()
-    let captchaCode = values.captchaCode && values.captchaCode.trim()
-
-    let body = {
-      account: account,
-      password: await encrypt!(password, props.publicKey),
-      captchaCode,
-      customData: getUserRegisterParams(),
-      autoRegister: props.autoRegister,
-    }
-    const { code, message, data } = await post(url, body)
-
-    if (code !== 200) {
-      submitButtonRef.current.onError()
-    }
-
-    if (code === ErrorCode.INPUT_CAPTCHACODE) {
-      setVerifyCodeUrl(getCaptchaUrl())
-      setShowCaptcha(true)
-    }
-    if (code === ErrorCode.PASSWORD_ERROR) {
-      if ((data as any)?.remainCount) {
-        setRemainCount((data as any)?.remainCount ?? 0)
-      }
-    }
-    submitButtonRef.current.onSpin(false)
-    props.onLogin(code, data, message)
-  }
-
-  return (
-    <div className="authing-g2-login-password">
-      <Form
-        name="passworLogin"
-        onFinish={onFinish}
-        onFinishFailed={() => submitButtonRef.current.onError()}
-        autoComplete="off"
-      >
-        <FormItemAccount
-          name="account"
-          className="authing-g2-input-form"
-          passwordLoginMethods={props.passwordLoginMethods}
-        >
-          <InputAccount
-            className="authing-g2-input"
-            autoComplete="email,username,tel"
-            size="large"
-            prefix={<UserOutlined style={{ color: '#878A95' }} />}
-            passwordLoginMethods={props.passwordLoginMethods}
-          />
-        </FormItemAccount>
-        <Form.Item
-          name="password"
-          className="authing-g2-input-form"
-          rules={fieldRequiredRule(t('common.password'))}
-        >
-          <Input.Password
-            className="authing-g2-input"
-            size="large"
-            placeholder={t('login.inputLoginPwd')}
-            prefix={<LockOutlined style={{ color: '#878A95' }} />}
-          />
-        </Form.Item>
-        {/* 图形验证码 */}
-        {showCaptcha && (
-          <Form.Item
-            className="authing-g2-input-form"
-            name="captchaCode"
-            rules={fieldRequiredRule(t('common.captchaCode'))}
-          >
-            <GraphicVerifyCode
-              className="authing-g2-input"
-              size="large"
-              placeholder={t('login.inputCaptchaCode')}
-              verifyCodeUrl={verifyCodeUrl}
-              changeCode={() => setVerifyCodeUrl(getCaptchaUrl())}
-            />
-          </Form.Item>
-        )}
-        {remainCount !== 0 && (
-          <span
-            style={{
-              marginBottom: 23,
-              fontSize: 12,
-              color: '#E63333',
-              display: 'block',
-            }}
-          >
-            {t('common.loginFailCheck', {
-              number: remainCount,
-            })}
-          </span>
-        )}
-
-        <Form.Item>
-          <SubmitButton
-            text={
-              props.autoRegister
-                ? `${t('common.login')} / ${t('common.register')}`
-                : t('common.login')
-            }
-            className="password"
-            ref={submitButtonRef}
-          />
-        </Form.Item>
-      </Form>
-    </div>
-  )
-}

package/components/Login/core/withPhonecode.tsx

@@ -1,122 +0,0 @@
-import React, { useRef } from 'react'
-import { Form } from 'antd'
-import { useTranslation } from 'react-i18next'
-import { useAuthClient } from '../../Guard/authClient'
-import { UserOutlined, SafetyOutlined } from '@ant-design/icons'
-import { LoginMethods } from '../../'
-import { SendCode } from '../../SendCode'
-import { fieldRequiredRule } from '../../_utils'
-import SubmitButton from '../../SubmitButton'
-import { InputNumber } from '../../InputNumber'
-import { PhoneFormItem } from '../../ValidatorRules'
-
-// const formatPhone = (value: any) => {
-//   if (!value) {
-//     return ''
-//   }
-//   let a = value.slice(0, 3)
-//   let b = value.slice(3, 7)
-//   let c = value.slice(7, 11)
-//   if (value.length < 4) {
-//     return a
-//   } else if (value.length < 8) {
-//     return `${a}-${b}`
-//   } else {
-//     return `${a}-${b}-${c}`
-//   }
-// }
-export const LoginWithPhoneCode = (props: any) => {
-  let [form] = Form.useForm()
-  let submitButtonRef = useRef<any>(null)
-  const { t } = useTranslation()
-
-  let client = useAuthClient()
-
-  const verifyCodeLength = props.verifyCodeLength ?? 4
-
-  const onFinish = async (values: any) => {
-    submitButtonRef.current.onSpin(true)
-    // onBeforeLogin
-    let loginInfo = {
-      type: LoginMethods.Password,
-      data: {
-        phone: values.phone,
-        code: values.code,
-      },
-    }
-    let context = await props.onBeforeLogin(loginInfo)
-    if (!context) {
-      submitButtonRef.current.onSpin(false)
-      return
-    }
-
-    let loginContext = client.loginByPhoneCode(values.phone, values.code)
-    loginContext
-      .then((u) => {
-        submitButtonRef.current.onSpin(false)
-        props.onLogin(200, u)
-      })
-      .catch((e) => {
-        submitButtonRef.current.onSpin(false)
-        props.onLogin(e.code, e.data, e.message)
-      })
-  }
-
-  return (
-    <div className="authing-g2-login-phone-code">
-      <Form
-        name="phoneCode"
-        form={form}
-        onFinish={onFinish}
-        onFinishFailed={() => submitButtonRef.current.onError()}
-        autoComplete="off"
-      >
-        <PhoneFormItem className="authing-g2-input-form" name="phone">
-          <InputNumber
-            className="authing-g2-input"
-            autoComplete="tel"
-            type="tel"
-            size="large"
-            // 只有 InputNumber formatter、controls API
-            maxLength={11}
-            // formatter={formatPhone}
-            // parser={(value) => (value ? value.replaceAll('-', '') : '')}
-            placeholder={t('login.inputPhone')}
-            prefix={<UserOutlined style={{ color: '#878A95' }} />}
-          />
-        </PhoneFormItem>
-        <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,
-            })}
-            maxLength={verifyCodeLength}
-            prefix={<SafetyOutlined style={{ color: '#878A95' }} />}
-            method="phone"
-            data={''}
-            form={form}
-            onSendCodeBefore={() => form.validateFields(['phone'])}
-          />
-        </Form.Item>
-        <Form.Item>
-          <SubmitButton
-            text={
-              props.autoRegister
-                ? `${t('common.login')} / ${t('common.register')}`
-                : t('common.login')
-            }
-            className="password"
-            ref={submitButtonRef}
-          />
-        </Form.Item>
-      </Form>
-    </div>
-  )
-}

package/components/Login/core/withWechatMiniQrcode.tsx

@@ -1,60 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react'
-import { message } from 'antd'
-import { ShieldSpin } from '../../ShieldSpin'
-import { useAuthClient } from '../../Guard/authClient'
-
-interface LoginWithWechatMiniQrcodeProps {
-  onLogin: any
-  canLoop: boolean
-  qrCodeScanOptions: any
-}
-
-export const LoginWithWechatMiniQrcode = (
-  props: LoginWithWechatMiniQrcodeProps
-) => {
-  const timerRef = useRef<any>()
-  const client = useAuthClient()
-  const [loading, setLoading] = useState(true)
-  const appQrcodeClient = client.wxqrcode
-
-  useEffect(() => {
-    return () => {
-      clearInterval(timerRef.current)
-    }
-  }, [])
-
-  useEffect(() => {
-    if (!props.canLoop) {
-      return
-    }
-    appQrcodeClient.startScanning('authingGuardMiniQrcode', {
-      autoExchangeUserInfo: true,
-      ...props.qrCodeScanOptions,
-      onCodeLoaded() {
-        setLoading(false)
-      },
-      onStart(timer) {
-        // console.log('开始扫码')
-        timerRef.current = timer
-      },
-      onSuccess(user) {
-        // console.log('扫码完成', user)
-        // onSuccess && onSuccess(user as User)
-        props.onLogin(200, user)
-      },
-      onError: (ms) => {
-        // config.qrCodeScanOptions?.onError?.(message)
-        // onFail && onFail(`${message}`)
-        message.error(ms)
-      },
-    })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [appQrcodeClient, props.canLoop, props.qrCodeScanOptions])
-
-  return (
-    <div className="authing-g2-login-app-qrcode">
-      {loading && <ShieldSpin />}
-      <div id="authingGuardMiniQrcode"></div>
-    </div>
-  )
-}

package/components/Login/core/withWechatmpQrcode.tsx

@@ -1,53 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react'
-import { ShieldSpin } from '../../ShieldSpin'
-import { useAuthClient } from '../../Guard/authClient'
-
-interface LoginWithWechatmpQrcodeProps {
-  onLogin: any
-  canLoop: boolean
-  qrCodeScanOptions: any
-}
-
-export const LoginWithWechatmpQrcode = (
-  props: LoginWithWechatmpQrcodeProps
-) => {
-  const timerRef = useRef<any>()
-  const client = useAuthClient()
-  const [loading, setLoading] = useState(true)
-
-  const appQrcodeClient = client.wechatmpqrcode
-  // const config = props.config
-
-  useEffect(() => {
-    if (!props.canLoop) {
-      return
-    }
-    appQrcodeClient.startScanning('authingGuardMpQrcode', {
-      autoExchangeUserInfo: true,
-      ...props.qrCodeScanOptions,
-      onCodeLoaded() {
-        setLoading(false)
-      },
-      onStart(timer) {
-        timerRef.current = timer
-      },
-      onSuccess(user) {
-        props.onLogin(200, user)
-        // onSuccess && onSuccess(user as User)
-      },
-      onError: (message) => {
-        // config.qrCodeScanOptions?.onError?.(message)
-        // onFail && onFail(`${message}`)
-      },
-    })
-    return () => clearInterval(timerRef.current)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [appQrcodeClient, props.canLoop, props.qrCodeScanOptions])
-
-  return (
-    <div className="authing-g2-login-app-qrcode">
-      {loading && <ShieldSpin />}
-      <div id="authingGuardMpQrcode"></div>
-    </div>
-  )
-}