120 lines
4.0 KiB
TypeScript
120 lines
4.0 KiB
TypeScript
import { useState } from "react";
|
|
import { Form, useActionData, useNavigation } from "@remix-run/react";
|
|
import { type MetaFunction, type ActionFunctionArgs, redirect, json, type LoaderFunctionArgs } from "@remix-run/node";
|
|
import styles from "~/styles/pages/login.css?url";
|
|
import { createUserSession, getUserSession, getSession } from "~/root";
|
|
|
|
export const links = () => [
|
|
{ rel: "stylesheet", href: styles }
|
|
];
|
|
|
|
export const meta: MetaFunction = () => {
|
|
return [
|
|
{ title: "中国烟草AI合同及卷宗审核系统 - 登录" },
|
|
{ name: "description", content: "中国烟草AI合同及卷宗审核系统登录页面" },
|
|
];
|
|
};
|
|
|
|
// 处理表单提交的action
|
|
export async function action({ request }: ActionFunctionArgs) {
|
|
const formData = await request.formData();
|
|
const username = formData.get("username") as string;
|
|
const password = formData.get("password") as string;
|
|
|
|
// 简单的登录验证，实际应用中应该进行真正的身份验证
|
|
if (!username || !password) {
|
|
return json({ error: "用户名和密码不能为空" });
|
|
}
|
|
|
|
// 在实际应用中，这里应该是对用户名和密码的验证逻辑
|
|
// 简化起见，我们直接视为登录成功
|
|
|
|
// 获取session中存储的重定向URL，如果没有则默认到/home
|
|
const session = await getSession(request);
|
|
const redirectTo = session.get("redirectTo") || "/home";
|
|
|
|
// 创建登录会话并重定向
|
|
return createUserSession(true, redirectTo);
|
|
}
|
|
|
|
// 加载器，获取当前会话状态
|
|
export async function loader({ request }: LoaderFunctionArgs) {
|
|
const { isAuthenticated } = await getUserSession(request);
|
|
|
|
// 如果已登录，重定向到首页
|
|
if (isAuthenticated) {
|
|
return redirect("/home");
|
|
}
|
|
|
|
return Response.json({ isAuthenticated });
|
|
}
|
|
|
|
export default function Login() {
|
|
const [username, setUsername] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const actionData = useActionData<typeof action>();
|
|
const navigation = useNavigation();
|
|
|
|
// 判断是否正在提交表单
|
|
const isSubmitting = navigation.state === "submitting";
|
|
|
|
return (
|
|
<div className="login-page">
|
|
<div className="login-container">
|
|
<div className="login-header">
|
|
<img src="/logo.png" alt="中国烟草" className="login-logo" />
|
|
<h1 className="login-title">中国烟草AI合同及卷宗审核系统</h1>
|
|
</div>
|
|
|
|
<div className="login-form-container">
|
|
<h2 className="login-subtitle">用户登录</h2>
|
|
<Form method="post" className="login-form">
|
|
{actionData?.error && (
|
|
<div className="error-message">{actionData.error}</div>
|
|
)}
|
|
|
|
<div className="form-group">
|
|
<label htmlFor="username">用户名</label>
|
|
<input
|
|
type="text"
|
|
id="username"
|
|
name="username"
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
className="form-input"
|
|
placeholder="请输入用户名"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="form-group">
|
|
<label htmlFor="password">密码</label>
|
|
<input
|
|
type="password"
|
|
id="password"
|
|
name="password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
className="form-input"
|
|
placeholder="请输入密码"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
className="login-button"
|
|
disabled={isSubmitting}
|
|
>
|
|
{isSubmitting ? "登录中..." : "登录"}
|
|
</button>
|
|
</Form>
|
|
</div>
|
|
|
|
<div className="login-footer">
|
|
<p>© 2024 中国烟草 版权所有</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|