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

package/components/_utils/clipboard.ts

@@ -1,27 +0,0 @@
-import { i18n } from './locales'
-
-// https://juejin.im/post/6844903857290477582
-export const copyToClipboard = (str: string) => {
-  const el = document.createElement('textarea') // 创建一个 <textarea> 元素
-  el.value = str // 设置它的值为你想复制的字符串
-  el.setAttribute('readonly', '') // 设置为只读以防止干扰
-  el.style.position = 'absolute'
-  el.style.left = '-9999px' // 移出屏幕外以使其不可见
-  document.body.appendChild(el) // 插入 <textarea> 元素到 HTML 文档中
-  try {
-    const selected =
-      document.getSelection()!.rangeCount > 0 // 检查是否之前曾选中过内容
-        ? document.getSelection()!.getRangeAt(0) // 如果找到，则保存选中
-        : false // 标记为  false 以表示不存在之前选中的内容
-    el.select() // 选中 <textarea> 的内容
-    document.execCommand('copy') // 复制 - 仅当作为用户操作的响应结果时才可以工作(比如，点击事件)
-    document.body.removeChild(el) // 移除 <textarea> 元素
-    if (selected) {
-      // 如果在复制前已存在选中的内容
-      document.getSelection()!.removeAllRanges() // 取消 HTML 文档中所有的选中部分
-      document.getSelection()!.addRange(selected) // 恢复原来的选中
-    }
-  } catch (e) {
-    console.warn(i18n.t('common.copyFailed'))
-  }
-}

package/components/_utils/config.ts

@@ -1,118 +0,0 @@
-import { LoginMethods, RegisterMethods } from 'authing-js-sdk'
-import { IG2Config } from '../Type'
-import { ApplicationConfig } from '../AuthingGuard/api'
-import { assembledAppHost } from '.'
-import { getGuardHttp, GuardHttp, useGuardHttp } from './guradHttp'
-import { AuthingResponse } from './http'
-import { GuardComponentConifg, GuardLocalConfig } from '../Guard/config'
-
-let publicConfigMap: Record<string, ApplicationConfig> = {}
-
-const getPublicConfig = (appId: string) => publicConfigMap?.[appId]
-
-const setPublicConfig = (appId: string, config: ApplicationConfig) =>
-  (publicConfigMap[appId] = config)
-
-export const initConfig = async (
-  appId: string,
-  config: Partial<IG2Config>,
-  defaultConfig: IG2Config
-): Promise<{ config: GuardLocalConfig; publicConfig: ApplicationConfig }> => {
-  if (!getPublicConfig(appId))
-    await requestPublicConfig(appId, config.host ?? defaultConfig.host)
-  const mergedConfig = mergeConfig(
-    config,
-    defaultConfig,
-    getPublicConfig(appId)
-  )
-
-  return {
-    config: {
-      ...mergedConfig,
-      __publicConfig__: getPublicConfig(appId),
-      __appHost__: assembledAppHost(
-        getPublicConfig(appId).identifier,
-        mergedConfig?.host!
-      ),
-    },
-    publicConfig: getPublicConfig(appId),
-  }
-}
-
-const mergeConfig = (
-  config: GuardComponentConifg,
-  defaultConfig: IG2Config,
-  publicConfig: ApplicationConfig
-): GuardLocalConfig => {
-  const mergedPublicConfig: GuardLocalConfig = {
-    ...defaultConfig,
-    ...config,
-    title: config.title ?? publicConfig.name,
-    logo: !!config.logo ? config.logo : publicConfig.logo,
-    loginMethods:
-      config?.loginMethods ??
-      (publicConfig.loginTabs?.list as LoginMethods[]) ??
-      [],
-    passwordLoginMethods:
-      config?.passwordLoginMethods ??
-      publicConfig.passwordTabConfig?.enabledLoginMethods ??
-      [],
-    // 默认登录方式
-    defaultLoginMethod:
-      config.defaultLoginMethod ??
-      (publicConfig.loginTabs.default as LoginMethods),
-    // 禁止重制密码
-    disableResetPwd: !!(
-      config.disableResetPwd ??
-      !publicConfig.ssoPageComponentDisplay?.forgetPasswordBtn
-    ),
-    // 是否自动注册
-    autoRegister:
-      config.autoRegister ??
-      publicConfig.ssoPageComponentDisplay.autoRegisterThenLoginHintInfo,
-    registerMethods:
-      config.registerMethods ??
-      (publicConfig.registerTabs?.list as RegisterMethods[]),
-    defaultRegisterMethod:
-      config.defaultRegisterMethod ??
-      (publicConfig.registerTabs.default as RegisterMethods),
-    // 禁止注册
-    disableRegister: !!(
-      config.disableRegister ??
-      !publicConfig.ssoPageComponentDisplay.registerBtn
-    ),
-    // publicKey
-    publicKey: config.publicKey ?? publicConfig.publicKey,
-    // 注册协议
-    agreementEnabled: config.agreementEnabled ?? publicConfig.agreementEnabled,
-    agreements: config.agreements ?? publicConfig.agreements,
-    contentCss: config.contentCss ?? publicConfig.css,
-  }
-
-  return mergedPublicConfig
-}
-
-const requestPublicConfig = async (
-  appId: string,
-  host: string
-): Promise<ApplicationConfig> => {
-  let res: AuthingResponse<ApplicationConfig>
-
-  const { get } = getGuardHttp()
-
-  try {
-    res = await get<ApplicationConfig>(
-      `/api/v2/applications/${appId}/public-config`
-    )
-  } catch (error) {
-    console.error('Please check your config or network')
-    throw new Error('Please check your config or network')
-  }
-
-  if (res.code !== 200 || !res.data)
-    throw new Error(res?.message ?? 'Please check your config')
-
-  setPublicConfig(appId, res.data)
-
-  return getPublicConfig(appId)
-}

package/components/_utils/guradHttp.ts

@@ -1,97 +0,0 @@
-import packageConfig from '../../package.json'
-import { requestClient } from './http'
-
-let httpClient: GuardHttp
-
-export class GuardHttp {
-  private requestClient: any
-  private headers: Record<string, string> = {
-    'x-authing-userpool-id': '',
-    'x-authing-app-id': '',
-    'x-authing-sdk-version': packageConfig.version,
-    'x-authing-request-from': `Guard-${packageConfig.framework}@${packageConfig.version}`,
-  }
-
-  constructor(baseUrl: string) {
-    this.getRequestClient().setBaseUrl(baseUrl)
-  }
-
-  private getRequestClient() {
-    if (!this.requestClient) {
-      this.requestClient = requestClient
-    }
-
-    return this.requestClient
-  }
-
-  setUserpoolId(userpoolId: string) {
-    this.headers['x-authing-userpool-id'] = userpoolId
-  }
-
-  setAppId(appId: string) {
-    this.headers['x-authing-app-id'] = appId
-  }
-
-  setTenantId(tenantId: string) {
-    this.headers['x-authing-app-tenant-id'] = tenantId
-  }
-
-  public getHeaders = () => this.headers
-
-  public get = async <T>(
-    path: string,
-    query: Record<string, any> = {},
-    config?: RequestInit
-  ) =>
-    await requestClient.get<T>(path, query, {
-      ...config,
-      headers: { ...this.headers, ...config?.headers },
-    })
-
-  public post = async <T>(
-    path: string,
-    data: any,
-    config?: {
-      headers: any
-    }
-  ) =>
-    await requestClient.post<T>(path, data, {
-      headers: {
-        ...this.headers,
-        ...config?.headers,
-      },
-    })
-
-  public postForm = async <T>(
-    path: string,
-    formData: any,
-    config?: {
-      headers: any
-    }
-  ) =>
-    await requestClient.postForm<T>(path, formData, {
-      headers: {
-        ...this.headers,
-        ...config?.headers,
-      },
-    })
-}
-
-export const initGuardHttp = (baseUrl: string) => {
-  if (!httpClient) {
-    const guardHttp = new GuardHttp(baseUrl)
-    httpClient = guardHttp
-  }
-
-  return httpClient
-}
-
-export const getGuardHttp = () => {
-  if (!httpClient) {
-    throw new Error('Please initialize Http Client')
-  }
-
-  return httpClient
-}
-
-export const useGuardHttp = () => getGuardHttp()

package/components/_utils/hooks/index.ts

@@ -1,64 +0,0 @@
-import { useRef, useCallback, useEffect } from 'react'
-import { GuardModuleType } from '../../Guard/module'
-import { useModule } from '../../context/module/context'
-
-export const useChangeModule = () => {
-  const { module, changeModule, setInitData } = useModule()
-
-  const nextModule = (nextModuleType: GuardModuleType, nextData?: any) => {
-    if (nextModuleType !== module) changeModule(nextModuleType)
-
-    setInitData(nextData ?? {})
-  }
-
-  return nextModule
-}
-
-let thisAppId: string = ''
-
-export const useAppId = (appId?: string) => {
-  if (appId) {
-    thisAppId = appId
-  }
-
-  return thisAppId
-}
-
-export const useDebounce = (
-  // 回调函数
-  fn: any,
-  // 延迟时间
-  delay: number
-) => {
-  const timer = useRef<{ time: any }>({ time: null })
-  const errorBody = useRef<{ body: any }>({ body: null })
-
-  useEffect(() => {
-    return () => {
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      timer.current.time && clearInterval(timer.current.time)
-    }
-  }, [])
-
-  return useCallback(
-    (...args: any[]) => {
-      if (timer.current.time) {
-        clearTimeout(timer.current.time)
-        timer.current.time = null
-      }
-      timer.current.time = setTimeout(() => {
-        // fn.apply(this, args);
-        const res = fn(...args)
-        timer.current.time = null
-        errorBody.current.body = res
-      }, delay)
-      if (errorBody.current.body) {
-        return Promise.reject(errorBody.current.body)
-      } else {
-        return Promise.resolve()
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [timer.current, delay]
-  )
-}

package/components/_utils/http.ts

@@ -1,85 +0,0 @@
-import qs from 'qs'
-import { i18n } from './locales'
-
-export const requestClient = async (...rest: Parameters<typeof fetch>) => {
-  const res = await fetch(...rest)
-  return res.json()
-}
-
-export interface AuthingResponse<T = any> {
-  code: number
-  message?: string
-  data?: T
-}
-
-requestClient.get = async <T>(
-  path: string,
-  query: Record<string, any> = {},
-  init?: RequestInit
-): Promise<AuthingResponse<T>> => {
-  const res = await fetch(
-    `${requestClient.baseUrl}${path}${qs.stringify(query, {
-      addQueryPrefix: true,
-    })}`,
-    {
-      ...init,
-      credentials: 'include',
-      headers: {
-        ...init?.headers,
-        [requestClient.langHeader]: i18n.language,
-      },
-    }
-  )
-
-  return res.json()
-}
-
-requestClient.post = async <T>(
-  path: string,
-  data: any,
-  config?: {
-    headers: any
-  }
-): Promise<AuthingResponse<T>> => {
-  const res = await fetch(`${requestClient.baseUrl}${path}`, {
-    method: 'POST',
-    body: JSON.stringify(data),
-    credentials: 'include',
-    headers: {
-      'Content-Type': 'application/json',
-      ...config?.headers,
-      [requestClient.langHeader]: i18n.language,
-    },
-  })
-  return res.json()
-}
-
-requestClient.postForm = async <T>(
-  path: string,
-  formData: any,
-  config?: {
-    headers: any
-  }
-): Promise<AuthingResponse<T>> => {
-  const res = await fetch(`${requestClient.baseUrl}${path}`, {
-    method: 'post',
-    body: formData,
-    credentials: 'include',
-    headers: {
-      ...config?.headers,
-      [requestClient.langHeader]: i18n.language,
-    },
-  })
-  return res.json()
-}
-
-requestClient.baseUrl = ''
-requestClient.setBaseUrl = (base: string) => {
-  requestClient.baseUrl = base.replace(/\/$/, '')
-}
-
-const DEFAULT_LANG_HEADER = 'x-authing-lang'
-requestClient.langHeader = DEFAULT_LANG_HEADER
-requestClient.setLangHeader = (key: string | undefined) => {
-  requestClient.langHeader = key || DEFAULT_LANG_HEADER
-}

package/components/_utils/index.ts

@@ -1,322 +0,0 @@
-import { useEffect } from 'react'
-import { Rule } from 'antd/lib/form'
-import qs from 'qs'
-import { useGuardContext } from '../context/global/context'
-import { i18n } from './locales'
-
-export * from './popupCenter'
-export * from './clipboard'
-
-export const VALIDATE_PATTERN = {
-  // https://emailregex.com/
-  // eslint-disable-next-line no-control-regex
-  email: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
-  //   以下的来自 authing-user-portal 项目
-  phone: /^1[3-9]\d{9}$/,
-  ip: /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/,
-  host: /^[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+.?$/,
-} as const
-
-export const validate = (type: keyof typeof VALIDATE_PATTERN, val: string) => {
-  return VALIDATE_PATTERN[type].test(val)
-}
-
-export const getRequiredRules = (msg: string): Rule[] => {
-  return [
-    {
-      required: true,
-      message: msg,
-    },
-  ]
-}
-
-export const fieldRequiredRule = (fieldRequiredRule: string): Rule[] => {
-  return [
-    {
-      required: true,
-      message: i18n.t('common.isMissing', {
-        name: fieldRequiredRule,
-      }),
-    },
-  ]
-}
-
-export function getDeviceName() {
-  if (typeof window === 'undefined') {
-    return null
-  }
-
-  const userAgent = window.navigator.userAgent
-  const platform = window.navigator.platform
-  const macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K']
-  const windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE']
-  const iosPlatforms = ['iPhone', 'iPad', 'iPod']
-
-  let os = null
-
-  if (macosPlatforms.indexOf(platform) !== -1) {
-    os = 'Mac OS'
-  } else if (iosPlatforms.indexOf(platform) !== -1) {
-    os = 'iOS'
-  } else if (windowsPlatforms.indexOf(platform) !== -1) {
-    os = 'Windows'
-  } else if (/Android/.test(userAgent)) {
-    os = 'Android'
-  } else if (!os && /Linux/.test(platform)) {
-    os = 'Linux'
-  }
-
-  return os
-}
-
-export type STYLE_RECORD_KEY = 'appConfig' | 'userConfig'
-
-/**
- * 传对象 {'background-color': 'red'}
- * 传字符串 "CSS 样式"
- */
-const insertedRecord: Record<STYLE_RECORD_KEY, any> = {
-  appConfig: null,
-  userConfig: null,
-}
-export const insertStyles = (
-  styles: string | any,
-  recordKey?: STYLE_RECORD_KEY
-) => {
-  let styleElt, styleSheet
-  if ((document as any).createStyleSheet) {
-    // IE
-    styleSheet = (document as any).createStyleSheet()
-  } else {
-    let head = document.getElementsByTagName('head')[0]
-    styleElt = document.createElement('style')
-    head.appendChild(styleElt)
-    styleSheet = document.styleSheets[document.styleSheets.length - 1]
-  }
-  if (typeof styles === 'string') {
-    if (styleElt) styleElt.innerHTML = styles
-    else styleSheet.cssText = styles // IE
-  } else {
-    let i = 0
-    for (let selector in styles) {
-      if (styleSheet.insertRule) {
-        let rule = selector + ' {' + styles[selector] + '}'
-        styleSheet.insertRule(rule, i++)
-      } else {
-        styleSheet.addRule(selector, styles[selector], i++)
-      }
-    }
-  }
-
-  if (recordKey) {
-    insertedRecord[recordKey] = styleElt
-  }
-}
-
-export const removeStyles = (recordKey: STYLE_RECORD_KEY) => {
-  if (!insertedRecord[recordKey]) {
-    return
-  }
-
-  const styleElt = insertedRecord[recordKey]
-
-  styleElt.parentNode?.removeChild(styleElt)
-
-  insertedRecord[recordKey] = null
-}
-
-export const useTitle = (title: string, prefix?: string) => {
-  const {
-    state: { config },
-  } = useGuardContext()
-
-  useEffect(() => {
-    document.title = `${prefix ?? `${config.title} `} ${title}`
-  }, [config.title, prefix, title])
-}
-
-export const getClassnames = (classnames: (string | boolean | undefined)[]) => {
-  return classnames.filter(Boolean).join(' ')
-}
-
-/**
- * https://www.itranslater.com/qa/details/2115518846294557696
- * Simple object check.
- * @param item
- * @returns {boolean}
- */
-export function isObject(item: any) {
-  return item && typeof item === 'object' && !Array.isArray(item)
-}
-
-/**
- * https://www.itranslater.com/qa/details/2115518846294557696
- * Deep merge two objects.
- * @param target
- * @param ...sources
- */
-export function deepMerge<T extends any = any>(
-  target: T,
-  ...sources: any[]
-): T {
-  if (!sources.length) return target
-  const source = sources.shift()
-
-  if (isObject(target) && isObject(source)) {
-    for (const key in source) {
-      if (isObject(source[key])) {
-        // @ts-ignore
-        if (!target[key]) {
-          Object.assign(target, { [key]: {} })
-        }
-        // @ts-ignore
-        deepMerge(target[key], source[key])
-      } else {
-        Object.assign(target, { [key]: source[key] })
-      }
-    }
-  }
-
-  return deepMerge(target, ...sources)
-}
-
-export const getUserRegisterParams = () => {
-  const query = qs.parse(window.location.search, {
-    ignoreQueryPrefix: true,
-  })
-  return Object.keys(query).map((key) => ({
-    key,
-    value: query[key],
-  }))
-}
-
-export const isWechatBrowser = () =>
-  /MicroMessenger/i.test(navigator?.userAgent)
-
-export const assembledAppHost = (identifier: string, host: string) => {
-  const hostUrl = new URL(host)
-
-  const splitHost = hostUrl.hostname.split('.')
-
-  splitHost.shift()
-
-  return `${hostUrl.protocol}//${identifier}.${splitHost.join('.')}`
-}
-
-export enum PasswordStrength {
-  NoCheck,
-  Low,
-  Middle,
-  High,
-  AUTO,
-}
-
-export const PASSWORD_STRENGTH_TEXT_MAP: Record<
-  PasswordStrength,
-  {
-    placeholder: () => string
-    validateMessage: () => string
-  }
-> = {
-  [PasswordStrength.NoCheck]: {
-    placeholder: () => i18n.t('login.inputPwd'),
-    validateMessage: () => i18n.t('login.inputPwd'),
-  },
-  [PasswordStrength.Low]: {
-    placeholder: () => i18n.t('login.setPwdLimit1'),
-    validateMessage: () => i18n.t('login.setPwdLimitMsg1'),
-  },
-  [PasswordStrength.Middle]: {
-    placeholder: () => i18n.t('login.login.setPwdLimit2'),
-    validateMessage: () => i18n.t('login.setPwdLimitMsg2'),
-  },
-  [PasswordStrength.High]: {
-    placeholder: () => i18n.t('login.login.setPwdLimit3'),
-    validateMessage: () => i18n.t('login.setPwdLimitMsg3'),
-  },
-  [PasswordStrength.AUTO]: {
-    placeholder: () => i18n.t('login.inputPwd'),
-    validateMessage: () => i18n.t('login.inputPwd'),
-  },
-}
-
-const SYMBOL_TYPE_PATTERNS = [
-  /\d+/,
-  /[a-zA-Z]/,
-  /[-!$%^&*()_+|~=`{}[\]:";'<>?,@./]/,
-]
-
-export const getSymbolTypeLength = (pwd: string) => {
-  return SYMBOL_TYPE_PATTERNS.map((pattern) => pattern.test(pwd)).filter(
-    (item) => item
-  ).length
-}
-
-export const getPasswordValidate = (
-  strength: PasswordStrength = PasswordStrength.NoCheck,
-  customPasswordStrength: any = {}
-): Rule[] => {
-  const required = fieldRequiredRule(i18n.t('common.password'))[0]
-
-  const validateMap: Record<PasswordStrength, Rule[]> = {
-    [PasswordStrength.NoCheck]: [required],
-    [PasswordStrength.Low]: [
-      required,
-      {
-        validator(r, v) {
-          if (v && v.length < 6) {
-            return Promise.reject(
-              PASSWORD_STRENGTH_TEXT_MAP[PasswordStrength.Low].validateMessage()
-            )
-          }
-          return Promise.resolve()
-        },
-      },
-    ],
-    [PasswordStrength.Middle]: [
-      required,
-      {
-        validator(r, v) {
-          if (v && (v.length < 6 || getSymbolTypeLength(v) < 2)) {
-            return Promise.reject(
-              PASSWORD_STRENGTH_TEXT_MAP[
-                PasswordStrength.Middle
-              ].validateMessage()
-            )
-          }
-          return Promise.resolve()
-        },
-      },
-    ],
-    [PasswordStrength.High]: [
-      required,
-      {
-        validator(r, v) {
-          if (v && (v.length < 6 || getSymbolTypeLength(v) < 3)) {
-            console.log(
-              PASSWORD_STRENGTH_TEXT_MAP[PasswordStrength.High].validateMessage
-            )
-            return Promise.reject(
-              PASSWORD_STRENGTH_TEXT_MAP[
-                PasswordStrength.High
-              ].validateMessage()
-            )
-          }
-          return Promise.resolve(true)
-        },
-      },
-    ],
-    [PasswordStrength.AUTO]: [
-      required,
-      {
-        pattern: customPasswordStrength?.regex,
-        message: customPasswordStrength?.message,
-      },
-    ],
-  }
-
-  return validateMap[strength]
-}
-
-export const sleep = (delay: number) =>
-  new Promise((resolve) => setTimeout(resolve, delay))