diff --git a/web/app/(shareLayout)/layout.tsx b/web/app/(shareLayout)/layout.tsx
index 83adbd3ca..8db336a17 100644
--- a/web/app/(shareLayout)/layout.tsx
+++ b/web/app/(shareLayout)/layout.tsx
@@ -1,14 +1,42 @@
-import React from 'react'
+'use client'
+import React, { useEffect, useState } from 'react'
import type { FC } from 'react'
-import type { Metadata } from 'next'
-
-export const metadata: Metadata = {
- icons: 'data:,', // prevent browser from using default favicon
-}
+import { usePathname, useSearchParams } from 'next/navigation'
+import Loading from '../components/base/loading'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+import { AccessMode } from '@/models/access-control'
+import { getAppAccessModeByAppCode } from '@/service/share'
const Layout: FC<{
children: React.ReactNode
}> = ({ children }) => {
+ const isGlobalPending = useGlobalPublicStore(s => s.isGlobalPending)
+ const setWebAppAccessMode = useGlobalPublicStore(s => s.setWebAppAccessMode)
+ const pathname = usePathname()
+ const searchParams = useSearchParams()
+ const redirectUrl = searchParams.get('redirect_url')
+ const [isLoading, setIsLoading] = useState(true)
+ useEffect(() => {
+ (async () => {
+ let appCode: string | null = null
+ if (redirectUrl)
+ appCode = redirectUrl?.split('/').pop() || null
+ else
+ appCode = pathname.split('/').pop() || null
+
+ if (!appCode)
+ return
+ setIsLoading(true)
+ const ret = await getAppAccessModeByAppCode(appCode)
+ setWebAppAccessMode(ret?.accessMode || AccessMode.PUBLIC)
+ setIsLoading(false)
+ })()
+ }, [pathname, redirectUrl, setWebAppAccessMode])
+ if (isLoading || isGlobalPending) {
+ return
+
+
+ }
return (
{children}
diff --git a/web/app/(shareLayout)/webapp-reset-password/check-code/page.tsx b/web/app/(shareLayout)/webapp-reset-password/check-code/page.tsx
new file mode 100644
index 000000000..da754794b
--- /dev/null
+++ b/web/app/(shareLayout)/webapp-reset-password/check-code/page.tsx
@@ -0,0 +1,96 @@
+'use client'
+import { RiArrowLeftLine, RiMailSendFill } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { useState } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { useContext } from 'use-context-selector'
+import Countdown from '@/app/components/signin/countdown'
+import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
+import Toast from '@/app/components/base/toast'
+import { sendWebAppResetPasswordCode, verifyWebAppResetPasswordCode } from '@/service/common'
+import I18NContext from '@/context/i18n'
+
+export default function CheckCode() {
+ const { t } = useTranslation()
+ const router = useRouter()
+ const searchParams = useSearchParams()
+ const email = decodeURIComponent(searchParams.get('email') as string)
+ const token = decodeURIComponent(searchParams.get('token') as string)
+ const [code, setVerifyCode] = useState('')
+ const [loading, setIsLoading] = useState(false)
+ const { locale } = useContext(I18NContext)
+
+ const verify = async () => {
+ try {
+ if (!code.trim()) {
+ Toast.notify({
+ type: 'error',
+ message: t('login.checkCode.emptyCode'),
+ })
+ return
+ }
+ if (!/\d{6}/.test(code)) {
+ Toast.notify({
+ type: 'error',
+ message: t('login.checkCode.invalidCode'),
+ })
+ return
+ }
+ setIsLoading(true)
+ const ret = await verifyWebAppResetPasswordCode({ email, code, token })
+ if (ret.is_valid) {
+ const params = new URLSearchParams(searchParams)
+ params.set('token', encodeURIComponent(ret.token))
+ router.push(`/webapp-reset-password/set-password?${params.toString()}`)
+ }
+ }
+ catch (error) { console.error(error) }
+ finally {
+ setIsLoading(false)
+ }
+ }
+
+ const resendCode = async () => {
+ try {
+ const res = await sendWebAppResetPasswordCode(email, locale)
+ if (res.result === 'success') {
+ const params = new URLSearchParams(searchParams)
+ params.set('token', encodeURIComponent(res.data))
+ router.replace(`/webapp-reset-password/check-code?${params.toString()}`)
+ }
+ }
+ catch (error) { console.error(error) }
+ }
+
+ return
+
+
+
+
+
{t('login.checkCode.checkYourEmail')}
+
+
+
+ {t('login.checkCode.validTime')}
+
+
+
+
+
+
router.back()} className='flex h-9 cursor-pointer items-center justify-center text-text-tertiary'>
+
+
+
+
{t('login.back')}
+
+
+}
diff --git a/web/app/(shareLayout)/webapp-reset-password/layout.tsx b/web/app/(shareLayout)/webapp-reset-password/layout.tsx
new file mode 100644
index 000000000..e0ac6b9ad
--- /dev/null
+++ b/web/app/(shareLayout)/webapp-reset-password/layout.tsx
@@ -0,0 +1,30 @@
+'use client'
+import Header from '@/app/signin/_header'
+
+import cn from '@/utils/classnames'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+
+export default function SignInLayout({ children }: any) {
+ const { systemFeatures } = useGlobalPublicStore()
+ return <>
+
+
+
+
+ {!systemFeatures.branding.enabled &&
+ © {new Date().getFullYear()} LangGenius, Inc. All rights reserved.
+
}
+
+
+
+}
diff --git a/web/app/(shareLayout)/webapp-reset-password/page.tsx b/web/app/(shareLayout)/webapp-reset-password/page.tsx
new file mode 100644
index 000000000..96cd4c580
--- /dev/null
+++ b/web/app/(shareLayout)/webapp-reset-password/page.tsx
@@ -0,0 +1,104 @@
+'use client'
+import Link from 'next/link'
+import { RiArrowLeftLine, RiLockPasswordLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { useState } from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { useContext } from 'use-context-selector'
+import { COUNT_DOWN_KEY, COUNT_DOWN_TIME_MS } from '@/app/components/signin/countdown'
+import { emailRegex } from '@/config'
+import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
+import Toast from '@/app/components/base/toast'
+import { sendResetPasswordCode } from '@/service/common'
+import I18NContext from '@/context/i18n'
+import { noop } from 'lodash-es'
+import useDocumentTitle from '@/hooks/use-document-title'
+
+export default function CheckCode() {
+ const { t } = useTranslation()
+ useDocumentTitle('')
+ const searchParams = useSearchParams()
+ const router = useRouter()
+ const [email, setEmail] = useState('')
+ const [loading, setIsLoading] = useState(false)
+ const { locale } = useContext(I18NContext)
+
+ const handleGetEMailVerificationCode = async () => {
+ try {
+ if (!email) {
+ Toast.notify({ type: 'error', message: t('login.error.emailEmpty') })
+ return
+ }
+
+ if (!emailRegex.test(email)) {
+ Toast.notify({
+ type: 'error',
+ message: t('login.error.emailInValid'),
+ })
+ return
+ }
+ setIsLoading(true)
+ const res = await sendResetPasswordCode(email, locale)
+ if (res.result === 'success') {
+ localStorage.setItem(COUNT_DOWN_KEY, `${COUNT_DOWN_TIME_MS}`)
+ const params = new URLSearchParams(searchParams)
+ params.set('token', encodeURIComponent(res.data))
+ params.set('email', encodeURIComponent(email))
+ router.push(`/webapp-reset-password/check-code?${params.toString()}`)
+ }
+ else if (res.code === 'account_not_found') {
+ Toast.notify({
+ type: 'error',
+ message: t('login.error.registrationNotAllowed'),
+ })
+ }
+ else {
+ Toast.notify({
+ type: 'error',
+ message: res.data,
+ })
+ }
+ }
+ catch (error) {
+ console.error(error)
+ }
+ finally {
+ setIsLoading(false)
+ }
+ }
+
+ return
+
+
+
+
+
{t('login.resetPassword')}
+
+ {t('login.resetPasswordDesc')}
+
+
+
+
+
+
+
+
+
+
{t('login.backToLogin')}
+
+
+}
diff --git a/web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx b/web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx
new file mode 100644
index 000000000..9f9a8ad4e
--- /dev/null
+++ b/web/app/(shareLayout)/webapp-reset-password/set-password/page.tsx
@@ -0,0 +1,188 @@
+'use client'
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useRouter, useSearchParams } from 'next/navigation'
+import cn from 'classnames'
+import { RiCheckboxCircleFill } from '@remixicon/react'
+import { useCountDown } from 'ahooks'
+import Button from '@/app/components/base/button'
+import { changeWebAppPasswordWithToken } from '@/service/common'
+import Toast from '@/app/components/base/toast'
+import Input from '@/app/components/base/input'
+
+const validPassword = /^(?=.*[a-zA-Z])(?=.*\d).{8,}$/
+
+const ChangePasswordForm = () => {
+ const { t } = useTranslation()
+ const router = useRouter()
+ const searchParams = useSearchParams()
+ const token = decodeURIComponent(searchParams.get('token') || '')
+
+ const [password, setPassword] = useState('')
+ const [confirmPassword, setConfirmPassword] = useState('')
+ const [showSuccess, setShowSuccess] = useState(false)
+ const [showPassword, setShowPassword] = useState(false)
+ const [showConfirmPassword, setShowConfirmPassword] = useState(false)
+
+ const showErrorMessage = useCallback((message: string) => {
+ Toast.notify({
+ type: 'error',
+ message,
+ })
+ }, [])
+
+ const getSignInUrl = () => {
+ return `/webapp-signin?redirect_url=${searchParams.get('redirect_url') || ''}`
+ }
+
+ const AUTO_REDIRECT_TIME = 5000
+ const [leftTime, setLeftTime] = useState
(undefined)
+ const [countdown] = useCountDown({
+ leftTime,
+ onEnd: () => {
+ router.replace(getSignInUrl())
+ },
+ })
+
+ const valid = useCallback(() => {
+ if (!password.trim()) {
+ showErrorMessage(t('login.error.passwordEmpty'))
+ return false
+ }
+ if (!validPassword.test(password)) {
+ showErrorMessage(t('login.error.passwordInvalid'))
+ return false
+ }
+ if (password !== confirmPassword) {
+ showErrorMessage(t('common.account.notEqual'))
+ return false
+ }
+ return true
+ }, [password, confirmPassword, showErrorMessage, t])
+
+ const handleChangePassword = useCallback(async () => {
+ if (!valid())
+ return
+ try {
+ await changeWebAppPasswordWithToken({
+ url: '/forgot-password/resets',
+ body: {
+ token,
+ new_password: password,
+ password_confirm: confirmPassword,
+ },
+ })
+ setShowSuccess(true)
+ setLeftTime(AUTO_REDIRECT_TIME)
+ }
+ catch (error) {
+ console.error(error)
+ }
+ }, [password, token, valid, confirmPassword])
+
+ return (
+
+ {!showSuccess && (
+
+
+
+ {t('login.changePassword')}
+
+
+ {t('login.changePasswordTip')}
+
+
+
+
+
+ {/* Password */}
+
+
+
+
setPassword(e.target.value)}
+ placeholder={t('login.passwordPlaceholder') || ''}
+ />
+
+
+
+
+
+
{t('login.error.passwordInvalid')}
+
+ {/* Confirm Password */}
+
+
+
+
setConfirmPassword(e.target.value)}
+ placeholder={t('login.confirmPasswordPlaceholder') || ''}
+ />
+
+
+
+
+
+
+
+
+
+
+
+ )}
+ {showSuccess && (
+
+
+
+
+
+
+ {t('login.passwordChangedTip')}
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
{t('login.checkCode.checkYourEmail')}
+
+
+
+ {t('login.checkCode.validTime')}
+
+
+
+
+
+
router.back()} className='flex h-9 cursor-pointer items-center justify-center text-text-tertiary'>
+
+
+
+
{t('login.back')}
+
+
+
+
+ )
+}
+
+export default React.memo(ExternalMemberSSOAuth)
diff --git a/web/app/(shareLayout)/webapp-signin/components/mail-and-code-auth.tsx b/web/app/(shareLayout)/webapp-signin/components/mail-and-code-auth.tsx
new file mode 100644
index 000000000..29af3e3a5
--- /dev/null
+++ b/web/app/(shareLayout)/webapp-signin/components/mail-and-code-auth.tsx
@@ -0,0 +1,68 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { useContext } from 'use-context-selector'
+import Input from '@/app/components/base/input'
+import Button from '@/app/components/base/button'
+import { emailRegex } from '@/config'
+import Toast from '@/app/components/base/toast'
+import { sendWebAppEMailLoginCode } from '@/service/common'
+import { COUNT_DOWN_KEY, COUNT_DOWN_TIME_MS } from '@/app/components/signin/countdown'
+import I18NContext from '@/context/i18n'
+import { noop } from 'lodash-es'
+
+export default function MailAndCodeAuth() {
+ const { t } = useTranslation()
+ const router = useRouter()
+ const searchParams = useSearchParams()
+ const emailFromLink = decodeURIComponent(searchParams.get('email') || '')
+ const [email, setEmail] = useState(emailFromLink)
+ const [loading, setIsLoading] = useState(false)
+ const { locale } = useContext(I18NContext)
+
+ const handleGetEMailVerificationCode = async () => {
+ try {
+ if (!email) {
+ Toast.notify({ type: 'error', message: t('login.error.emailEmpty') })
+ return
+ }
+
+ if (!emailRegex.test(email)) {
+ Toast.notify({
+ type: 'error',
+ message: t('login.error.emailInValid'),
+ })
+ return
+ }
+ setIsLoading(true)
+ const ret = await sendWebAppEMailLoginCode(email, locale)
+ if (ret.result === 'success') {
+ localStorage.setItem(COUNT_DOWN_KEY, `${COUNT_DOWN_TIME_MS}`)
+ const params = new URLSearchParams(searchParams)
+ params.set('email', encodeURIComponent(email))
+ params.set('token', encodeURIComponent(ret.data))
+ router.push(`/webapp-signin/check-code?${params.toString()}`)
+ }
+ }
+ catch (error) {
+ console.error(error)
+ }
+ finally {
+ setIsLoading(false)
+ }
+ }
+
+ return (
+ )
+}
diff --git a/web/app/(shareLayout)/webapp-signin/components/mail-and-password-auth.tsx b/web/app/(shareLayout)/webapp-signin/components/mail-and-password-auth.tsx
new file mode 100644
index 000000000..d9e56af1b
--- /dev/null
+++ b/web/app/(shareLayout)/webapp-signin/components/mail-and-password-auth.tsx
@@ -0,0 +1,171 @@
+import Link from 'next/link'
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { useContext } from 'use-context-selector'
+import Button from '@/app/components/base/button'
+import Toast from '@/app/components/base/toast'
+import { emailRegex } from '@/config'
+import { webAppLogin } from '@/service/common'
+import Input from '@/app/components/base/input'
+import I18NContext from '@/context/i18n'
+import { noop } from 'lodash-es'
+import { setAccessToken } from '@/app/components/share/utils'
+import { fetchAccessToken } from '@/service/share'
+
+type MailAndPasswordAuthProps = {
+ isEmailSetup: boolean
+}
+
+const passwordRegex = /^(?=.*[a-zA-Z])(?=.*\d).{8,}$/
+
+export default function MailAndPasswordAuth({ isEmailSetup }: MailAndPasswordAuthProps) {
+ const { t } = useTranslation()
+ const { locale } = useContext(I18NContext)
+ const router = useRouter()
+ const searchParams = useSearchParams()
+ const [showPassword, setShowPassword] = useState(false)
+ const emailFromLink = decodeURIComponent(searchParams.get('email') || '')
+ const [email, setEmail] = useState(emailFromLink)
+ const [password, setPassword] = useState('')
+
+ const [isLoading, setIsLoading] = useState(false)
+ const redirectUrl = searchParams.get('redirect_url')
+
+ const getAppCodeFromRedirectUrl = useCallback(() => {
+ const appCode = redirectUrl?.split('/').pop()
+ if (!appCode)
+ return null
+
+ return appCode
+ }, [redirectUrl])
+ const handleEmailPasswordLogin = async () => {
+ const appCode = getAppCodeFromRedirectUrl()
+ if (!email) {
+ Toast.notify({ type: 'error', message: t('login.error.emailEmpty') })
+ return
+ }
+ if (!emailRegex.test(email)) {
+ Toast.notify({
+ type: 'error',
+ message: t('login.error.emailInValid'),
+ })
+ return
+ }
+ if (!password?.trim()) {
+ Toast.notify({ type: 'error', message: t('login.error.passwordEmpty') })
+ return
+ }
+ if (!passwordRegex.test(password)) {
+ Toast.notify({
+ type: 'error',
+ message: t('login.error.passwordInvalid'),
+ })
+ return
+ }
+ if (!redirectUrl || !appCode) {
+ Toast.notify({
+ type: 'error',
+ message: t('login.error.redirectUrlMissing'),
+ })
+ return
+ }
+ try {
+ setIsLoading(true)
+ const loginData: Record = {
+ email,
+ password,
+ language: locale,
+ remember_me: true,
+ }
+
+ const res = await webAppLogin({
+ url: '/login',
+ body: loginData,
+ })
+ if (res.result === 'success') {
+ localStorage.setItem('webapp_access_token', res.data.access_token)
+ const tokenResp = await fetchAccessToken({ appCode, webAppAccessToken: res.data.access_token })
+ await setAccessToken(appCode, tokenResp.access_token)
+ router.replace(redirectUrl)
+ }
+ else {
+ Toast.notify({
+ type: 'error',
+ message: res.data,
+ })
+ }
+ }
+
+ finally {
+ setIsLoading(false)
+ }
+ }
+
+ return
+}
diff --git a/web/app/(shareLayout)/webapp-signin/components/sso-auth.tsx b/web/app/(shareLayout)/webapp-signin/components/sso-auth.tsx
new file mode 100644
index 000000000..5d649322b
--- /dev/null
+++ b/web/app/(shareLayout)/webapp-signin/components/sso-auth.tsx
@@ -0,0 +1,88 @@
+'use client'
+import { useRouter, useSearchParams } from 'next/navigation'
+import type { FC } from 'react'
+import { useCallback } from 'react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Lock01 } from '@/app/components/base/icons/src/vender/solid/security'
+import Toast from '@/app/components/base/toast'
+import Button from '@/app/components/base/button'
+import { SSOProtocol } from '@/types/feature'
+import { fetchMembersOAuth2SSOUrl, fetchMembersOIDCSSOUrl, fetchMembersSAMLSSOUrl } from '@/service/share'
+
+type SSOAuthProps = {
+ protocol: SSOProtocol | ''
+}
+
+const SSOAuth: FC = ({
+ protocol,
+}) => {
+ const router = useRouter()
+ const { t } = useTranslation()
+ const searchParams = useSearchParams()
+
+ const redirectUrl = searchParams.get('redirect_url')
+ const getAppCodeFromRedirectUrl = useCallback(() => {
+ const appCode = redirectUrl?.split('/').pop()
+ if (!appCode)
+ return null
+
+ return appCode
+ }, [redirectUrl])
+
+ const [isLoading, setIsLoading] = useState(false)
+
+ const handleSSOLogin = () => {
+ const appCode = getAppCodeFromRedirectUrl()
+ if (!redirectUrl || !appCode) {
+ Toast.notify({
+ type: 'error',
+ message: 'invalid redirect URL or app code',
+ })
+ return
+ }
+ setIsLoading(true)
+ if (protocol === SSOProtocol.SAML) {
+ fetchMembersSAMLSSOUrl(appCode, redirectUrl).then((res) => {
+ router.push(res.url)
+ }).finally(() => {
+ setIsLoading(false)
+ })
+ }
+ else if (protocol === SSOProtocol.OIDC) {
+ fetchMembersOIDCSSOUrl(appCode, redirectUrl).then((res) => {
+ router.push(res.url)
+ }).finally(() => {
+ setIsLoading(false)
+ })
+ }
+ else if (protocol === SSOProtocol.OAuth2) {
+ fetchMembersOAuth2SSOUrl(appCode, redirectUrl).then((res) => {
+ router.push(res.url)
+ }).finally(() => {
+ setIsLoading(false)
+ })
+ }
+ else {
+ Toast.notify({
+ type: 'error',
+ message: 'invalid SSO protocol',
+ })
+ setIsLoading(false)
+ }
+ }
+
+ return (
+
+ )
+}
+
+export default SSOAuth
diff --git a/web/app/(shareLayout)/webapp-signin/layout.tsx b/web/app/(shareLayout)/webapp-signin/layout.tsx
new file mode 100644
index 000000000..a03364d32
--- /dev/null
+++ b/web/app/(shareLayout)/webapp-signin/layout.tsx
@@ -0,0 +1,25 @@
+'use client'
+
+import cn from '@/utils/classnames'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+import useDocumentTitle from '@/hooks/use-document-title'
+
+export default function SignInLayout({ children }: any) {
+ const { systemFeatures } = useGlobalPublicStore()
+ useDocumentTitle('')
+ return <>
+
+
+ {/*
*/}
+
+ {systemFeatures.branding.enabled === false &&
+ © {new Date().getFullYear()} LangGenius, Inc. All rights reserved.
+
}
+
+
+
+
+ }
+ if (systemFeatures.license?.status === LicenseStatus.LOST) {
+ return
+
+
+
+
+
+
+
{t('login.licenseLost')}
+
{t('login.licenseLostTip')}
+
+
+
+
+
+
+
+
+
+
{t('login.licenseExpired')}
+
{t('login.licenseExpiredTip')}
+
+
+
+
+
+
+
+
+
+
{t('login.licenseInactive')}
+
{t('login.licenseInactiveTip')}
+
+
+
+
+
{t('login.pageTitle')}
+ {!systemFeatures.branding.enabled &&
{t('login.welcome')}
}
+
+
+
+ {systemFeatures.sso_enforced_for_signin &&
+
+
}
+
+
+ {showORLine &&
+
+
+ {t('login.or')}
+
+
}
+ {
+ (systemFeatures.enable_email_code_login || systemFeatures.enable_email_password_login) && <>
+ {systemFeatures.enable_email_code_login && authType === 'code' && <>
+
+ {systemFeatures.enable_email_password_login &&
{ updateAuthType('password') }}>
+ {t('login.usePassword')}
+
}
+ }
+ {systemFeatures.enable_email_password_login && authType === 'password' && <>
+
+ {systemFeatures.enable_email_code_login &&
{ updateAuthType('code') }}>
+ {t('login.useVerificationCode')}
+
}
+ }
+
+ }
+ {allMethodsAreDisabled && <>
+
+
+
+
+
{t('login.noLoginMethod')}
+
{t('login.noLoginMethodTip')}
+
+
+ }
+ {!systemFeatures.branding.enabled && <>
+
+ {t('login.tosDesc')}
+
+ {t('login.tos')}
+ &
+ {t('login.pp')}
+
+ {IS_CE_EDITION &&
+ {t('login.goToInit')}
+
+ {t('login.setAdminAccount')}
+
}
+ }
+
+
+
- if (message) {
+ if (tokenFromUrl) {
return
}
- if (systemFeatures.webapp_auth.enabled) {
- if (systemFeatures.webapp_auth.allow_sso) {
- return (
-
- )
- }
- return
-
-
-
-
-
{t('login.webapp.noLoginMethod')}
-
{t('login.webapp.noLoginMethodTip')}
-
-
+ if (message) {
+ return
+
+
{t('share.login.backToHome')}
}
- else {
+ if (!redirectUrl) {
+ showErrorToast('redirect url is invalid.')
+ return
+ }
+ if (webAppAccessMode && webAppAccessMode === AccessMode.PUBLIC) {
+ return
+
+
+ }
+ if (!systemFeatures.webapp_auth.enabled) {
return
{t('login.webapp.disabled')}
}
+ if (webAppAccessMode && (webAppAccessMode === AccessMode.ORGANIZATION || webAppAccessMode === AccessMode.SPECIFIC_GROUPS_MEMBERS)) {
+ return
+
+
+ }
+
+ if (webAppAccessMode && webAppAccessMode === AccessMode.EXTERNAL_MEMBERS)
+ return
+
+ return
+
+
{t('share.login.backToHome')}
+
}
export default React.memo(WebSSOForm)
diff --git a/web/app/components/app/app-access-control/index.tsx b/web/app/components/app/app-access-control/index.tsx
index 2f15c8ec4..13faaea95 100644
--- a/web/app/components/app/app-access-control/index.tsx
+++ b/web/app/components/app/app-access-control/index.tsx
@@ -1,6 +1,6 @@
'use client'
-import { Dialog } from '@headlessui/react'
-import { RiBuildingLine, RiGlobalLine } from '@remixicon/react'
+import { Description as DialogDescription, DialogTitle } from '@headlessui/react'
+import { RiBuildingLine, RiGlobalLine, RiVerifiedBadgeLine } from '@remixicon/react'
import { useTranslation } from 'react-i18next'
import { useCallback, useEffect } from 'react'
import Button from '../../base/button'
@@ -67,8 +67,8 @@ export default function AccessControl(props: AccessControlProps) {
return
- {t('app.accessControlDialog.title')}
- {t('app.accessControlDialog.description')}
+ {t('app.accessControlDialog.title')}
+ {t('app.accessControlDialog.description')}
@@ -80,12 +80,20 @@ export default function AccessControl(props: AccessControlProps) {
{t('app.accessControlDialog.accessItems.organization')}
- {!hideTip &&
}
+
+
+
+
+
{t('app.accessControlDialog.accessItems.external')}
+
+ {!hideTip &&
}
+
diff --git a/web/app/components/app/app-access-control/specific-groups-or-members.tsx b/web/app/components/app/app-access-control/specific-groups-or-members.tsx
index f4872f8c9..b30c8f1ba 100644
--- a/web/app/components/app/app-access-control/specific-groups-or-members.tsx
+++ b/web/app/components/app/app-access-control/specific-groups-or-members.tsx
@@ -3,12 +3,10 @@ import { RiAlertFill, RiCloseCircleFill, RiLockLine, RiOrganizationChart } from
import { useTranslation } from 'react-i18next'
import { useCallback, useEffect } from 'react'
import Avatar from '../../base/avatar'
-import Divider from '../../base/divider'
import Tooltip from '../../base/tooltip'
import Loading from '../../base/loading'
import useAccessControlStore from '../../../../context/access-control-store'
import AddMemberOrGroupDialog from './add-member-or-group-pop'
-import { useGlobalPublicStore } from '@/context/global-public-context'
import type { AccessControlAccount, AccessControlGroup } from '@/models/access-control'
import { AccessMode } from '@/models/access-control'
import { useAppWhiteListSubjects } from '@/service/access-control'
@@ -19,11 +17,6 @@ export default function SpecificGroupsOrMembers() {
const setSpecificGroups = useAccessControlStore(s => s.setSpecificGroups)
const setSpecificMembers = useAccessControlStore(s => s.setSpecificMembers)
const { t } = useTranslation()
- const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
- const hideTip = systemFeatures.webapp_auth.enabled
- && (systemFeatures.webapp_auth.allow_sso
- || systemFeatures.webapp_auth.allow_email_password_login
- || systemFeatures.webapp_auth.allow_email_code_login)
const { isPending, data } = useAppWhiteListSubjects(appId, Boolean(appId) && currentMenu === AccessMode.SPECIFIC_GROUPS_MEMBERS)
useEffect(() => {
@@ -37,7 +30,6 @@ export default function SpecificGroupsOrMembers() {
{t('app.accessControlDialog.accessItems.specific')}
- {!hideTip && }
}
@@ -48,10 +40,6 @@ export default function SpecificGroupsOrMembers() {
{t('app.accessControlDialog.accessItems.specific')}
- {!hideTip && <>
-
-
- }
diff --git a/web/app/components/app/app-publisher/index.tsx b/web/app/components/app/app-publisher/index.tsx
index 8d0028c7d..5825bb72e 100644
--- a/web/app/components/app/app-publisher/index.tsx
+++ b/web/app/components/app/app-publisher/index.tsx
@@ -9,11 +9,14 @@ import dayjs from 'dayjs'
import {
RiArrowDownSLine,
RiArrowRightSLine,
+ RiBuildingLine,
+ RiGlobalLine,
RiLockLine,
RiPlanetLine,
RiPlayCircleLine,
RiPlayList2Line,
RiTerminalBoxLine,
+ RiVerifiedBadgeLine,
} from '@remixicon/react'
import { useKeyPress } from 'ahooks'
import { getKeyboardKeyCodeBySystem } from '../../workflow/utils'
@@ -276,10 +279,30 @@ const AppPublisher = ({
setShowAppAccessControl(true)
}}>
-
- {appDetail?.access_mode === AccessMode.ORGANIZATION &&
{t('app.accessControlDialog.accessItems.organization')}
}
- {appDetail?.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS &&
{t('app.accessControlDialog.accessItems.specific')}
}
- {appDetail?.access_mode === AccessMode.PUBLIC &&
{t('app.accessControlDialog.accessItems.anyone')}
}
+ {appDetail?.access_mode === AccessMode.ORGANIZATION
+ && <>
+
+
{t('app.accessControlDialog.accessItems.organization')}
+
+ }
+ {appDetail?.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS
+ && <>
+
+
{t('app.accessControlDialog.accessItems.specific')}
+
+ }
+ {appDetail?.access_mode === AccessMode.PUBLIC
+ && <>
+
+
{t('app.accessControlDialog.accessItems.anyone')}
+
+ }
+ {appDetail?.access_mode === AccessMode.EXTERNAL_MEMBERS
+ && <>
+
+
{t('app.accessControlDialog.accessItems.external')}
+
+ }
{!isAppAccessSet &&
{t('app.publishApp.notSet')}
}
diff --git a/web/app/components/app/overview/appCard.tsx b/web/app/components/app/overview/appCard.tsx
index 9b283cdf5..9f3b3ac4a 100644
--- a/web/app/components/app/overview/appCard.tsx
+++ b/web/app/components/app/overview/appCard.tsx
@@ -5,10 +5,13 @@ import { useTranslation } from 'react-i18next'
import {
RiArrowRightSLine,
RiBookOpenLine,
+ RiBuildingLine,
RiEqualizer2Line,
RiExternalLinkLine,
+ RiGlobalLine,
RiLockLine,
RiPaintBrushLine,
+ RiVerifiedBadgeLine,
RiWindowLine,
} from '@remixicon/react'
import SettingsModal from './settings'
@@ -248,11 +251,30 @@ function AppCard({
-
- {appDetail?.access_mode === AccessMode.ORGANIZATION &&
{t('app.accessControlDialog.accessItems.organization')}
}
- {appDetail?.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS &&
{t('app.accessControlDialog.accessItems.specific')}
}
- {appDetail?.access_mode === AccessMode.PUBLIC &&
{t('app.accessControlDialog.accessItems.anyone')}
}
-
+ {appDetail?.access_mode === AccessMode.ORGANIZATION
+ && <>
+
+
{t('app.accessControlDialog.accessItems.organization')}
+
+ }
+ {appDetail?.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS
+ && <>
+
+
{t('app.accessControlDialog.accessItems.specific')}
+
+ }
+ {appDetail?.access_mode === AccessMode.PUBLIC
+ && <>
+
+
{t('app.accessControlDialog.accessItems.anyone')}
+
+ }
+ {appDetail?.access_mode === AccessMode.EXTERNAL_MEMBERS
+ && <>
+
+
{t('app.accessControlDialog.accessItems.external')}
+
+ }
{!isAppAccessSet &&
{t('app.publishApp.notSet')}
}
diff --git a/web/app/components/base/app-unavailable.tsx b/web/app/components/base/app-unavailable.tsx
index 4e835cbfc..928c85026 100644
--- a/web/app/components/base/app-unavailable.tsx
+++ b/web/app/components/base/app-unavailable.tsx
@@ -1,4 +1,5 @@
'use client'
+import classNames from '@/utils/classnames'
import type { FC } from 'react'
import React from 'react'
import { useTranslation } from 'react-i18next'
@@ -7,17 +8,19 @@ type IAppUnavailableProps = {
code?: number | string
isUnknownReason?: boolean
unknownReason?: string
+ className?: string
}
const AppUnavailable: FC
= ({
code = 404,
isUnknownReason,
unknownReason,
+ className,
}) => {
const { t } = useTranslation()
return (
-
+
({
- accessMode: AccessMode.SPECIFIC_GROUPS_MEMBERS,
userCanAccess: false,
currentConversationId: '',
appPrevChatTree: [],
diff --git a/web/app/components/base/chat/chat-with-history/hooks.tsx b/web/app/components/base/chat/chat-with-history/hooks.tsx
index dd7cb14b2..32f74e645 100644
--- a/web/app/components/base/chat/chat-with-history/hooks.tsx
+++ b/web/app/components/base/chat/chat-with-history/hooks.tsx
@@ -43,9 +43,8 @@ import { useAppFavicon } from '@/hooks/use-app-favicon'
import { InputVarType } from '@/app/components/workflow/types'
import { TransferMethod } from '@/types/app'
import { noop } from 'lodash-es'
-import { useGetAppAccessMode, useGetUserCanAccessApp } from '@/service/access-control'
+import { useGetUserCanAccessApp } from '@/service/access-control'
import { useGlobalPublicStore } from '@/context/global-public-context'
-import { AccessMode } from '@/models/access-control'
function getFormattedChatList(messages: any[]) {
const newChatList: ChatItem[] = []
@@ -77,11 +76,6 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
const isInstalledApp = useMemo(() => !!installedAppInfo, [installedAppInfo])
const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
const { data: appInfo, isLoading: appInfoLoading, error: appInfoError } = useSWR(installedAppInfo ? null : 'appInfo', fetchAppInfo)
- const { isPending: isGettingAccessMode, data: appAccessMode } = useGetAppAccessMode({
- appId: installedAppInfo?.app.id || appInfo?.app_id,
- isInstalledApp,
- enabled: systemFeatures.webapp_auth.enabled,
- })
const { isPending: isCheckingPermission, data: userCanAccessResult } = useGetUserCanAccessApp({
appId: installedAppInfo?.app.id || appInfo?.app_id,
isInstalledApp,
@@ -492,8 +486,7 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
return {
appInfoError,
- appInfoLoading: appInfoLoading || (systemFeatures.webapp_auth.enabled && (isGettingAccessMode || isCheckingPermission)),
- accessMode: systemFeatures.webapp_auth.enabled ? appAccessMode?.accessMode : AccessMode.PUBLIC,
+ appInfoLoading: appInfoLoading || (systemFeatures.webapp_auth.enabled && isCheckingPermission),
userCanAccess: systemFeatures.webapp_auth.enabled ? userCanAccessResult?.result : true,
isInstalledApp,
appId,
diff --git a/web/app/components/base/chat/chat-with-history/index.tsx b/web/app/components/base/chat/chat-with-history/index.tsx
index de023e7f5..1fd138319 100644
--- a/web/app/components/base/chat/chat-with-history/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/index.tsx
@@ -124,7 +124,6 @@ const ChatWithHistoryWrap: FC = ({
const {
appInfoError,
appInfoLoading,
- accessMode,
userCanAccess,
appData,
appParams,
@@ -169,7 +168,6 @@ const ChatWithHistoryWrap: FC = ({
appInfoError,
appInfoLoading,
appData,
- accessMode,
userCanAccess,
appParams,
appMeta,
diff --git a/web/app/components/base/chat/chat-with-history/sidebar/index.tsx b/web/app/components/base/chat/chat-with-history/sidebar/index.tsx
index fd317ccf9..4e50c1cb7 100644
--- a/web/app/components/base/chat/chat-with-history/sidebar/index.tsx
+++ b/web/app/components/base/chat/chat-with-history/sidebar/index.tsx
@@ -19,7 +19,6 @@ import RenameModal from '@/app/components/base/chat/chat-with-history/sidebar/re
import DifyLogo from '@/app/components/base/logo/dify-logo'
import type { ConversationItem } from '@/models/share'
import cn from '@/utils/classnames'
-import { AccessMode } from '@/models/access-control'
import { useGlobalPublicStore } from '@/context/global-public-context'
type Props = {
@@ -30,7 +29,6 @@ const Sidebar = ({ isPanel }: Props) => {
const { t } = useTranslation()
const {
isInstalledApp,
- accessMode,
appData,
handleNewConversation,
pinnedConversationList,
@@ -140,7 +138,7 @@ const Sidebar = ({ isPanel }: Props) => {
)}
-
+
{/* powered by */}
{!appData?.custom_config?.remove_webapp_brand && (
diff --git a/web/app/components/base/chat/embedded-chatbot/context.tsx b/web/app/components/base/chat/embedded-chatbot/context.tsx
index 5964efd80..d24265ed9 100644
--- a/web/app/components/base/chat/embedded-chatbot/context.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/context.tsx
@@ -15,10 +15,8 @@ import type {
ConversationItem,
} from '@/models/share'
import { noop } from 'lodash-es'
-import { AccessMode } from '@/models/access-control'
export type EmbeddedChatbotContextValue = {
- accessMode?: AccessMode
userCanAccess?: boolean
appInfoError?: any
appInfoLoading?: boolean
@@ -58,7 +56,6 @@ export type EmbeddedChatbotContextValue = {
export const EmbeddedChatbotContext = createContext
({
userCanAccess: false,
- accessMode: AccessMode.SPECIFIC_GROUPS_MEMBERS,
currentConversationId: '',
appPrevChatList: [],
pinnedConversationList: [],
diff --git a/web/app/components/base/chat/embedded-chatbot/hooks.tsx b/web/app/components/base/chat/embedded-chatbot/hooks.tsx
index 40c56eca7..0158e8d04 100644
--- a/web/app/components/base/chat/embedded-chatbot/hooks.tsx
+++ b/web/app/components/base/chat/embedded-chatbot/hooks.tsx
@@ -36,9 +36,8 @@ import { InputVarType } from '@/app/components/workflow/types'
import { TransferMethod } from '@/types/app'
import { addFileInfos, sortAgentSorts } from '@/app/components/tools/utils'
import { noop } from 'lodash-es'
-import { useGetAppAccessMode, useGetUserCanAccessApp } from '@/service/access-control'
+import { useGetUserCanAccessApp } from '@/service/access-control'
import { useGlobalPublicStore } from '@/context/global-public-context'
-import { AccessMode } from '@/models/access-control'
function getFormattedChatList(messages: any[]) {
const newChatList: ChatItem[] = []
@@ -70,11 +69,6 @@ export const useEmbeddedChatbot = () => {
const isInstalledApp = false
const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
const { data: appInfo, isLoading: appInfoLoading, error: appInfoError } = useSWR('appInfo', fetchAppInfo)
- const { isPending: isGettingAccessMode, data: appAccessMode } = useGetAppAccessMode({
- appId: appInfo?.app_id,
- isInstalledApp,
- enabled: systemFeatures.webapp_auth.enabled,
- })
const { isPending: isCheckingPermission, data: userCanAccessResult } = useGetUserCanAccessApp({
appId: appInfo?.app_id,
isInstalledApp,
@@ -385,8 +379,7 @@ export const useEmbeddedChatbot = () => {
return {
appInfoError,
- appInfoLoading: appInfoLoading || (systemFeatures.webapp_auth.enabled && (isGettingAccessMode || isCheckingPermission)),
- accessMode: systemFeatures.webapp_auth.enabled ? appAccessMode?.accessMode : AccessMode.PUBLIC,
+ appInfoLoading: appInfoLoading || (systemFeatures.webapp_auth.enabled && isCheckingPermission),
userCanAccess: systemFeatures.webapp_auth.enabled ? userCanAccessResult?.result : true,
isInstalledApp,
allowResetChat,
diff --git a/web/app/components/share/text-generation/menu-dropdown.tsx b/web/app/components/share/text-generation/menu-dropdown.tsx
index 19b660b08..adb926c7c 100644
--- a/web/app/components/share/text-generation/menu-dropdown.tsx
+++ b/web/app/components/share/text-generation/menu-dropdown.tsx
@@ -6,9 +6,8 @@ import type { Placement } from '@floating-ui/react'
import {
RiEqualizer2Line,
} from '@remixicon/react'
-import { useRouter } from 'next/navigation'
+import { usePathname, useRouter } from 'next/navigation'
import Divider from '../../base/divider'
-import { removeAccessToken } from '../utils'
import InfoModal from './info-modal'
import ActionButton from '@/app/components/base/action-button'
import {
@@ -19,6 +18,8 @@ import {
import ThemeSwitcher from '@/app/components/base/theme-switcher'
import type { SiteInfo } from '@/models/share'
import cn from '@/utils/classnames'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+import { AccessMode } from '@/models/access-control'
type Props = {
data?: SiteInfo
@@ -31,7 +32,9 @@ const MenuDropdown: FC = ({
placement,
hideLogout,
}) => {
+ const webAppAccessMode = useGlobalPublicStore(s => s.webAppAccessMode)
const router = useRouter()
+ const pathname = usePathname()
const { t } = useTranslation()
const [open, doSetOpen] = useState(false)
const openRef = useRef(open)
@@ -45,9 +48,10 @@ const MenuDropdown: FC = ({
}, [setOpen])
const handleLogout = useCallback(() => {
- removeAccessToken()
- router.replace(`/webapp-signin?redirect_url=${window.location.href}`)
- }, [router])
+ localStorage.removeItem('token')
+ localStorage.removeItem('webapp_access_token')
+ router.replace(`/webapp-signin?redirect_url=${pathname}`)
+ }, [router, pathname])
const [show, setShow] = useState(false)
@@ -92,6 +96,16 @@ const MenuDropdown: FC = ({
className='system-md-regular cursor-pointer rounded-lg px-3 py-1.5 text-text-secondary hover:bg-state-base-hover'
>{t('common.userProfile.about')}
+ {!(hideLogout || webAppAccessMode === AccessMode.EXTERNAL_MEMBERS || webAppAccessMode === AccessMode.PUBLIC) && (
+
+
+ {t('common.userProfile.logout')}
+
+
+ )}