|
|
@@ -14,6 +14,8 @@ import { ToastContext } from '@/app/components/base/toast'
|
|
|
import AppIcon from '@/app/components/base/app-icon'
|
|
|
import Avatar from '@/app/components/base/avatar'
|
|
|
import { IS_CE_EDITION } from '@/config'
|
|
|
+import { XClose } from '@/app/components/base/icons/src/vender/line/general'
|
|
|
+import { AlertCircle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
|
|
|
|
|
|
const titleClassName = `
|
|
|
text-sm font-medium text-gray-900
|
|
|
@@ -39,6 +41,7 @@ export default function AccountPage() {
|
|
|
const [currentPassword, setCurrentPassword] = useState('')
|
|
|
const [password, setPassword] = useState('')
|
|
|
const [confirmPassword, setConfirmPassword] = useState('')
|
|
|
+ const [showDeleteAccountModal, setShowDeleteAccountModal] = useState(false)
|
|
|
|
|
|
const handleEditName = () => {
|
|
|
setEditNameModalVisible(true)
|
|
|
@@ -148,21 +151,20 @@ export default function AccountPage() {
|
|
|
<Button className='font-medium !text-gray-700 !px-3 !py-[7px] !text-[13px]' onClick={() => setEditPasswordModalVisible(true)}>{userProfile.is_password_set ? t('common.account.resetPassword') : t('common.account.setPassword')}</Button>
|
|
|
</div>
|
|
|
)}
|
|
|
- {!!apps.length && (
|
|
|
- <>
|
|
|
- <div className='mb-6 border-[0.5px] border-gray-100' />
|
|
|
- <div className='mb-8'>
|
|
|
- <div className={titleClassName}>{t('common.account.langGeniusAccount')}</div>
|
|
|
- <div className={descriptionClassName}>{t('common.account.langGeniusAccountTip')}</div>
|
|
|
- <Collapse
|
|
|
- title={`${t('common.account.showAppLength', { length: apps.length })}`}
|
|
|
- items={apps.map(app => ({ key: app.id, name: app.name }))}
|
|
|
- renderItem={renderAppItem}
|
|
|
- wrapperClassName='mt-2'
|
|
|
- />
|
|
|
- </div>
|
|
|
- </>
|
|
|
- )}
|
|
|
+ <div className='mb-6 border-[0.5px] border-gray-100' />
|
|
|
+ <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 => ({ key: app.id, name: app.name }))}
|
|
|
+ renderItem={renderAppItem}
|
|
|
+ wrapperClassName='mt-2'
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ <Button className='mt-2 font-medium text-[#D92D20] !px-3 !py-[7px] !text-[13px]' onClick={() => setShowDeleteAccountModal(true)}>{t('common.account.delete')}</Button>
|
|
|
+ </div>
|
|
|
{editNameModalVisible && (
|
|
|
<Modal
|
|
|
isShow
|
|
|
@@ -242,6 +244,33 @@ export default function AccountPage() {
|
|
|
</div>
|
|
|
</Modal>
|
|
|
)}
|
|
|
+ {showDeleteAccountModal && (
|
|
|
+ <Modal
|
|
|
+ wrapperClassName='z-20'
|
|
|
+ className={classNames('p-8 max-w-[480px] w-[480px]', s.bg)}
|
|
|
+ isShow={showDeleteAccountModal}
|
|
|
+ onClose={() => {}}
|
|
|
+ >
|
|
|
+ <div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={() => setShowDeleteAccountModal(false)}>
|
|
|
+ <XClose className='w-4 h-4 text-gray-500' />
|
|
|
+ </div>
|
|
|
+ <div className='w-12 h-12 p-3 bg-white rounded-xl border-[0.5px] border-gray-100 shadow-xl'>
|
|
|
+ <AlertCircle className='w-6 h-6 text-[#D92D20]' />
|
|
|
+ </div>
|
|
|
+ <div className='relative mt-3 text-xl font-semibold leading-[30px] text-gray-900'>{t('common.account.delete')}</div>
|
|
|
+ <div className='my-1 text-[#D92D20] text-sm leading-5'>
|
|
|
+ {t('common.account.deleteTip')}
|
|
|
+ </div>
|
|
|
+ <div className='mt-3 text-sm leading-5'>
|
|
|
+ <span>{t('common.account.deleteConfirmTip')}</span>
|
|
|
+ <a className='text-primary-600 cursor' href={`mailto:support@dify.ai?subject=Delete Account Request&body=Delete Account: ${userProfile.email}`} target='_blank'>support@dify.ai</a>
|
|
|
+ </div>
|
|
|
+ <div className='my-2 px-3 py-2 rounded-lg bg-gray-100 text-sm font-medium leading-5 text-gray-800'>{`Delete Account: ${userProfile.email}`}</div>
|
|
|
+ <div className='pt-6 flex justify-end items-center'>
|
|
|
+ <Button className='w-24 text-gray-700 text-sm font-medium' onClick={() => setShowDeleteAccountModal(false)}>{t('common.operation.ok')}</Button>
|
|
|
+ </div>
|
|
|
+ </Modal>
|
|
|
+ )}
|
|
|
</>
|
|
|
)
|
|
|
}
|
KVOJJJin