0.5 缩减重构
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
"use client";
|
||||
|
||||
"use client";
|
||||
|
||||
import { useConvexAuth, useMutation, useQuery } from "convex/react";
|
||||
import { useAuthActions } from "@convex-dev/auth/react";
|
||||
import { useState, useCallback, useEffect } from "react";
|
||||
@@ -7,22 +7,22 @@ import { useRouter } from "next/navigation";
|
||||
import { isConvexEnabled } from "@/lib/convex/enabled";
|
||||
import { api } from "@/lib/convex/api";
|
||||
import { getUserFacingErrorMessage } from "@/lib/auth/errors";
|
||||
|
||||
type AuthStep = "signIn" | "signUp";
|
||||
|
||||
// 测试账号凭据常量
|
||||
const TEST_CREDENTIALS = {
|
||||
email: "test@example.com",
|
||||
password: "Test123456",
|
||||
} as const;
|
||||
|
||||
/**
|
||||
* Convex Auth 登录/注册页面
|
||||
*
|
||||
* 支持功能:
|
||||
* - 邮箱密码登录
|
||||
* - 邮箱密码注册
|
||||
*/
|
||||
|
||||
type AuthStep = "signIn" | "signUp";
|
||||
|
||||
// 测试账号凭据常量
|
||||
const TEST_CREDENTIALS = {
|
||||
email: "test@example.com",
|
||||
password: "Test123456",
|
||||
} as const;
|
||||
|
||||
/**
|
||||
* Convex Auth 登录/注册页面
|
||||
*
|
||||
* 支持功能:
|
||||
* - 邮箱密码登录
|
||||
* - 邮箱密码注册
|
||||
*/
|
||||
export default function AuthPage() {
|
||||
const { isLoading, isAuthenticated } = useConvexAuth();
|
||||
const { signIn } = useAuthActions();
|
||||
@@ -39,7 +39,7 @@ export default function AuthPage() {
|
||||
router.replace("/");
|
||||
}
|
||||
}, [currentUser, isAuthenticated, isLoading, router]);
|
||||
|
||||
|
||||
const [flow, setFlow] = useState<AuthStep>("signIn");
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
@@ -127,36 +127,36 @@ export default function AuthPage() {
|
||||
setMessage({ type: "error", text: getUserFacingErrorMessage(error, "操作失败,请重试") });
|
||||
}
|
||||
}, [router, signIn, username]);
|
||||
|
||||
const handleSubmit = useCallback(async (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
await performSignIn(email, password, flow);
|
||||
}, [email, password, flow, performSignIn]);
|
||||
|
||||
// 检查是否启用了 Convex
|
||||
const isConvex = isConvexEnabled();
|
||||
if (!isConvex) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
||||
<div className="text-center">
|
||||
<h1 className="text-2xl font-bold text-red-600 mb-4">认证功能不可用</h1>
|
||||
<p className="text-gray-600">请启用 Convex 后端后再试</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
|
||||
<p className="text-gray-600">加载中...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
const handleSubmit = useCallback(async (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
await performSignIn(email, password, flow);
|
||||
}, [email, password, flow, performSignIn]);
|
||||
|
||||
// 检查是否启用了 Convex
|
||||
const isConvex = isConvexEnabled();
|
||||
if (!isConvex) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
||||
<div className="text-center">
|
||||
<h1 className="text-2xl font-bold text-red-600 mb-4">认证功能不可用</h1>
|
||||
<p className="text-gray-600">请启用 Convex 后端后再试</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
|
||||
<p className="text-gray-600">加载中...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (isAuthenticated && currentUser && currentUser.name) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
||||
@@ -244,29 +244,29 @@ export default function AuthPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-md w-full space-y-8">
|
||||
<div>
|
||||
<h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
|
||||
{flow === "signIn" ? "登录账户" : "创建账户"}
|
||||
</h2>
|
||||
<p className="mt-2 text-center text-sm text-gray-600">
|
||||
使用 Convex Auth
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{message && (
|
||||
<div className={`rounded-md p-4 ${
|
||||
message.type === "success" ? "bg-green-50 text-green-800" :
|
||||
message.type === "error" ? "bg-red-50 text-red-800" :
|
||||
"bg-blue-50 text-blue-800"
|
||||
}`}>
|
||||
<p className="text-sm">{message.text}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form className="mt-8 space-y-6" onSubmit={handleSubmit}>
|
||||
<div className="rounded-md shadow-sm -space-y-px">
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-md w-full space-y-8">
|
||||
<div>
|
||||
<h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
|
||||
{flow === "signIn" ? "登录账户" : "创建账户"}
|
||||
</h2>
|
||||
<p className="mt-2 text-center text-sm text-gray-600">
|
||||
使用 Convex Auth
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{message && (
|
||||
<div className={`rounded-md p-4 ${
|
||||
message.type === "success" ? "bg-green-50 text-green-800" :
|
||||
message.type === "error" ? "bg-red-50 text-red-800" :
|
||||
"bg-blue-50 text-blue-800"
|
||||
}`}>
|
||||
<p className="text-sm">{message.text}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form className="mt-8 space-y-6" onSubmit={handleSubmit}>
|
||||
<div className="rounded-md shadow-sm -space-y-px">
|
||||
<div>
|
||||
<label htmlFor="email" className="sr-only">邮箱地址</label>
|
||||
<input
|
||||
@@ -298,61 +298,61 @@ export default function AuthPage() {
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<label htmlFor="password" className="sr-only">密码</label>
|
||||
<input
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
autoComplete={flow === "signIn" ? "current-password" : "new-password"}
|
||||
required
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
|
||||
placeholder="密码(至少 8 位)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button
|
||||
type="submit"
|
||||
className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||
>
|
||||
{flow === "signIn" ? "登录" : "注册"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{flow === "signIn" && (
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setEmail(TEST_CREDENTIALS.email);
|
||||
setPassword(TEST_CREDENTIALS.password);
|
||||
// 直接调用登录逻辑
|
||||
performSignIn(TEST_CREDENTIALS.email, TEST_CREDENTIALS.password, "signIn");
|
||||
}}
|
||||
className="group relative w-full flex justify-center py-2 px-4 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
|
||||
>
|
||||
测试账号快速登录
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="text-center">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setFlow(flow === "signIn" ? "signUp" : "signIn");
|
||||
setMessage(null);
|
||||
}}
|
||||
className="text-blue-600 hover:text-blue-500 text-sm"
|
||||
>
|
||||
{flow === "signIn" ? "还没有账户?立即注册" : "已有账户?去登录"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
<label htmlFor="password" className="sr-only">密码</label>
|
||||
<input
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
autoComplete={flow === "signIn" ? "current-password" : "new-password"}
|
||||
required
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
|
||||
placeholder="密码(至少 8 位)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button
|
||||
type="submit"
|
||||
className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
|
||||
>
|
||||
{flow === "signIn" ? "登录" : "注册"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{flow === "signIn" && (
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setEmail(TEST_CREDENTIALS.email);
|
||||
setPassword(TEST_CREDENTIALS.password);
|
||||
// 直接调用登录逻辑
|
||||
performSignIn(TEST_CREDENTIALS.email, TEST_CREDENTIALS.password, "signIn");
|
||||
}}
|
||||
className="group relative w-full flex justify-center py-2 px-4 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
|
||||
>
|
||||
测试账号快速登录
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="text-center">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setFlow(flow === "signIn" ? "signUp" : "signIn");
|
||||
setMessage(null);
|
||||
}}
|
||||
className="text-blue-600 hover:text-blue-500 text-sm"
|
||||
>
|
||||
{flow === "signIn" ? "还没有账户?立即注册" : "已有账户?去登录"}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user