feat: add local access control and managed point clouds

client/src/pages/Login.tsx

@@ -0,0 +1,53 @@
+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>
+  );
+}