mirror of
https://github.com/laoxong/nofx.git
synced 2026-06-04 09:58:22 +08:00
feat(auth): implement password reset with Google Authenticator verification (#537)
实现忘记密码功能,用户可以通过邮箱和Google Authenticator验证码重置密码。 **后端改动:** - 添加 `/api/reset-password` 接口 - 实现 `UpdateUserPassword` 数据库方法 - 验证邮箱、OTP和新密码 **前端改动:** - 新增 `ResetPasswordPage` 组件 - 在登录页面添加"忘记密码"链接 - 实现密码重置表单(新密码、确认密码、OTP验证) - 添加密码可见性切换功能 - 支持中英文国际化 **安全特性:** - 要求Google Authenticator验证 - 密码强度验证(最少6位) - 密码确认匹配检查 - 密码哈希存储 Co-authored-by: tinkle-community <tinklefund@gmail.com>
This commit is contained in:
@@ -79,6 +79,7 @@ func (s *Server) setupRoutes() {
|
|||||||
api.POST("/login", s.handleLogin)
|
api.POST("/login", s.handleLogin)
|
||||||
api.POST("/verify-otp", s.handleVerifyOTP)
|
api.POST("/verify-otp", s.handleVerifyOTP)
|
||||||
api.POST("/complete-registration", s.handleCompleteRegistration)
|
api.POST("/complete-registration", s.handleCompleteRegistration)
|
||||||
|
api.POST("/reset-password", s.handleResetPassword)
|
||||||
|
|
||||||
// 系统支持的模型和交易所(无需认证)
|
// 系统支持的模型和交易所(无需认证)
|
||||||
api.GET("/supported-models", s.handleGetSupportedModels)
|
api.GET("/supported-models", s.handleGetSupportedModels)
|
||||||
@@ -1728,6 +1729,50 @@ func (s *Server) handleVerifyOTP(c *gin.Context) {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// handleResetPassword 重置密码(通过邮箱 + OTP 验证)
|
||||||
|
func (s *Server) handleResetPassword(c *gin.Context) {
|
||||||
|
var req struct {
|
||||||
|
Email string `json:"email" binding:"required,email"`
|
||||||
|
NewPassword string `json:"new_password" binding:"required,min=6"`
|
||||||
|
OTPCode string `json:"otp_code" binding:"required"`
|
||||||
|
}
|
||||||
|
|
||||||
|
if err := c.ShouldBindJSON(&req); err != nil {
|
||||||
|
c.JSON(http.StatusBadRequest, gin.H{"error": err.Error()})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 查询用户
|
||||||
|
user, err := s.database.GetUserByEmail(req.Email)
|
||||||
|
if err != nil {
|
||||||
|
c.JSON(http.StatusNotFound, gin.H{"error": "邮箱不存在"})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 验证 OTP
|
||||||
|
if !auth.VerifyOTP(user.OTPSecret, req.OTPCode) {
|
||||||
|
c.JSON(http.StatusBadRequest, gin.H{"error": "Google Authenticator 验证码错误"})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 生成新密码哈希
|
||||||
|
newPasswordHash, err := auth.HashPassword(req.NewPassword)
|
||||||
|
if err != nil {
|
||||||
|
c.JSON(http.StatusInternalServerError, gin.H{"error": "密码处理失败"})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
// 更新密码
|
||||||
|
err = s.database.UpdateUserPassword(user.ID, newPasswordHash)
|
||||||
|
if err != nil {
|
||||||
|
c.JSON(http.StatusInternalServerError, gin.H{"error": "密码更新失败"})
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
log.Printf("✓ 用户 %s 密码已重置", user.Email)
|
||||||
|
c.JSON(http.StatusOK, gin.H{"message": "密码重置成功,请使用新密码登录"})
|
||||||
|
}
|
||||||
|
|
||||||
// initUserDefaultConfigs 为新用户初始化默认的模型和交易所配置
|
// initUserDefaultConfigs 为新用户初始化默认的模型和交易所配置
|
||||||
func (s *Server) initUserDefaultConfigs(userID string) error {
|
func (s *Server) initUserDefaultConfigs(userID string) error {
|
||||||
// 注释掉自动创建默认配置,让用户手动添加
|
// 注释掉自动创建默认配置,让用户手动添加
|
||||||
|
|||||||
@@ -546,6 +546,16 @@ func (d *Database) UpdateUserOTPVerified(userID string, verified bool) error {
|
|||||||
return err
|
return err
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// UpdateUserPassword 更新用户密码
|
||||||
|
func (d *Database) UpdateUserPassword(userID, passwordHash string) error {
|
||||||
|
_, err := d.db.Exec(`
|
||||||
|
UPDATE users
|
||||||
|
SET password_hash = ?, updated_at = CURRENT_TIMESTAMP
|
||||||
|
WHERE id = ?
|
||||||
|
`, passwordHash, userID)
|
||||||
|
return err
|
||||||
|
}
|
||||||
|
|
||||||
// GetAIModels 获取用户的AI模型配置
|
// GetAIModels 获取用户的AI模型配置
|
||||||
func (d *Database) GetAIModels(userID string) ([]*AIModelConfig, error) {
|
func (d *Database) GetAIModels(userID string) ([]*AIModelConfig, error) {
|
||||||
rows, err := d.db.Query(`
|
rows, err := d.db.Query(`
|
||||||
|
|||||||
@@ -5,6 +5,7 @@ import { EquityChart } from './components/EquityChart'
|
|||||||
import { AITradersPage } from './components/AITradersPage'
|
import { AITradersPage } from './components/AITradersPage'
|
||||||
import { LoginPage } from './components/LoginPage'
|
import { LoginPage } from './components/LoginPage'
|
||||||
import { RegisterPage } from './components/RegisterPage'
|
import { RegisterPage } from './components/RegisterPage'
|
||||||
|
import { ResetPasswordPage } from './components/ResetPasswordPage'
|
||||||
import { CompetitionPage } from './components/CompetitionPage'
|
import { CompetitionPage } from './components/CompetitionPage'
|
||||||
import { LandingPage } from './pages/LandingPage'
|
import { LandingPage } from './pages/LandingPage'
|
||||||
import HeaderBar from './components/landing/HeaderBar'
|
import HeaderBar from './components/landing/HeaderBar'
|
||||||
@@ -230,6 +231,9 @@ function App() {
|
|||||||
if (route === '/register') {
|
if (route === '/register') {
|
||||||
return <RegisterPage />
|
return <RegisterPage />
|
||||||
}
|
}
|
||||||
|
if (route === '/reset-password') {
|
||||||
|
return <ResetPasswordPage />
|
||||||
|
}
|
||||||
if (route === '/competition') {
|
if (route === '/competition') {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
|
|||||||
@@ -146,6 +146,19 @@ export function LoginPage() {
|
|||||||
placeholder={t('passwordPlaceholder', language)}
|
placeholder={t('passwordPlaceholder', language)}
|
||||||
required
|
required
|
||||||
/>
|
/>
|
||||||
|
<div className="text-right mt-2">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => {
|
||||||
|
window.history.pushState({}, '', '/reset-password')
|
||||||
|
window.dispatchEvent(new PopStateEvent('popstate'))
|
||||||
|
}}
|
||||||
|
className="text-xs hover:underline"
|
||||||
|
style={{ color: '#F0B90B' }}
|
||||||
|
>
|
||||||
|
{t('forgotPassword', language)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{error && (
|
{error && (
|
||||||
|
|||||||
@@ -0,0 +1,204 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { useAuth } from '../contexts/AuthContext';
|
||||||
|
import { useLanguage } from '../contexts/LanguageContext';
|
||||||
|
import { t } from '../i18n/translations';
|
||||||
|
import { Header } from './Header';
|
||||||
|
import { ArrowLeft, KeyRound, Eye, EyeOff } from 'lucide-react';
|
||||||
|
|
||||||
|
export function ResetPasswordPage() {
|
||||||
|
const { language } = useLanguage();
|
||||||
|
const { resetPassword } = useAuth();
|
||||||
|
const [email, setEmail] = useState('');
|
||||||
|
const [newPassword, setNewPassword] = useState('');
|
||||||
|
const [confirmPassword, setConfirmPassword] = useState('');
|
||||||
|
const [otpCode, setOtpCode] = useState('');
|
||||||
|
const [error, setError] = useState('');
|
||||||
|
const [success, setSuccess] = useState(false);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [showPassword, setShowPassword] = useState(false);
|
||||||
|
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
|
||||||
|
|
||||||
|
const handleResetPassword = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setError('');
|
||||||
|
setSuccess(false);
|
||||||
|
|
||||||
|
// 验证两次密码是否一致
|
||||||
|
if (newPassword !== confirmPassword) {
|
||||||
|
setError(t('passwordMismatch', language));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
const result = await resetPassword(email, newPassword, otpCode);
|
||||||
|
|
||||||
|
if (result.success) {
|
||||||
|
setSuccess(true);
|
||||||
|
// 3秒后跳转到登录页面
|
||||||
|
setTimeout(() => {
|
||||||
|
window.history.pushState({}, '', '/login');
|
||||||
|
window.dispatchEvent(new PopStateEvent('popstate'));
|
||||||
|
}, 3000);
|
||||||
|
} else {
|
||||||
|
setError(result.message || t('resetPasswordFailed', language));
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoading(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen" style={{ background: '#0B0E11' }}>
|
||||||
|
<Header simple />
|
||||||
|
|
||||||
|
<div className="flex items-center justify-center" style={{ minHeight: 'calc(100vh - 80px)' }}>
|
||||||
|
<div className="w-full max-w-md">
|
||||||
|
{/* Back to Login */}
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
window.history.pushState({}, '', '/login');
|
||||||
|
window.dispatchEvent(new PopStateEvent('popstate'));
|
||||||
|
}}
|
||||||
|
className="flex items-center gap-2 mb-6 text-sm hover:text-[#F0B90B] transition-colors"
|
||||||
|
style={{ color: '#848E9C' }}
|
||||||
|
>
|
||||||
|
<ArrowLeft className="w-4 h-4" />
|
||||||
|
{t('backToLogin', language)}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Logo */}
|
||||||
|
<div className="text-center mb-8">
|
||||||
|
<div className="w-16 h-16 mx-auto mb-4 flex items-center justify-center rounded-full" style={{ background: 'rgba(240, 185, 11, 0.1)' }}>
|
||||||
|
<KeyRound className="w-8 h-8" style={{ color: '#F0B90B' }} />
|
||||||
|
</div>
|
||||||
|
<h1 className="text-2xl font-bold" style={{ color: '#EAECEF' }}>
|
||||||
|
{t('resetPasswordTitle', language)}
|
||||||
|
</h1>
|
||||||
|
<p className="text-sm mt-2" style={{ color: '#848E9C' }}>
|
||||||
|
使用邮箱和 Google Authenticator 重置密码
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Reset Password Form */}
|
||||||
|
<div className="rounded-lg p-6" style={{ background: '#1E2329', border: '1px solid #2B3139' }}>
|
||||||
|
{success ? (
|
||||||
|
<div className="text-center py-8">
|
||||||
|
<div className="text-5xl mb-4">✅</div>
|
||||||
|
<p className="text-lg font-semibold mb-2" style={{ color: '#EAECEF' }}>
|
||||||
|
{t('resetPasswordSuccess', language)}
|
||||||
|
</p>
|
||||||
|
<p className="text-sm" style={{ color: '#848E9C' }}>
|
||||||
|
3秒后将自动跳转到登录页面...
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<form onSubmit={handleResetPassword} className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold mb-2" style={{ color: '#EAECEF' }}>
|
||||||
|
{t('email', language)}
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
value={email}
|
||||||
|
onChange={(e) => setEmail(e.target.value)}
|
||||||
|
className="w-full px-3 py-2 rounded"
|
||||||
|
style={{ background: '#0B0E11', border: '1px solid #2B3139', color: '#EAECEF' }}
|
||||||
|
placeholder={t('emailPlaceholder', language)}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold mb-2" style={{ color: '#EAECEF' }}>
|
||||||
|
{t('newPassword', language)}
|
||||||
|
</label>
|
||||||
|
<div className="relative">
|
||||||
|
<input
|
||||||
|
type={showPassword ? 'text' : 'password'}
|
||||||
|
value={newPassword}
|
||||||
|
onChange={(e) => setNewPassword(e.target.value)}
|
||||||
|
className="w-full px-3 py-2 pr-10 rounded"
|
||||||
|
style={{ background: '#0B0E11', border: '1px solid #2B3139', color: '#EAECEF' }}
|
||||||
|
placeholder={t('newPasswordPlaceholder', language)}
|
||||||
|
required
|
||||||
|
minLength={6}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setShowPassword(!showPassword)}
|
||||||
|
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-300"
|
||||||
|
>
|
||||||
|
{showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold mb-2" style={{ color: '#EAECEF' }}>
|
||||||
|
{t('confirmPassword', language)}
|
||||||
|
</label>
|
||||||
|
<div className="relative">
|
||||||
|
<input
|
||||||
|
type={showConfirmPassword ? 'text' : 'password'}
|
||||||
|
value={confirmPassword}
|
||||||
|
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||||
|
className="w-full px-3 py-2 pr-10 rounded"
|
||||||
|
style={{ background: '#0B0E11', border: '1px solid #2B3139', color: '#EAECEF' }}
|
||||||
|
placeholder={t('confirmPasswordPlaceholder', language)}
|
||||||
|
required
|
||||||
|
minLength={6}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setShowConfirmPassword(!showConfirmPassword)}
|
||||||
|
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-300"
|
||||||
|
>
|
||||||
|
{showConfirmPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-semibold mb-2" style={{ color: '#EAECEF' }}>
|
||||||
|
{t('otpCode', language)}
|
||||||
|
</label>
|
||||||
|
<div className="text-center mb-3">
|
||||||
|
<div className="text-3xl">📱</div>
|
||||||
|
<p className="text-xs mt-1" style={{ color: '#848E9C' }}>
|
||||||
|
打开 Google Authenticator 获取6位验证码
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={otpCode}
|
||||||
|
onChange={(e) => setOtpCode(e.target.value.replace(/\D/g, '').slice(0, 6))}
|
||||||
|
className="w-full px-3 py-2 rounded text-center text-2xl font-mono"
|
||||||
|
style={{ background: '#0B0E11', border: '1px solid #2B3139', color: '#EAECEF' }}
|
||||||
|
placeholder={t('otpPlaceholder', language)}
|
||||||
|
maxLength={6}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error && (
|
||||||
|
<div className="text-sm px-3 py-2 rounded" style={{ background: 'rgba(246, 70, 93, 0.1)', color: '#F6465D' }}>
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={loading || otpCode.length !== 6}
|
||||||
|
className="w-full px-4 py-2 rounded text-sm font-semibold transition-all hover:scale-105 disabled:opacity-50"
|
||||||
|
style={{ background: '#F0B90B', color: '#000' }}
|
||||||
|
>
|
||||||
|
{loading ? t('loading', language) : t('resetPasswordButton', language)}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -37,6 +37,11 @@ interface AuthContextType {
|
|||||||
userID: string,
|
userID: string,
|
||||||
otpCode: string
|
otpCode: string
|
||||||
) => Promise<{ success: boolean; message?: string }>
|
) => Promise<{ success: boolean; message?: string }>
|
||||||
|
resetPassword: (
|
||||||
|
email: string,
|
||||||
|
newPassword: string,
|
||||||
|
otpCode: string
|
||||||
|
) => Promise<{ success: boolean; message?: string }>
|
||||||
logout: () => void
|
logout: () => void
|
||||||
isLoading: boolean
|
isLoading: boolean
|
||||||
}
|
}
|
||||||
@@ -220,6 +225,36 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const resetPassword = async (
|
||||||
|
email: string,
|
||||||
|
newPassword: string,
|
||||||
|
otpCode: string
|
||||||
|
) => {
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/reset-password', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
email,
|
||||||
|
new_password: newPassword,
|
||||||
|
otp_code: otpCode,
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
|
||||||
|
const data = await response.json()
|
||||||
|
|
||||||
|
if (response.ok) {
|
||||||
|
return { success: true, message: data.message }
|
||||||
|
} else {
|
||||||
|
return { success: false, message: data.error }
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
return { success: false, message: '密码重置失败,请重试' }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const logout = () => {
|
const logout = () => {
|
||||||
setUser(null)
|
setUser(null)
|
||||||
setToken(null)
|
setToken(null)
|
||||||
@@ -236,6 +271,7 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
|
|||||||
register,
|
register,
|
||||||
verifyOTP,
|
verifyOTP,
|
||||||
completeRegistration,
|
completeRegistration,
|
||||||
|
resetPassword,
|
||||||
logout,
|
logout,
|
||||||
isLoading,
|
isLoading,
|
||||||
}}
|
}}
|
||||||
|
|||||||
@@ -336,6 +336,14 @@ export const translations = {
|
|||||||
forgotPassword: 'Forgot password?',
|
forgotPassword: 'Forgot password?',
|
||||||
rememberMe: 'Remember me',
|
rememberMe: 'Remember me',
|
||||||
otpCode: 'OTP Code',
|
otpCode: 'OTP Code',
|
||||||
|
resetPassword: 'Reset Password',
|
||||||
|
resetPasswordTitle: 'Reset your password',
|
||||||
|
newPassword: 'New Password',
|
||||||
|
newPasswordPlaceholder: 'Enter new password (at least 6 characters)',
|
||||||
|
resetPasswordButton: 'Reset Password',
|
||||||
|
resetPasswordSuccess: 'Password reset successful! Please login with your new password',
|
||||||
|
resetPasswordFailed: 'Password reset failed',
|
||||||
|
backToLogin: 'Back to Login',
|
||||||
scanQRCode: 'Scan QR Code',
|
scanQRCode: 'Scan QR Code',
|
||||||
enterOTPCode: 'Enter 6-digit OTP code',
|
enterOTPCode: 'Enter 6-digit OTP code',
|
||||||
verifyOTP: 'Verify OTP',
|
verifyOTP: 'Verify OTP',
|
||||||
@@ -811,6 +819,14 @@ export const translations = {
|
|||||||
loginNow: '立即登录',
|
loginNow: '立即登录',
|
||||||
forgotPassword: '忘记密码?',
|
forgotPassword: '忘记密码?',
|
||||||
rememberMe: '记住我',
|
rememberMe: '记住我',
|
||||||
|
resetPassword: '重置密码',
|
||||||
|
resetPasswordTitle: '重置您的密码',
|
||||||
|
newPassword: '新密码',
|
||||||
|
newPasswordPlaceholder: '请输入新密码(至少6位)',
|
||||||
|
resetPasswordButton: '重置密码',
|
||||||
|
resetPasswordSuccess: '密码重置成功!请使用新密码登录',
|
||||||
|
resetPasswordFailed: '密码重置失败',
|
||||||
|
backToLogin: '返回登录',
|
||||||
otpCode: 'OTP验证码',
|
otpCode: 'OTP验证码',
|
||||||
scanQRCode: '扫描二维码',
|
scanQRCode: '扫描二维码',
|
||||||
enterOTPCode: '输入6位OTP验证码',
|
enterOTPCode: '输入6位OTP验证码',
|
||||||
|
|||||||
@@ -21,5 +21,6 @@
|
|||||||
"noFallthroughCasesInSwitch": true
|
"noFallthroughCasesInSwitch": true
|
||||||
},
|
},
|
||||||
"include": ["src"],
|
"include": ["src"],
|
||||||
|
"exclude": ["src/**/*.test.tsx", "src/**/*.test.ts", "src/test"],
|
||||||
"references": [{ "path": "./tsconfig.node.json" }]
|
"references": [{ "path": "./tsconfig.node.json" }]
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user