Feat: support delete account (#5208)

Co-authored-by: crazywoola <427733928@qq.com>

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

@@ -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;
+}
+

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

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

web/i18n/de-DE/common.ts

@@ -156,6 +156,9 @@ const translation = {
     langGeniusAccountTip: 'Ihr Dify-Konto und zugehörige Benutzerdaten.',
     editName: 'Namen bearbeiten',
     showAppLength: '{{length}} Apps anzeigen',
+    delete: 'Konto löschen',
+    deleteTip: 'Wenn Sie Ihr Konto löschen, werden alle Ihre Daten dauerhaft gelöscht und können nicht wiederhergestellt werden.',
+    deleteConfirmTip: 'Zur Bestätigung senden Sie bitte Folgendes von Ihrer registrierten E-Mail-Adresse an ',
   },
   members: {
     team: 'Team',

web/i18n/en-US/common.ts

@@ -160,6 +160,9 @@ const translation = {
     langGeniusAccountTip: 'Your Dify account and associated user data.',
     editName: 'Edit Name',
     showAppLength: 'Show {{length}} apps',
+    delete: 'Delete Account',
+    deleteTip: 'Deleting your account will permanently erase all your data and it cannot be recovered.',
+    deleteConfirmTip: 'To confirm, please send the following from your registered email to ',
   },
   members: {
     team: 'Team',

web/i18n/fr-FR/common.ts

@@ -156,6 +156,9 @@ const translation = {
     langGeniusAccountTip: 'Votre compte Dify et les données utilisateur associées.',
     editName: 'Modifier le nom',
     showAppLength: 'Afficher {{length}} applications',
+    delete: 'Supprimer le compte',
+    deleteTip: 'La suppression de votre compte effacera définitivement toutes vos données et elles ne pourront pas être récupérées.',
+    deleteConfirmTip: 'Pour confirmer, veuillez envoyer ce qui suit depuis votre adresse e-mail enregistrée à ',
   },
   members: {
     team: 'Équipe',

web/i18n/ja-JP/common.ts

@@ -156,6 +156,9 @@ const translation = {
     langGeniusAccountTip: 'Difyアカウントと関連するユーザーデータ。',
     editName: '名前を編集',
     showAppLength: '{{length}}アプリを表示',
+    delete: 'アカウントを削除',
+    deleteTip: 'アカウントを削除すると、すべてのデータが完全に消去され、復元できなくなります。',
+    deleteConfirmTip: '確認のため、登録したメールから次の内容をに送信してください ',
   },
   members: {
     team: 'チーム',

web/i18n/ko-KR/common.ts

@@ -152,6 +152,9 @@ const translation = {
     langGeniusAccountTip: 'Dify 계정과 관련된 사용자 데이터.',
     editName: '이름 편집',
     showAppLength: '{{length}}개의 앱 표시',
+    delete: '계정 삭제',
+    deleteTip: '계정을 삭제하면 모든 데이터가 영구적으로 지워지며 복구할 수 없습니다.',
+    deleteConfirmTip: '확인하려면 등록된 이메일에서 다음 내용을 로 보내주세요 ',
   },
   members: {
     team: '팀',

web/i18n/pl-PL/common.ts

@@ -162,6 +162,9 @@ const translation = {
     langGeniusAccountTip: 'Twoje konto Dify i powiązane dane użytkownika.',
     editName: 'Edytuj nazwę',
     showAppLength: 'Pokaż {{length}} aplikacje',
+    delete: 'Usuń konto',
+    deleteTip: 'Usunięcie konta spowoduje trwałe usunięcie wszystkich danych i nie będzie można ich odzyskać.',
+    deleteConfirmTip: 'Aby potwierdzić, wyślij następujące informacje z zarejestrowanego adresu e-mail na adres ',
   },
   members: {
     team: 'Zespół',

web/i18n/pt-BR/common.ts

@@ -156,6 +156,9 @@ const translation = {
     langGeniusAccountTip: 'Sua conta Dify e dados de usuário associados.',
     editName: 'Editar Nome',
     showAppLength: 'Mostrar {{length}} apps',
+    delete: 'Excluir conta',
+    deleteTip: 'Excluir sua conta apagará permanentemente todos os seus dados e eles não poderão ser recuperados.',
+    deleteConfirmTip: 'Para confirmar, envie o seguinte do seu e-mail registrado para ',
   },
   members: {
     team: 'Equipe',

web/i18n/ro-RO/common.ts

@@ -155,6 +155,9 @@ const translation = {
     langGeniusAccountTip: 'Contul Dify și datele de utilizator asociate.',
     editName: 'Editează Nume',
     showAppLength: 'Afișează {{length}} aplicații',
+    delete: 'Șterge contul',
+    deleteTip: 'Ștergerea contului vă va șterge definitiv toate datele și nu pot fi recuperate.',
+    deleteConfirmTip: 'Pentru a confirma, trimiteți următoarele din e-mailul înregistrat la ',
   },
   members: {
     team: 'Echipă',

web/i18n/uk-UA/common.ts

@@ -156,6 +156,9 @@ const translation = {
     langGeniusAccountTip: 'Ваш обліковий запис Dify та пов’язані з ним дані користувача.',
     editName: 'Редагувати ім\'я',
     showAppLength: 'Показати {{length}} програм',
+    delete: 'Видалити обліковий запис',
+    deleteTip: 'Видалення вашого облікового запису призведе до остаточного видалення всіх ваших даних, і їх неможливо буде відновити.',
+    deleteConfirmTip: 'Щоб підтвердити, будь ласка, надішліть наступне з вашої зареєстрованої електронної пошти на ',
   },
   members: {
     team: 'Команда',

web/i18n/vi-VN/common.ts

@@ -155,6 +155,9 @@ const translation = {
     langGeniusAccountTip: 'Tài khoản Dify của bạn và dữ liệu người dùng liên quan.',
     editName: 'Chỉnh sửa Tên',
     showAppLength: 'Hiển thị {{length}} ứng dụng',
+    delete: 'Xóa tài khoản',
+    deleteTip: 'Xóa tài khoản của bạn sẽ xóa vĩnh viễn tất cả dữ liệu của bạn và không thể khôi phục được.',
+    deleteConfirmTip: 'Để xác nhận, vui lòng gửi thông tin sau từ email đã đăng ký của bạn tới ',
   },
   members: {
     team: 'Nhóm',

web/i18n/zh-Hans/common.ts

@@ -160,6 +160,9 @@ const translation = {
     langGeniusAccountTip: '您的 Dify 账号和相关的用户数据。',
     editName: '编辑名字',
     showAppLength: '显示 {{length}} 个应用',
+    delete: '删除账户',
+    deleteTip: '删除账户后，所有数据将被永久删除且不可恢复。',
+    deleteConfirmTip: '请将以下内容通过您的账户邮箱发送到 ',
   },
   members: {
     team: '团队',

web/i18n/zh-Hant/common.ts

@@ -156,6 +156,9 @@ const translation = {
     langGeniusAccountTip: '您的 Dify 賬號和相關的使用者資料。',
     editName: '編輯名字',
     showAppLength: '顯示 {{length}} 個應用',
+    delete: '刪除帳戶',
+    deleteTip: '刪除您的帳戶將永久刪除您的所有資料並且無法恢復。',
+    deleteConfirmTip: '請將以下內容從您的註冊電子郵件發送至 ',
   },
   members: {
     team: '團隊',