From 34cab0e0b79e0e91f57bdd35afe86e51cd04aaa6 Mon Sep 17 00:00:00 2001
From: Yi Xiao <54782454+YIXIAO0@users.noreply.github.com>
Date: Fri, 9 Aug 2024 11:37:34 +0800
Subject: [PATCH] Fix: account delete function & confirm issues (#7129)

---
 web/app/components/base/confirm/index.tsx     |  2 +-
 .../account-setting/account-page/index.tsx    | 32 +++++++++++++------
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/web/app/components/base/confirm/index.tsx b/web/app/components/base/confirm/index.tsx
index 137687b4bd..813254cb3f 100644
--- a/web/app/components/base/confirm/index.tsx
+++ b/web/app/components/base/confirm/index.tsx
@@ -89,7 +89,7 @@ function Confirm({
         <div className='flex flex-col items-start max-w-full rounded-2xl border-[0.5px] border-solid border-components-panel-border shadows-shadow-lg bg-components-panel-bg'>
           <div className='flex pt-6 pl-6 pr-6 pb-4 flex-col items-start gap-2 self-stretch'>
             <div className='title-2xl-semi-bold text-text-primary'>{title}</div>
-            <div className='system-md-regular text-text-tertiary'>{content}</div>
+            <div className='system-md-regular text-text-tertiary w-full'>{content}</div>
           </div>
           <div className='flex p-6 gap-2 justify-end items-start self-stretch'>
             {showCancel && <Button onClick={onCancel}>{cancelTxt}</Button>}
diff --git a/web/app/components/header/account-setting/account-page/index.tsx b/web/app/components/header/account-setting/account-page/index.tsx
index 7520022c7b..ce7f7e7e22 100644
--- a/web/app/components/header/account-setting/account-page/index.tsx
+++ b/web/app/components/header/account-setting/account-page/index.tsx
@@ -250,15 +250,29 @@ export default function AccountPage() {
           showCancel={false}
           type='warning'
           title={t('common.account.delete')}
-          content={<>
-            <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>
-          </>}
+          content={
+            <>
+              <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'
+                  rel='noreferrer noopener'
+                  onClick={(e) => {
+                    e.preventDefault()
+                    window.location.href = e.currentTarget.href
+                  }}
+                >
+                  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'>{`${t('common.account.delete')}: ${userProfile.email}`}</div>
+            </>
+          }
           confirmText={t('common.operation.ok') as string}
         />
       )}