fix: AuthModal 重开时重置表单 + 邀请页加入失败显示错误
- #13: useEffect 监听 open 变化时重置所有表单状态(用户名、密码、错误等) - #14: handleJoin catch 中捕获错误消息并渲染到页面
This commit is contained in:
@@ -29,6 +29,7 @@ export default function InvitePage() {
|
|||||||
const [userCount, setUserCount] = useState(0);
|
const [userCount, setUserCount] = useState(0);
|
||||||
const [scene, setScene] = useState<SceneType>("eat");
|
const [scene, setScene] = useState<SceneType>("eat");
|
||||||
const [joining, setJoining] = useState(false);
|
const [joining, setJoining] = useState(false);
|
||||||
|
const [joinError, setJoinError] = useState("");
|
||||||
|
|
||||||
const sceneConfig = getSceneConfig(scene);
|
const sceneConfig = getSceneConfig(scene);
|
||||||
|
|
||||||
@@ -48,10 +49,12 @@ export default function InvitePage() {
|
|||||||
|
|
||||||
const handleJoin = async () => {
|
const handleJoin = async () => {
|
||||||
setJoining(true);
|
setJoining(true);
|
||||||
|
setJoinError("");
|
||||||
try {
|
try {
|
||||||
await joinRoom(roomId, getUserId());
|
await joinRoom(roomId, getUserId());
|
||||||
router.push(`/room/${roomId}`);
|
router.push(`/room/${roomId}`);
|
||||||
} catch {
|
} catch (e) {
|
||||||
|
setJoinError(e instanceof Error ? e.message : "加入失败,请重试");
|
||||||
setJoining(false);
|
setJoining(false);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@@ -187,6 +190,15 @@ export default function InvitePage() {
|
|||||||
animate={{ y: 0, opacity: 1 }}
|
animate={{ y: 0, opacity: 1 }}
|
||||||
transition={{ duration: 0.5, delay: 0.3 }}
|
transition={{ duration: 0.5, delay: 0.3 }}
|
||||||
>
|
>
|
||||||
|
{joinError && (
|
||||||
|
<motion.p
|
||||||
|
className="mb-3 text-center text-xs font-medium text-rose-400"
|
||||||
|
initial={{ opacity: 0, y: -4 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
>
|
||||||
|
{joinError}
|
||||||
|
</motion.p>
|
||||||
|
)}
|
||||||
<Button
|
<Button
|
||||||
onClick={handleJoin}
|
onClick={handleJoin}
|
||||||
size="lg"
|
size="lg"
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useState } from "react";
|
import { useState, useEffect } from "react";
|
||||||
import { motion } from "framer-motion";
|
import { motion } from "framer-motion";
|
||||||
import { X, Eye, EyeOff } from "lucide-react";
|
import { X, Eye, EyeOff } from "lucide-react";
|
||||||
import { AVATARS } from "@/lib/avatars";
|
import { AVATARS } from "@/lib/avatars";
|
||||||
@@ -36,8 +36,17 @@ export default function AuthModal({ open, onClose, onAuth, defaultTab = "login"
|
|||||||
setAvatar(AVATARS[0].emoji);
|
setAvatar(AVATARS[0].emoji);
|
||||||
setShowPassword(false);
|
setShowPassword(false);
|
||||||
setError("");
|
setError("");
|
||||||
|
setLoading(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (open) {
|
||||||
|
setTab(defaultTab);
|
||||||
|
resetForm();
|
||||||
|
}
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [open]);
|
||||||
|
|
||||||
const switchTab = (t: Tab) => {
|
const switchTab = (t: Tab) => {
|
||||||
setTab(t);
|
setTab(t);
|
||||||
resetForm();
|
resetForm();
|
||||||
|
|||||||
Reference in New Issue
Block a user