@authing/react-ui-components 2.4.54-alpha.0 → 2.4.55-alpha.2

package/lib/index.min.js.LICENSE.txt

@@ -4,70 +4,6 @@
   http://jedwatson.github.io/classnames
 */
 
-/*!**********************!*\
-          !*** ./lib/index.js ***!
-          \**********************/
-
-/*!**************************!*\
-          !*** ./lib/JSEncrypt.js ***!
-          \**************************/
-
-/*!**************************!*\
-          !*** ./lib/version.json ***!
-          \**************************/
-
-/*!*****************************!*\
-          !*** ./lib/lib/jsbn/rng.js ***!
-          \*****************************/
-
-/*!*****************************!*\
-          !*** ./lib/lib/jsbn/rsa.js ***!
-          \*****************************/
-
-/*!******************************!*\
-          !*** ./lib/lib/jsbn/jsbn.js ***!
-          \******************************/
-
-/*!******************************!*\
-          !*** ./lib/lib/jsbn/util.js ***!
-          \******************************/
-
-/*!*******************************!*\
-          !*** ./lib/lib/asn1js/hex.js ***!
-          \*******************************/
-
-/*!*******************************!*\
-          !*** ./lib/lib/jsbn/prng4.js ***!
-          \*******************************/
-
-/*!********************************!*\
-          !*** ./lib/JSEncryptRSAKey.js ***!
-          \********************************/
-
-/*!********************************!*\
-          !*** ./lib/lib/asn1js/asn1.js ***!
-          \********************************/
-
-/*!********************************!*\
-          !*** ./lib/lib/jsbn/base64.js ***!
-          \********************************/
-
-/*!*********************************!*\
-          !*** ./lib/lib/asn1js/int10.js ***!
-          \*********************************/
-
-/*!**********************************!*\
-          !*** ./lib/lib/asn1js/base64.js ***!
-          \**********************************/
-
-/*!************************************!*\
-          !*** ./lib/lib/jsrsasign/yahoo.js ***!
-          \************************************/
-
-/*!***************************************!*\
-          !*** ./lib/lib/jsrsasign/asn1-1.0.js ***!
-          \***************************************/
-
 /** @license React v16.13.1
  * react-is.production.min.js
  *

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@authing/react-ui-components",
-  "version": "2.4.54-alpha.0",
+  "version": "2.4.55-alpha.2",
   "private": false,
   "main": "lib/index.min.js",
   "typings": "lib/index.d.ts",
   "dependencies": {
     "antd": "^4.8.0",
-    "authing-js-sdk": "4.20.23",
-    "globalthis": "^1.0.2",
+    "authing-js-sdk": "4.22.26-alpha.9",
     "qs": "^6.9.4"
   },
   "peerDependencies": {
@@ -185,6 +184,5 @@
     "webpack-dev-server": "3.11.0",
     "webpack-manifest-plugin": "2.2.0",
     "workbox-webpack-plugin": "5.1.4"
-  },
-  "gitHead": "cac8e746b1b2b0e49fa8fba7e85fbbf88099003d"
+  }
 }

package/src/common/AuthingDropdown/index.tsx

@@ -1,6 +1,5 @@
 import { DownOutlined } from '@ant-design/icons'
-import React, { FC, useEffect, useRef, useState } from 'react'
-import { createPortal } from 'react-dom'
+import React, { FC, useState } from 'react'
 import { getClassnames } from '../../utils'
 
 import './style.less'
@@ -21,69 +20,32 @@ export const AuthingDropdown: FC<{
 }> = ({ menus, children, className }) => {
   const [visible, setVisible] = useState(false)
 
-  const triggerRef = useRef<HTMLDivElement>(null)
-
-  const [top, setTop] = useState<number>()
-  const [left, setLeft] = useState<number>()
-
-  useEffect(() => {
-    const global = require('globalthis')()
-
-    const changePosition = () => {
-      const value = triggerRef.current?.getBoundingClientRect()
-      value && setTop(value?.top + value?.height)
-      value && setLeft(value?.left)
-    }
-
-    changePosition()
-    global?.window.addEventListener('scroll', changePosition)
-    global?.window.addEventListener('DOMNodeInserted', changePosition)
-    global?.window.addEventListener('DOMNodeRemoved', changePosition)
-    global.window.onresize = changePosition
-    return () => {
-      global?.window.removeEventListener('scroll', changePosition)
-      global?.window.removeEventListener('DOMNodeInserted', changePosition)
-      global?.window.removeEventListener('DOMNodeRemoved', changePosition)
-    }
-  }, [])
-
   return (
-    // TODO
-    // 没有下拉 与回收的动效，暂时没有时间搞，之后优化
     <div
       className={getClassnames(['authing-dropdown', className])}
       onMouseEnter={() => setVisible(true)}
       onMouseLeave={() => setVisible(false)}
     >
-      <div ref={triggerRef} className="authing-dropdown-trigger">
-        {children}
+      <div className="authing-dropdown-trigger">{children}</div>
+      <div
+        className={getClassnames([
+          'authing-dropdown-menu-container',
+          visible && 'authing-dropdown-menu-container__visible',
+        ])}
+      >
+        {menus.map((item) => (
+          <div
+            className="authing-dropdown-menu-item"
+            onClick={(evt) => {
+              setVisible(false)
+              item.onClick?.(item.key, evt)
+            }}
+            key={item.key}
+          >
+            {item.label}
+          </div>
+        ))}
       </div>
-      {visible
-        ? createPortal(
-            <div
-              data-id="authing-dropdown-menu"
-              className={getClassnames(['authing-dropdown-menu-container'])}
-              style={{
-                top: top,
-                left: left,
-              }}
-            >
-              {menus.map((item) => (
-                <div
-                  className="authing-dropdown-menu-item"
-                  onClick={(evt) => {
-                    setVisible(false)
-                    item.onClick?.(item.key, evt)
-                  }}
-                  key={item.key}
-                >
-                  {item.label}
-                </div>
-              ))}
-            </div>,
-            document.body
-          )
-        : null}
       <DownOutlined className="authing-dropdown-icon" />
     </div>
   )

package/src/common/AuthingDropdown/style.less

@@ -9,50 +9,25 @@
 }
 
 .authing-dropdown-menu-container {
-  height: auto;
-  opacity: 1;
-  pointer-events: unset;
+  height: 0;
+  opacity: 0;
   position: absolute;
   top: 100%;
   left: 0;
-  // transition: all 0.3s;
+  transition: all 0.3s;
   cursor: pointer;
   background-color: #fff;
   padding: 4px 0;
   border-radius: 2px;
   box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
     0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
-}
-@keyframes slide-down {
-  0% {
-    transform: scale(1, 0);
-  }
-  100% {
-    transform: scale(1, 1);
-  }
-}
-
-@-webkit-keyframes slide-down {
-  0% {
-    -webkit-transform: scale(1, 0);
-  }
-  100% {
-    -webkit-transform: scale(1, 1);
-  }
-}
-
-.authing-dropdown-menu-container_show {
-  max-height: auto;
-  transition: max-height 0.3s ease-in;
-  transform-origin: 50% 0;
-  animation: slide-down 0.3s ease-in;
-  -webkit-animation: slide-down 0.3s ease-in;
+  pointer-events: none;
 }
 
-.authing-dropdown-menu-container_hidden {
-  max-height: 0px;
-  overflow: auto;
-  transition: max-height 0.3s ease-out;
+.authing-dropdown-menu-container__visible {
+  height: auto;
+  opacity: 1;
+  pointer-events: unset;
 }
 
 .authing-dropdown-menu-item {

package/src/components/AuthingGuard/AppMFALayout/index.tsx

@@ -1,6 +1,6 @@
 import { message } from 'antd'
 import { User } from 'authing-js-sdk'
-import React, { FC, ReactNode, useState, useEffect, useMemo } from 'react'
+import React, { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { AuthingDropdown } from 'src/common/AuthingDropdown'
 
@@ -10,7 +10,6 @@ import {
 } from '../../../components/AuthingGuard/Forms'
 import { useGuardContext } from '../../../context/global/context'
 import { ApplicationMfaType, ApplicationMfaTypeLabel } from '../api'
-import { TotpMfaVerifyForm } from '../Forms/TotpMfaVerifyForm'
 
 import './style.less'
 
@@ -38,38 +37,24 @@ export const AppMfaLayout: FC<MfaLayoutProps> = () => {
     onFail,
   }
 
-  const formMap: Record<ApplicationMfaType, ReactNode> = {
+  const formMap = {
     [ApplicationMfaType.EMAIL]: <EmailMfaVerifyForm {...formProps} />,
     [ApplicationMfaType.SMS]: <SmsMfaVerifyForm {...formProps} />,
-    [ApplicationMfaType.OTP]: <TotpMfaVerifyForm {...formProps} />,
   }
 
-  // 其他可选的模块
-  const availableMfaType = useMemo(() => {
-    return mfaData.applicationMfa
-      ?.filter(
-        (item) =>
-          item.status &&
-          Object.keys(ApplicationMfaType).includes(item.mfaPolicy) &&
-          type !== item.mfaPolicy
-      )
-      ?.sort((a, b) => a.sort - b.sort)
-      ?.map((item) => ({
-        label: ApplicationMfaTypeLabel()[item.mfaPolicy],
-        key: item.mfaPolicy,
-        onClick() {
-          setType(item.mfaPolicy)
-        },
-      }))
-  }, [mfaData, type])
-
-  // 根据配置动态确定 mfa 模块
-  useEffect(() => {
-    // 取出第一个模块 作为默认值
-    if (mfaData.applicationMfa && mfaData.applicationMfa.length > 0) {
-      setType(mfaData.applicationMfa[0].mfaPolicy)
-    }
-  }, [mfaData])
+  const availableMfaType = mfaData.applicationMfa
+    ?.filter(
+      (item) =>
+        item.status && Object.keys(ApplicationMfaType).includes(item.mfaPolicy)
+    )
+    ?.sort((a, b) => a.sort - b.sort)
+    ?.map((item) => ({
+      label: ApplicationMfaTypeLabel()[item.mfaPolicy],
+      key: item.mfaPolicy,
+      onClick() {
+        setType(item.mfaPolicy)
+      },
+    }))
 
   return (
     <div className="authing-text-center">

package/src/components/AuthingGuard/Forms/QrCodeLoginForm/index.tsx

@@ -14,6 +14,7 @@ export const QrCodeLoginForm: FC<QrLoginFormProps> = ({
   onFail,
   onSuccess,
   type,
+  idpId,
 }) => {
   const {
     state: { authClient, config },
@@ -31,6 +32,7 @@ export const QrCodeLoginForm: FC<QrLoginFormProps> = ({
 
   useEffect(() => {
     client.startScanning('authingGuardQrcode', {
+      extIdpConnId: idpId,
       autoExchangeUserInfo: true,
       ...config.qrCodeScanOptions,
       onStart(timer) {
@@ -46,7 +48,7 @@ export const QrCodeLoginForm: FC<QrLoginFormProps> = ({
       },
     })
     return () => clearInterval(timerRef.current)
-  }, [client, config.qrCodeScanOptions, onFail, onSuccess])
+  }, [client, config.qrCodeScanOptions, idpId, onFail, onSuccess])
 
   return (
     <div className="authing-guard-qr-form">

package/src/components/AuthingGuard/GuardLayout/index.tsx

@@ -165,9 +165,12 @@ const useGuardConfig = () => {
     // 默认登录方式
     const defaultLoginMethod =
       userConfig.defaultLoginMethod ||
+      appConfig.loginTabs?.defaultV2 ||
       appConfig.loginTabs?.default ||
       defaultGuardConfig.defaultLoginMethod
 
+    const loginMethodTitleMapping = appConfig.loginTabs?.title
+
     // 注册方式
     const registerMethods =
       userConfig.registerMethods ||
@@ -184,6 +187,8 @@ const useGuardConfig = () => {
       ? ''
       : userConfig.title ?? appConfig.name ?? defaultGuardConfig.title
 
+    const description = loading ? '' : appConfig.description ?? ''
+
     // 应用 logo
     const logo = loading
       ? ''
@@ -218,6 +223,7 @@ const useGuardConfig = () => {
       {
         logo,
         title,
+        description,
         autoRegister,
         loginMethods,
         passwordLoginMethods,
@@ -232,17 +238,19 @@ const useGuardConfig = () => {
         publicKey: appConfig.publicKey,
         agreementEnabled: appConfig.agreementEnabled,
         agreements: appConfig.agreements,
-        cdnBase: appConfig.cdnBase,
+        loginMethodTitleMapping: loginMethodTitleMapping,
       }
     )
   }, [
     userConfig,
     appConfig.loginTabs?.list,
     appConfig.loginTabs?.default,
+    appConfig.loginTabs?.title,
     appConfig.passwordTabConfig?.enabledLoginMethods,
     appConfig.registerTabs?.list,
     appConfig.registerTabs?.default,
     appConfig.name,
+    appConfig.description,
     appConfig.logo,
     appConfig.ssoPageComponentDisplay?.autoRegisterThenLoginHintInfo,
     appConfig.ssoPageComponentDisplay?.registerBtn,
@@ -250,7 +258,6 @@ const useGuardConfig = () => {
     appConfig.publicKey,
     appConfig.agreementEnabled,
     appConfig.agreements,
-    appConfig.cdnBase,
     appConfig.socialConnections,
     appConfig.identityProviders,
     loading,
@@ -312,16 +319,7 @@ export const GuardLayout: FC<{
 }) => {
   const { t } = useTranslation()
   const {
-    state: {
-      guardScenes,
-      authClient,
-      guardEvents,
-      activeTabs,
-      localesConfig,
-      guardSize,
-      showHeader,
-      showBottom,
-    },
+    state: { guardScenes, authClient, guardEvents, activeTabs, localesConfig },
     setValue,
   } = useGuardContext()
 
@@ -329,17 +327,6 @@ export const GuardLayout: FC<{
 
   const { loading, errorMsg, guardConfig, errorDetail } = useGuardConfig()
 
-  const guardSizeClassName = useMemo(() => {
-    switch (guardSize) {
-      case 'large':
-        return 'authing-guard-size_large'
-
-      case 'middle':
-      case 'small':
-        return 'authing-guard-size'
-    }
-  }, [guardSize])
-
   useEffect(() => {
     if (lang) {
       authClient.setLang(lang)
@@ -430,8 +417,8 @@ export const GuardLayout: FC<{
     [GuardScenes.Login]: <LoginLayout />,
     [GuardScenes.Register]: <RegisterLayout />,
     [GuardScenes.RestPassword]: <ResetPwdLayout />,
-    [GuardScenes.CompleteUserInfo]: <CompleteUserInfoLayout />,
     [GuardScenes.MfaVerify]: <MfaLayout />,
+    [GuardScenes.CompleteUserInfo]: <CompleteUserInfoLayout />,
     [GuardScenes.AppMfaVerify]: <AppMfaLayout />,
   }
 
@@ -468,7 +455,6 @@ export const GuardLayout: FC<{
           className={getClassnames([
             'authing-guard-container',
             !realVisible && 'authing-guard-container__hidden',
-            guardSizeClassName,
           ])}
         >
           {isModal && guardConfig.clickCloseable && (
@@ -477,7 +463,7 @@ export const GuardLayout: FC<{
             </button>
           )}
 
-          {showHeader && <GuardHeader />}
+          <GuardHeader />
 
           {loading ? (
             <Spin size="large" className="authing-guard-loading" />
@@ -486,12 +472,10 @@ export const GuardLayout: FC<{
           ) : (
             layoutMap[guardScenes]
           )}
-
-          {showBottom && (
-            <div className={'authing-guard-bottom'}>
-              {localesConfig?.isShowChange === false ? null : <ToggleLang />}
-            </div>
-          )}
+          {/* <div>{localesConfig?.isShowChange && <ToggleLang />}</div> */}
+          <div>
+            {localesConfig?.isShowChange === false ? null : <ToggleLang />}
+          </div>
         </div>
       </>
     </div>

package/src/components/AuthingGuard/GuardLayout/style.less

@@ -56,10 +56,6 @@
   transition: all 0.3s;
 }
 
-.authing-guard-size_large {
-  width: 900px;
-}
-
 .authing-guard-container__hidden {
   transform: translateY(2000px);
 }

package/src/components/AuthingGuard/Header/index.tsx

@@ -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/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;
+  }
 }