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

package/components/AuthingGuard/index.tsx

@@ -1,126 +0,0 @@
-import { ConfigProvider, message } from 'antd'
-import React, { FC } from 'react'
-import { AuthenticationClient } from 'authing-js-sdk'
-
-import { GuardContext } from '../context/global/context'
-import { GuardScenes } from '../../components/AuthingGuard/types'
-import { requestClient } from '../_utils/http'
-import {
-  defaultGuardConfig,
-  OTP_MFA_CODE,
-  APP_MFA_CODE,
-  defaultLocalesConfig,
-  defaultHeaders,
-} from '../../components/AuthingGuard/constants'
-import { GuardLayout } from '../../components/AuthingGuard/GuardLayout'
-import {
-  UserConfig,
-  GuardEventsHandler,
-} from '../../components/AuthingGuard/types/GuardConfig'
-
-import './style.less'
-import { initI18n } from '../_utils/locales'
-const PREFIX_CLS = 'authing-ant'
-
-message.config({
-  prefixCls: `${PREFIX_CLS}-message`,
-})
-
-interface AuthingGuardProps extends GuardEventsHandler {
-  appId: string
-  config?: UserConfig
-  visible?: boolean
-  className?: string
-  id?: string
-}
-
-export const AuthingGuard: FC<AuthingGuardProps> = ({
-  appId,
-  config = {},
-  visible,
-  className,
-  id,
-  ...guardEvents
-}) => {
-  const {
-    apiHost,
-    appDomain,
-    appHost,
-    defaultLoginMethod = defaultGuardConfig.defaultLoginMethod,
-    defaultScenes = defaultGuardConfig.defaultScenes,
-    defaultRegisterMethod = defaultGuardConfig.defaultRegisterMethod,
-    lang,
-    localesConfig = defaultLocalesConfig,
-    headers = defaultHeaders,
-  } = config
-
-  initI18n(localesConfig, lang)
-
-  let realHost: string | undefined
-  if (appHost) {
-    realHost = appHost
-  } else if (appDomain) {
-    const parsedUrl = new URL(defaultGuardConfig.appHost!)
-    realHost = `${parsedUrl.protocol}//${appDomain}${
-      parsedUrl.port ? ':' + parsedUrl.port : ''
-    }`
-  } else {
-    realHost = apiHost || defaultGuardConfig.appHost!
-  }
-
-  requestClient.setBaseUrl(realHost)
-  requestClient.setLangHeader(headers?.lang)
-
-  const authClient = new AuthenticationClient({
-    appHost: realHost!,
-    appId,
-    requestFrom: 'ui-components',
-    lang: localesConfig.defaultLang ?? lang,
-    headers,
-    onError: (code, msg: any) => {
-      if (code === 2020) {
-        return
-      }
-      if ([OTP_MFA_CODE, APP_MFA_CODE].includes(code)) {
-        message.info(msg)
-        return
-      }
-      message.error(msg)
-    },
-  })
-
-  const activeTabs = {
-    [GuardScenes.Login]: defaultLoginMethod,
-    [GuardScenes.Register]: defaultRegisterMethod,
-  }
-
-  return (
-    <ConfigProvider prefixCls={PREFIX_CLS}>
-      <GuardContext
-        value={{
-          authClient,
-          config: { ...config },
-          userConfig: config,
-          appId,
-          guardScenes: defaultScenes,
-          activeTabs,
-          guardTitle: config.title,
-          mfaData: {
-            mfaToken: '',
-          },
-          guardEvents,
-          localesConfig: config.localesConfig,
-          realHost: realHost,
-        }}
-      >
-        <GuardLayout
-          id={id}
-          className={className}
-          visible={visible}
-          lang={lang}
-          userConfig={config}
-        />
-      </GuardContext>
-    </ConfigProvider>
-  )
-}

package/components/AuthingGuard/style.less

@@ -1,103 +0,0 @@
-@import '~antd/lib/style/mixins/index.less';
-
-*[class*='authing-'] {
-  @import '~antd/lib/style/core/global.less';
-}
-
-.authing-guard-text-btn {
-  color: #396aff;
-  padding: 0;
-
-  &:hover,
-  &:focus {
-    color: #6b90ff;
-    background-color: transparent;
-  }
-}
-
-.authing-text-center {
-  text-align: center;
-  .authing-code-input {
-    justify-content: center;
-  }
-  .authing-dropdown-menu-container {
-    text-align: left;
-  }
-}
-
-.authing-guard-form-actions {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 8px;
-  align-items: center;
-  .authing-ant-divider-vertical {
-    visibility: hidden;
-  }
-}
-
-.authing-guard-tip {
-  color: #999;
-}
-
-.authing-guard-tip-btn-comb {
-  margin-left: auto;
-}
-
-.authing-guard-full-width-space {
-  width: 100%;
-}
-
-.authing-data-tips {
-  position: relative;
-  &::after {
-    content: attr(data-tips);
-    position: absolute;
-    white-space: nowrap;
-    top: 100%;
-    left: 50%;
-    transform: translateX(-50%) translateY(6px);
-    display: none;
-    background-color: rgba(0, 0, 0, 0.75);
-    font-size: 12px;
-    padding: 12px;
-    z-index: 500;
-    border-radius: 4px;
-    color: #fff;
-  }
-  &:hover {
-    &::after {
-      display: block;
-    }
-  }
-}
-.authing-data-tips__top {
-  position: relative;
-  &::after {
-    top: auto;
-    bottom: 100%;
-    transform: translateX(-50%) translateY(-6px);
-  }
-}
-
-.authing-guard-pointer {
-  cursor: pointer;
-}
-
-@media only screen and (max-width: 719px) {
-  .authing-guard-form-actions {
-    .authing-ant-divider-vertical {
-      visibility: initial;
-    }
-    justify-content: flex-end !important;
-    .authing-guard-text-btn {
-      color: #999999;
-      font-size: 12px;
-    }
-    .authing-guard-tip-btn-comb {
-      margin-left: initial !important;
-      font-size: 12px;
-      font-weight: 400;
-      color: #999999;
-    }
-  }
-}

package/components/AuthingGuard/types/Forms.ts

@@ -1,94 +0,0 @@
-import { User } from 'authing-js-sdk'
-import { LoginMethods } from './GuardConfig'
-import { ResetPwdMethods } from './GuardConfig'
-
-export interface BaseFormProps extends React.HTMLAttributes<HTMLDivElement> {
-  onSuccess?: (user: User) => void
-  onFail?: (error: any) => void
-}
-
-export interface CompleteUserInfoFormProps extends BaseFormProps {}
-
-export interface PasswordLoginFormProps extends BaseFormProps {
-  onValidateFail?: (error: any) => void
-}
-
-export interface ADLoginFormProps extends BaseFormProps {
-  onValidateFail?: (error: any) => void
-}
-
-export interface PhoneCodeLoginFormProps extends BaseFormProps {
-  onValidateFail?: (error: any) => void
-}
-
-export interface LdapLoginFormProps extends BaseFormProps {
-  onValidateFail?: (error: any) => void
-}
-
-export interface QrLoginFormProps extends BaseFormProps {
-  type: LoginMethods.AppQr | LoginMethods.WxMinQr | LoginMethods.WechatMpQrcode
-}
-
-export interface EmailRegisterFormProps extends BaseFormProps {
-  onValidateFail?: (error: any) => void
-}
-
-export interface PhoneRegisterFormProps extends BaseFormProps {
-  onValidateFail?: (error: any) => void
-}
-
-export interface ResetPasswordFormProps {
-  onSuccess?: () => void
-  onFail?: (error: any) => void
-}
-
-export interface ResetPasswordStep1Props {
-  onSuccess: (resetMethod: ResetPwdMethods, val: string) => void
-}
-
-export interface ResetPasswordStep2Props {
-  phone: string
-  onSuccess: () => void
-  onFail?: (error: any) => void
-}
-
-export interface ResetPasswordStep3Props {
-  email: string
-  onSuccess: () => void
-  onFail?: (error: any) => void
-}
-
-export interface SocialAndIdpLoginProps extends BaseFormProps {}
-
-export interface MfaVerifyForm extends BaseFormProps {
-  goReset: () => void
-}
-export interface SmsMFAVerifyFormProps extends BaseFormProps {
-  phone?: string
-  mfaToken: string
-  sendCodeRef: React.RefObject<HTMLButtonElement>
-}
-
-export interface SmsMFAFormProps extends BaseFormProps {}
-
-export interface MFACheckPhoneFormProps {
-  mfaToken: string
-  onSuccess: (phone: string) => void
-}
-
-export interface EmailMFAVerifyFormProps extends BaseFormProps {
-  email?: string
-  mfaToken: string
-  sendCodeRef: React.RefObject<HTMLButtonElement>
-}
-
-export interface EmailMFAFormProps extends BaseFormProps {}
-
-export interface MFACheckEmailFormProps {
-  mfaToken: string
-  onSuccess: (email: string) => void
-}
-
-export interface MfaResetForm extends BaseFormProps {
-  goVerify: () => void
-}