| | |
| | | if (isLoading || consoleToken) { |
| | | return <div className={ |
| | | cn( |
| | | 'flex w-full grow flex-col items-center justify-center', |
| | | 'flex flex-col items-center w-full grow justify-center', |
| | | 'px-6', |
| | | 'md:px-[108px]', |
| | | ) |
| | |
| | | </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' /> |
| | | return <div className='w-full mx-auto mt-8'> |
| | | <div className='bg-white'> |
| | | <div className="p-4 rounded-lg bg-gradient-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2"> |
| | | <div className='flex items-center justify-center w-10 h-10 rounded-xl bg-components-card-bg shadow shadows-shadow-lg mb-2 relative'> |
| | | <RiContractLine className='w-5 h-5' /> |
| | | <RiErrorWarningFill className='absolute w-4 h-4 text-text-warning-secondary -top-1 -right-1' /> |
| | | </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> |
| | | <p className='system-xs-regular text-text-tertiary mt-1'>{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' /> |
| | | return <div className='w-full mx-auto mt-8'> |
| | | <div className='bg-white'> |
| | | <div className="p-4 rounded-lg bg-gradient-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2"> |
| | | <div className='flex items-center justify-center w-10 h-10 rounded-xl bg-components-card-bg shadow shadows-shadow-lg mb-2 relative'> |
| | | <RiContractLine className='w-5 h-5' /> |
| | | <RiErrorWarningFill className='absolute w-4 h-4 text-text-warning-secondary -top-1 -right-1' /> |
| | | </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> |
| | | <p className='system-xs-regular text-text-tertiary mt-1'>{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' /> |
| | | return <div className='w-full mx-auto mt-8'> |
| | | <div className='bg-white'> |
| | | <div className="p-4 rounded-lg bg-gradient-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2"> |
| | | <div className='flex items-center justify-center w-10 h-10 rounded-xl bg-components-card-bg shadow shadows-shadow-lg mb-2 relative'> |
| | | <RiContractLine className='w-5 h-5' /> |
| | | <RiErrorWarningFill className='absolute w-4 h-4 text-text-warning-secondary -top-1 -right-1' /> |
| | | </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> |
| | | <p className='system-xs-regular text-text-tertiary mt-1'>{t('login.licenseInactiveTip')}</p> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | |
| | | return ( |
| | | <> |
| | | <div className="mx-auto mt-8 w-full"> |
| | | <div className="w-full mx-auto mt-8"> |
| | | {isInviteLink |
| | | ? <div className="mx-auto w-full"> |
| | | ? <div className="w-full mx-auto"> |
| | | <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> |
| | | <p className='mt-2 body-md-regular text-text-tertiary'>{t('login.joinTipStart')}{workspaceName}{t('login.joinTipEnd')}</p> |
| | | </div> |
| | | : <div className="mx-auto w-full"> |
| | | : <div className="w-full mx-auto"> |
| | | <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> |
| | | <p className='mt-2 body-md-regular text-text-tertiary'>{t('login.welcome')}</p> |
| | | </div>} |
| | | <div className="relative"> |
| | | <div className="mt-6 flex flex-col gap-3"> |
| | | <div className="bg-white"> |
| | | <div className="flex flex-col gap-3 mt-6"> |
| | | {systemFeatures.enable_social_oauth_login && <SocialAuth />} |
| | | {systemFeatures.sso_enforced_for_signin && <div className='w-full'> |
| | | <SSOAuth protocol={systemFeatures.sso_enforced_for_signin_protocol} /> |
| | |
| | | |
| | | {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 className='bg-gradient-to-r from-background-gradient-mask-transparent via-divider-regular to-background-gradient-mask-transparent h-px w-full'></div> |
| | | </div> |
| | | <div className="relative flex justify-center"> |
| | | <span className="system-xs-medium-uppercase px-2 text-text-tertiary">{t('login.or')}</span> |
| | | <span className="px-2 text-text-tertiary system-xs-medium-uppercase bg-white">{t('login.or')}</span> |
| | | </div> |
| | | </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 className="p-4 rounded-lg bg-gradient-to-r from-workflow-workflow-progress-bg-1 to-workflow-workflow-progress-bg-2"> |
| | | <div className='flex items-center justify-center w-10 h-10 rounded-xl bg-components-card-bg shadow shadows-shadow-lg mb-2'> |
| | | <RiDoorLockLine className='w-5 h-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> |
| | | <p className='system-xs-regular text-text-tertiary mt-1'>{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 className='bg-gradient-to-r from-background-gradient-mask-transparent via-divider-regular to-background-gradient-mask-transparent h-px w-full'></div> |
| | | </div> |
| | | </div> |
| | | </>} |
| | | <div className="system-xs-regular mt-2 block w-full text-text-tertiary"> |
| | | <div className="w-full block mt-2 system-xs-regular text-text-tertiary"> |
| | | {t('login.tosDesc')} |
| | | |
| | | <Link |
| | |
| | | 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"> |
| | | {IS_CE_EDITION && <div className="w-hull block mt-2 system-xs-regular text-text-tertiary"> |
| | | {t('login.goToInit')} |
| | | |
| | | <Link |