แก้ไขหน้าล็อกอิน
This commit is contained in:
parent
c52928fb1e
commit
1e7160922b
@ -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>
|
||||
)
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user