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

package/components/SendCode/index.tsx

@@ -1,98 +0,0 @@
-import { Col, message, Row } from 'antd'
-import React, { FC } from 'react'
-import { EmailScene } from 'authing-js-sdk'
-
-import { SendCodeBtn } from './SendCodeBtn'
-
-import './style.less'
-import { useTranslation } from 'react-i18next'
-import { useAuthClient } from '../Guard/authClient'
-import { validate } from '../_utils'
-import Input, { InputProps } from 'antd/lib/input'
-
-export interface SendPhoneCodeProps extends InputProps {
-  method: 'phone' | 'email'
-  data: string
-  form?: any
-  onSendCodeBefore?: any // 点击的时候先做这个
-}
-
-export const SendCode: FC<SendPhoneCodeProps> = ({
-  method,
-  data,
-  value,
-  onChange,
-  form,
-  onSendCodeBefore,
-  ...inputProps
-}) => {
-  const { t } = useTranslation()
-
-  const authClient = useAuthClient()
-
-  const sendEmail = async (email: string) => {
-    if (!email) {
-      message.error(t('login.inputEmail'))
-      return false
-    }
-    if (!validate('email', email)) {
-      message.error(t('common.emailFormatError'))
-      return false
-    }
-    try {
-      await authClient.sendEmail(email, EmailScene.ResetPassword)
-      // onSend?.()
-      return true
-    } catch (error) {
-      // onError?.(error)
-      return false
-    }
-  }
-
-  const sendPhone = async (phone: string) => {
-    try {
-      await authClient.sendSmsCode(phone)
-      return true
-    } catch (error) {
-      return false
-    }
-  }
-  return (
-    <>
-      <Row justify="space-between" align="middle">
-        <Col span={15} className="g2-send-code-input-col">
-          <Input
-            value={value}
-            onChange={(e) => {
-              let v = e.target.value
-              if (v.length > 4) {
-                return
-              }
-              onChange?.(e)
-            }}
-            // maxLength={4}
-            type="number" // antd bug：如果 type===number 则 maxLength 不生效
-            {...inputProps}
-          />
-        </Col>
-        <Col offset={1} span={8}>
-          <SendCodeBtn
-            beforeSend={() => {
-              return onSendCodeBefore()
-                .then(async (b: any) => {
-                  let phoneData = form ? form.getFieldValue(method) : data
-                  return method === 'phone'
-                    ? await sendPhone(phoneData)
-                    : await sendEmail(phoneData)
-                })
-                .catch((e: any) => {
-                  // console.log('e', e)
-                  return false
-                })
-            }}
-          />
-        </Col>
-      </Row>
-    </>
-  )
-}

package/components/SendCode/style.less

@@ -1,31 +0,0 @@
-.authing-g2-send-code-btn {
-  height: 46px;
-  width: 100%;
-  border: 1px solid #d4d6dc;
-  border-radius: 4px;
-}
-
-.authing-g2-send-code-btn:hover {
-  background: rgba(57, 106, 255, 0.1);
-}
-
-.authing-g2-send-code-btn:focus {
-  outline: none;
-}
-
-.authing-g2-send-code-btn[disabled] {
-  cursor: not-allowed;
-  filter: opacity(0.5);
-}
-
-@media only screen and (max-width: 719px) {
-  .authing-g2-send-code-btn {
-    font-size: 14px;
-  }
-}
-
-.g2-loading-btn-center {
-  .authing-ant-btn-loading-icon .anticon {
-    padding-right: 0;
-  }
-}

package/components/ShieldSpin/index.tsx

@@ -1,27 +0,0 @@
-import React from 'react'
-import { ReactComponent as LoadShielding } from './loading.svg'
-
-interface IG2SpinProps {
-  size?: number
-}
-
-export const ShieldSpin = (props: IG2SpinProps) => {
-  let size = props.size ? props.size : 50
-
-  return (
-    <div
-      style={{
-        width: size,
-        height: size,
-      }}
-    >
-      <LoadShielding />
-    </div>
-  )
-}
-
-export const Spin = () => (
-  <div className="g2-init-setting-loading">
-    <ShieldSpin size={100} />
-  </div>
-)

package/components/ShieldSpin/loading.svg

@@ -1,29 +0,0 @@
-<svg width="100%" height="100%"
- viewBox="0 0 150 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <style>
-    #path-f {
-      fill: none;
-      stroke: #eaebee;
-      stroke-width: 10;
-      stroke-dasharray: 100 220;
-      animation: dash 40s infinite linear forwards;
-    }
-    #path-b {
-      fill: none;
-      stroke: #0080ff;
-      stroke-width: 8;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-    }
-    @keyframes dash {
-      to {
-        stroke-dashoffset: 12000;
-      }
-    }
-  </style>
-  <title>Loading</title>
-  <g id="单独" transform="translate(25.000000, 16.000000)" fill-rule="nonzero"  stroke-width="2" >
-    <path d="M50,0 L0,30 C0,31 0,32 0,33 C0,69 20,100 50,116 C79,100 100,69 100,33 C100,32 99,31 99,30 L50,0 Z" id="path-b"/>
-    <path d="M50,0 L0,30 C0,31 0,32 0,33 C0,69 20,100 50,116 C79,100 100,69 100,33 C100,32 99,31 99,30 L50,0 Z" id="path-f"/>
-  </g>
-</svg>

package/components/SubmitButton/index.tsx

@@ -1,50 +0,0 @@
-import React, {
-  forwardRef,
-  useState,
-  useImperativeHandle,
-  useEffect,
-} from 'react'
-import { Button } from 'antd'
-
-interface SubmitButtonProps {
-  text?: string
-  className?: string
-  onClick?: any
-}
-const SubmitButton = (props: SubmitButtonProps, ref: any) => {
-  let [spin, setSpin] = useState(false) // spin 状态需要手动设置关闭
-  let [shaking, setShaking] = useState(false) // 抖动状态会自动关闭
-
-  useEffect(() => {
-    if (shaking === true) {
-      setTimeout(() => {
-        setShaking(false)
-      }, 1000)
-    }
-  }, [shaking])
-
-  useImperativeHandle(ref, () => ({
-    onError: (text?: string) => {
-      setShaking(true)
-    },
-    onSpin: (sp: boolean) => {
-      setSpin(sp)
-    },
-  }))
-
-  let propsCls = props.className ? props.className : ''
-  let shakingCls = shaking ? 'shaking' : ''
-  return (
-    <Button
-      size="large"
-      type="primary"
-      htmlType="submit"
-      loading={spin}
-      onClick={props.onClick ? props.onClick : () => {}}
-      className={`authing-g2-submit-button ${propsCls} ${shakingCls}`}
-    >
-      {props.text}
-    </Button>
-  )
-}
-export default forwardRef(SubmitButton)

package/components/Type/index.ts

@@ -1,61 +0,0 @@
-import { AuthenticationClient, CommonMessage } from 'authing-js-sdk'
-import { Lang } from 'authing-js-sdk/build/main/types'
-import { ApplicationConfig } from '../AuthingGuard/api'
-import { GuardModuleType } from '../Guard/module'
-
-export enum GuardMode {
-  Modal = 'modal',
-  Normal = 'normal',
-}
-
-export enum GuardScenes {
-  Login = 'login',
-  Register = 'register',
-}
-export interface IG2FCProps extends IG2Events {
-  appId: string
-  config?: Partial<IG2Config>
-}
-
-export interface IG2FCViewProps extends IG2FCProps {
-  config: IG2Config
-}
-
-export interface IG2Config {
-  title: string
-  logo: string
-  lang: Lang
-  langRange: Lang[]
-  host: string
-  mode: GuardMode
-  clickCloseable: boolean
-  escCloseable: boolean
-  userpool?: string
-  contentCss?: string
-  target?: HTMLElement | string
-  __appHost__?: string
-  __publicConfig__?: ApplicationConfig
-}
-
-const defaultG2Config: IG2Config = {
-  lang: 'zh-CN',
-  langRange: ['zh-CN', 'en-US'],
-  title: 'Authing',
-  escCloseable: true,
-  clickCloseable: true,
-  mode: GuardMode.Normal,
-  host: 'https://core.authing.cn',
-  logo:
-    'https://files.authing.co/user-contents/photos/0a4c99ff-b8ce-4030-aaaf-584c807cb21c.png',
-}
-
-export interface IG2Events {
-  onLoad?: (authClient: AuthenticationClient) => void
-  onLoadError?: (error: CommonMessage) => void
-  onClose?: () => void
-  onLangChange?: (lang: Lang) => void
-  // __codePaser?: (code: number) => Function
-  __changeModule?: (moduleName: GuardModuleType, initData: any) => void
-}
-
-export const getDefaultG2Config = (): IG2Config => defaultG2Config

package/components/VerifyCodeInput/index.tsx

@@ -1,76 +0,0 @@
-import { Divider, Input } from 'antd'
-import React, { FC, Fragment, useRef } from 'react'
-
-import './style.less'
-
-interface VerifyCodeInputProps extends React.HTMLAttributes<HTMLDivElement> {
-  verifyCode: string[]
-  setVerifyCode: (code: string[]) => void
-  length?: number
-  onEnter?: Function
-}
-
-export const VerifyCodeInput: FC<VerifyCodeInputProps> = ({
-  verifyCode,
-  setVerifyCode,
-  length = 6,
-  onEnter,
-}) => {
-  const inputRef = useRef<any[]>([])
-
-  const handleChange = (val: string | undefined = '', index: number) => {
-    const num = parseInt(val)
-    if (isNaN(num)) {
-      val = ''
-    } else {
-      val = String(num)
-    }
-    const codes = [...verifyCode]
-    codes[index] = val.split('').slice(-1)[0] || ''
-    setVerifyCode(codes)
-
-    if (val && inputRef.current[index + 1]) {
-      inputRef.current[index + 1].focus()
-    }
-  }
-
-  const handleKeyDown = (evt: any, index: number) => {
-    const currentVal = verifyCode[index]
-
-    switch (evt.keyCode) {
-      case 8:
-        if (!currentVal && inputRef.current[index - 1]) {
-          handleChange('', index - 1)
-          inputRef.current[index - 1].focus()
-        }
-        break
-
-      case 13:
-        onEnter?.()
-        break
-      default:
-        break
-    }
-  }
-
-  return (
-    <div className="authing-code-input">
-      {new Array(length).fill(0).map((_, index) => (
-        <Fragment key={index}>
-          <Input
-            ref={(el) => (inputRef.current[index] = el)}
-            className="authing-code-input-item"
-            size="large"
-            autoFocus={index === 0}
-            onKeyDown={(evt) => handleKeyDown(evt, index)}
-            value={verifyCode[index]}
-            onChange={(evt) => handleChange(evt.target.value, index)}
-          />
-          {index === Math.floor(length / 2 - 1) && (
-            <Divider className="authing-code-input-divider" />
-          )}
-        </Fragment>
-      ))}
-    </div>
-  )
-}

package/components/VerifyCodeInput/style.less

@@ -1,24 +0,0 @@
-.authing-code-input-item {
-  text-align: center;
-  width: 40px;
-  min-width: 40px;
-  min-height: 40px;
-  height: 40px;
-  line-height: 40px;
-  &:not(:first-child) {
-    margin-left: 18px;
-  }
-  input {
-    text-align: center;
-  }
-}
-.authing-code-input-divider {
-  width: 14px;
-  min-width: 14px;
-  max-width: 14px;
-  margin-left: 18px;
-}
-.authing-code-input {
-  display: flex;
-  align-items: center;
-}

package/components/_utils/GuardErrorCode.ts

@@ -1,8 +0,0 @@
-export enum ErrorCode {
-  OTP_MFA_CODE = 1635,
-  APP_MFA_CODE = 1636,
-  INPUT_CAPTCHACODE = 2000,
-  USER_EXISTENCE = 2026,
-  LOGIN_INVALID = 2021,
-  PASSWORD_ERROR = 2333,
-}

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,123 +0,0 @@
-import { LoginMethods, RegisterMethods } from 'authing-js-sdk'
-import { IG2Config } from '../Type'
-import { ApplicationConfig } from '../AuthingGuard/api'
-import { LoginConfig } from '../Login/props'
-import { RegisterConfig } from '../Register/props'
-import { assembledAppHost } from '.'
-import { GuardHttp } from './guradHttp'
-import { AuthingResponse } from './http'
-import { GuardComponentConifg } from '../Guard/config'
-
-export interface GuardConfig extends RegisterConfig, LoginConfig {}
-
-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: GuardConfig; 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
-): GuardConfig => {
-  const mergedPublicConfig: GuardConfig = {
-    ...defaultConfig,
-    ...config,
-    title: config.title ?? publicConfig.name,
-    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?.registerBtn
-    ),
-    // 是否自动注册
-    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 guardHttp = new GuardHttp(host)
-  guardHttp.setAppId(appId)
-
-  try {
-    res = await guardHttp.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,93 +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
-  }
-
-  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()