Spaces:
Paused
Paused
File size: 3,962 Bytes
27fd333 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 |
'use client'
import cn from 'classnames'
import { useRouter, useSearchParams } from 'next/navigation'
import type { FC } from 'react'
import React, { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Toast from '@/app/components/base/toast'
import Button from '@/app/components/base/button'
import { fetchSystemFeatures, fetchWebOIDCSSOUrl, fetchWebSAMLSSOUrl } from '@/service/share'
import LogoSite from '@/app/components/base/logo/logo-site'
import { setAccessToken } from '@/app/components/share/utils'
const WebSSOForm: FC = () => {
const searchParams = useSearchParams()
const redirectUrl = searchParams.get('redirect_url')
const tokenFromUrl = searchParams.get('web_sso_token')
const message = searchParams.get('message')
const router = useRouter()
const { t } = useTranslation()
const [isLoading, setIsLoading] = useState(false)
const [protocal, setProtocal] = useState('')
useEffect(() => {
const fetchFeaturesAndSetToken = async () => {
await fetchSystemFeatures().then((res) => {
setProtocal(res.sso_enforced_for_web_protocol)
})
// Callback from SSO, process token and redirect
if (tokenFromUrl && redirectUrl) {
const appCode = redirectUrl.split('/').pop()
if (!appCode) {
Toast.notify({
type: 'error',
message: 'redirect url is invalid. App code is not found.',
})
return
}
await setAccessToken(appCode, tokenFromUrl)
router.push(redirectUrl)
}
}
fetchFeaturesAndSetToken()
if (message) {
Toast.notify({
type: 'error',
message,
})
}
}, [])
const handleSSOLogin = () => {
setIsLoading(true)
if (!redirectUrl) {
Toast.notify({
type: 'error',
message: 'redirect url is not found.',
})
setIsLoading(false)
return
}
const appCode = redirectUrl.split('/').pop()
if (!appCode) {
Toast.notify({
type: 'error',
message: 'redirect url is invalid. App code is not found.',
})
return
}
if (protocal === 'saml') {
fetchWebSAMLSSOUrl(appCode, redirectUrl).then((res) => {
router.push(res.url)
}).finally(() => {
setIsLoading(false)
})
}
else if (protocal === 'oidc') {
fetchWebOIDCSSOUrl(appCode, redirectUrl).then((res) => {
router.push(res.url)
}).finally(() => {
setIsLoading(false)
})
}
else {
Toast.notify({
type: 'error',
message: 'sso protocal is not supported.',
})
setIsLoading(false)
}
}
return (
<div className={cn(
'flex w-full min-h-screen',
'sm:p-4 lg:p-8',
'gap-x-20',
'justify-center lg:justify-start',
)}>
<div className={
cn(
'flex w-full flex-col bg-white shadow rounded-2xl shrink-0',
'space-between',
)
}>
<div className='flex items-center justify-between p-6 w-full'>
<LogoSite />
</div>
<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>
</div>
</div>
)
}
export default React.memo(WebSSOForm)
|