feat: 忘记密码/修改密码 + 设置页结构重组 + barrel cleanup + LoginPage 版本统一
新增： - ForgotPasswordModal — 手机号+短信验证码重置密码 (AuthAPI.resetPassword) - ChangePasswordModal — 当前密码验证后修改密码 (AuthAPI.changePassword) - useSmsCooldown Hook — 通用短信发送冷却逻辑，供注册/忘记密码复用 - PasswordSetting — 设置页账号安全区块，双选项：修改密码 / 短信验证码重置 修改： - LoginForm \"忘记密码?\" 链接接入 ForgotPasswordModal（替换 TODO） - LoginPage 移除 edition 业务版本 UI 区分，登录/注册 Tab 全局统一 - 设置页 Section 组件移入 blocks/ 子目录（git mv 保留历史） - auth.ts sendSms URL 修正: /sms/send → /send-sms 清理： - settings/index.ts 移除 4 个未使用 re-export，精简为仅 SettingsPage - navbar/index.ts 移除未使用 re-export，精简为仅 NavBar 文档： - WORKLOG.md 新增 2026-06-08 工作日志 - ARCHITECTURE.md / PROJECT.md 更新设置页目录结构与新组件 - TODO.md 忘记密码流程标记已完成 + 短信人机验证列入后期优化
This commit is contained in:
265
src/pages/login/components/ForgotPasswordModal.tsx
Normal file
265
src/pages/login/components/ForgotPasswordModal.tsx
Normal file
@@ -0,0 +1,265 @@
|
||||
// ============================================================
|
||||
// ForgotPasswordModal — 忘记密码弹窗
|
||||
//
|
||||
// 场景：未登录用户通过手机号 + 短信验证码重置密码
|
||||
// 复用：可在登录页"忘记密码?"入口使用，也可在其他位置独立调用
|
||||
//
|
||||
// API：
|
||||
// - AuthAPI.sendSms({ phone }) 发送短信验证码
|
||||
// - AuthAPI.resetPassword({ phone, sms_code, new_password }) 重置密码
|
||||
// ============================================================
|
||||
|
||||
import { useState, useCallback } from 'react';
|
||||
import { Modal, Input, Button, Typography, App } from 'antd';
|
||||
import {
|
||||
PhoneOutlined,
|
||||
SafetyCertificateOutlined,
|
||||
LockOutlined,
|
||||
KeyOutlined,
|
||||
} from '@ant-design/icons';
|
||||
|
||||
import { useTheme } from '@/hooks/use-theme.ts';
|
||||
import { AuthAPI } from '@/services/modules';
|
||||
import {
|
||||
validatePhone,
|
||||
validateSmsCode,
|
||||
validatePassword,
|
||||
validateConfirmPassword,
|
||||
} from '../config/validators';
|
||||
import { useSmsCooldown } from '../hooks/use-sms-cooldown';
|
||||
|
||||
const { Text, Title } = Typography;
|
||||
|
||||
interface ForgotPasswordModalProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function ForgotPasswordModal({ open, onClose }: ForgotPasswordModalProps) {
|
||||
const { isDark } = useTheme();
|
||||
const { message } = App.useApp();
|
||||
|
||||
// ---- 表单字段 ----
|
||||
const [phone, setPhone] = useState('');
|
||||
const [smsCode, setSmsCode] = useState('');
|
||||
const [newPassword, setNewPassword] = useState('');
|
||||
const [confirmPassword, setConfirmPassword] = useState('');
|
||||
|
||||
// ---- 错误信息 ----
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
|
||||
// ---- 提交状态 ----
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
// ---- 短信冷却 ----
|
||||
const { cooldown, secondsLeft, startCooldown } = useSmsCooldown(60);
|
||||
|
||||
// ---- 清除单个字段错误 ----
|
||||
const clearError = useCallback((name: string) => {
|
||||
setErrors((p) => {
|
||||
if (!(name in p)) return p;
|
||||
const n = { ...p };
|
||||
delete n[name];
|
||||
return n;
|
||||
});
|
||||
}, []);
|
||||
|
||||
// ---- 发送验证码 ----
|
||||
const handleSendSms = useCallback(() => {
|
||||
const err = validatePhone(phone);
|
||||
if (err) {
|
||||
setErrors((p) => ({ ...p, phone: err }));
|
||||
return;
|
||||
}
|
||||
clearError('phone');
|
||||
startCooldown();
|
||||
AuthAPI.sendSms({ phone })
|
||||
.then(() => message.success('验证码已发送'))
|
||||
.catch((e) => message.error((e as Error).message || '验证码发送失败'));
|
||||
}, [phone, startCooldown, clearError, message]);
|
||||
|
||||
// ---- 提交重置 ----
|
||||
const handleSubmit = useCallback(async () => {
|
||||
// 逐字段校验
|
||||
const newErrors: Record<string, string> = {};
|
||||
const phoneErr = validatePhone(phone);
|
||||
if (phoneErr) newErrors.phone = phoneErr;
|
||||
const smsErr = validateSmsCode(smsCode);
|
||||
if (smsErr) newErrors.smsCode = smsErr;
|
||||
const pwdErr = validatePassword(newPassword);
|
||||
if (pwdErr) newErrors.newPassword = pwdErr;
|
||||
const confirmErr = validateConfirmPassword(confirmPassword, newPassword);
|
||||
if (confirmErr) newErrors.confirmPassword = confirmErr;
|
||||
|
||||
if (Object.keys(newErrors).length > 0) {
|
||||
setErrors(newErrors);
|
||||
return;
|
||||
}
|
||||
|
||||
setErrors({});
|
||||
setSubmitting(true);
|
||||
try {
|
||||
await AuthAPI.resetPassword({
|
||||
phone,
|
||||
sms_code: smsCode,
|
||||
new_password: newPassword,
|
||||
});
|
||||
message.success('密码重置成功，请使用新密码登录');
|
||||
// 重置表单状态
|
||||
setPhone('');
|
||||
setSmsCode('');
|
||||
setNewPassword('');
|
||||
setConfirmPassword('');
|
||||
onClose();
|
||||
} catch (err) {
|
||||
message.error((err as Error).message || '密码重置失败');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}, [phone, smsCode, newPassword, confirmPassword, onClose, message]);
|
||||
|
||||
// ---- 关闭时重置 ----
|
||||
const handleClose = useCallback(() => {
|
||||
setErrors({});
|
||||
onClose();
|
||||
}, [onClose]);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
onCancel={handleClose}
|
||||
footer={null}
|
||||
width={440}
|
||||
centered
|
||||
destroyOnHidden={true}
|
||||
mask={{ closable: false }}
|
||||
styles={{
|
||||
body: {
|
||||
padding: '24px 32px 16px',
|
||||
background: isDark ? '#1A1730' : '#FFFFFF',
|
||||
},
|
||||
}}
|
||||
>
|
||||
{/* 标题 */}
|
||||
<div className="text-center mb-5">
|
||||
<Title level={5} className="!mb-1 gradient-primary-text">
|
||||
重置密码
|
||||
</Title>
|
||||
<Text type="secondary" className="text-xs">
|
||||
通过手机短信验证码重置您的密码
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
{/* 表单 */}
|
||||
<div className="space-y-4">
|
||||
{/* 手机号 */}
|
||||
<div>
|
||||
<Input
|
||||
size="large"
|
||||
prefix={<PhoneOutlined className="opacity-40" />}
|
||||
placeholder="请输入手机号"
|
||||
value={phone}
|
||||
onChange={(e) => {
|
||||
setPhone(e.target.value);
|
||||
clearError('phone');
|
||||
}}
|
||||
status={errors.phone ? 'error' : undefined}
|
||||
allowClear
|
||||
/>
|
||||
{errors.phone && (
|
||||
<Text type="danger" className="text-xs ml-1">
|
||||
{errors.phone}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 短信验证码 */}
|
||||
<div>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
size="large"
|
||||
prefix={<SafetyCertificateOutlined className="opacity-40" />}
|
||||
placeholder="请输入验证码"
|
||||
value={smsCode}
|
||||
onChange={(e) => {
|
||||
setSmsCode(e.target.value);
|
||||
clearError('smsCode');
|
||||
}}
|
||||
status={errors.smsCode ? 'error' : undefined}
|
||||
className="flex-1"
|
||||
allowClear
|
||||
/>
|
||||
<Button
|
||||
size="large"
|
||||
type="primary"
|
||||
disabled={cooldown}
|
||||
onClick={handleSendSms}
|
||||
className="text-xs! shrink-0 px-3!"
|
||||
>
|
||||
{cooldown ? `${secondsLeft}s` : '发送验证码'}
|
||||
</Button>
|
||||
</div>
|
||||
{errors.smsCode && (
|
||||
<Text type="danger" className="text-xs ml-1">
|
||||
{errors.smsCode}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 新密码 */}
|
||||
<div>
|
||||
<Input.Password
|
||||
size="large"
|
||||
prefix={<LockOutlined className="opacity-40" />}
|
||||
placeholder="新密码（6~128位）"
|
||||
value={newPassword}
|
||||
onChange={(e) => {
|
||||
setNewPassword(e.target.value);
|
||||
clearError('newPassword');
|
||||
}}
|
||||
status={errors.newPassword ? 'error' : undefined}
|
||||
allowClear
|
||||
/>
|
||||
{errors.newPassword && (
|
||||
<Text type="danger" className="text-xs ml-1">
|
||||
{errors.newPassword}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 确认新密码 */}
|
||||
<div>
|
||||
<Input.Password
|
||||
size="large"
|
||||
prefix={<KeyOutlined className="opacity-40" />}
|
||||
placeholder="请再次输入新密码"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => {
|
||||
setConfirmPassword(e.target.value);
|
||||
clearError('confirmPassword');
|
||||
}}
|
||||
status={errors.confirmPassword ? 'error' : undefined}
|
||||
allowClear
|
||||
/>
|
||||
{errors.confirmPassword && (
|
||||
<Text type="danger" className="text-xs ml-1">
|
||||
{errors.confirmPassword}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 提交按钮 */}
|
||||
<Button
|
||||
type="primary"
|
||||
block
|
||||
size="large"
|
||||
loading={submitting}
|
||||
onClick={handleSubmit}
|
||||
className="h-11! text-base! font-medium! mt-2!"
|
||||
>
|
||||
重置密码
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user