251127:1700 Frontend Start Build

2025-11-27 17:08:49 +07:00
parent 6abb746e08
commit 4f3aa87a93
1795 changed files with 893474 additions and 10 deletions
--- a/frontend/app/(auth)/login/page.tsx
+++ b/frontend/app/(auth)/login/page.tsx
@@ -0,0 +1,165 @@
+// File: app/(auth)/login/page.tsx
+"use client";
+
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import { signIn } from "next-auth/react";
+import { useRouter } from "next/navigation";
+import { Eye, EyeOff, Loader2 } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+// กำหนด Schema สำหรับตรวจสอบข้อมูลฟอร์ม
+const loginSchema = z.object({
+  username: z.string().min(1, "กรุณาระบุชื่อผู้ใช้งาน"),
+  password: z.string().min(1, "กรุณาระบุรหัสผ่าน"),
+});
+
+type LoginValues = z.infer<typeof loginSchema>;
+
+export default function LoginPage() {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+
+  // ตั้งค่า React Hook Form
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<LoginValues>({
+    resolver: zodResolver(loginSchema),
+    defaultValues: {
+      username: "",
+      password: "",
+    },
+  });
+
+  // ฟังก์ชันเมื่อกด Submit
+  async function onSubmit(data: LoginValues) {
+    setIsLoading(true);
+
+    try {
+      // เรียกใช้ NextAuth signIn (Credential Provider)
+      // หมายเหตุ: เรายังไม่ได้ตั้งค่า AuthOption ใน route.ts แต่นี่คือโค้ดฝั่ง Client ที่ถูกต้อง
+      const result = await signIn("credentials", {
+        username: data.username,
+        password: data.password,
+        redirect: false, // เราจะจัดการ Redirect เอง
+      });
+
+      if (result?.error) {
+        // กรณี Login ไม่สำเร็จ
+        console.error("Login failed:", result.error);
+        // TODO: เปลี่ยนเป็น Toast Notification ในอนาคต
+        alert("เข้าสู่ระบบไม่สำเร็จ: ชื่อผู้ใช้งานหรือรหัสผ่านไม่ถูกต้อง");
+        return;
+      }
+
+      // Login สำเร็จ -> ไปหน้า Dashboard
+      router.push("/dashboard");
+      router.refresh(); // Refresh เพื่อให้ Server Component รับรู้ Session ใหม่
+    } catch (error) {
+      console.error("Login error:", error);
+      alert("เกิดข้อผิดพลาดที่ไม่คาดคิด");
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  return (
+    <Card className="w-full max-w-sm shadow-lg">
+      <CardHeader className="space-y-1 text-center">
+        <CardTitle className="text-2xl font-bold text-primary">
+          LCBP3 DMS
+        </CardTitle>
+        <CardDescription>
+          กรอกชื่อผู้ใช้งานและรหัสผ่านเพื่อเข้าสู่ระบบ
+        </CardDescription>
+      </CardHeader>
+      
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <CardContent className="grid gap-4">
+          {/* Username Field */}
+          <div className="grid gap-2">
+            <Label htmlFor="username">ชื่อผู้ใช้งาน</Label>
+            <Input
+              id="username"
+              placeholder="username"
+              type="text"
+              autoCapitalize="none"
+              autoComplete="username"
+              autoCorrect="off"
+              disabled={isLoading}
+              className={errors.username ? "border-destructive" : ""}
+              {...register("username")}
+            />
+            {errors.username && (
+              <p className="text-xs text-destructive">
+                {errors.username.message}
+              </p>
+            )}
+          </div>
+
+          {/* Password Field */}
+          <div className="grid gap-2">
+            <Label htmlFor="password">รหัสผ่าน</Label>
+            <div className="relative">
+              <Input
+                id="password"
+                placeholder="••••••••"
+                type={showPassword ? "text" : "password"}
+                autoComplete="current-password"
+                disabled={isLoading}
+                className={errors.password ? "border-destructive pr-10" : "pr-10"}
+                {...register("password")}
+              />
+              {/* ปุ่ม Show/Hide Password */}
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                onClick={() => setShowPassword(!showPassword)}
+                disabled={isLoading}
+              >
+                {showPassword ? (
+                  <EyeOff className="h-4 w-4 text-muted-foreground" />
+                ) : (
+                  <Eye className="h-4 w-4 text-muted-foreground" />
+                )}
+                <span className="sr-only">
+                  {showPassword ? "Hide password" : "Show password"}
+                </span>
+              </Button>
+            </div>
+            {errors.password && (
+              <p className="text-xs text-destructive">
+                {errors.password.message}
+              </p>
+            )}
+          </div>
+        </CardContent>
+
+        <CardFooter>
+          <Button className="w-full" type="submit" disabled={isLoading}>
+            {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            เข้าสู่ระบบ
+          </Button>
+        </CardFooter>
+      </form>
+    </Card>
+  );
+}