141 lines
4.8 KiB
TypeScript
141 lines
4.8 KiB
TypeScript
import { useState } from "react";
|
|
import { Form, useActionData, useNavigation } from "@remix-run/react";
|
|
import { type MetaFunction, type ActionFunctionArgs, redirect, type LoaderFunctionArgs } from "@remix-run/node";
|
|
import styles from "~/styles/pages/login.css?url";
|
|
import { createUserSession, getUserSession, getSession, type UserRole } 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;
|
|
const userRole = formData.get("userRole") as UserRole || 'common';
|
|
|
|
console.log("userRole-----", userRole);
|
|
|
|
// 简单的登录验证，实际应用中应该进行真正的身份验证
|
|
if (!username || !password) {
|
|
return Response.json({ error: "用户名和密码不能为空" });
|
|
}
|
|
|
|
// 在实际应用中，这里应该是对用户名和密码的验证逻辑
|
|
// 简化起见，我们直接视为登录成功
|
|
|
|
// 获取session中存储的重定向URL，如果没有则默认到/
|
|
const session = await getSession(request);
|
|
// 查看session中存储的redirectTo值
|
|
const redirectTo = session.get("redirectTo") || "/";
|
|
// console.log("登录后重定向到:", redirectTo);
|
|
|
|
// 创建登录会话并重定向
|
|
return createUserSession(true, userRole, redirectTo);
|
|
}
|
|
|
|
// 加载器，获取当前会话状态
|
|
export async function loader({ request }: LoaderFunctionArgs) {
|
|
const { isAuthenticated } = await getUserSession(request);
|
|
|
|
// 如果已登录，重定向到首页
|
|
if (isAuthenticated) {
|
|
return redirect("/");
|
|
}
|
|
|
|
return Response.json({ isAuthenticated });
|
|
}
|
|
|
|
export default function Login() {
|
|
const [username, setUsername] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [userRole, setUserRole] = useState<UserRole>("common");
|
|
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>
|
|
|
|
<div className="form-group">
|
|
<label htmlFor="userRole">用户角色</label>
|
|
<select
|
|
id="userRole"
|
|
name="userRole"
|
|
value={userRole}
|
|
onChange={(e) => setUserRole(e.target.value as UserRole)}
|
|
className="form-input"
|
|
required
|
|
>
|
|
<option value="common">普通用户</option>
|
|
<option value="developer">开发者</option>
|
|
</select>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
className="login-button"
|
|
disabled={isSubmitting}
|
|
>
|
|
{isSubmitting ? "登录中..." : "登录"}
|
|
</button>
|
|
</Form>
|
|
</div>
|
|
|
|
<div className="login-footer">
|
|
<p>© 2024 中国烟草 版权所有</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|