From 960442b1fd3d3e2ae45e8dedb5541841ab7fe817 Mon Sep 17 00:00:00 2001 From: chenZB666 <3089478293@qq.com> Date: Fri, 10 Oct 2025 17:08:29 +0800 Subject: [PATCH] new change --- src/components/auth/AuthForm.tsx | 155 +++++++++++++++++++++++++++++-- src/lib/api/actions.ts | 77 ++++++++++++++- 2 files changed, 221 insertions(+), 11 deletions(-) diff --git a/src/components/auth/AuthForm.tsx b/src/components/auth/AuthForm.tsx index 499ac1b..6613087 100644 --- a/src/components/auth/AuthForm.tsx +++ b/src/components/auth/AuthForm.tsx @@ -1,12 +1,13 @@ // src/components/auth/AuthForm.tsx // 认证表单组件 - 包含登录和注册功能，同时提供测试账号信息 'use client'; -import { useState } from 'react'; +import { useState, useEffect } from 'react'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { signIn } from 'next-auth/react'; -import { register } from '@/lib/api/actions'; +import { register, getVerificationCode } from '@/lib/api/actions'; +// 由于找不到 '@/components/ui/alert' 模块，推测可能路径有误，这里使用实际路径代替，需根据项目实际情况调整 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'; import { Eye, EyeOff } from 'lucide-react'; @@ -23,6 +24,10 @@ export default function AuthForm({ type }: AuthFormProps) { const [error, setError] = useState(null); const [success, setSuccess] = useState(null); const [showPassword, setShowPassword] = useState(false); + const [verificationCode, setVerificationCode] = useState(''); + const [isSendingCode, setIsSendingCode] = useState(false); + const [countdown, setCountdown] = useState(0); + const [codeSuccessMessage, setCodeSuccessMessage] = useState(null); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); @@ -44,11 +49,22 @@ export default function AuthForm({ type }: AuthFormProps) { return; } + // 检查测试账号情况 + const isTestAccount = usernameField === 'test' && password === 'test'; + + // 对于非测试账号，验证验证码是否输入 + if (!isTestAccount && !verificationCode) { + setError('请输入验证码'); + setIsLoading(false); + return; + } + // 使用next-auth的signIn功能进行登录，设置redirect为false以便处理错误 const result = await signIn('credentials', { username: usernameField, // 使用username或email作为用户名字段 email: email, // 传递email字段 password, + verificationCode, // 传递验证码 redirect: false, // 不自动重定向，以便处理错误 callbackUrl: '/user-home' // 指定重定向目标 }); @@ -70,13 +86,21 @@ export default function AuthForm({ type }: AuthFormProps) { setError('登录过程中发生未知错误'); } } else { - // 调用注册API - const result = await register({ - username, - password, - email, - minecraftUsername - }); + // 验证验证码是否输入 + if (!verificationCode) { + setError('请输入验证码'); + setIsLoading(false); + return; + } + + // 调用注册API + const result = await register({ + username, + password, + email, + minecraftUsername, + verificationCode + }); if (result.success) { setSuccess('注册成功！即将跳转到登录页面...'); @@ -100,8 +124,59 @@ export default function AuthForm({ type }: AuthFormProps) { const resetMessages = () => { setError(null); setSuccess(null); + setCodeSuccessMessage(null); }; + // 处理获取验证码 + const handleGetVerificationCode = async () => { + // 检查是否是测试环境使用测试账号 + const isTestAccount = type === 'login' && username === 'test' && password === 'test'; + if (isTestAccount) { + setCodeSuccessMessage('测试账号无需验证码'); + return; + } + + const targetEmail = type === 'login' ? (email || username) : email; + + if (!targetEmail) { + setError(type === 'login' ? '请输入用户名/邮箱' : '请输入邮箱'); + return; + } + + // 简单的邮箱格式验证 + const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + if (type === 'register' || (type === 'login' && targetEmail.includes('@'))) { + if (!emailRegex.test(targetEmail)) { + setError('请输入有效的邮箱地址'); + return; + } + } + + setIsSendingCode(true); + try { + const result = await getVerificationCode(targetEmail); + if (result.success) { + setCodeSuccessMessage('验证码已发送，请注意查收'); + setCountdown(60); // 设置60秒倒计时 + } else { + setError(result.error); + } + } catch (error) { + console.error('获取验证码失败:', error); + setError('获取验证码失败，请稍后再试'); + } finally { + setIsSendingCode(false); + } + }; + + // 倒计时效果 + useEffect(() => { + if (countdown > 0) { + const timer = setTimeout(() => setCountdown(countdown - 1), 1000); + return () => clearTimeout(timer); + } + }, [countdown]); + // 监听输入变化，清除错误消息 const handleInputChange = (setter: React.Dispatch>) => { return (e: React.ChangeEvent) => { @@ -125,6 +200,14 @@ export default function AuthForm({ type }: AuthFormProps) { {success} )} + + {/* 验证码发送成功消息 */} + {codeSuccessMessage && ( + + 提示 + {codeSuccessMessage} + + )}
+ + {/* 验证码输入区域 */} + {type === 'login' && (username !== 'test' || password !== 'test') && ( +
+ +
+ + +
+
+ )} {type === 'register' && ( <> @@ -190,8 +300,33 @@ export default function AuthForm({ type }: AuthFormProps) { onChange={handleInputChange(setMinecraftUsername)} placeholder="您的Minecraft游戏内用户名" /> + + + {/* 注册表单的验证码输入区域 */} +
+ +
+ +
- +
+ )}