Feat/enterprise sso (#3602)

web/app/components/header/account-dropdown/index.tsx

@@ -39,6 +39,10 @@ export default function AppSelector({ isMobile }: IAppSelecotr) {
       url: '/logout',
       params: {},
     })
+
+    if (localStorage?.getItem('console_token'))
+      localStorage.removeItem('console_token')
+
     router.push('/signin')
   }
 

web/app/signin/_header.tsx

@@ -10,9 +10,6 @@ import LogoSite from '@/app/components/base/logo/logo-site'
 const Header = () => {
   const { locale, setLocaleOnClient } = useContext(I18n)
 
-  if (localStorage?.getItem('console_token'))
-    localStorage.removeItem('console_token')
-
   return <div className='flex items-center justify-between p-6 w-full'>
     <LogoSite />
     <Select

web/app/signin/enterpriseSSOForm.tsx

@@ -0,0 +1,87 @@
+'use client'
+import cn from 'classnames'
+import { useRouter, useSearchParams } from 'next/navigation'
+import type { FC } from 'react'
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Toast from '@/app/components/base/toast'
+import { getOIDCSSOUrl, getSAMLSSOUrl } from '@/service/enterprise'
+import Button from '@/app/components/base/button'
+
+type EnterpriseSSOFormProps = {
+  protocol: string
+}
+
+const EnterpriseSSOForm: FC<EnterpriseSSOFormProps> = ({
+  protocol,
+}) => {
+  const searchParams = useSearchParams()
+  const consoleToken = searchParams.get('console_token')
+  const message = searchParams.get('message')
+
+  const router = useRouter()
+  const { t } = useTranslation()
+
+  const [isLoading, setIsLoading] = useState(false)
+
+  useEffect(() => {
+    if (consoleToken) {
+      localStorage.setItem('console_token', consoleToken)
+      router.replace('/apps')
+    }
+
+    if (message) {
+      Toast.notify({
+        type: 'error',
+        message,
+      })
+    }
+  }, [])
+
+  const handleSSOLogin = () => {
+    setIsLoading(true)
+    if (protocol === 'saml') {
+      getSAMLSSOUrl().then((res) => {
+        router.push(res.url)
+      }).finally(() => {
+        setIsLoading(false)
+      })
+    }
+    else {
+      getOIDCSSOUrl().then((res) => {
+        document.cookie = `oidc-state=${res.state}`
+        router.push(res.url)
+      }).finally(() => {
+        setIsLoading(false)
+      })
+    }
+  }
+
+  return (
+    <div className={
+      cn(
+        'flex flex-col items-center w-full grow items-center justify-center',
+        'px-6',
+        'md:px-[108px]',
+      )
+    }>
+      <div className='flex flex-col md:w-[400px]'>
+        <div className="w-full mx-auto">
+          <h2 className="text-[32px] font-bold text-gray-900">{t('login.pageTitle')}</h2>
+        </div>
+        <div className="w-full mx-auto mt-10">
+          <Button
+            tabIndex={0}
+            type='primary'
+            onClick={() => { handleSSOLogin() }}
+            disabled={isLoading}
+            className="w-full !fone-medium !text-sm"
+          >{t('login.sso')}
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default EnterpriseSSOForm

web/app/signin/normalForm.tsx

@@ -96,8 +96,17 @@ const NormalForm = () => {
           remember_me: true,
         },
       })
-      localStorage.setItem('console_token', res.data)
-      router.replace('/apps')
+
+      if (res.result === 'success') {
+        localStorage.setItem('console_token', res.data)
+        router.replace('/apps')
+      }
+      else {
+        Toast.notify({
+          type: 'error',
+          message: res.data,
+        })
+      }
     }
     finally {
       setIsLoading(false)

web/app/signin/page.tsx

@@ -1,12 +1,29 @@
-import React from 'react'
+'use client'
+import React, { useEffect, useState } from 'react'
 import cn from 'classnames'
 import Script from 'next/script'
+import Loading from '../components/base/loading'
 import Forms from './forms'
 import Header from './_header'
 import style from './page.module.css'
+import EnterpriseSSOForm from './enterpriseSSOForm'
 import { IS_CE_EDITION } from '@/config'
+import { getEnterpriseFeatures } from '@/service/enterprise'
+import type { EnterpriseFeatures } from '@/types/enterprise'
+import { defaultEnterpriseFeatures } from '@/types/enterprise'
 
 const SignIn = () => {
+  const [loading, setLoading] = useState<boolean>(true)
+  const [enterpriseFeatures, setEnterpriseFeatures] = useState<EnterpriseFeatures>(defaultEnterpriseFeatures)
+
+  useEffect(() => {
+    getEnterpriseFeatures().then((res) => {
+      setEnterpriseFeatures(res)
+    }).finally(() => {
+      setLoading(false)
+    })
+  }, [])
+
   return (
     <>
       {!IS_CE_EDITION && (
@@ -40,10 +57,31 @@ gtag('config', 'AW-11217955271"');
           )
         }>
           <Header />
-          <Forms />
-          <div className='px-8 py-6 text-sm font-normal text-gray-500'>
-            © {new Date().getFullYear()} LangGenius, Inc. All rights reserved.
-          </div>
+
+          {loading && (
+            <div className={
+              cn(
+                'flex flex-col items-center w-full grow items-center justify-center',
+                'px-6',
+                'md:px-[108px]',
+              )
+            }>
+              <Loading type='area' />
+            </div>
+          )}
+
+          {!loading && !enterpriseFeatures.sso_enforced_for_signin && (
+            <>
+              <Forms />
+              <div className='px-8 py-6 text-sm font-normal text-gray-500'>
+                © {new Date().getFullYear()} LangGenius, Inc. All rights reserved.
+              </div>
+            </>
+          )}
+
+          {!loading && enterpriseFeatures.sso_enforced_for_signin && (
+            <EnterpriseSSOForm protocol={enterpriseFeatures.sso_enforced_for_signin_protocol} />
+          )}
         </div>
 
       </div>