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

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>
-  )
-}

package/components/ChangePassword/index.tsx

@@ -1,59 +0,0 @@
-import React from 'react'
-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__
-  // let [resetType] = useState<'inital' | 'rotate'>(initData.type) //
-  // console.log('******', initData.type)
-  // let publicConfig = props.config.__publicConfig__
-
-  const onReset = (res: any) => {
-    let code = res.code
-    if (code === 200) {
-      // 返回登录
-      props.__changeModule(GuardModuleType.LOGIN)
-    } else {
-      console.log('*** reset code no catched', res)
-    }
-  }
-
-  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">欢迎访问 {config.title}</div>
-        <div className="title-explain">
-          你的密码连续使用超过 xxx，可能存在风险。请重新设置密码。
-        </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 getDefaultLoginConfig = (): 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;
-}

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>
-  )
-}