54 lines
2.2 KiB
TypeScript
54 lines
2.2 KiB
TypeScript
import { useState } from "react";
|
|
import { Redirect, useLocation } from "wouter";
|
|
import { trpc } from "@/lib/trpc";
|
|
import { useAuth } from "@/_core/hooks/useAuth";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
|
|
export default function Login() {
|
|
const { user, loading } = useAuth();
|
|
const [, setLocation] = useLocation();
|
|
const utils = trpc.useUtils();
|
|
const [username, setUsername] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const login = trpc.auth.login.useMutation({
|
|
onSuccess: async (signedInUser) => {
|
|
utils.auth.me.setData(undefined, signedInUser);
|
|
await utils.auth.me.invalidate();
|
|
setLocation(signedInUser.mustChangePassword === 1 ? "/change-password" : "/");
|
|
},
|
|
});
|
|
|
|
if (!loading && user) return <Redirect to={user.mustChangePassword === 1 ? "/change-password" : "/"} />;
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background flex items-center justify-center p-4">
|
|
<form
|
|
className="w-full max-w-sm industrial-panel p-8 space-y-5"
|
|
onSubmit={(event) => {
|
|
event.preventDefault();
|
|
login.mutate({ username, password });
|
|
}}
|
|
>
|
|
<div>
|
|
<h1 className="text-xl font-semibold">宏量点云处理系统</h1>
|
|
<p className="text-sm text-muted-foreground mt-1">使用本地账号登录</p>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="username">用户名</Label>
|
|
<Input id="username" autoComplete="username" autoFocus value={username} onChange={e => setUsername(e.target.value)} required />
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="password">密码</Label>
|
|
<Input id="password" type="password" autoComplete="current-password" value={password} onChange={e => setPassword(e.target.value)} required />
|
|
</div>
|
|
{login.error && <p className="text-sm text-destructive" role="alert">{login.error.message}</p>}
|
|
<Button className="w-full" type="submit" disabled={login.isPending || !username || !password}>
|
|
{login.isPending ? "正在登录…" : "登录"}
|
|
</Button>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|