♻️ refactor(personal-settings): Break down PersonalSetting.js into modular components
- Split the 1554-line PersonalSetting.js file into smaller, maintainable components - Created organized folder structure under personal/: - components/: UserInfoHeader for shared user info display - tabs/: ModelsList, AccountBinding, SecuritySettings, NotificationSettings - modals/: EmailBindModal, WeChatBindModal, AccountDeleteModal, ChangePasswordModal - Refactored main PersonalSetting component to use composition pattern - Improved code maintainability and separation of concerns - Added collapsible prop to ModelsList tabs for better UX - Fixed import path for TwoFASetting component in SecuritySettings - Preserved all existing functionality and user interactions This refactoring reduces the main file from 1554 to 484 lines and makes the codebase more modular, testable, and easier to maintain.
This commit is contained in:
t0ng7u
@@ -0,0 +1,92 @@
|
||||
/*
|
||||
Copyright (C) 2025 QuantumNous
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as
|
||||
published by the Free Software Foundation, either version 3 of the
|
||||
License, or (at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
For commercial licensing, please contact support@quantumnous.com
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Banner, Input, Modal, Typography } from '@douyinfe/semi-ui';
|
||||
import { IconDelete, IconUser } from '@douyinfe/semi-icons';
|
||||
import Turnstile from 'react-turnstile';
|
||||
|
||||
const AccountDeleteModal = ({
|
||||
t,
|
||||
showAccountDeleteModal,
|
||||
setShowAccountDeleteModal,
|
||||
inputs,
|
||||
handleInputChange,
|
||||
deleteAccount,
|
||||
userState,
|
||||
turnstileEnabled,
|
||||
turnstileSiteKey,
|
||||
setTurnstileToken
|
||||
}) => {
|
||||
return (
|
||||
<Modal
|
||||
title={
|
||||
<div className="flex items-center">
|
||||
<IconDelete className="mr-2 text-red-500" />
|
||||
{t('删除账户确认')}
|
||||
</div>
|
||||
}
|
||||
visible={showAccountDeleteModal}
|
||||
onCancel={() => setShowAccountDeleteModal(false)}
|
||||
onOk={deleteAccount}
|
||||
size={'small'}
|
||||
centered={true}
|
||||
className="modern-modal"
|
||||
>
|
||||
<div className="space-y-4 py-4">
|
||||
<Banner
|
||||
type='danger'
|
||||
description={t('您正在删除自己的帐户，将清空所有数据且不可恢复')}
|
||||
closeIcon={null}
|
||||
className="!rounded-lg"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<Typography.Text strong className="block mb-2 text-red-600">
|
||||
{t('请输入您的用户名以确认删除')}
|
||||
</Typography.Text>
|
||||
<Input
|
||||
placeholder={t('输入你的账户名{{username}}以确认删除', { username: ` ${userState?.user?.username} ` })}
|
||||
name='self_account_deletion_confirmation'
|
||||
value={inputs.self_account_deletion_confirmation}
|
||||
onChange={(value) =>
|
||||
handleInputChange('self_account_deletion_confirmation', value)
|
||||
}
|
||||
size="large"
|
||||
className="!rounded-lg"
|
||||
prefix={<IconUser />}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{turnstileEnabled && (
|
||||
<div className="flex justify-center">
|
||||
<Turnstile
|
||||
sitekey={turnstileSiteKey}
|
||||
onVerify={(token) => {
|
||||
setTurnstileToken(token);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default AccountDeleteModal;
|
||||
@@ -0,0 +1,115 @@
|
||||
/*
|
||||
Copyright (C) 2025 QuantumNous
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as
|
||||
published by the Free Software Foundation, either version 3 of the
|
||||
License, or (at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
For commercial licensing, please contact support@quantumnous.com
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Input, Modal, Typography } from '@douyinfe/semi-ui';
|
||||
import { IconLock } from '@douyinfe/semi-icons';
|
||||
import Turnstile from 'react-turnstile';
|
||||
|
||||
const ChangePasswordModal = ({
|
||||
t,
|
||||
showChangePasswordModal,
|
||||
setShowChangePasswordModal,
|
||||
inputs,
|
||||
handleInputChange,
|
||||
changePassword,
|
||||
turnstileEnabled,
|
||||
turnstileSiteKey,
|
||||
setTurnstileToken
|
||||
}) => {
|
||||
return (
|
||||
<Modal
|
||||
title={
|
||||
<div className="flex items-center">
|
||||
<IconLock className="mr-2 text-orange-500" />
|
||||
{t('修改密码')}
|
||||
</div>
|
||||
}
|
||||
visible={showChangePasswordModal}
|
||||
onCancel={() => setShowChangePasswordModal(false)}
|
||||
onOk={changePassword}
|
||||
size={'small'}
|
||||
centered={true}
|
||||
className="modern-modal"
|
||||
>
|
||||
<div className="space-y-4 py-4">
|
||||
<div>
|
||||
<Typography.Text strong className="block mb-2">{t('原密码')}</Typography.Text>
|
||||
<Input
|
||||
name='original_password'
|
||||
placeholder={t('请输入原密码')}
|
||||
type='password'
|
||||
value={inputs.original_password}
|
||||
onChange={(value) =>
|
||||
handleInputChange('original_password', value)
|
||||
}
|
||||
size="large"
|
||||
className="!rounded-lg"
|
||||
prefix={<IconLock />}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Typography.Text strong className="block mb-2">{t('新密码')}</Typography.Text>
|
||||
<Input
|
||||
name='set_new_password'
|
||||
placeholder={t('请输入新密码')}
|
||||
type='password'
|
||||
value={inputs.set_new_password}
|
||||
onChange={(value) =>
|
||||
handleInputChange('set_new_password', value)
|
||||
}
|
||||
size="large"
|
||||
className="!rounded-lg"
|
||||
prefix={<IconLock />}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Typography.Text strong className="block mb-2">{t('确认新密码')}</Typography.Text>
|
||||
<Input
|
||||
name='set_new_password_confirmation'
|
||||
placeholder={t('请再次输入新密码')}
|
||||
type='password'
|
||||
value={inputs.set_new_password_confirmation}
|
||||
onChange={(value) =>
|
||||
handleInputChange('set_new_password_confirmation', value)
|
||||
}
|
||||
size="large"
|
||||
className="!rounded-lg"
|
||||
prefix={<IconLock />}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{turnstileEnabled && (
|
||||
<div className="flex justify-center">
|
||||
<Turnstile
|
||||
sitekey={turnstileSiteKey}
|
||||
onVerify={(token) => {
|
||||
setTurnstileToken(token);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default ChangePasswordModal;
|
||||
106
web/src/components/settings/personal/modals/EmailBindModal.js
Normal file
106
web/src/components/settings/personal/modals/EmailBindModal.js
Normal file
@@ -0,0 +1,106 @@
|
||||
/*
|
||||
Copyright (C) 2025 QuantumNous
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as
|
||||
published by the Free Software Foundation, either version 3 of the
|
||||
License, or (at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
For commercial licensing, please contact support@quantumnous.com
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Button, Input, Modal } from '@douyinfe/semi-ui';
|
||||
import { IconMail, IconKey } from '@douyinfe/semi-icons';
|
||||
import Turnstile from 'react-turnstile';
|
||||
|
||||
const EmailBindModal = ({
|
||||
t,
|
||||
showEmailBindModal,
|
||||
setShowEmailBindModal,
|
||||
inputs,
|
||||
handleInputChange,
|
||||
sendVerificationCode,
|
||||
bindEmail,
|
||||
disableButton,
|
||||
loading,
|
||||
countdown,
|
||||
turnstileEnabled,
|
||||
turnstileSiteKey,
|
||||
setTurnstileToken
|
||||
}) => {
|
||||
return (
|
||||
<Modal
|
||||
title={
|
||||
<div className="flex items-center">
|
||||
<IconMail className="mr-2 text-blue-500" />
|
||||
{t('绑定邮箱地址')}
|
||||
</div>
|
||||
}
|
||||
visible={showEmailBindModal}
|
||||
onCancel={() => setShowEmailBindModal(false)}
|
||||
onOk={bindEmail}
|
||||
size={'small'}
|
||||
centered={true}
|
||||
maskClosable={false}
|
||||
className="modern-modal"
|
||||
>
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="flex gap-3">
|
||||
<Input
|
||||
placeholder={t('输入邮箱地址')}
|
||||
onChange={(value) => handleInputChange('email', value)}
|
||||
name='email'
|
||||
type='email'
|
||||
size="large"
|
||||
className="!rounded-lg flex-1"
|
||||
prefix={<IconMail />}
|
||||
/>
|
||||
<Button
|
||||
onClick={sendVerificationCode}
|
||||
disabled={disableButton || loading}
|
||||
className="!rounded-lg"
|
||||
type="primary"
|
||||
theme="outline"
|
||||
size='large'
|
||||
>
|
||||
{disableButton ? `${t('重新发送')} (${countdown})` : t('获取验证码')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Input
|
||||
placeholder={t('验证码')}
|
||||
name='email_verification_code'
|
||||
value={inputs.email_verification_code}
|
||||
onChange={(value) =>
|
||||
handleInputChange('email_verification_code', value)
|
||||
}
|
||||
size="large"
|
||||
className="!rounded-lg"
|
||||
prefix={<IconKey />}
|
||||
/>
|
||||
|
||||
{turnstileEnabled && (
|
||||
<div className="flex justify-center">
|
||||
<Turnstile
|
||||
sitekey={turnstileSiteKey}
|
||||
onVerify={(token) => {
|
||||
setTurnstileToken(token);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default EmailBindModal;
|
||||
@@ -0,0 +1,80 @@
|
||||
/*
|
||||
Copyright (C) 2025 QuantumNous
|
||||
|
||||
This program is free software: you can redistribute it and/or modify
|
||||
it under the terms of the GNU Affero General Public License as
|
||||
published by the Free Software Foundation, either version 3 of the
|
||||
License, or (at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU Affero General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Affero General Public License
|
||||
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
|
||||
For commercial licensing, please contact support@quantumnous.com
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { Button, Input, Modal, Image } from '@douyinfe/semi-ui';
|
||||
import { IconKey } from '@douyinfe/semi-icons';
|
||||
import { SiWechat } from 'react-icons/si';
|
||||
|
||||
const WeChatBindModal = ({
|
||||
t,
|
||||
showWeChatBindModal,
|
||||
setShowWeChatBindModal,
|
||||
inputs,
|
||||
handleInputChange,
|
||||
bindWeChat,
|
||||
status
|
||||
}) => {
|
||||
return (
|
||||
<Modal
|
||||
title={
|
||||
<div className="flex items-center">
|
||||
<SiWechat className="mr-2 text-green-500" size={20} />
|
||||
{t('绑定微信账户')}
|
||||
</div>
|
||||
}
|
||||
visible={showWeChatBindModal}
|
||||
onCancel={() => setShowWeChatBindModal(false)}
|
||||
footer={null}
|
||||
size={'small'}
|
||||
centered={true}
|
||||
className="modern-modal"
|
||||
>
|
||||
<div className="space-y-4 py-4 text-center">
|
||||
<Image src={status.wechat_qrcode} className="mx-auto" />
|
||||
<div className="text-gray-600">
|
||||
<p>{t('微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）')}</p>
|
||||
</div>
|
||||
<Input
|
||||
placeholder={t('验证码')}
|
||||
name='wechat_verification_code'
|
||||
value={inputs.wechat_verification_code}
|
||||
onChange={(v) =>
|
||||
handleInputChange('wechat_verification_code', v)
|
||||
}
|
||||
size="large"
|
||||
className="!rounded-lg"
|
||||
prefix={<IconKey />}
|
||||
/>
|
||||
<Button
|
||||
type="primary"
|
||||
theme="solid"
|
||||
size='large'
|
||||
onClick={bindWeChat}
|
||||
className="!rounded-lg w-full !bg-slate-600 hover:!bg-slate-700"
|
||||
icon={<SiWechat size={16} />}
|
||||
>
|
||||
{t('绑定')}
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default WeChatBindModal;
|
||||
Reference in New Issue
Block a user