From 1e7160922b14b2fad8b8eaec91dc8208b0fca333 Mon Sep 17 00:00:00 2001
From: Flook <admin@softwarecraft.tech>
Date: Mon, 10 Nov 2025 05:07:03 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82?=
 =?UTF-8?q?=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B8=A5=E0=B9=87=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=81=E0=B8=AD=E0=B8=B4=E0=B8=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/LoginForm.jsx | 138 +++++++++++++++++--------------
 web/src/layouts/AuthLayout.jsx   |   4 +-
 2 files changed, 80 insertions(+), 62 deletions(-)

diff --git a/web/src/components/LoginForm.jsx b/web/src/components/LoginForm.jsx
index 6b843bd..6e0b93e 100644
--- a/web/src/components/LoginForm.jsx
+++ b/web/src/components/LoginForm.jsx
@@ -8,16 +8,15 @@ import { yupResolver } from '@hookform/resolvers/yup';
 // นำเข้า Hook API และ Components
 import { useLoginMutation } from '../services/authApi';
 import LandingIntro from './LandingIntro';
-import InputText from './InputText';
+import InputText from './InputText'; // ตรวจสอบ Path ให้ถูกต้อง
+
+import { loginSchema } from '../schemas/authSchema'; // ตรวจสอบ Path ให้ถูกต้อง
 
-import { loginSchema } from '../schemas/authSchema';
 
 export default function LoginForm() {
-    // 1. Hook สำหรับเรียก API ล็อกอิน
     const loginMutation = useLoginMutation();
     const [apiErrorMessage, setApiErrorMessage] = useState("");
 
-    // 2. Hook Form Setup
     const {
         register,
         handleSubmit,
@@ -30,13 +29,11 @@ export default function LoginForm() {
         }
     });
 
-    // 3. Form Submission Logic
     const onSubmit = (data) => {
         setApiErrorMessage("");
 
         // เรียกใช้ Mutation (Token + Fetch User)
         loginMutation.mutate({
-            // ส่ง 'username' และ 'password' ตรงตาม API
             username: data.username,
             password: data.password
         }, {
@@ -49,73 +46,94 @@ export default function LoginForm() {
     const loading = loginMutation.isPending;
 
     return (
-        <div className="card w-full shadow-xl bg-base-100">
+        // Card หลัก: ปรับ bg-white, shadow, border-radius ตามสไตล์ Contabo
+        <div className="card w-full shadow-lg rounded-xl bg-white min-h-full">
             <div className="grid md:grid-cols-2 grid-cols-1">
 
+                {/* คอลัมน์ซ้าย: Intro/Features */}
                 <div className="hidden md:block">
                     <LandingIntro />
                 </div>
 
-                <div className='py-12 px-10'>
-                    <h2 className='text-2xl font-semibold mb-6 text-center text-base-content'>เข้าสู่ระบบ DDO Console</h2>
+                {/* คอลัมน์ขวา: Form Wrapper (จัดกึ่งกลางเนื้อหา) */}
+                <div className='py-12 px-10 flex flex-col justify-center items-center'>
 
-                    <form onSubmit={handleSubmit(onSubmit)}>
+                    {/* Div จำกัดความกว้างของฟอร์มจริง ๆ */}
+                    <div className="w-full max-w-sm">
 
-                        {/* API Error Alert */}
-                        {apiErrorMessage && (
-                            <div className="alert alert-error text-sm my-4">
-                                <svg xmlns="http://www.w3.org/2000/svg" className="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
-                                <span>{apiErrorMessage}</span>
+                        {/* Text: ปรับเป็นภาษาไทย */}
+                        <h2 className='text-3xl font-bold mb-8 text-center text-gray-800'>ยินดีต้อนรับกลับมา</h2>
+                        <p className='text-sm mb-6 text-center text-gray-600 leading-relaxed'>
+                            ที่นี่คุณสามารถเข้าสู่ระบบ DDO Console ได้ โปรดทราบว่าข้อมูลประจำตัวนี้อาจแตกต่างจากข้อมูลประจำตัวสำหรับระบบอื่น ๆ
+                        </p>
+
+                        <form onSubmit={handleSubmit(onSubmit)}>
+
+                            {/* API Error Alert */}
+                            {apiErrorMessage && (
+                                <div className="alert alert-error text-sm my-4 rounded-md">
+                                    <svg xmlns="http://www.w3.org/2000/svg" className="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+                                    <span>{apiErrorMessage}</span>
+                                </div>
+                            )}
+
+                            <div className="mb-4">
+                                {/* Username Input: เปลี่ยนเป็น 'ชื่อผู้ใช้' */}
+                                <InputText
+                                    type="text"
+                                    containerStyle="mt-4"
+                                    labelTitle="ชื่อผู้ใช้"
+                                    placeholder="ชื่อผู้ใช้ของคุณ"
+                                    {...register('username')} // ฟิลด์ใน RHF ยังคงใช้ 'username'
+                                    error={errors.username}
+                                />
+
+                                {/* Password Input: เปลี่ยนเป็น 'รหัสผ่าน' */}
+                                <InputText
+                                    type="password"
+                                    containerStyle="mt-4"
+                                    labelTitle="รหัสผ่าน"
+                                    placeholder="********"
+                                    {...register('password')}
+                                    error={errors.password}
+                                />
                             </div>
-                        )}
 
-                        <div className="mb-4">
-                            {/* Username Input (เชื่อม RHF) */}
-                            <InputText
-                                type="text"
-                                containerStyle="mt-4"
-                                labelTitle="ชื่อผู้ใช้งาน"
-                                {...register('username')}
-                                error={errors.username}
-                            />
+                            {/* Checkbox และ Link ลืมรหัสผ่าน */}
+                            <div className='flex justify-between items-center text-sm mt-6'>
+                                <label className="flex items-center space-x-2 text-gray-600">
+                                    <input type="checkbox" className="checkbox checkbox-primary checkbox-sm" />
+                                    <span>จดจำฉัน</span>
+                                </label>
+                                <Link to="/forgot-password">
+                                    <span className="inline-block text-blue-600 hover:underline hover:cursor-pointer transition duration-200">
+                                        ลืมรหัสผ่าน?
+                                    </span>
+                                </Link>
+                            </div>
 
-                            {/* Password Input (เชื่อม RHF) */}
-                            <InputText
-                                type="password"
-                                containerStyle="mt-4"
-                                labelTitle="รหัสผ่าน"
-                                {...register('password')}
-                                error={errors.password}
-                            />
-                        </div>
+                            {/* ปุ่ม Submit: ปรับสี, corner, shadow ตามสไตล์ Contabo */}
+                            <button
+                                type="submit"
+                                className={"btn mt-8 w-full bg-blue-500 text-white border-blue-500 hover:bg-blue-600 hover:border-blue-600 rounded-full shadow-lg transition duration-300 ease-in-out" + (loading ? " loading" : "")}
+                                disabled={loading}
+                            >
+                                {loading ? 'กำลังเข้าสู่ระบบ...' : 'เข้าสู่ระบบ'}
+                            </button>
 
-                        <div className='text-right'>
-                            <Link to="/forgot-password">
-                                <span className="text-sm inline-block hover:text-primary hover:underline hover:cursor-pointer transition duration-200">
-                                    ลืมรหัสผ่าน?
-                                </span>
-                            </Link>
-                        </div>
+                            {/* "ยังไม่มีบัญชีใช่ไหม?" */}
+                            <div className='text-center mt-6 text-gray-600'>
+                                ยังไม่มีบัญชีใช่ไหม?
+                                <Link to="/register">
+                                    <span className="inline-block text-blue-600 hover:underline hover:cursor-pointer transition duration-200 ml-1">
+                                        ลงทะเบียน
+                                    </span>
+                                </Link>
+                            </div>
+                        </form>
+                    </div> {/* สิ้นสุด Div จำกัดความกว้าง */}
 
-                        {/* ปุ่ม Submit */}
-                        <button
-                            type="submit"
-                            className={"btn mt-6 w-full btn-primary" + (loading ? " loading" : "")}
-                            disabled={loading}
-                        >
-                            {loading ? 'กำลังเข้าสู่ระบบ...' : 'เข้าสู่ระบบ'}
-                        </button>
-
-                        <div className='text-center mt-4 text-base-content/80'>
-                            ยังไม่มีบัญชีใช่ไหม?
-                            <Link to="/register">
-                                <span className="inline-block text-primary hover:underline hover:cursor-pointer transition duration-200 ml-1">
-                                    ลงทะเบียน
-                                </span>
-                            </Link>
-                        </div>
-                    </form>
-                </div>
+                </div> {/* สิ้นสุดคอลัมน์ขวา */}
             </div>
         </div>
     )
diff --git a/web/src/layouts/AuthLayout.jsx b/web/src/layouts/AuthLayout.jsx
index 8d7faac..4b8ae83 100644
--- a/web/src/layouts/AuthLayout.jsx
+++ b/web/src/layouts/AuthLayout.jsx
@@ -4,10 +4,10 @@ export default function AuthLayout(){
     return(
         <>
             {/* 1. Div หลัก: จัดให้อยู่ตรงกลางจอ (ใช้ flex h-screen) */}
-            <div className="flex h-screen items-center justify-center bg-base-200 p-4">
+            <div className="flex h-screen items-center justify-center bg-base-100">
 
                 {/* 2. Div ภาชนะสำหรับเนื้อหา: กำหนดขนาดสูงสุด */}
-                <div className="w-full max-w-5xl">
+                <div className="w-full h-full">
                     <Outlet/>
                 </div>
             </div>