Feat/new confirm (#6984)

This commit is contained in:
Yi Xiao
2024-08-06 14:31:13 +08:00
committed by GitHub
parent bd3ed89516
commit 0c22e4e3d1
33 changed files with 192 additions and 461 deletions

View File

@@ -1,16 +1,14 @@
'use client'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import {
RiCloseLine,
RiErrorWarningFill,
} from '@remixicon/react'
import { useContext } from 'use-context-selector'
import Collapse from '../collapse'
import type { IItem } from '../collapse'
import s from './index.module.css'
import classNames from '@/utils/classnames'
import Modal from '@/app/components/base/modal'
import Confirm from '@/app/components/base/confirm'
import Button from '@/app/components/base/button'
import { updateUserProfile } from '@/service/common'
import { useAppContext } from '@/context/app-context'
@@ -245,30 +243,24 @@ export default function AccountPage() {
</Modal>
)}
{showDeleteAccountModal && (
<Modal
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)}>
<RiCloseLine 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'>
<RiErrorWarningFill 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' onClick={() => setShowDeleteAccountModal(false)}>{t('common.operation.ok')}</Button>
</div>
</Modal>
<Confirm
isShow
onCancel={() => setShowDeleteAccountModal(false)}
onConfirm={() => setShowDeleteAccountModal(false)}
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>
</>}
confirmText={t('common.operation.ok') as string}
/>
)}
</>
)