import React, { useCallback, useEffect, useState } from 'react'
|
import { useTranslation } from 'react-i18next'
|
import Link from 'next/link'
|
import { useRouter, useSearchParams } from 'next/navigation'
|
import { RiContractLine, RiDoorLockLine, RiErrorWarningFill } from '@remixicon/react'
|
import Loading from '../components/base/loading'
|
import MailAndCodeAuth from './components/mail-and-code-auth'
|
import MailAndPasswordAuth from './components/mail-and-password-auth'
|
import SocialAuth from './components/social-auth'
|
import SSOAuth from './components/sso-auth'
|
import cn from '@/utils/classnames'
|
import { getSystemFeatures, invitationCheck } from '@/service/common'
|
import { LicenseStatus, defaultSystemFeatures } from '@/types/feature'
|
import Toast from '@/app/components/base/toast'
|
import { IS_CE_EDITION } from '@/config'
|
|
const NormalForm = () => {
|
const { t } = useTranslation()
|
const router = useRouter()
|
const searchParams = useSearchParams()
|
const consoleToken = decodeURIComponent(searchParams.get('access_token') || '')
|
const refreshToken = decodeURIComponent(searchParams.get('refresh_token') || '')
|
const message = decodeURIComponent(searchParams.get('message') || '')
|
const invite_token = decodeURIComponent(searchParams.get('invite_token') || '')
|
const [isLoading, setIsLoading] = useState(true)
|
const [systemFeatures, setSystemFeatures] = useState(defaultSystemFeatures)
|
const [authType, updateAuthType] = useState<'code' | 'password'>('password')
|
const [showORLine, setShowORLine] = useState(false)
|
const [allMethodsAreDisabled, setAllMethodsAreDisabled] = useState(false)
|
const [workspaceName, setWorkSpaceName] = useState('')
|
|
const isInviteLink = Boolean(invite_token && invite_token !== 'null')
|
|
const init = useCallback(async () => {
|
try {
|
if (consoleToken && refreshToken) {
|
localStorage.setItem('console_token', consoleToken)
|
localStorage.setItem('refresh_token', refreshToken)
|
router.replace('/apps')
|
return
|
}
|
|
if (message) {
|
Toast.notify({
|
type: 'error',
|
message,
|
})
|
}
|
const features = await getSystemFeatures()
|
const allFeatures = { ...defaultSystemFeatures, ...features }
|
setSystemFeatures(allFeatures)
|
setAllMethodsAreDisabled(!allFeatures.enable_social_oauth_login && !allFeatures.enable_email_code_login && !allFeatures.enable_email_password_login && !allFeatures.sso_enforced_for_signin)
|
setShowORLine((allFeatures.enable_social_oauth_login || allFeatures.sso_enforced_for_signin) && (allFeatures.enable_email_code_login || allFeatures.enable_email_password_login))
|
updateAuthType(allFeatures.enable_email_password_login ? 'password' : 'code')
|
if (isInviteLink) {
|
const checkRes = await invitationCheck({
|
url: '/activate/check',
|
params: {
|
token: invite_token,
|
},
|
})
|
setWorkSpaceName(checkRes?.data?.workspace_name || '')
|
}
|
}
|
catch (error) {
|
console.error(error)
|
setAllMethodsAreDisabled(true)
|
setSystemFeatures(defaultSystemFeatures)
|
}
|
finally { setIsLoading(false) }
|
}, [consoleToken, refreshToken, message, router, invite_token, isInviteLink])
|
useEffect(() => {
|
init()
|
}, [init])
|
if (isLoading || consoleToken) {
|
return <div className={
|
cn(
|
'flex w-full grow flex-col items-center justify-center',
|
'px-6',
|
'md:px-[108px]',
|
)
|
}>
|
<Loading type='area' />
|
</div>
|
}
|
if (systemFeatures.license?.status === LicenseStatus.LOST) {
|
return <div className='mx-auto mt-8 w-full'>
|
<div className='relative'>
|
<div className="rounded-lg bg-gradient-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 p-4">
|
<div className='shadows-shadow-lg relative mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-components-card-bg shadow'>
|
<RiContractLine className='h-5 w-5' />
|
<RiErrorWarningFill className='absolute -right-1 -top-1 h-4 w-4 text-text-warning-secondary' />
|
</div>
|
<p className='system-sm-medium text-text-primary'>{t('login.licenseLost')}</p>
|
<p className='system-xs-regular mt-1 text-text-tertiary'>{t('login.licenseLostTip')}</p>
|
</div>
|
</div>
|
</div>
|
}
|
if (systemFeatures.license?.status === LicenseStatus.EXPIRED) {
|
return <div className='mx-auto mt-8 w-full'>
|
<div className='relative'>
|
<div className="rounded-lg bg-gradient-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 p-4">
|
<div className='shadows-shadow-lg relative mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-components-card-bg shadow'>
|
<RiContractLine className='h-5 w-5' />
|
<RiErrorWarningFill className='absolute -right-1 -top-1 h-4 w-4 text-text-warning-secondary' />
|
</div>
|
<p className='system-sm-medium text-text-primary'>{t('login.licenseExpired')}</p>
|
<p className='system-xs-regular mt-1 text-text-tertiary'>{t('login.licenseExpiredTip')}</p>
|
</div>
|
</div>
|
</div>
|
}
|
if (systemFeatures.license?.status === LicenseStatus.INACTIVE) {
|
return <div className='mx-auto mt-8 w-full'>
|
<div className='relative'>
|
<div className="rounded-lg bg-gradient-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 p-4">
|
<div className='shadows-shadow-lg relative mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-components-card-bg shadow'>
|
<RiContractLine className='h-5 w-5' />
|
<RiErrorWarningFill className='absolute -right-1 -top-1 h-4 w-4 text-text-warning-secondary' />
|
</div>
|
<p className='system-sm-medium text-text-primary'>{t('login.licenseInactive')}</p>
|
<p className='system-xs-regular mt-1 text-text-tertiary'>{t('login.licenseInactiveTip')}</p>
|
</div>
|
</div>
|
</div>
|
}
|
|
return (
|
<>
|
<div className="mx-auto mt-8 w-full">
|
{isInviteLink
|
? <div className="mx-auto w-full">
|
<h2 className="title-4xl-semi-bold text-text-primary">{t('login.join')}{workspaceName}</h2>
|
<p className='body-md-regular mt-2 text-text-tertiary'>{t('login.joinTipStart')}{workspaceName}{t('login.joinTipEnd')}</p>
|
</div>
|
: <div className="mx-auto w-full">
|
<h2 className="title-4xl-semi-bold text-text-primary">{t('login.pageTitle')}</h2>
|
<p className='body-md-regular mt-2 text-text-tertiary'>{t('login.welcome')}</p>
|
</div>}
|
<div className="relative">
|
<div className="mt-6 flex flex-col gap-3">
|
{systemFeatures.enable_social_oauth_login && <SocialAuth />}
|
{systemFeatures.sso_enforced_for_signin && <div className='w-full'>
|
<SSOAuth protocol={systemFeatures.sso_enforced_for_signin_protocol} />
|
</div>}
|
</div>
|
|
{showORLine && <div className="relative mt-6">
|
<div className="absolute inset-0 flex items-center" aria-hidden="true">
|
<div className='h-px w-full bg-gradient-to-r from-background-gradient-mask-transparent via-divider-regular to-background-gradient-mask-transparent'></div>
|
</div>
|
<div className="relative flex justify-center">
|
<span className="system-xs-medium-uppercase px-2 text-text-tertiary">{t('login.or')}</span>
|
</div>
|
</div>}
|
{
|
(systemFeatures.enable_email_code_login || systemFeatures.enable_email_password_login) && <>
|
{systemFeatures.enable_email_code_login && authType === 'code' && <>
|
<MailAndCodeAuth isInvite={isInviteLink} />
|
{systemFeatures.enable_email_password_login && <div className='cursor-pointer py-1 text-center' onClick={() => { updateAuthType('password') }}>
|
<span className='system-xs-medium text-components-button-secondary-accent-text'>{t('login.usePassword')}</span>
|
</div>}
|
</>}
|
{systemFeatures.enable_email_password_login && authType === 'password' && <>
|
<MailAndPasswordAuth isInvite={isInviteLink} isEmailSetup={systemFeatures.is_email_setup} allowRegistration={systemFeatures.is_allow_register} />
|
{systemFeatures.enable_email_code_login && <div className='cursor-pointer py-1 text-center' onClick={() => { updateAuthType('code') }}>
|
<span className='system-xs-medium text-components-button-secondary-accent-text'>{t('login.useVerificationCode')}</span>
|
</div>}
|
</>}
|
</>
|
}
|
{allMethodsAreDisabled && <>
|
<div className="rounded-lg bg-gradient-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2 p-4">
|
<div className='shadows-shadow-lg mb-2 flex h-10 w-10 items-center justify-center rounded-xl bg-components-card-bg shadow'>
|
<RiDoorLockLine className='h-5 w-5' />
|
</div>
|
<p className='system-sm-medium text-text-primary'>{t('login.noLoginMethod')}</p>
|
<p className='system-xs-regular mt-1 text-text-tertiary'>{t('login.noLoginMethodTip')}</p>
|
</div>
|
<div className="relative my-2 py-2">
|
<div className="absolute inset-0 flex items-center" aria-hidden="true">
|
<div className='h-px w-full bg-gradient-to-r from-background-gradient-mask-transparent via-divider-regular to-background-gradient-mask-transparent'></div>
|
</div>
|
</div>
|
</>}
|
<div className="system-xs-regular mt-2 block w-full text-text-tertiary">
|
{t('login.tosDesc')}
|
|
<Link
|
className='system-xs-medium text-text-secondary hover:underline'
|
target='_blank' rel='noopener noreferrer'
|
href='https://dify.ai/terms'
|
>{t('login.tos')}</Link>
|
&
|
<Link
|
className='system-xs-medium text-text-secondary hover:underline'
|
target='_blank' rel='noopener noreferrer'
|
href='https://dify.ai/privacy'
|
>{t('login.pp')}</Link>
|
</div>
|
{IS_CE_EDITION && <div className="w-hull system-xs-regular mt-2 block text-text-tertiary">
|
{t('login.goToInit')}
|
|
<Link
|
className='system-xs-medium text-text-secondary hover:underline'
|
href='/install'
|
>{t('login.setAdminAccount')}</Link>
|
</div>}
|
|
</div>
|
</div>
|
</>
|
)
|
}
|
|
export default NormalForm
|
