@authing/react-ui-components 3.0.0-alpha → 3.0.0-rc.3

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 '../props'
-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 './props'
-
-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/props.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/CompleteUserInfo/index.tsx

@@ -1,49 +0,0 @@
-import { Button, Form, Input } from 'antd'
-import React, { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import { useAsyncFn } from 'react-use'
-import { i18n } from '..//_utils/locales'
-import { useGuardHttp } from '../_utils/guradHttp'
-import { useAuthClient } from '../Guard/authClient'
-import { CompleteUserInfoProps } from './props'
-
-export const GuardCompleteUserInfo: React.FC<CompleteUserInfoProps> = ({
-  appId,
-  config = {},
-}) => {
-  useAuthClient()
-  useGuardHttp()
-
-  const { t } = useTranslation()
-
-  const { extendsFields = [] } = config
-
-  const [fields, setFields] = useState([])
-
-  const [loadState, loadFields] = useAsyncFn(async () => {}, [], {
-    loading: true,
-  })
-
-  const renderFields = extendsFields.map((field) => {
-    const key = `${field.type} ${
-      field.type === 'internal' ? field.name : field.id
-    }`
-
-    const label = i18n.language === 'zh-CN' ? field.label : field.name
-
-    return (
-      <Form.Item key={key} name={key} label={label} style={{ marginBottom: 8 }}>
-        <Input type={field.inputType} size="large" />
-      </Form.Item>
-    )
-  })
-
-  return (
-    <Form layout="vertical">
-      {renderFields}
-      <Button size="large" type="primary" block htmlType="submit">
-        {t('common.problem.form.submit')}
-      </Button>
-    </Form>
-  )
-}

package/components/CompleteUserInfo/props.ts

@@ -1,25 +0,0 @@
-import { getDefaultG2Config, IG2Config, IG2Events, IG2FCProps } from '../Type'
-import { ExtendsField } from '../AuthingGuard/api'
-
-export interface CompleteUserInfoConfig extends IG2Config {
-  extendsFields?: ExtendsField[]
-}
-
-const defaultConfig: CompleteUserInfoConfig = {
-  ...getDefaultG2Config(),
-}
-
-const getDefaultConfig = (): CompleteUserInfoConfig => ({
-  ...getDefaultG2Config(),
-  ...defaultConfig,
-})
-
-export const getDefaultCompleteUserInfoConfig = getDefaultConfig
-
-export interface CompleteUserInfoEvents extends IG2Events {}
-
-export interface CompleteUserInfoProps
-  extends IG2FCProps,
-    CompleteUserInfoEvents {
-  config?: CompleteUserInfoConfig
-}

package/components/ComponentsRender/index.back

@@ -1,64 +0,0 @@
-// import { ConfigProvider } from 'antd'
-// import React, { useCallback, useEffect, useMemo, useState } from 'react'
-// import { IG2Config, IG2FCProps } from '../Type'
-// import { initI18n } from 'src/locales'
-// import { initConfig } from '../_utils/config'
-// import { initGuardHttp } from '../_utils/guradHttp'
-// import { initAuthClient } from '../Guard/authClient'
-// import { Spin } from '../Spin'
-
-import React from 'react'
-import { IG2FCProps } from '../Type'
-
-export interface ComponentsRenderProps extends IG2FCProps {
-  component: any
-}
-// const PREFIX_CLS = 'authing-ant'
-
-export const ComponentsRender: React.FC<ComponentsRenderProps> = ({
-  appId,
-  config,
-  initData,
-  component,
-}) => {
-  // const [guardConfig, setGuardConfig] = useState<IG2Config>()
-  // const [initSettingEnd, setInitSettingEnd] = useState(false)
-
-  // const init = useCallback(async () => {
-  //   const { config: mergedConfig, publicConfig } = await initConfig(
-  //     appId,
-  //     config ?? {},
-  //     {}
-  //   )
-
-  //   setGuardConfig(mergedConfig)
-
-  //   const httpClient = initGuardHttp(mergedConfig?.host!)
-  //   httpClient.setAppId(appId)
-  //   httpClient.setUserpoolId(publicConfig.userPoolId)
-
-  //   initI18n({}, mergedConfig.lang)
-
-  //   initAuthClient(config, appId)
-
-  //   setInitSettingEnd(true)
-  // }, [appId, config])
-
-  // useEffect(() => {
-  //   init()
-  // }, [init])
-
-  // const renderComponent = useMemo(() => {
-  //   if (initSettingEnd) {
-  //     return component({
-  //       appId,
-  //       config: guardConfig,
-  //       initData,
-  //     })
-  //   } else {
-  //     return <Spin />
-  //   }
-  // }, [appId, component, guardConfig, initData, initSettingEnd])
-
-  return <span>ComponentsRender</span>
-}

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 './props'
-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/props.ts

@@ -1,22 +0,0 @@
-import { getDefaultG2Config, IG2Config, IG2Events, IG2FCProps } from '../Type'
-
-export interface DownloadATConfig extends IG2Config {}
-
-const defaultConfig: DownloadATConfig = {
-  ...getDefaultG2Config(),
-}
-
-export const getDefaultLoginConfig = (): 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;
-    }
-  }
-}