estel/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Feat: support delete account (#5208)

Browse Source 
Co-authored-by: crazywoola <427733928@qq.com>
This commit is contained in:
KVOJJJin
2024-06-16 10:26:39 +08:00
committed by GitHub
parent d94279ae75
commit c03e6ee41b
14 changed files with 86 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
web/app/components/header/account-setting/account-page/index.module.css
View File

@@ -1,4 +1,9 @@
.modal {
padding: 24px 32px !important;
width: 400px !important;
}
}
.bg {
background: linear-gradient(180deg, rgba(217, 45, 32, 0.05) 0%, rgba(217, 45, 32, 0.00) 24.02%), #F9FAFB;
}

59
web/app/components/header/account-setting/account-page/index.tsx
View File

@@ -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>
)}
</>
)
}