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

package/components/Register/core/WithEmail.tsx

@@ -1,236 +0,0 @@
-import { LockOutlined, UserOutlined } from '@ant-design/icons'
-import { Form, Input, message } from 'antd'
-import { Rule } from 'antd/lib/form'
-import { RegisterMethods } from 'authing-js-sdk'
-import React, { useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useAsyncFn } from 'react-use'
-import { Agreement, ApplicationConfig } from '../../AuthingGuard/api'
-import { useAuthClient } from '../../Guard/authClient'
-import {
-  getDeviceName,
-  getPasswordValidate,
-  getUserRegisterParams,
-} from '../../_utils'
-import { Agreements } from '../components/Agreements'
-import SubmitButton from '../../SubmitButton'
-import {
-  EmailFormItem,
-  ICheckProps,
-  ValidatorFormItemProps,
-} from '../../ValidatorRules'
-
-export interface RegisterWithEmailProps {
-  onRegister: Function
-  onBeforeRegister?: Function
-  publicConfig?: ApplicationConfig
-  agreements: Agreement[]
-}
-
-export const RegisterWithEmail: React.FC<RegisterWithEmailProps> = ({
-  onRegister,
-  onBeforeRegister,
-  agreements,
-  publicConfig,
-}) => {
-  const { t } = useTranslation()
-  const submitButtonRef = useRef<any>(null)
-
-  const authClient = useAuthClient()
-  const [form] = Form.useForm()
-
-  const [acceptedAgreements, setAcceptedAgreements] = useState(false)
-  const [validated, setValidated] = useState(false)
-  const ref = useRef<ICheckProps>(null)
-
-  const [, onFinish] = useAsyncFn(
-    async (values: any) => {
-      submitButtonRef.current.onSpin(true)
-      if (onBeforeRegister) {
-        try {
-          const canRegister = await onBeforeRegister(
-            {
-              type: RegisterMethods.Phone,
-              data: {
-                phone: values.phone,
-                password: values.password,
-                code: values.code,
-              },
-            },
-            authClient
-          )
-          if (!canRegister) {
-            submitButtonRef.current.onSpin(false)
-            return
-          }
-        } catch (e: any) {
-          if (typeof e === 'string') {
-            message.error(e)
-          } else {
-            message.error(e?.message)
-          }
-          submitButtonRef.current.onSpin(false)
-          return
-        }
-      }
-
-      try {
-        await form.validateFields()
-        setValidated(true)
-        if (agreements?.length && !acceptedAgreements) {
-          submitButtonRef.current.onSpin(false)
-          return
-        }
-        const { email, password } = values
-
-        // 注册
-        const user = await authClient.registerByEmail(
-          email,
-          password,
-          {
-            browser:
-              typeof navigator !== 'undefined' ? navigator.userAgent : null,
-            device: getDeviceName(),
-          },
-          {
-            generateToken: true,
-            params: getUserRegisterParams(),
-          }
-        )
-        submitButtonRef.current.onSpin(false)
-        onRegister(200, user)
-      } catch ({ code, data, message }) {
-        submitButtonRef.current.onSpin(false)
-        onRegister(code, data, message)
-      }
-    },
-    [form],
-    { loading: false }
-  )
-
-  const formItems: {
-    component: React.ReactNode
-    name: string
-    rules?: Rule[]
-    FormItemFC?: React.ForwardRefExoticComponent<
-      ValidatorFormItemProps & React.RefAttributes<ICheckProps>
-    >
-  }[] = [
-    {
-      component: (
-        <Input
-          className="authing-g2-input"
-          autoComplete="email"
-          size="large"
-          placeholder={t('login.inputEmail')}
-          prefix={<UserOutlined style={{ color: '#878A95' }} />}
-        />
-      ),
-      name: 'email',
-      FormItemFC: EmailFormItem,
-    },
-    {
-      component: (
-        <Input.Password
-          className="authing-g2-input"
-          size="large"
-          placeholder={t('login.inputPwd')}
-          prefix={<LockOutlined style={{ color: '#878A95' }} />}
-        />
-      ),
-      name: 'password',
-      rules: [
-        {
-          validator(_, value) {
-            if ((value ?? '').indexOf(' ') !== -1) {
-              return Promise.reject(t('common.checkPasswordHasSpace'))
-            }
-            return Promise.resolve()
-          },
-        },
-        ...getPasswordValidate(
-          publicConfig?.passwordStrength,
-          publicConfig?.customPasswordStrength
-        ),
-      ],
-    },
-    {
-      component: (
-        <Input.Password
-          className="authing-g2-input"
-          size="large"
-          placeholder={t('common.passwordAgain')}
-          prefix={<LockOutlined style={{ color: '#878A95' }} />}
-        />
-      ),
-      name: 'new-password',
-      rules: [
-        ...getPasswordValidate(
-          publicConfig?.passwordStrength,
-          publicConfig?.customPasswordStrength
-        ),
-        {
-          validator: (_, value) => {
-            if (value !== form.getFieldValue('password')) {
-              return Promise.reject(t('common.repeatPasswordDoc'))
-            } else {
-              return Promise.resolve()
-            }
-          },
-        },
-      ],
-    },
-  ]
-
-  return (
-    <div className="authing-g2-register-email">
-      <Form
-        form={form}
-        name="emailRegister"
-        autoComplete="off"
-        onFinish={onFinish}
-        onFinishFailed={() => submitButtonRef.current.onError()}
-        onValuesChange={() => {
-          ref.current?.check()
-        }}
-      >
-        {formItems.map((item) =>
-          item.FormItemFC ? (
-            <item.FormItemFC
-              ref={ref}
-              key={item.name}
-              name={item.name}
-              className="authing-g2-input-form"
-              validateFirst={true}
-              userPoolId={publicConfig?.userPoolId!}
-              form={form}
-              checkRepeat={true}
-            >
-              {item.component}
-            </item.FormItemFC>
-          ) : (
-            <Form.Item
-              key={item.name}
-              name={item.name}
-              rules={item.rules}
-              className="authing-g2-input-form"
-              validateFirst={true}
-            >
-              {item.component}
-            </Form.Item>
-          )
-        )}
-        {Boolean(agreements?.length) && (
-          <Agreements
-            onChange={setAcceptedAgreements}
-            agreements={agreements}
-            showError={validated}
-          />
-        )}
-        <Form.Item>
-          <SubmitButton text={t('common.register')} ref={submitButtonRef} />
-        </Form.Item>
-      </Form>
-    </div>
-  )
-}

package/components/Register/core/WithPhone.tsx

@@ -1,184 +0,0 @@
-import { SafetyOutlined, UserOutlined } from '@ant-design/icons'
-import { Form } from 'antd'
-import React, { useRef, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useAsyncFn } from 'react-use'
-import { Agreement, ApplicationConfig } from '../../AuthingGuard/api'
-import { useAuthClient } from '../../Guard/authClient'
-import { SendCode } from '../../SendCode'
-import {
-  fieldRequiredRule,
-  getDeviceName,
-  getUserRegisterParams,
-} from '../../_utils'
-import { Agreements } from '../components/Agreements'
-import SubmitButton from '../../SubmitButton'
-import { InputNumber } from '../../InputNumber'
-import {
-  ICheckProps,
-  PhoneFormItem,
-  ValidatorFormItemProps,
-} from '../../ValidatorRules'
-import { Rule } from 'antd/lib/form'
-
-export interface RegisterWithPhoneProps {
-  onRegister: Function
-  agreements: Agreement[]
-  publicConfig?: ApplicationConfig
-}
-
-export const RegisterWithPhone: React.FC<RegisterWithPhoneProps> = ({
-  onRegister,
-  agreements,
-  publicConfig,
-}) => {
-  const { t } = useTranslation()
-  const submitButtonRef = useRef<any>(null)
-  const authClient = useAuthClient()
-  const [form] = Form.useForm()
-  const [phone, setPhone] = useState<string>('')
-  const [acceptedAgreements, setAcceptedAgreements] = useState(false)
-  const [validated, setValidated] = useState(false)
-
-  const ref = useRef<ICheckProps>(null)
-
-  const verifyCodeLength = publicConfig?.verifyCodeLength ?? 4
-
-  const [, onFinish] = useAsyncFn(
-    async (values: any) => {
-      try {
-        submitButtonRef.current.onSpin(true)
-        await form.validateFields()
-
-        setValidated(true)
-
-        if (agreements?.length && !acceptedAgreements) {
-          return
-        }
-
-        const { phone, password = '', code } = values
-
-        // 注册
-        const user = await authClient.registerByPhoneCode(
-          phone,
-          code,
-          password,
-          {
-            browser:
-              typeof navigator !== 'undefined' ? navigator.userAgent : null,
-            device: getDeviceName(),
-          },
-          {
-            generateToken: true,
-            params: getUserRegisterParams(),
-          }
-        )
-
-        submitButtonRef.current.onSpin(false)
-        onRegister(200, user)
-      } catch ({ code, data, message }) {
-        submitButtonRef.current.onSpin(false)
-        onRegister(code, data, message)
-      }
-    },
-    [form],
-    { loading: false }
-  )
-
-  const formItems: {
-    component: React.ReactNode
-    name: string
-    rules?: Rule[]
-    FormItemFC?: React.ForwardRefExoticComponent<
-      ValidatorFormItemProps & React.RefAttributes<ICheckProps>
-    >
-  }[] = [
-    {
-      component: (
-        <InputNumber
-          className="authing-g2-input"
-          onChange={(e) => {
-            setPhone(e.target.value)
-          }}
-          size="large"
-          placeholder={t('login.inputPhone')}
-          prefix={<UserOutlined style={{ color: '#878A95' }} />}
-          maxLength={11}
-        />
-      ),
-      name: 'phone',
-      FormItemFC: PhoneFormItem,
-    },
-    {
-      component: (
-        <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"
-          onSendCodeBefore={() => form.validateFields(['phone'])}
-          data={phone}
-        />
-      ),
-      name: 'code',
-      rules: fieldRequiredRule(t('common.captchaCode')),
-    },
-  ]
-
-  return (
-    <div className="authing-g2-register-email">
-      <Form
-        form={form}
-        name="emailRegister"
-        autoComplete="off"
-        onFinish={onFinish}
-        onFinishFailed={() => submitButtonRef.current.onError()}
-        onValuesChange={() => {
-          ref.current?.check()
-        }}
-      >
-        {formItems.map((item) =>
-          item.FormItemFC ? (
-            <item.FormItemFC
-              ref={ref}
-              key={item.name}
-              name={item.name}
-              className="authing-g2-input-form"
-              validateFirst={true}
-              userPoolId={publicConfig?.userPoolId!}
-              form={form}
-              checkRepeat={true}
-            >
-              {item.component}
-            </item.FormItemFC>
-          ) : (
-            <Form.Item
-              key={item.name}
-              name={item.name}
-              rules={item.rules}
-              className="authing-g2-input-form"
-              validateFirst={true}
-            >
-              {item.component}
-            </Form.Item>
-          )
-        )}
-        {Boolean(agreements?.length) && (
-          <Agreements
-            onChange={setAcceptedAgreements}
-            agreements={agreements}
-            showError={validated}
-          />
-        )}
-        <Form.Item>
-          <SubmitButton text={t('common.register')} ref={submitButtonRef} />
-        </Form.Item>
-      </Form>
-    </div>
-  )
-}

package/components/Register/index.tsx

@@ -1,115 +0,0 @@
-import React, { useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Tabs } from 'antd'
-import { RegisterMethods, User } from 'authing-js-sdk'
-import { ChangeLanguage } from '../ChangeLanguage'
-import { useAuthClient } from '../Guard/authClient'
-import { GuardModuleType } from '../Guard/module'
-import { RegisterWithEmail } from './core/WithEmail'
-import { RegisterWithPhone } from './core/WithPhone'
-import { GuardRegisterViewProps } from './props'
-
-export const GuardRegisterView: React.FC<GuardRegisterViewProps> = ({
-  config,
-  onLangChange,
-  __changeModule,
-  ...registerEvents
-}) => {
-  const { t } = useTranslation()
-  const agreementEnabled = config?.agreementEnabled
-  const { langRange } = config
-  const authClient = useAuthClient()
-
-  const __codePaser = (code: number) => {
-    if (code === 200) {
-      return (user: User) => {
-        // TODO 用户信息补全 等待后端接口修改
-        if (config.__publicConfig__!.extendsFieldsEnabled) {
-          __changeModule?.(GuardModuleType.COMPLETE_INFO, {})
-        } else {
-          registerEvents.onRegister?.(user, authClient)
-          __changeModule?.(GuardModuleType.LOGIN, {})
-        }
-      }
-    }
-  }
-
-  const registerContextProps = useMemo(
-    () => ({
-      onRegister: (code: number, data: any = {}, message?: string) => {
-        const callback = __codePaser(code)
-
-        callback?.({
-          ...data,
-          _message: message,
-        })
-      },
-      onBeforeRegister: registerEvents.onBeforeRegister,
-      agreements: agreementEnabled ? config?.agreements ?? [] : [],
-      publicConfig: config.__publicConfig__,
-    }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [agreementEnabled, config?.agreements, registerEvents.onBeforeRegister]
-  )
-
-  const tabMapping: Record<
-    RegisterMethods,
-    { component: React.ReactNode; name: string }
-  > = useMemo(
-    () => ({
-      [RegisterMethods.Email]: {
-        component: <RegisterWithEmail {...registerContextProps} />,
-        name: t('common.emailLabel'),
-      },
-      [RegisterMethods.Phone]: {
-        component: <RegisterWithPhone {...registerContextProps} />,
-        name: t('common.phoneLabel'),
-      },
-    }),
-    [registerContextProps, t]
-  )
-
-  const renderTab = useMemo(
-    () =>
-      config?.registerMethods?.map((method) => (
-        <Tabs.TabPane tab={tabMapping[method].name} key={method}>
-          {tabMapping[method].component}
-        </Tabs.TabPane>
-      )),
-    [config?.registerMethods, tabMapping]
-  )
-
-  return (
-    <div className="g2-view-container">
-      <div className="g2-view-header">
-        <img src={config?.logo} alt="" className="icon" />
-
-        <div className="title">
-          {t('common.welcomeJoin', { name: config?.title })}
-        </div>
-      </div>
-      <div className="g2-view-tabs">
-        <Tabs
-          defaultActiveKey={config?.defaultRegisterMethod}
-          onChange={(activeKey) => {
-            registerEvents.onRegisterTabChange?.(activeKey as RegisterMethods)
-          }}
-        >
-          {renderTab}
-        </Tabs>
-      </div>
-      <div className="g2-tips-line">
-        <span className="back-to-login">
-          <span className="gray">{t('common.alreadyHasAcc')}</span>
-          <span
-            className="link-like"
-            onClick={() => __changeModule?.(GuardModuleType.LOGIN, {})}
-          >
-            {t('common.backLoginPage')}
-          </span>
-        </span>
-      </div>
-      <ChangeLanguage langRange={langRange} onLangChange={onLangChange} />
-    </div>
-  )
-}

package/components/Register/props.ts

@@ -1,50 +0,0 @@
-import { RegisterMethods } from 'authing-js-sdk'
-import { IG2FCProps, IG2Config, getDefaultG2Config, IG2Events } from '../Type'
-import {
-  AuthenticationClient,
-  User,
-  EmailRegisterParams,
-  PhoneRegisterParams,
-} from '..'
-import { Agreement } from '../AuthingGuard/api'
-
-export interface RegisterConfig extends IG2Config {
-  disableRegister: boolean
-  registerMethods: RegisterMethods[]
-  defaultRegisterMethod: RegisterMethods
-  publicKey?: string
-  agreementEnabled?: boolean
-  agreements?: Agreement[]
-}
-
-const defaultConfig: RegisterConfig = {
-  ...getDefaultG2Config(),
-  disableRegister: false,
-  defaultRegisterMethod: RegisterMethods.Email,
-  registerMethods: [RegisterMethods.Email, RegisterMethods.Phone],
-}
-
-export interface RegisterEvents extends IG2Events {
-  onBeforeRegister?: (
-    registerInfo: EmailRegisterParams | PhoneRegisterParams,
-    authClient: AuthenticationClient
-  ) => boolean | Promise<boolean>
-  onRegister?: (user: User, authClient: AuthenticationClient) => void
-  onRegisterError?: (error: any) => void
-  onRegisterTabChange?: (activeTab: RegisterMethods) => void
-}
-
-export interface GuardRegisterProps extends IG2FCProps, RegisterEvents {
-  config?: Partial<RegisterConfig>
-}
-
-export interface GuardRegisterViewProps extends GuardRegisterProps {
-  config: RegisterConfig
-}
-
-const getDefaultConfig = (): RegisterConfig => ({
-  ...getDefaultG2Config(),
-  ...defaultConfig,
-})
-
-export const getDefaultRegisterConfig = getDefaultConfig

package/components/SendCode/SendCodeBtn.tsx

@@ -1,96 +0,0 @@
-import { Button } from 'antd'
-import React, { FC, useState, useRef, useEffect, useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
-import './style.less'
-import { ButtonProps } from 'antd/lib/button'
-
-const TIME = 60
-export interface SendCodeProps extends ButtonProps {
-  beforeSend: () => Promise<boolean>
-  btnRef?: React.RefObject<HTMLButtonElement>
-}
-
-const useSentCounter = () => {
-  const [countDown, setCountDown] = useState(0)
-  const timerRef = useRef<any>(0)
-
-  useEffect(() => {
-    return () => clearInterval(timerRef.current)
-  }, [])
-
-  useEffect(() => {
-    if (countDown <= 0) {
-      clearInterval(timerRef.current)
-    }
-  }, [countDown])
-
-  const enabled = useMemo(() => countDown <= 0, [countDown])
-
-  const send = () => {
-    setCountDown(TIME)
-
-    timerRef.current = setInterval(() => {
-      setCountDown((prev) => {
-        return prev - 1
-      })
-    }, 1000)
-  }
-
-  return {
-    enabled,
-    send,
-    countDown,
-  }
-}
-
-export const SendCodeBtn: FC<SendCodeProps> = ({
-  beforeSend,
-  btnRef,
-  ...buttonProps
-}) => {
-  const { enabled, send, countDown } = useSentCounter()
-  const [loading, setLoading] = useState(false)
-  const { t } = useTranslation()
-  const disabled = useMemo(() => {
-    return !enabled || loading
-  }, [enabled, loading])
-
-  const onClick = async (e: React.MouseEvent<HTMLButtonElement>) => {
-    setLoading(true)
-    if (disabled) {
-      return
-    }
-
-    let beforeStop = !(await beforeSend())
-    if (beforeStop) {
-      setLoading(false)
-      return
-    }
-    setLoading(false)
-    send()
-  }
-
-  return (
-    <Button
-      {...buttonProps}
-      className={
-        buttonProps.type ?? 'authing-g2-send-code-btn g2-loading-btn-center'
-      }
-      disabled={disabled}
-      loading={loading}
-      onClick={onClick}
-      ref={btnRef}
-    >
-      {loading === true && <span></span>}
-      {loading === false && (
-        <span>
-          {enabled
-            ? t('common.sendVerifyCode')
-            : t('common.retryAfterTime', {
-                time: countDown,
-              })}
-        </span>
-      )}
-    </Button>
-  )
-}