dify

dify/web/app/account/(commonLayout)/account-page/AvatarWithEdit.tsx

@@ -0,0 +1,175 @@
+'use client'
+
+import type { Area } from 'react-easy-crop'
+import React, { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
+import { RiDeleteBin5Line, RiPencilLine } from '@remixicon/react'
+import { updateUserProfile } from '@/service/common'
+import { ToastContext } from '@/app/components/base/toast'
+import ImageInput, { type OnImageInput } from '@/app/components/base/app-icon-picker/ImageInput'
+import Modal from '@/app/components/base/modal'
+import Divider from '@/app/components/base/divider'
+import Button from '@/app/components/base/button'
+import Avatar, { type AvatarProps } from '@/app/components/base/avatar'
+import { useLocalFileUploader } from '@/app/components/base/image-uploader/hooks'
+import type { ImageFile } from '@/types/app'
+import getCroppedImg from '@/app/components/base/app-icon-picker/utils'
+import { DISABLE_UPLOAD_IMAGE_AS_ICON } from '@/config'
+
+type InputImageInfo = { file: File } | { tempUrl: string; croppedAreaPixels: Area; fileName: string }
+type AvatarWithEditProps = AvatarProps & { onSave?: () => void }
+
+const AvatarWithEdit = ({ onSave, ...props }: AvatarWithEditProps) => {
+  const { t } = useTranslation()
+  const { notify } = useContext(ToastContext)
+
+  const [inputImageInfo, setInputImageInfo] = useState<InputImageInfo>()
+  const [isShowAvatarPicker, setIsShowAvatarPicker] = useState(false)
+  const [uploading, setUploading] = useState(false)
+  const [isShowDeleteConfirm, setIsShowDeleteConfirm] = useState(false)
+  const [hoverArea, setHoverArea] = useState<string>('left')
+
+  const [onAvatarError, setOnAvatarError] = useState(false)
+
+  const handleImageInput: OnImageInput = useCallback(async (isCropped: boolean, fileOrTempUrl: string | File, croppedAreaPixels?: Area, fileName?: string) => {
+    setInputImageInfo(
+      isCropped
+        ? { tempUrl: fileOrTempUrl as string, croppedAreaPixels: croppedAreaPixels!, fileName: fileName! }
+        : { file: fileOrTempUrl as File },
+    )
+  }, [setInputImageInfo])
+
+  const handleSaveAvatar = useCallback(async (uploadedFileId: string) => {
+    try {
+      await updateUserProfile({ url: 'account/avatar', body: { avatar: uploadedFileId } })
+      setIsShowAvatarPicker(false)
+      onSave?.()
+      notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
+    }
+    catch (e) {
+      notify({ type: 'error', message: (e as Error).message })
+    }
+  }, [notify, onSave, t])
+
+  const handleDeleteAvatar = useCallback(async () => {
+    try {
+      await updateUserProfile({ url: 'account/avatar', body: { avatar: '' } })
+      notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
+      setIsShowDeleteConfirm(false)
+      onSave?.()
+    }
+    catch (e) {
+      notify({ type: 'error', message: (e as Error).message })
+    }
+  }, [notify, onSave, t])
+
+  const { handleLocalFileUpload } = useLocalFileUploader({
+    limit: 3,
+    disabled: false,
+    onUpload: (imageFile: ImageFile) => {
+      if (imageFile.progress === 100) {
+        setUploading(false)
+        setInputImageInfo(undefined)
+        handleSaveAvatar(imageFile.fileId)
+      }
+
+      // Error
+      if (imageFile.progress === -1)
+        setUploading(false)
+    },
+  })
+
+  const handleSelect = useCallback(async () => {
+    if (!inputImageInfo)
+      return
+    setUploading(true)
+    if ('file' in inputImageInfo) {
+      handleLocalFileUpload(inputImageInfo.file)
+      return
+    }
+    const blob = await getCroppedImg(inputImageInfo.tempUrl, inputImageInfo.croppedAreaPixels, inputImageInfo.fileName)
+    const file = new File([blob], inputImageInfo.fileName, { type: blob.type })
+    handleLocalFileUpload(file)
+  }, [handleLocalFileUpload, inputImageInfo])
+
+  if (DISABLE_UPLOAD_IMAGE_AS_ICON)
+    return <Avatar {...props} />
+
+  return (
+    <>
+      <div>
+        <div className="group relative">
+          <Avatar {...props} onError={(x: boolean) => setOnAvatarError(x)} />
+          <div
+            className="absolute inset-0 flex cursor-pointer items-center justify-center rounded-full bg-black/50 opacity-0 transition-opacity group-hover:opacity-100"
+            onClick={() => {
+              if (hoverArea === 'right' && !onAvatarError)
+                setIsShowDeleteConfirm(true)
+              else
+                setIsShowAvatarPicker(true)
+            }}
+            onMouseMove={(e) => {
+              const rect = e.currentTarget.getBoundingClientRect()
+              const x = e.clientX - rect.left
+              const isRight = x > rect.width / 2
+              setHoverArea(isRight ? 'right' : 'left')
+            }}
+          >
+            {hoverArea === 'right' && !onAvatarError ? (
+              <span className="text-xs text-white">
+                <RiDeleteBin5Line />
+              </span>
+            ) : (
+              <span className="text-xs text-white">
+                <RiPencilLine />
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <Modal
+        closable
+        className="!w-[362px] !p-0"
+        isShow={isShowAvatarPicker}
+        onClose={() => setIsShowAvatarPicker(false)}
+      >
+        <ImageInput onImageInput={handleImageInput} cropShape='round' />
+        <Divider className='m-0' />
+
+        <div className='flex w-full items-center justify-center gap-2 p-3'>
+          <Button className='w-full' onClick={() => setIsShowAvatarPicker(false)}>
+            {t('app.iconPicker.cancel')}
+          </Button>
+
+          <Button variant="primary" className='w-full' disabled={uploading || !inputImageInfo} loading={uploading} onClick={handleSelect}>
+            {t('app.iconPicker.ok')}
+          </Button>
+        </div>
+      </Modal>
+
+      <Modal
+        closable
+        className="!w-[362px] !p-6"
+        isShow={isShowDeleteConfirm}
+        onClose={() => setIsShowDeleteConfirm(false)}
+      >
+        <div className="title-2xl-semi-bold mb-3 text-text-primary">{t('common.avatar.deleteTitle')}</div>
+        <p className="mb-8 text-text-secondary">{t('common.avatar.deleteDescription')}</p>
+
+        <div className="flex w-full items-center justify-center gap-2">
+          <Button className="w-full" onClick={() => setIsShowDeleteConfirm(false)}>
+            {t('common.operation.cancel')}
+          </Button>
+
+          <Button variant="warning" className="w-full" onClick={handleDeleteAvatar}>
+            {t('common.operation.delete')}
+          </Button>
+        </div>
+      </Modal>
+    </>
+  )
+}
+
+export default AvatarWithEdit

dify/web/app/account/(commonLayout)/account-page/email-change-modal.tsx

@@ -0,0 +1,382 @@
+import React, { useState } from 'react'
+import { Trans, useTranslation } from 'react-i18next'
+import { useRouter } from 'next/navigation'
+import { useContext } from 'use-context-selector'
+import { ToastContext } from '@/app/components/base/toast'
+import { RiCloseLine } from '@remixicon/react'
+import Modal from '@/app/components/base/modal'
+import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
+import {
+  checkEmailExisted,
+  resetEmail,
+  sendVerifyCode,
+  verifyEmail,
+} from '@/service/common'
+import { noop } from 'lodash-es'
+import { asyncRunSafe } from '@/utils'
+import type { ResponseError } from '@/service/fetch'
+import { useLogout } from '@/service/use-common'
+
+type Props = {
+  show: boolean
+  onClose: () => void
+  email: string
+}
+
+enum STEP {
+  start = 'start',
+  verifyOrigin = 'verifyOrigin',
+  newEmail = 'newEmail',
+  verifyNew = 'verifyNew',
+}
+
+const EmailChangeModal = ({ onClose, email, show }: Props) => {
+  const { t } = useTranslation()
+  const { notify } = useContext(ToastContext)
+  const router = useRouter()
+  const [step, setStep] = useState<STEP>(STEP.start)
+  const [code, setCode] = useState<string>('')
+  const [mail, setMail] = useState<string>('')
+  const [time, setTime] = useState<number>(0)
+  const [stepToken, setStepToken] = useState<string>('')
+  const [newEmailExited, setNewEmailExited] = useState<boolean>(false)
+  const [unAvailableEmail, setUnAvailableEmail] = useState<boolean>(false)
+  const [isCheckingEmail, setIsCheckingEmail] = useState<boolean>(false)
+
+  const startCount = () => {
+    setTime(60)
+    const timer = setInterval(() => {
+      setTime((prev) => {
+        if (prev <= 0) {
+          clearInterval(timer)
+          return 0
+        }
+        return prev - 1
+      })
+    }, 1000)
+  }
+
+  const sendEmail = async (email: string, isOrigin: boolean, token?: string) => {
+    try {
+      const res = await sendVerifyCode({
+        email,
+        phase: isOrigin ? 'old_email' : 'new_email',
+        token,
+      })
+      startCount()
+      if (res.data)
+        setStepToken(res.data)
+    }
+    catch (error) {
+      notify({
+        type: 'error',
+        message: `Error sending verification code: ${error ? (error as any).message : ''}`,
+      })
+    }
+  }
+
+  const verifyEmailAddress = async (email: string, code: string, token: string, callback?: (data?: any) => void) => {
+    try {
+      const res = await verifyEmail({
+        email,
+        code,
+        token,
+      })
+      if (res.is_valid) {
+        setStepToken(res.token)
+        callback?.(res.token)
+      }
+      else {
+        notify({
+          type: 'error',
+          message: 'Verifying email failed',
+        })
+      }
+    }
+    catch (error) {
+      notify({
+        type: 'error',
+        message: `Error verifying email: ${error ? (error as any).message : ''}`,
+      })
+    }
+  }
+
+  const sendCodeToOriginEmail = async () => {
+    await sendEmail(
+      email,
+      true,
+    )
+    setStep(STEP.verifyOrigin)
+  }
+
+  const handleVerifyOriginEmail = async () => {
+    await verifyEmailAddress(email, code, stepToken, () => setStep(STEP.newEmail))
+    setCode('')
+  }
+
+  const isValidEmail = (email: string): boolean => {
+    const rfc5322emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
+    return rfc5322emailRegex.test(email) && email.length <= 254
+  }
+
+  const checkNewEmailExisted = async (email: string) => {
+    setIsCheckingEmail(true)
+    try {
+      await checkEmailExisted({
+        email,
+      })
+      setNewEmailExited(false)
+      setUnAvailableEmail(false)
+    }
+    catch (e: any) {
+      if (e.status === 400) {
+        const [, errRespData] = await asyncRunSafe<ResponseError>(e.json())
+        const { code } = errRespData || {}
+        if (code === 'email_already_in_use')
+          setNewEmailExited(true)
+        if (code === 'account_in_freeze')
+          setUnAvailableEmail(true)
+      }
+    }
+    finally {
+      setIsCheckingEmail(false)
+    }
+  }
+
+  const handleNewEmailValueChange = (mailAddress: string) => {
+    setMail(mailAddress)
+    setNewEmailExited(false)
+    if (isValidEmail(mailAddress))
+      checkNewEmailExisted(mailAddress)
+  }
+
+  const sendCodeToNewEmail = async () => {
+    if (!isValidEmail(mail)) {
+      notify({
+        type: 'error',
+        message: 'Invalid email format',
+      })
+      return
+    }
+    await sendEmail(
+      mail,
+      false,
+      stepToken,
+    )
+    setStep(STEP.verifyNew)
+  }
+
+  const { mutateAsync: logout } = useLogout()
+  const handleLogout = async () => {
+    await logout()
+
+    localStorage.removeItem('setup_status')
+    // Tokens are now stored in cookies and cleared by backend
+
+    router.push('/signin')
+  }
+
+  const updateEmail = async (lastToken: string) => {
+    try {
+      await resetEmail({
+        new_email: mail,
+        token: lastToken,
+      })
+      handleLogout()
+    }
+    catch (error) {
+      notify({
+        type: 'error',
+        message: `Error changing email: ${error ? (error as any).message : ''}`,
+      })
+    }
+  }
+
+  const submitNewEmail = async () => {
+    await verifyEmailAddress(mail, code, stepToken, updateEmail)
+  }
+
+  return (
+    <Modal
+      isShow={show}
+      onClose={noop}
+      className='!w-[420px] !p-6'
+    >
+      <div className='absolute right-5 top-5 cursor-pointer p-1.5' onClick={onClose}>
+        <RiCloseLine className='h-5 w-5 text-text-tertiary' />
+      </div>
+      {step === STEP.start && (
+        <>
+          <div className='title-2xl-semi-bold pb-3 text-text-primary'>{t('common.account.changeEmail.title')}</div>
+          <div className='space-y-0.5 pb-2 pt-1'>
+            <div className='body-md-medium text-text-warning'>{t('common.account.changeEmail.authTip')}</div>
+            <div className='body-md-regular text-text-secondary'>
+              <Trans
+                i18nKey="common.account.changeEmail.content1"
+                components={{ email: <span className='body-md-medium text-text-primary'></span> }}
+                values={{ email }}
+              />
+            </div>
+          </div>
+          <div className='pt-3'></div>
+          <div className='space-y-2'>
+            <Button
+              className='!w-full'
+              variant='primary'
+              onClick={sendCodeToOriginEmail}
+            >
+              {t('common.account.changeEmail.sendVerifyCode')}
+            </Button>
+            <Button
+              className='!w-full'
+              onClick={onClose}
+            >
+              {t('common.operation.cancel')}
+            </Button>
+          </div>
+        </>
+      )}
+      {step === STEP.verifyOrigin && (
+        <>
+          <div className='title-2xl-semi-bold pb-3 text-text-primary'>{t('common.account.changeEmail.verifyEmail')}</div>
+          <div className='space-y-0.5 pb-2 pt-1'>
+            <div className='body-md-regular text-text-secondary'>
+              <Trans
+                i18nKey="common.account.changeEmail.content2"
+                components={{ email: <span className='body-md-medium text-text-primary'></span> }}
+                values={{ email }}
+              />
+            </div>
+          </div>
+          <div className='pt-3'>
+            <div className='system-sm-medium mb-1 flex h-6 items-center text-text-secondary'>{t('common.account.changeEmail.codeLabel')}</div>
+            <Input
+              className='!w-full'
+              placeholder={t('common.account.changeEmail.codePlaceholder')}
+              value={code}
+              onChange={e => setCode(e.target.value)}
+              maxLength={6}
+            />
+          </div>
+          <div className='mt-3 space-y-2'>
+            <Button
+              disabled={code.length !== 6}
+              className='!w-full'
+              variant='primary'
+              onClick={handleVerifyOriginEmail}
+            >
+              {t('common.account.changeEmail.continue')}
+            </Button>
+            <Button
+              className='!w-full'
+              onClick={onClose}
+            >
+              {t('common.operation.cancel')}
+            </Button>
+          </div>
+          <div className='system-xs-regular mt-3 flex items-center gap-1 text-text-tertiary'>
+            <span>{t('common.account.changeEmail.resendTip')}</span>
+            {time > 0 && (
+              <span>{t('common.account.changeEmail.resendCount', { count: time })}</span>
+            )}
+            {!time && (
+              <span onClick={sendCodeToOriginEmail} className='system-xs-medium cursor-pointer text-text-accent-secondary'>{t('common.account.changeEmail.resend')}</span>
+            )}
+          </div>
+        </>
+      )}
+      {step === STEP.newEmail && (
+        <>
+          <div className='title-2xl-semi-bold pb-3 text-text-primary'>{t('common.account.changeEmail.newEmail')}</div>
+          <div className='space-y-0.5 pb-2 pt-1'>
+            <div className='body-md-regular text-text-secondary'>{t('common.account.changeEmail.content3')}</div>
+          </div>
+          <div className='pt-3'>
+            <div className='system-sm-medium mb-1 flex h-6 items-center text-text-secondary'>{t('common.account.changeEmail.emailLabel')}</div>
+            <Input
+              className='!w-full'
+              placeholder={t('common.account.changeEmail.emailPlaceholder')}
+              value={mail}
+              onChange={e => handleNewEmailValueChange(e.target.value)}
+              destructive={newEmailExited || unAvailableEmail}
+            />
+            {newEmailExited && (
+              <div className='body-xs-regular mt-1 py-0.5 text-text-destructive'>{t('common.account.changeEmail.existingEmail')}</div>
+            )}
+            {unAvailableEmail && (
+              <div className='body-xs-regular mt-1 py-0.5 text-text-destructive'>{t('common.account.changeEmail.unAvailableEmail')}</div>
+            )}
+          </div>
+          <div className='mt-3 space-y-2'>
+            <Button
+              disabled={!mail || newEmailExited || unAvailableEmail || isCheckingEmail || !isValidEmail(mail)}
+              className='!w-full'
+              variant='primary'
+              onClick={sendCodeToNewEmail}
+            >
+              {t('common.account.changeEmail.sendVerifyCode')}
+            </Button>
+            <Button
+              className='!w-full'
+              onClick={onClose}
+            >
+              {t('common.operation.cancel')}
+            </Button>
+          </div>
+        </>
+      )}
+      {step === STEP.verifyNew && (
+        <>
+          <div className='title-2xl-semi-bold pb-3 text-text-primary'>{t('common.account.changeEmail.verifyNew')}</div>
+          <div className='space-y-0.5 pb-2 pt-1'>
+            <div className='body-md-regular text-text-secondary'>
+              <Trans
+                i18nKey="common.account.changeEmail.content4"
+                components={{ email: <span className='body-md-medium text-text-primary'></span> }}
+                values={{ email: mail }}
+              />
+            </div>
+          </div>
+          <div className='pt-3'>
+            <div className='system-sm-medium mb-1 flex h-6 items-center text-text-secondary'>{t('common.account.changeEmail.codeLabel')}</div>
+            <Input
+              className='!w-full'
+              placeholder={t('common.account.changeEmail.codePlaceholder')}
+              value={code}
+              onChange={e => setCode(e.target.value)}
+              maxLength={6}
+            />
+          </div>
+          <div className='mt-3 space-y-2'>
+            <Button
+              disabled={code.length !== 6}
+              className='!w-full'
+              variant='primary'
+              onClick={submitNewEmail}
+            >
+              {t('common.account.changeEmail.changeTo', { email: mail })}
+            </Button>
+            <Button
+              className='!w-full'
+              onClick={onClose}
+            >
+              {t('common.operation.cancel')}
+            </Button>
+          </div>
+          <div className='system-xs-regular mt-3 flex items-center gap-1 text-text-tertiary'>
+            <span>{t('common.account.changeEmail.resendTip')}</span>
+            {time > 0 && (
+              <span>{t('common.account.changeEmail.resendCount', { count: time })}</span>
+            )}
+            {!time && (
+              <span onClick={sendCodeToNewEmail} className='system-xs-medium cursor-pointer text-text-accent-secondary'>{t('common.account.changeEmail.resend')}</span>
+            )}
+          </div>
+        </>
+      )}
+    </Modal>
+  )
+}
+
+export default EmailChangeModal

dify/web/app/account/(commonLayout)/account-page/index.tsx

@@ -0,0 +1,344 @@
+'use client'
+import { useState } from 'react'
+import useSWR from 'swr'
+import { useTranslation } from 'react-i18next'
+import {
+  RiGraduationCapFill,
+} from '@remixicon/react'
+import { useContext } from 'use-context-selector'
+import DeleteAccount from '../delete-account'
+import AvatarWithEdit from './AvatarWithEdit'
+import Collapse from '@/app/components/header/account-setting/collapse'
+import type { IItem } from '@/app/components/header/account-setting/collapse'
+import Modal from '@/app/components/base/modal'
+import Button from '@/app/components/base/button'
+import { updateUserProfile } from '@/service/common'
+import { useAppContext } from '@/context/app-context'
+import { useProviderContext } from '@/context/provider-context'
+import { ToastContext } from '@/app/components/base/toast'
+import AppIcon from '@/app/components/base/app-icon'
+import { IS_CE_EDITION } from '@/config'
+import Input from '@/app/components/base/input'
+import PremiumBadge from '@/app/components/base/premium-badge'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+import EmailChangeModal from './email-change-modal'
+import { validPassword } from '@/config'
+import { fetchAppList } from '@/service/apps'
+import type { App } from '@/types/app'
+
+const titleClassName = `
+  system-sm-semibold text-text-secondary
+`
+const descriptionClassName = `
+  mt-1 body-xs-regular text-text-tertiary
+`
+
+export default function AccountPage() {
+  const { t } = useTranslation()
+  const { systemFeatures } = useGlobalPublicStore()
+  const { data: appList } = useSWR({ url: '/apps', params: { page: 1, limit: 100, name: '' } }, fetchAppList)
+  const apps = appList?.data || []
+  const { mutateUserProfile, userProfile } = useAppContext()
+  const { isEducationAccount } = useProviderContext()
+  const { notify } = useContext(ToastContext)
+  const [editNameModalVisible, setEditNameModalVisible] = useState(false)
+  const [editName, setEditName] = useState('')
+  const [editing, setEditing] = useState(false)
+  const [editPasswordModalVisible, setEditPasswordModalVisible] = useState(false)
+  const [currentPassword, setCurrentPassword] = useState('')
+  const [password, setPassword] = useState('')
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [showDeleteAccountModal, setShowDeleteAccountModal] = useState(false)
+  const [showCurrentPassword, setShowCurrentPassword] = useState(false)
+  const [showPassword, setShowPassword] = useState(false)
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
+  const [showUpdateEmail, setShowUpdateEmail] = useState(false)
+
+  const handleEditName = () => {
+    setEditNameModalVisible(true)
+    setEditName(userProfile.name)
+  }
+  const handleSaveName = async () => {
+    try {
+      setEditing(true)
+      await updateUserProfile({ url: 'account/name', body: { name: editName } })
+      notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
+      mutateUserProfile()
+      setEditNameModalVisible(false)
+      setEditing(false)
+    }
+    catch (e) {
+      notify({ type: 'error', message: (e as Error).message })
+      setEditing(false)
+    }
+  }
+
+  const showErrorMessage = (message: string) => {
+    notify({
+      type: 'error',
+      message,
+    })
+  }
+  const valid = () => {
+    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
+  }
+  const resetPasswordForm = () => {
+    setCurrentPassword('')
+    setPassword('')
+    setConfirmPassword('')
+  }
+  const handleSavePassword = async () => {
+    if (!valid())
+      return
+    try {
+      setEditing(true)
+      await updateUserProfile({
+        url: 'account/password',
+        body: {
+          password: currentPassword,
+          new_password: password,
+          repeat_new_password: confirmPassword,
+        },
+      })
+      notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
+      mutateUserProfile()
+      setEditPasswordModalVisible(false)
+      resetPasswordForm()
+      setEditing(false)
+    }
+    catch (e) {
+      notify({ type: 'error', message: (e as Error).message })
+      setEditPasswordModalVisible(false)
+      setEditing(false)
+    }
+  }
+
+  const renderAppItem = (item: IItem) => {
+    const { icon, icon_background, icon_type, icon_url } = item as any
+    return (
+      <div className='flex px-3 py-1'>
+        <div className='mr-3'>
+          <AppIcon
+            size='tiny'
+            iconType={icon_type}
+            icon={icon}
+            background={icon_background}
+            imageUrl={icon_url}
+          />
+        </div>
+        <div className='system-sm-medium mt-[3px] text-text-secondary'>{item.name}</div>
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <div className='pb-3 pt-2'>
+        <h4 className='title-2xl-semi-bold text-text-primary'>{t('common.account.myAccount')}</h4>
+      </div>
+      <div className='mb-8 flex items-center rounded-xl bg-gradient-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1 p-6'>
+        <AvatarWithEdit avatar={userProfile.avatar_url} name={userProfile.name} onSave={mutateUserProfile} size={64} />
+        <div className='ml-4'>
+          <p className='system-xl-semibold text-text-primary'>
+            {userProfile.name}
+            {isEducationAccount && (
+              <PremiumBadge size='s' color='blue' className='ml-1 !px-2'>
+                <RiGraduationCapFill className='mr-1 h-3 w-3' />
+                <span className='system-2xs-medium'>EDU</span>
+              </PremiumBadge>
+            )}
+          </p>
+          <p className='system-xs-regular text-text-tertiary'>{userProfile.email}</p>
+        </div>
+      </div>
+      <div className='mb-8'>
+        <div className={titleClassName}>{t('common.account.name')}</div>
+        <div className='mt-2 flex w-full items-center justify-between gap-2'>
+          <div className='system-sm-regular flex-1 rounded-lg bg-components-input-bg-normal p-2 text-components-input-text-filled '>
+            <span className='pl-1'>{userProfile.name}</span>
+          </div>
+          <div className='system-sm-medium cursor-pointer rounded-lg bg-components-button-tertiary-bg px-3 py-2 text-components-button-tertiary-text' onClick={handleEditName}>
+            {t('common.operation.edit')}
+          </div>
+        </div>
+      </div>
+      <div className='mb-8'>
+        <div className={titleClassName}>{t('common.account.email')}</div>
+        <div className='mt-2 flex w-full items-center justify-between gap-2'>
+          <div className='system-sm-regular flex-1 rounded-lg bg-components-input-bg-normal p-2 text-components-input-text-filled '>
+            <span className='pl-1'>{userProfile.email}</span>
+          </div>
+          {systemFeatures.enable_change_email && (
+            <div className='system-sm-medium cursor-pointer rounded-lg bg-components-button-tertiary-bg px-3 py-2 text-components-button-tertiary-text' onClick={() => setShowUpdateEmail(true)}>
+              {t('common.operation.change')}
+            </div>
+          )}
+        </div>
+      </div>
+      {
+        systemFeatures.enable_email_password_login && (
+          <div className='mb-8 flex justify-between gap-2'>
+            <div>
+              <div className='system-sm-semibold mb-1 text-text-secondary'>{t('common.account.password')}</div>
+              <div className='body-xs-regular mb-2 text-text-tertiary'>{t('common.account.passwordTip')}</div>
+            </div>
+            <Button onClick={() => setEditPasswordModalVisible(true)}>{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</Button>
+          </div>
+        )
+      }
+      <div className='mb-6 border-[1px] border-divider-subtle' />
+      <div className='mb-8'>
+        <div className={titleClassName}>{t('common.account.langGeniusAccount')}</div>
+        <div className={descriptionClassName}>{t('common.account.langGeniusAccountTip')}</div>
+        {!!apps.length && (
+          <Collapse
+            title={`${t('common.account.showAppLength', { length: apps.length })}`}
+            items={apps.map((app: App) => ({ ...app, key: app.id, name: app.name }))}
+            renderItem={renderAppItem}
+            wrapperClassName='mt-2'
+          />
+        )}
+        {!IS_CE_EDITION && <Button className='mt-2 text-components-button-destructive-secondary-text' onClick={() => setShowDeleteAccountModal(true)}>{t('common.account.delete')}</Button>}
+      </div>
+      {
+        editNameModalVisible && (
+          <Modal
+            isShow
+            onClose={() => setEditNameModalVisible(false)}
+            className='!w-[420px] !p-6'
+          >
+            <div className='title-2xl-semi-bold mb-6 text-text-primary'>{t('common.account.editName')}</div>
+            <div className={titleClassName}>{t('common.account.name')}</div>
+            <Input className='mt-2'
+              value={editName}
+              onChange={e => setEditName(e.target.value)}
+            />
+            <div className='mt-10 flex justify-end'>
+              <Button className='mr-2' onClick={() => setEditNameModalVisible(false)}>{t('common.operation.cancel')}</Button>
+              <Button
+                disabled={editing || !editName}
+                variant='primary'
+                onClick={handleSaveName}
+              >
+                {t('common.operation.save')}
+              </Button>
+            </div>
+          </Modal>
+        )
+      }
+      {
+        editPasswordModalVisible && (
+          <Modal
+            isShow
+            onClose={() => {
+              setEditPasswordModalVisible(false)
+              resetPasswordForm()
+            }}
+            className='!w-[420px] !p-6'
+          >
+            <div className='title-2xl-semi-bold mb-6 text-text-primary'>{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</div>
+            {userProfile.is_password_set && (
+              <>
+                <div className={titleClassName}>{t('common.account.currentPassword')}</div>
+                <div className='relative mt-2'>
+                  <Input
+                    type={showCurrentPassword ? 'text' : 'password'}
+                    value={currentPassword}
+                    onChange={e => setCurrentPassword(e.target.value)}
+                  />
+
+                  <div className="absolute inset-y-0 right-0 flex items-center">
+                    <Button
+                      type="button"
+                      variant='ghost'
+                      onClick={() => setShowCurrentPassword(!showCurrentPassword)}
+                    >
+                      {showCurrentPassword ? '👀' : '😝'}
+                    </Button>
+                  </div>
+                </div>
+              </>
+            )}
+            <div className='system-sm-semibold mt-8 text-text-secondary'>
+              {userProfile.is_password_set ? t('common.account.newPassword') : t('common.account.password')}
+            </div>
+            <div className='relative mt-2'>
+              <Input
+                type={showPassword ? 'text' : 'password'}
+                value={password}
+                onChange={e => setPassword(e.target.value)}
+              />
+              <div className="absolute inset-y-0 right-0 flex items-center">
+                <Button
+                  type="button"
+                  variant='ghost'
+                  onClick={() => setShowPassword(!showPassword)}
+                >
+                  {showPassword ? '👀' : '😝'}
+                </Button>
+              </div>
+            </div>
+            <div className='system-sm-semibold mt-8 text-text-secondary'>{t('common.account.confirmPassword')}</div>
+            <div className='relative mt-2'>
+              <Input
+                type={showConfirmPassword ? 'text' : 'password'}
+                value={confirmPassword}
+                onChange={e => setConfirmPassword(e.target.value)}
+              />
+              <div className="absolute inset-y-0 right-0 flex items-center">
+                <Button
+                  type="button"
+                  variant='ghost'
+                  onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                >
+                  {showConfirmPassword ? '👀' : '😝'}
+                </Button>
+              </div>
+            </div>
+            <div className='mt-10 flex justify-end'>
+              <Button className='mr-2' onClick={() => {
+                setEditPasswordModalVisible(false)
+                resetPasswordForm()
+              }}>{t('common.operation.cancel')}</Button>
+              <Button
+                disabled={editing}
+                variant='primary'
+                onClick={handleSavePassword}
+              >
+                {userProfile.is_password_set ? t('common.operation.reset') : t('common.operation.save')}
+              </Button>
+            </div>
+          </Modal>
+        )
+      }
+      {
+        showDeleteAccountModal && (
+          <DeleteAccount
+            onCancel={() => setShowDeleteAccountModal(false)}
+            onConfirm={() => setShowDeleteAccountModal(false)}
+          />
+        )
+      }
+      {showUpdateEmail && (
+        <EmailChangeModal
+          show={showUpdateEmail}
+          onClose={() => setShowUpdateEmail(false)}
+          email={userProfile.email}
+        />
+      )}
+    </>
+  )
+}

dify/web/app/account/(commonLayout)/avatar.tsx

@@ -0,0 +1,106 @@
+'use client'
+import { useTranslation } from 'react-i18next'
+import { Fragment } from 'react'
+import { useRouter } from 'next/navigation'
+import {
+  RiGraduationCapFill,
+} from '@remixicon/react'
+import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react'
+import Avatar from '@/app/components/base/avatar'
+import { useAppContext } from '@/context/app-context'
+import { useProviderContext } from '@/context/provider-context'
+import { LogOut01 } from '@/app/components/base/icons/src/vender/line/general'
+import PremiumBadge from '@/app/components/base/premium-badge'
+import { useLogout } from '@/service/use-common'
+
+export type IAppSelector = {
+  isMobile: boolean
+}
+
+export default function AppSelector() {
+  const router = useRouter()
+  const { t } = useTranslation()
+  const { userProfile } = useAppContext()
+  const { isEducationAccount } = useProviderContext()
+
+  const { mutateAsync: logout } = useLogout()
+  const handleLogout = async () => {
+    await logout()
+
+    localStorage.removeItem('setup_status')
+    // Tokens are now stored in cookies and cleared by backend
+
+    router.push('/signin')
+  }
+
+  return (
+    <Menu as="div" className="relative inline-block text-left">
+      {
+        ({ open }) => (
+          <>
+            <div>
+              <MenuButton
+                className={`
+                    p-1x inline-flex
+                    items-center rounded-[20px] text-sm
+                    text-text-primary
+                    mobile:px-1
+                    ${open && 'bg-components-panel-bg-blur'}
+                  `}
+              >
+                <Avatar avatar={userProfile.avatar_url} name={userProfile.name} size={32} />
+              </MenuButton>
+            </div>
+            <Transition
+              as={Fragment}
+              enter="transition ease-out duration-100"
+              enterFrom="transform opacity-0 scale-95"
+              enterTo="transform opacity-100 scale-100"
+              leave="transition ease-in duration-75"
+              leaveFrom="transform opacity-100 scale-100"
+              leaveTo="transform opacity-0 scale-95"
+            >
+              <MenuItems
+                className="
+                    absolute -right-2 -top-1 w-60 max-w-80
+                    origin-top-right divide-y divide-divider-subtle rounded-lg bg-components-panel-bg-blur
+                    shadow-lg
+                  "
+              >
+                <MenuItem>
+                  <div className='p-1'>
+                    <div className='flex flex-nowrap items-center px-3 py-2'>
+                      <div className='grow'>
+                        <div className='system-md-medium break-all text-text-primary'>
+                          {userProfile.name}
+                          {isEducationAccount && (
+                            <PremiumBadge size='s' color='blue' className='ml-1 !px-2'>
+                              <RiGraduationCapFill className='mr-1 h-3 w-3' />
+                              <span className='system-2xs-medium'>EDU</span>
+                            </PremiumBadge>
+                          )}
+                        </div>
+                        <div className='system-xs-regular break-all text-text-tertiary'>{userProfile.email}</div>
+                      </div>
+                      <Avatar avatar={userProfile.avatar_url} name={userProfile.name} size={32} />
+                    </div>
+                  </div>
+                </MenuItem>
+                <MenuItem>
+                  <div className='p-1' onClick={() => handleLogout()}>
+                    <div
+                      className='group flex h-9 cursor-pointer items-center justify-start rounded-lg px-3 hover:bg-state-base-hover'
+                    >
+                      <LogOut01 className='mr-1 flex h-4 w-4 text-text-tertiary' />
+                      <div className='text-[14px] font-normal text-text-secondary'>{t('common.userProfile.logout')}</div>
+                    </div>
+                  </div>
+                </MenuItem>
+              </MenuItems>
+            </Transition>
+          </>
+        )
+      }
+    </Menu>
+  )
+}

dify/web/app/account/(commonLayout)/delete-account/components/check-email.tsx

@@ -0,0 +1,48 @@
+'use client'
+import { useTranslation } from 'react-i18next'
+import { useCallback, useState } from 'react'
+import Link from 'next/link'
+import { useSendDeleteAccountEmail } from '../state'
+import { useAppContext } from '@/context/app-context'
+import Input from '@/app/components/base/input'
+import Button from '@/app/components/base/button'
+
+type DeleteAccountProps = {
+  onCancel: () => void
+  onConfirm: () => void
+}
+
+export default function CheckEmail(props: DeleteAccountProps) {
+  const { t } = useTranslation()
+  const { userProfile } = useAppContext()
+  const [userInputEmail, setUserInputEmail] = useState('')
+
+  const { isPending: isSendingEmail, mutateAsync: getDeleteEmailVerifyCode } = useSendDeleteAccountEmail()
+
+  const handleConfirm = useCallback(async () => {
+    try {
+      const ret = await getDeleteEmailVerifyCode()
+      if (ret.result === 'success')
+        props.onConfirm()
+    }
+    catch (error) { console.error(error) }
+  }, [getDeleteEmailVerifyCode, props])
+
+  return <>
+    <div className='body-md-medium py-1 text-text-destructive'>
+      {t('common.account.deleteTip')}
+    </div>
+    <div className='body-md-regular pb-2 pt-1 text-text-secondary'>
+      {t('common.account.deletePrivacyLinkTip')}
+      <Link href='https://dify.ai/privacy' className='text-text-accent'>{t('common.account.deletePrivacyLink')}</Link>
+    </div>
+    <label className='system-sm-semibold mb-1 mt-3 flex h-6 items-center text-text-secondary'>{t('common.account.deleteLabel')}</label>
+    <Input placeholder={t('common.account.deletePlaceholder') as string} onChange={(e) => {
+      setUserInputEmail(e.target.value)
+    }} />
+    <div className='mt-3 flex w-full flex-col gap-2'>
+      <Button className='w-full' disabled={userInputEmail !== userProfile.email || isSendingEmail} loading={isSendingEmail} variant='primary' onClick={handleConfirm}>{t('common.account.sendVerificationButton')}</Button>
+      <Button className='w-full' onClick={props.onCancel}>{t('common.operation.cancel')}</Button>
+    </div>
+  </>
+}

dify/web/app/account/(commonLayout)/delete-account/components/feed-back.tsx

@@ -0,0 +1,65 @@
+'use client'
+import { useTranslation } from 'react-i18next'
+import { useCallback, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { useDeleteAccountFeedback } from '../state'
+import { useAppContext } from '@/context/app-context'
+import Button from '@/app/components/base/button'
+import CustomDialog from '@/app/components/base/dialog'
+import Textarea from '@/app/components/base/textarea'
+import Toast from '@/app/components/base/toast'
+import { useLogout } from '@/service/use-common'
+
+type DeleteAccountProps = {
+  onCancel: () => void
+  onConfirm: () => void
+}
+
+export default function FeedBack(props: DeleteAccountProps) {
+  const { t } = useTranslation()
+  const { userProfile } = useAppContext()
+  const router = useRouter()
+  const [userFeedback, setUserFeedback] = useState('')
+  const { isPending, mutateAsync: sendFeedback } = useDeleteAccountFeedback()
+
+  const { mutateAsync: logout } = useLogout()
+  const handleSuccess = useCallback(async () => {
+    try {
+      await logout()
+      // Tokens are now stored in cookies and cleared by backend
+      router.push('/signin')
+      Toast.notify({ type: 'info', message: t('common.account.deleteSuccessTip') })
+    }
+    catch (error) { console.error(error) }
+  }, [router, t])
+
+  const handleSubmit = useCallback(async () => {
+    try {
+      await sendFeedback({ feedback: userFeedback, email: userProfile.email })
+      props.onConfirm()
+      await handleSuccess()
+    }
+    catch (error) { console.error(error) }
+  }, [handleSuccess, userFeedback, sendFeedback, userProfile, props])
+
+  const handleSkip = useCallback(() => {
+    props.onCancel()
+    handleSuccess()
+  }, [handleSuccess, props])
+  return <CustomDialog
+    show={true}
+    onClose={props.onCancel}
+    title={t('common.account.feedbackTitle')}
+    className="max-w-[480px]"
+    footer={false}
+  >
+    <label className='system-sm-semibold mb-1 mt-3 flex items-center text-text-secondary'>{t('common.account.feedbackLabel')}</label>
+    <Textarea rows={6} value={userFeedback} placeholder={t('common.account.feedbackPlaceholder') as string} onChange={(e) => {
+      setUserFeedback(e.target.value)
+    }} />
+    <div className='mt-3 flex w-full flex-col gap-2'>
+      <Button className='w-full' loading={isPending} variant='primary' onClick={handleSubmit}>{t('common.operation.submit')}</Button>
+      <Button className='w-full' onClick={handleSkip}>{t('common.operation.skip')}</Button>
+    </div>
+  </CustomDialog>
+}

dify/web/app/account/(commonLayout)/delete-account/components/verify-email.tsx

@@ -0,0 +1,55 @@
+'use client'
+import { useTranslation } from 'react-i18next'
+import { useCallback, useEffect, useState } from 'react'
+import Link from 'next/link'
+import { useAccountDeleteStore, useConfirmDeleteAccount, useSendDeleteAccountEmail } from '../state'
+import Input from '@/app/components/base/input'
+import Button from '@/app/components/base/button'
+import Countdown from '@/app/components/signin/countdown'
+
+const CODE_EXP = /[A-Za-z\d]{6}/gi
+
+type DeleteAccountProps = {
+  onCancel: () => void
+  onConfirm: () => void
+}
+
+export default function VerifyEmail(props: DeleteAccountProps) {
+  const { t } = useTranslation()
+  const emailToken = useAccountDeleteStore(state => state.sendEmailToken)
+  const [verificationCode, setVerificationCode] = useState<string>()
+  const [shouldButtonDisabled, setShouldButtonDisabled] = useState(true)
+  const { mutate: sendEmail } = useSendDeleteAccountEmail()
+  const { isPending: isDeleting, mutateAsync: confirmDeleteAccount } = useConfirmDeleteAccount()
+
+  useEffect(() => {
+    setShouldButtonDisabled(!(verificationCode && CODE_EXP.test(verificationCode)) || isDeleting)
+  }, [verificationCode, isDeleting])
+
+  const handleConfirm = useCallback(async () => {
+    try {
+      const ret = await confirmDeleteAccount({ code: verificationCode!, token: emailToken })
+      if (ret.result === 'success')
+        props.onConfirm()
+    }
+    catch (error) { console.error(error) }
+  }, [emailToken, verificationCode, confirmDeleteAccount, props])
+  return <>
+    <div className='body-md-medium pt-1 text-text-destructive'>
+      {t('common.account.deleteTip')}
+    </div>
+    <div className='body-md-regular pb-2 pt-1 text-text-secondary'>
+      {t('common.account.deletePrivacyLinkTip')}
+      <Link href='https://dify.ai/privacy' className='text-text-accent'>{t('common.account.deletePrivacyLink')}</Link>
+    </div>
+    <label className='system-sm-semibold mb-1 mt-3 flex h-6 items-center text-text-secondary'>{t('common.account.verificationLabel')}</label>
+    <Input minLength={6} maxLength={6} placeholder={t('common.account.verificationPlaceholder') as string} onChange={(e) => {
+      setVerificationCode(e.target.value)
+    }} />
+    <div className='mt-3 flex w-full flex-col gap-2'>
+      <Button className='w-full' disabled={shouldButtonDisabled} loading={isDeleting} variant='warning' onClick={handleConfirm}>{t('common.account.permanentlyDeleteButton')}</Button>
+      <Button className='w-full' onClick={props.onCancel}>{t('common.operation.cancel')}</Button>
+      <Countdown onResend={sendEmail} />
+    </div>
+  </>
+}

dify/web/app/account/(commonLayout)/delete-account/index.tsx

@@ -0,0 +1,44 @@
+'use client'
+import { useTranslation } from 'react-i18next'
+import { useCallback, useState } from 'react'
+import CheckEmail from './components/check-email'
+import VerifyEmail from './components/verify-email'
+import FeedBack from './components/feed-back'
+import CustomDialog from '@/app/components/base/dialog'
+import { COUNT_DOWN_KEY, COUNT_DOWN_TIME_MS } from '@/app/components/signin/countdown'
+
+type DeleteAccountProps = {
+  onCancel: () => void
+  onConfirm: () => void
+}
+
+export default function DeleteAccount(props: DeleteAccountProps) {
+  const { t } = useTranslation()
+
+  const [showVerifyEmail, setShowVerifyEmail] = useState(false)
+  const [showFeedbackDialog, setShowFeedbackDialog] = useState(false)
+
+  const handleEmailCheckSuccess = useCallback(async () => {
+    try {
+      setShowVerifyEmail(true)
+      localStorage.setItem(COUNT_DOWN_KEY, `${COUNT_DOWN_TIME_MS}`)
+    }
+    catch (error) { console.error(error) }
+  }, [])
+
+  if (showFeedbackDialog)
+    return <FeedBack onCancel={props.onCancel} onConfirm={props.onConfirm} />
+
+  return <CustomDialog
+    show={true}
+    onClose={props.onCancel}
+    title={t('common.account.delete')}
+    className="max-w-[480px]"
+    footer={false}
+  >
+    {!showVerifyEmail && <CheckEmail onCancel={props.onCancel} onConfirm={handleEmailCheckSuccess} />}
+    {showVerifyEmail && <VerifyEmail onCancel={props.onCancel} onConfirm={() => {
+      setShowFeedbackDialog(true)
+    }} />}
+  </CustomDialog>
+}

dify/web/app/account/(commonLayout)/delete-account/state.tsx

@@ -0,0 +1,39 @@
+import { useMutation } from '@tanstack/react-query'
+import { create } from 'zustand'
+import { sendDeleteAccountCode, submitDeleteAccountFeedback, verifyDeleteAccountCode } from '@/service/common'
+
+type State = {
+  sendEmailToken: string
+  setSendEmailToken: (token: string) => void
+}
+
+export const useAccountDeleteStore = create<State>(set => ({
+  sendEmailToken: '',
+  setSendEmailToken: (token: string) => set({ sendEmailToken: token }),
+}))
+
+export function useSendDeleteAccountEmail() {
+  const updateEmailToken = useAccountDeleteStore(state => state.setSendEmailToken)
+  return useMutation({
+    mutationKey: ['delete-account'],
+    mutationFn: sendDeleteAccountCode,
+    onSuccess: (ret) => {
+      if (ret.result === 'success')
+        updateEmailToken(ret.data)
+    },
+  })
+}
+
+export function useConfirmDeleteAccount() {
+  return useMutation({
+    mutationKey: ['confirm-delete-account'],
+    mutationFn: verifyDeleteAccountCode,
+  })
+}
+
+export function useDeleteAccountFeedback() {
+  return useMutation({
+    mutationKey: ['delete-account-feedback'],
+    mutationFn: submitDeleteAccountFeedback,
+  })
+}

dify/web/app/account/(commonLayout)/header.tsx

@@ -0,0 +1,47 @@
+'use client'
+import { useTranslation } from 'react-i18next'
+import { RiArrowRightUpLine, RiRobot2Line } from '@remixicon/react'
+import { useRouter } from 'next/navigation'
+import Button from '@/app/components/base/button'
+import DifyLogo from '@/app/components/base/logo/dify-logo'
+import { useCallback } from 'react'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+import Avatar from './avatar'
+
+const Header = () => {
+  const { t } = useTranslation()
+  const router = useRouter()
+  const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
+
+  const goToStudio = useCallback(() => {
+    router.push('/apps')
+  }, [router])
+
+  return (
+    <div className='flex flex-1 items-center justify-between px-4'>
+      <div className='flex items-center gap-3'>
+        <div className='flex cursor-pointer items-center' onClick={goToStudio}>
+          {systemFeatures.branding.enabled && systemFeatures.branding.login_page_logo
+            ? <img
+              src={systemFeatures.branding.login_page_logo}
+              className='block h-[22px] w-auto object-contain'
+              alt='Dify logo'
+            />
+            : <DifyLogo />}
+        </div>
+        <div className='h-4 w-[1px] origin-center rotate-[11.31deg] bg-divider-regular' />
+        <p className='title-3xl-semi-bold relative mt-[-2px] text-text-primary'>{t('common.account.account')}</p>
+      </div>
+      <div className='flex shrink-0 items-center gap-3'>
+        <Button className='system-sm-medium gap-2 px-3 py-2' onClick={goToStudio}>
+          <RiRobot2Line className='h-4 w-4' />
+          <p>{t('common.account.studio')}</p>
+          <RiArrowRightUpLine className='h-4 w-4' />
+        </Button>
+        <div className='h-4 w-[1px] bg-divider-regular' />
+        <Avatar />
+      </div>
+    </div>
+  )
+}
+export default Header

dify/web/app/account/(commonLayout)/layout.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import type { ReactNode } from 'react'
+import Header from './header'
+import SwrInitor from '@/app/components/swr-initializer'
+import { AppContextProvider } from '@/context/app-context'
+import GA, { GaType } from '@/app/components/base/ga'
+import HeaderWrapper from '@/app/components/header/header-wrapper'
+import { EventEmitterContextProvider } from '@/context/event-emitter'
+import { ProviderContextProvider } from '@/context/provider-context'
+import { ModalContextProvider } from '@/context/modal-context'
+
+const Layout = ({ children }: { children: ReactNode }) => {
+  return (
+    <>
+      <GA gaType={GaType.admin} />
+      <SwrInitor>
+        <AppContextProvider>
+          <EventEmitterContextProvider>
+            <ProviderContextProvider>
+              <ModalContextProvider>
+                <HeaderWrapper>
+                  <Header />
+                </HeaderWrapper>
+                <div className='relative flex h-0 shrink-0 grow flex-col overflow-y-auto bg-components-panel-bg'>
+                  {children}
+                </div>
+              </ModalContextProvider>
+            </ProviderContextProvider>
+          </EventEmitterContextProvider>
+        </AppContextProvider>
+      </SwrInitor>
+    </>
+  )
+}
+export default Layout

dify/web/app/account/(commonLayout)/page.tsx

@@ -0,0 +1,12 @@
+'use client'
+import { useTranslation } from 'react-i18next'
+import AccountPage from './account-page'
+import useDocumentTitle from '@/hooks/use-document-title'
+
+export default function Account() {
+  const { t } = useTranslation()
+  useDocumentTitle(t('common.menus.account'))
+  return <div className='mx-auto w-full max-w-[640px] px-6 pt-12'>
+    <AccountPage />
+  </div>
+}

dify/web/app/account/oauth/authorize/constants.ts

@@ -0,0 +1,3 @@
+export const OAUTH_AUTHORIZE_PENDING_KEY = 'oauth_authorize_pending'
+export const REDIRECT_URL_KEY = 'oauth_redirect_url'
+export const OAUTH_AUTHORIZE_PENDING_TTL = 60 * 3

dify/web/app/account/oauth/authorize/layout.tsx

@@ -0,0 +1,42 @@
+'use client'
+import Header from '@/app/signin/_header'
+
+import cn from '@/utils/classnames'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+import useDocumentTitle from '@/hooks/use-document-title'
+import { AppContextProvider } from '@/context/app-context'
+import { useIsLogin } from '@/service/use-common'
+import Loading from '@/app/components/base/loading'
+
+export default function SignInLayout({ children }: any) {
+  const { systemFeatures } = useGlobalPublicStore()
+  useDocumentTitle('')
+  const { isLoading, data: loginData } = useIsLogin()
+  const isLoggedIn = loginData?.logged_in
+
+  if(isLoading) {
+    return (
+      <div className='flex min-h-screen w-full justify-center bg-background-default-burn'>
+        <Loading />
+      </div>
+    )
+  }
+  return <>
+    <div className={cn('flex min-h-screen w-full justify-center bg-background-default-burn p-6')}>
+      <div className={cn('flex w-full shrink-0 flex-col items-center rounded-2xl border border-effects-highlight bg-background-default-subtle')}>
+        <Header />
+        <div className={cn('flex w-full grow flex-col items-center justify-center px-6 md:px-[108px]')}>
+          <div className='flex flex-col md:w-[400px]'>
+            {isLoggedIn ? <AppContextProvider>
+              {children}
+            </AppContextProvider>
+              : children}
+          </div>
+        </div>
+        {systemFeatures.branding.enabled === false && <div className='system-xs-regular px-8 py-6 text-text-tertiary'>
+          © {new Date().getFullYear()} LangGenius, Inc. All rights reserved.
+        </div>}
+      </div>
+    </div>
+  </>
+}

dify/web/app/account/oauth/authorize/page.tsx

@@ -0,0 +1,202 @@
+'use client'
+
+import React, { useEffect, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useRouter, useSearchParams } from 'next/navigation'
+import Button from '@/app/components/base/button'
+import Avatar from '@/app/components/base/avatar'
+import Loading from '@/app/components/base/loading'
+import Toast from '@/app/components/base/toast'
+import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import { useAppContext } from '@/context/app-context'
+import { useAuthorizeOAuthApp, useOAuthAppInfo } from '@/service/use-oauth'
+import {
+  RiAccountCircleLine,
+  RiGlobalLine,
+  RiInfoCardLine,
+  RiMailLine,
+  RiTranslate2,
+} from '@remixicon/react'
+import dayjs from 'dayjs'
+import { useIsLogin } from '@/service/use-common'
+import {
+  OAUTH_AUTHORIZE_PENDING_KEY,
+  OAUTH_AUTHORIZE_PENDING_TTL,
+  REDIRECT_URL_KEY,
+} from './constants'
+
+function setItemWithExpiry(key: string, value: string, ttl: number) {
+  const item = {
+    value,
+    expiry: dayjs().add(ttl, 'seconds').unix(),
+  }
+  localStorage.setItem(key, JSON.stringify(item))
+}
+
+function buildReturnUrl(pathname: string, search: string) {
+  try {
+    const base = `${globalThis.location.origin}${pathname}${search}`
+    return base
+  }
+  catch {
+    return pathname + search
+  }
+}
+
+export default function OAuthAuthorize() {
+  const { t } = useTranslation()
+
+  const SCOPE_INFO_MAP: Record<string, { icon: React.ComponentType<{ className?: string }>, label: string }> = {
+    'read:name': {
+      icon: RiInfoCardLine,
+      label: t('oauth.scopes.name'),
+    },
+    'read:email': {
+      icon: RiMailLine,
+      label: t('oauth.scopes.email'),
+    },
+    'read:avatar': {
+      icon: RiAccountCircleLine,
+      label: t('oauth.scopes.avatar'),
+    },
+    'read:interface_language': {
+      icon: RiTranslate2,
+      label: t('oauth.scopes.languagePreference'),
+    },
+    'read:timezone': {
+      icon: RiGlobalLine,
+      label: t('oauth.scopes.timezone'),
+    },
+  }
+
+  const router = useRouter()
+  const language = useLanguage()
+  const searchParams = useSearchParams()
+  const client_id = decodeURIComponent(searchParams.get('client_id') || '')
+  const redirect_uri = decodeURIComponent(searchParams.get('redirect_uri') || '')
+  const { userProfile } = useAppContext()
+  const { data: authAppInfo, isLoading: isOAuthLoading, isError } = useOAuthAppInfo(client_id, redirect_uri)
+  const { mutateAsync: authorize, isPending: authorizing } = useAuthorizeOAuthApp()
+  const hasNotifiedRef = useRef(false)
+
+  const { isLoading: isIsLoginLoading, data: loginData } = useIsLogin()
+  const isLoggedIn = loginData?.logged_in
+  const isLoading = isOAuthLoading || isIsLoginLoading
+  const onLoginSwitchClick = () => {
+    try {
+      const returnUrl = buildReturnUrl('/account/oauth/authorize', `?client_id=${encodeURIComponent(client_id)}&redirect_uri=${encodeURIComponent(redirect_uri)}`)
+      setItemWithExpiry(OAUTH_AUTHORIZE_PENDING_KEY, returnUrl, OAUTH_AUTHORIZE_PENDING_TTL)
+      router.push(`/signin?${REDIRECT_URL_KEY}=${encodeURIComponent(returnUrl)}`)
+    }
+    catch {
+      router.push('/signin')
+    }
+  }
+
+  const onAuthorize = async () => {
+    if (!client_id || !redirect_uri)
+      return
+    try {
+      const { code } = await authorize({ client_id })
+      const url = new URL(redirect_uri)
+      url.searchParams.set('code', code)
+      globalThis.location.href = url.toString()
+    }
+    catch (err: any) {
+      Toast.notify({
+        type: 'error',
+        message: `${t('oauth.error.authorizeFailed')}: ${err.message}`,
+      })
+    }
+  }
+
+  useEffect(() => {
+    const invalidParams = !client_id || !redirect_uri
+    if ((invalidParams || isError) && !hasNotifiedRef.current) {
+      hasNotifiedRef.current = true
+      Toast.notify({
+        type: 'error',
+        message: invalidParams ? t('oauth.error.invalidParams') : t('oauth.error.authAppInfoFetchFailed'),
+        duration: 0,
+      })
+    }
+  }, [client_id, redirect_uri, isError])
+
+  if (isLoading) {
+    return (
+      <div className='bg-background-default-subtle'>
+        <Loading type='app' />
+      </div>
+    )
+  }
+
+  return (
+    <div className='bg-background-default-subtle'>
+      {authAppInfo?.app_icon && (
+        <div className='w-max rounded-2xl border-[0.5px] border-components-panel-border bg-text-primary-on-surface p-3 shadow-lg'>
+          <img src={authAppInfo.app_icon} alt='app icon' className='h-10 w-10 rounded' />
+        </div>
+      )}
+
+      <div className={`mb-4 mt-5 flex flex-col gap-2 ${isLoggedIn ? 'pb-2' : ''}`}>
+        <div className='title-4xl-semi-bold'>
+          {isLoggedIn && <div className='text-text-primary'>{t('oauth.connect')}</div>}
+          <div className='text-[var(--color-saas-dify-blue-inverted)]'>{authAppInfo?.app_label[language] || authAppInfo?.app_label?.en_US || t('oauth.unknownApp')}</div>
+          {!isLoggedIn && <div className='text-text-primary'>{t('oauth.tips.notLoggedIn')}</div>}
+        </div>
+        <div className='body-md-regular text-text-secondary'>{isLoggedIn ? `${authAppInfo?.app_label[language] || authAppInfo?.app_label?.en_US || t('oauth.unknownApp')} ${t('oauth.tips.loggedIn')}` : t('oauth.tips.needLogin')}</div>
+      </div>
+
+      {isLoggedIn && userProfile && (
+        <div className='flex items-center justify-between rounded-xl bg-background-section-burn-inverted p-3'>
+          <div className='flex items-center gap-2.5'>
+            <Avatar avatar={userProfile.avatar_url} name={userProfile.name} size={36} />
+            <div>
+              <div className='system-md-semi-bold text-text-secondary'>{userProfile.name}</div>
+              <div className='system-xs-regular text-text-tertiary'>{userProfile.email}</div>
+            </div>
+          </div>
+          <Button variant='tertiary' size='small' onClick={onLoginSwitchClick}>{t('oauth.switchAccount')}</Button>
+        </div>
+      )}
+
+      {isLoggedIn && Boolean(authAppInfo?.scope) && (
+        <div className='mt-2 flex flex-col gap-2.5 rounded-xl bg-background-section-burn-inverted px-[22px] py-5 text-text-secondary'>
+          {authAppInfo!.scope.split(/\s+/).filter(Boolean).map((scope: string) => {
+            const Icon = SCOPE_INFO_MAP[scope]
+            return (
+              <div key={scope} className='body-sm-medium flex items-center gap-2 text-text-secondary'>
+                {Icon ? <Icon.icon className='h-4 w-4' /> : <RiAccountCircleLine className='h-4 w-4' />}
+                {Icon.label}
+              </div>
+            )
+          })}
+        </div>
+      )}
+
+      <div className='flex flex-col items-center gap-2 pt-4'>
+        {!isLoggedIn ? (
+          <Button variant='primary' size='large' className='w-full' onClick={onLoginSwitchClick}>{t('oauth.login')}</Button>
+        ) : (
+          <>
+            <Button variant='primary' size='large' className='w-full' onClick={onAuthorize} disabled={!client_id || !redirect_uri || isError || authorizing} loading={authorizing}>{t('oauth.continue')}</Button>
+            <Button size='large' className='w-full' onClick={() => router.push('/apps')}>{t('common.operation.cancel')}</Button>
+          </>
+        )}
+      </div>
+      <div className='mt-4 py-2'>
+        <svg xmlns="http://www.w3.org/2000/svg" width="400" height="1" viewBox="0 0 400 1" fill="none">
+          <path d="M0 0.5H400" stroke="url(#paint0_linear_2_5904)" />
+          <defs>
+            <linearGradient id="paint0_linear_2_5904" x1="400" y1="9.49584" x2="0.000228929" y2="9.17666" gradientUnits="userSpaceOnUse">
+              <stop stop-color="white" stop-opacity="0.01" />
+              <stop offset="0.505" stop-color="#101828" stop-opacity="0.08" />
+              <stop offset="1" stop-color="white" stop-opacity="0.01" />
+            </linearGradient>
+          </defs>
+        </svg>
+      </div>
+      <div className='system-xs-regular mt-3 text-text-tertiary'>{t('oauth.tips.common')}</div>
+    </div>
+  )
+}