@authing/react-ui-components 3.0.2-beta.6 → 3.0.3-rc.3

package/components/ChangePassword/core/firstLoginReset.tsx

@@ -1,111 +0,0 @@
-import React, { useRef } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Form, Input, message } 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
-    submitButtonRef.current?.onSpin(false)
-    try {
-      let res = await client.resetPasswordByFirstLoginToken({
-        token: props.initData.token,
-        password: newPassword,
-      })
-      props.onReset(res)
-    } catch (error) {
-      message.error(error.message)
-      submitButtonRef?.current?.onError()
-    } finally {
-      submitButtonRef.current?.onSpin(false)
-    }
-  }
-
-  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,125 +0,0 @@
-import React, { useRef } from 'react'
-import { useTranslation } from 'react-i18next'
-import { Form, Input, message } from 'antd'
-
-import { LockOutlined } from '@ant-design/icons'
-
-import { getPasswordValidate } from '../../_utils'
-import SubmitButton from '../../SubmitButton'
-import { useAuthClient } from '../../Guard/authClient'
-
-interface RotateResetProps {
-  onReset: any
-  publicConfig: any
-  initData: any
-}
-
-export const RotateReset = (props: RotateResetProps) => {
-  const { t } = useTranslation()
-  let [form] = Form.useForm()
-  let authClient = useAuthClient()
-  let submitButtonRef = useRef<any>(null)
-
-  const onFinish = async (values: any) => {
-    let { password, oldPassword } = values
-    submitButtonRef?.current?.onSpin(true)
-
-    try {
-      let res = await authClient.resetPasswordByForceResetToken({
-        token: props.initData.token,
-        newPassword: password,
-        oldPassword: oldPassword,
-      })
-      props.onReset(res)
-    } catch (error) {
-      message.error(error.message)
-      submitButtonRef?.current?.onError()
-    } finally {
-      submitButtonRef?.current?.onSpin(false)
-    }
-  }
-
-  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>
-  )
-}

package/components/ChangePassword/index.tsx

@@ -1,72 +0,0 @@
-import React, { useMemo } from 'react'
-import { useTranslation } from 'react-i18next'
-import { GuardModuleType } from '../Guard/module'
-import { ImagePro } from '../ImagePro'
-import { FirstLoginReset } from './core/firstLoginReset'
-import { RotateReset } from './core/rotateReset'
-
-// 手动修改密码，并非「忘记密码」
-// 进入的场景是读取配置：1开了首次登录修改密码 || 2开了密码轮换
-export const GuardChangePassword = (props: any) => {
-  let { initData, config } = props
-  let publicConfig = config.__publicConfig__
-  const { t } = useTranslation()
-
-  const onReset = (res: any) => {
-    let code = res.code
-    if (code === 200) {
-      // 返回登录
-      props.__changeModule(GuardModuleType.LOGIN)
-    } else {
-      console.log('*** reset code no catched', res)
-    }
-  }
-
-  const typeContent = useMemo(() => {
-    if (initData.type === 'inital') {
-      return {
-        title: `${t('common.welcome')} ${config.title}`,
-        explain: t('common.initPasswordText'),
-      }
-    } else {
-      return {
-        title: t('user.modifyPwd'),
-        explain: t('user.modifyPwdText', {
-          number: 1,
-        }),
-      }
-    }
-  }, [config.title, initData.type, t])
-
-  return (
-    <div className="g2-view-container">
-      <div className="g2-view-header">
-        <ImagePro
-          src={config?.logo}
-          size={48}
-          borderRadius={4}
-          alt=""
-          className="icon"
-        />
-        <div className="title">{typeContent.title}</div>
-        <div className="title-explain">{typeContent.explain}</div>
-      </div>
-      <div className="g2-view-tabs">
-        {initData.type === 'inital' && (
-          <FirstLoginReset
-            onReset={onReset}
-            initData={initData}
-            publicConfig={publicConfig}
-          />
-        )}
-        {initData.type === 'rotate' && (
-          <RotateReset
-            onReset={onReset}
-            initData={initData}
-            publicConfig={publicConfig}
-          />
-        )}
-      </div>
-    </div>
-  )
-}

package/components/CompleteInfo/core/completeInfo.tsx

@@ -1,155 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react'
-import { Form, Input, message, Select } from 'antd'
-import { useTranslation } from 'react-i18next'
-import { useAsyncFn } from 'react-use'
-import { ExtendsField } from '../../AuthingGuard/api'
-import { UploadImage } from '../../AuthingGuard/Forms/UploadImage'
-import { useAuthClient } from '../../Guard/authClient'
-import { i18n } from '../../_utils/locales'
-import { useGuardHttp } from '../../_utils/guradHttp'
-import { GuardCompleteInfoViewProps } from '../interface'
-import SubmitButton from '../../SubmitButton'
-
-export interface CompleteInfoProps {
-  extendsFields: ExtendsField[]
-  onRegisterInfoCompleted?: GuardCompleteInfoViewProps['onRegisterInfoCompleted']
-  onRegisterInfoCompletedError?: GuardCompleteInfoViewProps['onRegisterInfoCompletedError']
-}
-
-export const CompleteInfo: React.FC<CompleteInfoProps> = ({
-  extendsFields,
-  onRegisterInfoCompleted,
-  onRegisterInfoCompletedError,
-}) => {
-  const authClient = useAuthClient()
-  const submitButtonRef = useRef<any>(null)
-  const { get, post } = useGuardHttp()
-  const { t } = useTranslation()
-  const [form] = Form.useForm()
-
-  const [definitions, setDefinitions] = useState<any[]>([])
-
-  const [, loadInitData] = useAsyncFn(async () => {
-    const user = await authClient.getCurrentUser()
-
-    const { data } = await get<any>('/api/v2/udfs/definitions', undefined, {
-      headers: {
-        authorization: user?.token!,
-      },
-    })
-
-    setDefinitions(data)
-  }, [authClient, get])
-
-  useEffect(() => {
-    loadInitData()
-  }, [loadInitData])
-
-  const INPUT_MAP: Record<string, React.ReactNode | undefined> = {
-    image: <UploadImage />,
-  }
-  const INTERNAL_INPUT_MAP: Record<string, React.ReactNode | undefined> = {
-    gender: (
-      <Select
-        className="authing-g2-select"
-        options={[
-          { label: i18n.t('common.man'), value: 'M' },
-          { label: i18n.t('common.female'), value: 'F' },
-        ]}
-      />
-    ),
-  }
-
-  const formFields = extendsFields.map((def) => {
-    const key = `${def.type} ${def.type === 'internal' ? def.name : def.id}`
-
-    const label = i18n.language === 'zh-CN' ? def.label : def.name
-
-    return (
-      <Form.Item
-        key={key}
-        name={key}
-        label={label}
-        // style={{ marginBottom: 24 }}
-        className="authing-g2-input-form"
-        rules={[
-          {
-            required: true,
-            message: `${label} ${t('login.noEmpty')}`,
-          },
-        ]}
-      >
-        {INTERNAL_INPUT_MAP[def.name] || INPUT_MAP[def.inputType] || (
-          <Input
-            type={def.inputType}
-            size="large"
-            className="authing-g2-input"
-            autoComplete="tel"
-          />
-        )}
-      </Form.Item>
-    )
-  })
-
-  const [, onFinish] = useAsyncFn(async (values: any) => {
-    submitButtonRef.current?.onSpin(true)
-
-    const internalFields: any = {}
-    const userFields: any[] = []
-    Object.entries(values).forEach(([key, value]) => {
-      const [type, nameOrId] = key.split(' ')
-      if (type === 'internal') {
-        internalFields[nameOrId] = value
-      } else if (type === 'user') {
-        userFields.push({ nameOrId, value })
-      }
-    })
-
-    const udfs = userFields.map(({ nameOrId, value }) => ({
-      definition: definitions.find((def) => def.id === nameOrId),
-      value,
-    }))
-
-    try {
-      const user = await authClient.updateProfile(internalFields)
-
-      await post(
-        `/api/v2/udfs/values`,
-        {
-          udfs,
-        },
-        {
-          headers: {
-            authorization: user?.token,
-          },
-        }
-      )
-      submitButtonRef.current?.onSpin(false)
-      message.success(t('common.saveSuccess'))
-      onRegisterInfoCompleted?.(user, udfs, authClient)
-    } catch (e) {
-      // TODO
-      submitButtonRef.current?.onSpin(false)
-      onRegisterInfoCompletedError?.(e, udfs, authClient)
-    }
-  }, [])
-
-  return (
-    <Form
-      layout="vertical"
-      form={form}
-      onFinish={onFinish}
-      onFinishFailed={() => submitButtonRef.current.onError()}
-    >
-      {formFields}
-
-      <Form.Item className="authing-g2-input-form">
-        <SubmitButton
-          text={t('common.problem.form.submit')}
-          ref={submitButtonRef}
-          className="password g2-completeInfo-submit"
-        />
-      </Form.Item>
-    </Form>
-  )
-}

package/components/CompleteInfo/index.tsx

@@ -1,45 +0,0 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { ImagePro } from '../ImagePro'
-import { GuardModuleType } from '../Guard/module'
-
-import { CompleteInfo } from './core/completeInfo'
-import { GuardCompleteInfoViewProps } from './interface'
-
-import './styles.less'
-
-export const GuardCompleteInfoView: React.FC<GuardCompleteInfoViewProps> = ({
-  config,
-  onRegisterInfoCompleted,
-  onRegisterInfoCompletedError,
-  __changeModule,
-}) => {
-  const { t } = useTranslation()
-  return (
-    <div className="g2-view-container">
-      <div className="g2-view-header">
-        <ImagePro
-          src={config?.logo}
-          size={48}
-          borderRadius={4}
-          alt=""
-          className="icon"
-        />
-        <div className="title">{t('common.perfectUserInfo')}</div>
-        <div className="title-explain">
-          {t('common.welcomeDoc', { name: config.title })}
-        </div>
-      </div>
-      <div className="g2-view-tabs g2-completeInfo-content">
-        <CompleteInfo
-          extendsFields={config?.__publicConfig__?.extendsFields!}
-          onRegisterInfoCompleted={(user, udfs, authClient) => {
-            onRegisterInfoCompleted?.(user, udfs, authClient)
-            __changeModule?.(GuardModuleType.LOGIN, {})
-          }}
-          onRegisterInfoCompletedError={onRegisterInfoCompletedError}
-        />
-      </div>
-    </div>
-  )
-}

package/components/CompleteInfo/interface.ts

@@ -1,40 +0,0 @@
-import { AuthenticationClient, CommonMessage, User } from 'authing-js-sdk'
-import { getDefaultG2Config, IG2Config, IG2Events, IG2FCProps } from '../Type'
-
-export interface CompleteInfoConfig extends IG2Config {}
-
-const defaultConfig: CompleteInfoConfig = {
-  ...getDefaultG2Config(),
-}
-
-export const getDefaultCompleteInfoConfig = (): CompleteInfoConfig => ({
-  ...getDefaultG2Config(),
-  ...defaultConfig,
-})
-
-export interface CompleteInfoEvents extends IG2Events {
-  onRegisterInfoCompleted?: (
-    user: User,
-    udfs: {
-      definition: any
-      value: any
-    }[],
-    authClient: AuthenticationClient
-  ) => void
-  onRegisterInfoCompletedError?: (
-    error: CommonMessage,
-    udfs: {
-      definition: any
-      value: any
-    }[],
-    authClient: AuthenticationClient
-  ) => void
-}
-
-export interface GuardCompleteInfoProps extends IG2FCProps, CompleteInfoEvents {
-  config: Partial<CompleteInfoConfig>
-}
-
-export interface GuardCompleteInfoViewProps extends GuardCompleteInfoProps {
-  config: CompleteInfoConfig
-}

package/components/CompleteInfo/styles.less

@@ -1,7 +0,0 @@
-.g2-completeInfo-content {
-  margin-bottom: 44px;
-}
-
-.g2-completeInfo-submit {
-  margin-top: 30px !important;
-}

package/components/CopyAbleText/index.tsx

@@ -1,54 +0,0 @@
-import React, { FC, useCallback, useEffect, useRef, useState } from 'react'
-import { CopyOutlined, CheckOutlined } from '@ant-design/icons'
-import { copyToClipboard, getClassnames } from '../_utils'
-
-import './style.less'
-import { useTranslation } from 'react-i18next'
-
-export interface CopyTextProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-export const CopyAbleText: FC<CopyTextProps> = ({ children, className }) => {
-  const { t } = useTranslation()
-  const divRef = useRef<HTMLDivElement>(null)
-  const [copied, setCopied] = useState(false)
-  const timer = useRef(-1)
-
-  const startTimer = useCallback(() => {
-    setCopied(true)
-    clearTimeout(timer.current)
-    timer.current = (setTimeout(
-      () => setCopied(false),
-      3000
-    ) as unknown) as number
-  }, [timer])
-
-  useEffect(() => {
-    return () => clearTimeout(timer.current)
-  }, [])
-
-  const handleCopy = () => {
-    copyToClipboard(divRef.current!.innerText)
-    startTimer()
-  }
-
-  return (
-    <div
-      className={getClassnames(['authing-copy-text', className])}
-      ref={divRef}
-    >
-      {children}
-      {copied ? (
-        <CheckOutlined
-          className="authing-data-tips authing-data-tips__top authing-guard-pointer authing-copy-text-icon authing-copy-text-icon__success"
-          data-tips={t('common.copied')}
-        />
-      ) : (
-        <CopyOutlined
-          className="authing-data-tips authing-data-tips__top authing-guard-pointer authing-copy-text-icon"
-          data-tips={t('common.copy')}
-          onClick={handleCopy}
-        />
-      )}
-    </div>
-  )
-}

package/components/CopyAbleText/style.less

@@ -1,13 +0,0 @@
-.authing-copy-text {
-  display: flex;
-  align-items: center;
-}
-
-.authing-copy-text-icon {
-  margin-left: 4px;
-  color: #396aff;
-}
-
-.authing-copy-text-icon__success {
-  color: #b7eb8f;
-}