@authing/react-ui-components 3.0.2-beta.5 → 3.1.1-rc.1

package/{components → src/components}/AuthingGuard/Forms/UploadImage/index.tsx

@@ -3,7 +3,7 @@ import { message, Spin, Upload } from 'antd'
 import { UploadChangeParam } from 'antd/lib/upload'
 import React, { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useGuardContext } from '../../../context/global/context'
+import { useGuardContext } from '../../../../context/global/context'
 
 export const UploadImage: FC<{
   value?: string

package/{components → src/components}/AuthingGuard/GuardLayout/index.tsx

@@ -6,8 +6,8 @@ import {
   insertStyles,
   deepMerge,
   removeStyles,
-} from '../../_utils'
-import { useGuardContext } from '../../context/global/context'
+} from '../../../utils'
+import { useGuardContext } from '../../../context/global/context'
 import { GuardHeader } from '../../../components/AuthingGuard/Header'
 import { MfaLayout } from '../../../components/AuthingGuard/MfaLayout'
 import { LoginLayout } from '../../../components/AuthingGuard/LoginLayout'
@@ -39,7 +39,7 @@ import { IconFont } from '../IconFont'
 import { ToggleLang } from '../ToggleLang'
 import { useTranslation } from 'react-i18next'
 import i18n from 'i18next'
-import { changeLang } from '../../_utils/locales'
+import { changeLang } from '../locales'
 
 const checkConfig = (appId: string) => {
   // 不要去掉 console.warn，不然 vue 版打包出来每次都会 throw error，估计是 rollup 打包有问题
@@ -156,6 +156,9 @@ const useGuardConfig = () => {
       appConfig.loginTabs?.list ||
       defaultGuardConfig.loginMethods
 
+    // 扫码多源配置
+    const qrcodeTabsSettings = appConfig.qrcodeTabsSettings ?? {}
+
     // 账密登录的登录拆分
     const passwordLoginMethods =
       userConfig.passwordLoginMethods ||
@@ -168,6 +171,8 @@ const useGuardConfig = () => {
       appConfig.loginTabs?.default ||
       defaultGuardConfig.defaultLoginMethod
 
+    const loginMethodTitleMapping = appConfig.loginTabs?.title
+
     // 注册方式
     const registerMethods =
       userConfig.registerMethods ||
@@ -184,6 +189,8 @@ const useGuardConfig = () => {
       ? ''
       : userConfig.title ?? appConfig.name ?? defaultGuardConfig.title
 
+    const description = loading ? '' : appConfig.description ?? ''
+
     // 应用 logo
     const logo = loading
       ? ''
@@ -218,6 +225,7 @@ const useGuardConfig = () => {
       {
         logo,
         title,
+        description,
         autoRegister,
         loginMethods,
         passwordLoginMethods,
@@ -230,18 +238,24 @@ const useGuardConfig = () => {
         defaultRegisterMethod,
         enterpriseConnectionObjs,
         publicKey: appConfig.publicKey,
+        qrcodeTabsSettings,
         agreementEnabled: appConfig.agreementEnabled,
         agreements: appConfig.agreements,
+        loginMethodTitleMapping: loginMethodTitleMapping,
       }
     )
   }, [
     userConfig,
     appConfig.loginTabs?.list,
+    appConfig.loginTabs?.defaultV2,
     appConfig.loginTabs?.default,
+    appConfig.loginTabs?.title,
+    appConfig.qrcodeTabsSettings,
     appConfig.passwordTabConfig?.enabledLoginMethods,
     appConfig.registerTabs?.list,
     appConfig.registerTabs?.default,
     appConfig.name,
+    appConfig.description,
     appConfig.logo,
     appConfig.ssoPageComponentDisplay?.autoRegisterThenLoginHintInfo,
     appConfig.ssoPageComponentDisplay?.registerBtn,

package/{components → src/components}/AuthingGuard/Header/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react'
 import { Avatar } from 'antd'
 
-import { useGuardContext } from '../../context/global/context'
+import { useGuardContext } from '../../../context/global/context'
 
 import './style.less'
 
@@ -10,7 +10,7 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
 export const GuardHeader: FC<HeaderProps> = (props) => {
   const {
     state: {
-      config: { logo, title },
+      config: { logo, title, description },
     },
   } = useGuardContext()
 
@@ -19,7 +19,10 @@ export const GuardHeader: FC<HeaderProps> = (props) => {
       {Boolean(logo) && (
         <Avatar className="authing-guard-logo" src={logo} size={50}></Avatar>
       )}
-      <div className="authing-guard-title">{title}</div>
+      <div className="authing-guard-title-container">
+        <div className="authing-guard-title">{title}</div>
+        <div className="authing-guard-description">{description}</div>
+      </div>
     </div>
   )
 }

package/{components → src/components}/AuthingGuard/Header/style.less

@@ -13,23 +13,26 @@
   object-fit: contain;
 }
 
+.authing-guard-title-container {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+}
+
 .authing-guard-title {
-  color: #abb9d7;
+  color: #282d3c;
   font-size: 24px;
-  margin-bottom: 24px;
+  margin-bottom: 4px;
   width: 100%;
   word-break: break-all;
   text-align: center;
 }
-
-// .large .logo {
-//   margin-bottom: 16px;
-// }
-
-// .large .title {
-//   color: #333333;
-//   font-size: 32px;
-// }
+.authing-guard-description {
+  font-size: 16px;
+  color: #878a95;
+  margin-bottom: 23px;
+}
 
 @media only screen and (max-width: 719px) {
   .authing-guard-header {
@@ -45,8 +48,17 @@
     padding-left: 8px;
     color: #333333;
     font-weight: 500;
+    text-align: unset;
   }
   .authing-guard-logo {
     margin: 0;
   }
+  .authing-guard-title-container {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .authing-guard-description {
+    margin-bottom: 0px;
+    padding-left: 8px;
+  }
 }

package/{components → src/components}/AuthingGuard/IconFont/index.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react'
-import { getClassnames } from '../../_utils'
+import { getClassnames } from '../../../utils'
 import './iconfont'
 import './style.less'
 

package/{components → src/components}/AuthingGuard/LoginLayout/index.tsx

@@ -1,9 +1,9 @@
 import { message } from 'antd'
 import { User } from 'authing-js-sdk'
 import { FormInstance } from 'antd/lib/form'
-import React, { useCallback, useRef } from 'react'
+import React, { useCallback, useMemo, useRef } from 'react'
 
-import { useGuardContext } from '../../context/global/context'
+import { useGuardContext } from '../../../context/global/context'
 import {
   ADLoginForm,
   LdapLoginForm,
@@ -17,7 +17,7 @@ import {
   APP_MFA_CODE,
   LOGIN_METHODS_MAP,
 } from '../../../components/AuthingGuard/constants'
-import { AuthingTabs } from '../../AuthingTabs'
+import { AuthingTabs } from '../../../common/AuthingTabs'
 import {
   BaseFormProps,
   GuardScenes,
@@ -75,36 +75,36 @@ const useNormalLoginTabs = ({ onSuccess, onFail }: BaseFormProps) => {
   }
 
   const LOGIN_FORM_MAP = {
-    [LoginMethods.Password]: (
+    [LoginMethods.Password]: (props: any) => (
       <PasswordLoginForm
-        {...formProps}
+        {...props}
         ref={(v) => (formRef.current[LoginMethods.Password] = v!)}
       />
     ),
-    [LoginMethods.PhoneCode]: (
+    [LoginMethods.PhoneCode]: (props: any) => (
       <PhoneCodeLoginForm
-        {...formProps}
+        {...props}
         ref={(v) => (formRef.current[LoginMethods.PhoneCode] = v!)}
       />
     ),
-    [LoginMethods.AppQr]: (
-      <QrCodeLoginForm type={LoginMethods.AppQr} {...formProps} />
+    [LoginMethods.AppQr]: (props: any) => (
+      <QrCodeLoginForm type={LoginMethods.AppQr} {...props} />
     ),
-    [LoginMethods.WxMinQr]: (
-      <QrCodeLoginForm type={LoginMethods.WxMinQr} {...formProps} />
+    [LoginMethods.WxMinQr]: (props: any) => (
+      <QrCodeLoginForm type={LoginMethods.WxMinQr} {...props} />
     ),
-    [LoginMethods.LDAP]: (
+    [LoginMethods.LDAP]: (props: any) => (
       <LdapLoginForm
-        {...formProps}
+        {...props}
         ref={(v) => (formRef.current[LoginMethods.LDAP] = v!)}
       />
     ),
-    [LoginMethods.WechatMpQrcode]: (
-      <QrCodeLoginForm type={LoginMethods.WechatMpQrcode} {...formProps} />
+    [LoginMethods.WechatMpQrcode]: (props: any) => (
+      <QrCodeLoginForm type={LoginMethods.WechatMpQrcode} {...props} />
     ),
-    [LoginMethods.AD]: (
+    [LoginMethods.AD]: (props: any) => (
       <ADLoginForm
-        {...formProps}
+        {...props}
         ref={(v) => (formRef.current[LoginMethods.AD] = v!)}
       />
     ),
@@ -113,14 +113,46 @@ const useNormalLoginTabs = ({ onSuccess, onFail }: BaseFormProps) => {
   const {
     state: { config },
   } = useGuardContext()
-  const { loginMethods = [] } = config
+  const {
+    loginMethods = [],
+    loginMethodTitleMapping,
+    qrcodeTabsSettings,
+  } = config
 
-  const tabs = loginMethods.map((item) => ({
-    key: item,
-    label: LOGIN_METHODS_MAP()?.[item]!,
-    component: LOGIN_FORM_MAP[item],
-  }))
+  let tabs: any[] = []
 
+  // 兼容 密码登陆 donglyc
+  let filterLoginMethods = loginMethods.filter(
+    (d) => d.indexOf('password') === -1
+  )
+  const hasPassword = loginMethods.some((d) => d.indexOf('password') !== -1)
+  if (hasPassword) filterLoginMethods.push(LoginMethods.Password)
+
+  filterLoginMethods.forEach((method: LoginMethods) => {
+    if (
+      [LoginMethods.WechatMpQrcode, LoginMethods.WxMinQr].includes(method) &&
+      qrcodeTabsSettings[method]
+    ) {
+      tabs.push(
+        ...qrcodeTabsSettings[method].map((idp) => {
+          return {
+            key: idp.id,
+            label: idp.title || loginMethodTitleMapping[method],
+            component: LOGIN_FORM_MAP[method]({
+              ...formProps,
+              idp,
+            }),
+          }
+        })
+      )
+    } else {
+      tabs.push({
+        key: method,
+        label: LOGIN_METHODS_MAP()[method],
+        component: LOGIN_FORM_MAP[method](formProps),
+      })
+    }
+  })
   return {
     tabs,
   }
@@ -133,13 +165,25 @@ const SHOW_SOCIAL_LOGIN_TAB = [
 ]
 export const LoginLayout = () => {
   const {
-    state: { activeTabs },
+    state: { activeTabs, config },
     setValue,
   } = useGuardContext()
+  const { qrcodeTabsSettings } = config
 
   const { onFail, onSuccess } = useFormActions()
   const { tabs } = useNormalLoginTabs({ onSuccess, onFail })
 
+  const activeKey = useMemo(() => {
+    const activeTab = activeTabs[GuardScenes.Login]
+    if (
+      [LoginMethods.WechatMpQrcode, LoginMethods.WxMinQr].includes(activeTab) &&
+      qrcodeTabsSettings[activeTab]
+    ) {
+      return qrcodeTabsSettings[activeTab].find((item) => item.isDefault)?.id
+    }
+    return activeTab
+  }, [activeTabs, qrcodeTabsSettings])
+
   return (
     <>
       <AuthingTabs
@@ -150,7 +194,7 @@ export const LoginLayout = () => {
             [GuardScenes.Login]: t,
           })
         }
-        activeKey={activeTabs[GuardScenes.Login]}
+        activeKey={activeKey}
       />
 
       {SHOW_SOCIAL_LOGIN_TAB.includes(activeTabs[GuardScenes.Login]) && (

package/{components → src/components}/AuthingGuard/MfaLayout/index.tsx

@@ -7,7 +7,7 @@ import {
   MfaResetCodeForm,
   MFAVerifyForm,
 } from '../../../components/AuthingGuard/Forms'
-import { useGuardContext } from '../../context/global/context'
+import { useGuardContext } from '../../../context/global/context'
 
 import './style.less'
 import { useTranslation } from 'react-i18next'

package/{components → src/components}/AuthingGuard/RegisterLayout/index.tsx

@@ -2,13 +2,13 @@ import { message } from 'antd'
 import { User } from 'authing-js-sdk'
 import React, { FC } from 'react'
 
-import { useGuardContext } from '../../context/global/context'
+import { useGuardContext } from '../../../context/global/context'
 import {
   GuardScenes,
   LoginMethods,
   RegisterMethods,
 } from '../../../components/AuthingGuard/types'
-import { AuthingTabs } from '../../AuthingTabs'
+import { AuthingTabs } from '../../../common/AuthingTabs'
 import { REGISTER_METHODS_MAP } from '../../../components/AuthingGuard/constants'
 import {
   EmailRegisterForm,

package/{components → src/components}/AuthingGuard/ResetPwdLayout/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { useGuardContext } from '../../context/global/context'
+import { useGuardContext } from '../../../context/global/context'
 import { ResetPasswordForm } from '../../../components/AuthingGuard/Forms'
 
 export const ResetPwdLayout = () => {

package/{components → src/components}/AuthingGuard/ToggleLang/index.tsx

@@ -2,8 +2,8 @@ import React, { FC } from 'react'
 import { Dropdown, Menu, Space } from 'antd'
 import { LANG_MAP } from '../types'
 import { useTranslation } from 'react-i18next'
-import { changeLang } from '../../_utils/locales'
-import { useGuardContext } from '../../context/global/context'
+import { changeLang } from '../locales'
+import { useGuardContext } from '../../../context/global/context'
 import { IconFont } from '../IconFont'
 
 export const ToggleLang: FC = () => {

package/{components → src/components}/AuthingGuard/api/appConfig.ts

@@ -1,15 +1,17 @@
-import { Lang, Protocol } from '../types'
+import { requestClient } from './http'
+import {
+  Lang,
+  LoginMethods,
+  Protocol,
+} from '../../../components/AuthingGuard/types'
 import {
   IAzureAdConnectionConfig,
   ICasConnectionConfig,
-  IOAuthConnectionConfig,
   ISamlConnectionConfig,
   OIDCConnectionConfig,
   SocialConnectionItem,
 } from './userPoolConfig'
-import { i18n } from '../../_utils/locales'
-import { requestClient } from '../../_utils/http'
-import { PasswordStrength } from '../../_utils'
+import { i18n } from '../locales'
 
 export enum ApplicationMfaType {
   SMS = 'SMS',
@@ -27,6 +29,15 @@ export const ApplicationMfaTypeLabel: () => Record<
   [ApplicationMfaType.EMAIL]: i18n.t('common.EmailVerification'),
 })
 
+export type QrcodeTabsSettings = Record<
+  LoginMethods,
+  Array<{
+    id: string
+    title: string
+    isDefault?: boolean
+  }>
+>
+
 export interface OidcClientMetadata {
   grant_types: string[]
   client_id: string
@@ -77,6 +88,7 @@ export interface ApplicationConfig {
   css: string
   name: string
   logo: string
+  description?: string
   redirectUris: string[]
   registerDisabled: boolean
   registerTabs: {
@@ -84,9 +96,13 @@ export interface ApplicationConfig {
     default: string
     title: { [x: string]: string }
   }
+
+  qrcodeTabsSettings: QrcodeTabsSettings
+
   loginTabs: {
     list: string[]
     default: string
+    defaultV2?: string
     title: { [x: string]: string }
   }
   socialConnections: SocialConnectionItem[]
@@ -94,7 +110,6 @@ export interface ApplicationConfig {
   extendsFieldsEnabled: boolean
   extendsFields: ExtendsField[]
 
-  identifier: string
   identityProviders: {
     identifier: string
     protocol: Protocol
@@ -105,7 +120,6 @@ export interface ApplicationConfig {
       | OIDCConnectionConfig
       | ICasConnectionConfig
       | IAzureAdConnectionConfig
-      | IOAuthConnectionConfig
   }[]
 
   ssoPageComponentDisplay: {
@@ -132,15 +146,9 @@ export interface ApplicationConfig {
 
   agreementEnabled: boolean
   agreements: Agreement[]
-  customPasswordStrength: any
-  passwordStrength: PasswordStrength
-  verifyCodeLength: number
 }
 
 export const fetchAppConfig = (appId: string) =>
   requestClient.get<ApplicationConfig>(
-    `/api/v2/applications/${appId}/public-config`,
-    {
-      credentials: 'include',
-    }
+    `/api/v2/applications/${appId}/public-config`
   )

package/{components/_utils → src/components/AuthingGuard/api}/http.ts

@@ -1,5 +1,5 @@
 import qs from 'qs'
-import { i18n } from './locales'
+import { i18n } from '../locales'
 
 export const requestClient = async (...rest: Parameters<typeof fetch>) => {
   const res = await fetch(...rest)
@@ -17,6 +17,15 @@ requestClient.get = async <T>(
   query: Record<string, any> = {},
   init?: RequestInit
 ): Promise<AuthingResponse<T>> => {
+  const headers: Record<string, any> = {
+    ...init?.headers,
+    'Content-Type': 'application/json',
+    [requestClient.langHeader]: i18n.language,
+  }
+
+  if (requestClient.tenantId !== '')
+    headers[requestClient.tenantHeader] = requestClient.tenantId
+
   const res = await fetch(
     `${requestClient.baseUrl}${path}${qs.stringify(query, {
       addQueryPrefix: true,
@@ -24,10 +33,7 @@ requestClient.get = async <T>(
     {
       ...init,
       credentials: 'include',
-      headers: {
-        ...init?.headers,
-        [requestClient.langHeader]: i18n.language,
-      },
+      headers,
     }
   )
 
@@ -41,34 +47,20 @@ requestClient.post = async <T>(
     headers: any
   }
 ): Promise<AuthingResponse<T>> => {
+  const headers: Record<string, any> = {
+    ...config?.headers,
+    'Content-Type': 'application/json',
+    [requestClient.langHeader]: i18n.language,
+  }
+
+  if (requestClient.tenantId !== '')
+    headers[requestClient.tenantHeader] = requestClient.tenantId
+
   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,
-    },
+    headers: headers,
   })
   return res.json()
 }
@@ -77,9 +69,20 @@ requestClient.baseUrl = ''
 requestClient.setBaseUrl = (base: string) => {
   requestClient.baseUrl = base.replace(/\/$/, '')
 }
-
 const DEFAULT_LANG_HEADER = 'x-authing-lang'
+const DEFAULT_TENANT_HEADER = 'x-authing-app-tenant-idåå'
 requestClient.langHeader = DEFAULT_LANG_HEADER
+requestClient.tenantHeader = DEFAULT_TENANT_HEADER
+requestClient.tenantId = ''
+
 requestClient.setLangHeader = (key: string | undefined) => {
   requestClient.langHeader = key || DEFAULT_LANG_HEADER
 }
+
+requestClient.setTenantHeader = (key: string | undefined) => {
+  requestClient.tenantHeader = key || DEFAULT_LANG_HEADER
+}
+
+requestClient.setTenantId = (tenantId: string) => {
+  requestClient.tenantId = tenantId
+}

package/{components → src/components}/AuthingGuard/api/sso.ts

@@ -1,5 +1,5 @@
 import { User } from '../types'
-import { requestClient } from '../../_utils/http'
+import { requestClient } from './http'
 
 export interface SessionData {
   session: null | {

package/{components → src/components}/AuthingGuard/api/userPoolConfig.ts

@@ -1,4 +1,4 @@
-import { Lang, Protocol } from '../types'
+import { Lang, Protocol } from '../../../components/AuthingGuard/types'
 import { SocialConnectionProvider } from 'authing-js-sdk'
 
 export interface OIDCConnectionConfig {
@@ -72,9 +72,10 @@ export interface ICasConnectionConfig {
 }
 export interface SocialConnectionItem {
   name: string
-  name_en: string
+  displayName: string
   logo: string
   description: string
+  identifier: string
   provider: SocialConnectionProvider
   authorizationUrl: string
   tooltip: Record<Lang, string>

package/{components → src/components}/AuthingGuard/constants.ts

@@ -6,7 +6,7 @@ import {
   RegisterMethods,
   LocalesConfig,
 } from '../../components/AuthingGuard/types'
-import { i18n } from '../_utils/locales'
+import { i18n } from './locales'
 
 // 个人版 OTP MFA 的 error code
 export const OTP_MFA_CODE = 1635
@@ -93,9 +93,9 @@ export const defaultLocalesConfig: LocalesConfig = {
 export const defaultHeaders: {
   'userpool-id': string
   'app-id': string
-  'tenant-id': string
   'sdk-version': string
   'request-from': string
+  'tenant-id': string
   lang: string
 } = {
   'userpool-id': 'x-authing-userpool-id',