feat: improve login

packages/client/src/page/loginPage.tsx

@@ -5,54 +5,124 @@ import { Label } from "@/components/ui/label.tsx";
 import { doLogin } from "@/state/user.ts";
 import { useState } from "react";
 import { useLocation } from "wouter";
+import { Eye, EyeOff } from "lucide-react";
+import { LogInIcon, User, Loader2 } from "lucide-react";
 
 export function LoginForm() {
-    const [username, setUsername] = useState("");
-    const [password, setPassword] = useState("");
-    const [, setLocation] = useLocation();
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const [, setLocation] = useLocation();
 
-    return (
-      <Card className="w-full max-w-sm">
-        <CardHeader>
-          <CardTitle className="text-2xl">Login</CardTitle>
-          <CardDescription>
-            Enter your email below to login to your account.
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="grid gap-4">
-          <div className="grid gap-2">
-            <Label htmlFor="username">Username</Label>
-            <Input id="username" type="text" placeholder="username" required value={username} onChange={e=> setUsername(e.target.value)}/>
+  const handleLogin = async () => {
+    if (!username || !password) {
+      alert("사용자 이름과 비밀번호를 입력해주세요.");
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      const result = await doLogin({
+        username,
+        password,
+      });
+
+      if (typeof result === "string") {
+        alert(result);
+      } else {
+        setLocation("/");
+      }
+    } catch (error) {
+      alert("로그인 중 오류가 발생했습니다.");
+      console.error(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Card className="w-full max-w-md shadow-lg rounded-xl">
+      <CardHeader className="space-y-2">
+        <CardTitle className="text-2xl inline-flex items-center gap-2">
+          <span className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-primary/10">
+            <LogInIcon className="w-6 h-6 text-primary" />
+          </span>
+          Login
+        </CardTitle>
+        <CardDescription>
+          Enter your email below to login to your account.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="username" className="flex items-center gap-2">
+            <User className="w-4 h-4" />
+            Username
+          </Label>
+          <Input id="username"
+            type="text"
+            placeholder="username"
+            required
+            value={username}
+            onChange={e => setUsername(e.target.value)}
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="password">Password</Label>
+          <div className="relative">
+            <Input
+              id="password"
+              type={showPassword ? "text" : "password"}
+              required
+              value={password}
+              onChange={e => setPassword(e.target.value)}
+            />
+            <button
+              type="button"
+              className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700"
+              onClick={() => setShowPassword(!showPassword)}
+              aria-label={showPassword ? "비밀번호 숨기기" : "비밀번호 표시하기"}
+            >
+              {showPassword ? (
+                <EyeOff className="h-4 w-4" />
+              ) : (
+                <Eye className="h-4 w-4" />
+              )}
+            </button>
           </div>
-          <div className="grid gap-2">
-            <Label htmlFor="password">Password</Label>
-            <Input id="password" type="password" required value={password} onChange={e=> setPassword(e.target.value)}/>
-          </div>
-        </CardContent>
-        <CardFooter>
-          <Button className="w-full" onClick={()=>{
-                doLogin({
-                    username,
-                    password,
-                }).then((r)=>{
-                    if (typeof r === "string") {
-                        alert(r);
-                    } else {
-                        setLocation("/");
-                    }
-                })
-          }}>Sign in</Button>
-        </CardFooter>
-      </Card>
-    )
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button
+          className="w-full font-semibold transition-all"
+          size="lg"
+          disabled={isLoading}
+          onClick={handleLogin}
+        >
+          {isLoading ? (
+            <>
+              <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+              Logging in...
+            </>
+          ) : (
+            <>Sign In</>
+          )}
+        </Button>
+      </CardFooter>
+    </Card>
+  )
 }
 
 export function LoginPage() {
-    return (
-      <div className="flex items-center justify-center h-screen">
+  return (
+    <div className="flex items-center justify-center min-h-screen 
+      p-4">
+      <div className="w-full max-w-md">
         <LoginForm />
       </div>
-    )
+    </div>
+  )
 }
 
 export default LoginPage;

packages/client/src/state/user.ts

@@ -97,6 +97,12 @@ export const doLogin = async (userLoginInfo: LoginRequest): Promise<string | Log
 	return b;
 };
 
+Object.assign(window, {
+	doLogin,
+	doLogout,
+	refresh,
+});
+
 export const doResetPassword = async (username: string, oldpassword: string, newpassword: string) => {
 	const u = makeApiUrl("/api/user/reset");
 	const res = await fetch(u, {