114 lines
3.6 KiB
TypeScript
114 lines
3.6 KiB
TypeScript
'use client';
|
|
import IconLockDots from '@/components/icon/icon-lock-dots';
|
|
import IconMail from '@/components/icon/icon-mail';
|
|
import { useRouter } from 'next/navigation';
|
|
import React, { useState } from 'react';
|
|
|
|
const LoginForm = () => {
|
|
const router = useRouter();
|
|
|
|
// ✅ Single state for form values
|
|
const [formData, setFormData] = useState({
|
|
email: '',
|
|
password: '',
|
|
});
|
|
|
|
// ✅ State for errors
|
|
const [errors, setErrors] = useState<{ email?: string; password?: string }>({});
|
|
|
|
// Generic handler for inputs
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const { name, value } = e.target;
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
[name]: value,
|
|
}));
|
|
|
|
// Clear error when user starts typing
|
|
setErrors((prev) => ({
|
|
...prev,
|
|
[name]: '',
|
|
}));
|
|
};
|
|
|
|
// Validation
|
|
const validate = () => {
|
|
const newErrors: { email?: string; password?: string } = {};
|
|
if (!formData.email.trim()) {
|
|
newErrors.email = 'Email is required';
|
|
}
|
|
if (!formData.password.trim()) {
|
|
newErrors.password = 'Password is required';
|
|
}
|
|
return newErrors;
|
|
};
|
|
|
|
const submitForm = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
const validationErrors = validate();
|
|
|
|
if (Object.keys(validationErrors).length > 0) {
|
|
setErrors(validationErrors);
|
|
return;
|
|
}
|
|
|
|
console.log('Form Data:', formData);
|
|
router.push('/');
|
|
};
|
|
|
|
return (
|
|
<form className="space-y-5 dark:text-white" onSubmit={submitForm}>
|
|
<div>
|
|
<label htmlFor="Email">Email</label>
|
|
<div className="relative text-white-dark">
|
|
<input
|
|
id="Email"
|
|
name="email"
|
|
type="email"
|
|
placeholder="Enter Email"
|
|
className="form-input ps-10 placeholder:text-white-dark"
|
|
value={formData.email}
|
|
onChange={handleChange}
|
|
/>
|
|
<span className="absolute start-4 top-1/2 -translate-y-1/2">
|
|
<IconMail fill={true} />
|
|
</span>
|
|
</div>
|
|
{errors.email && (
|
|
<p className="text-red-500 text-sm mt-1">{errors.email}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="Password">Password</label>
|
|
<div className="relative text-white-dark">
|
|
<input
|
|
id="Password"
|
|
name="password"
|
|
type="password"
|
|
placeholder="Enter Password"
|
|
className="form-input ps-10 placeholder:text-white-dark"
|
|
value={formData.password}
|
|
onChange={handleChange}
|
|
/>
|
|
<span className="absolute start-4 top-1/2 -translate-y-1/2">
|
|
<IconLockDots fill={true} />
|
|
</span>
|
|
</div>
|
|
{errors.password && (
|
|
<p className="text-red-500 text-sm mt-1">{errors.password}</p>
|
|
)}
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
className="btn btn-gradient !mt-6 w-full border-0 uppercase shadow-[0_10px_20px_-10px_rgba(67,97,238,0.44)]"
|
|
>
|
|
Sign in
|
|
</button>
|
|
</form>
|
|
);
|
|
};
|
|
|
|
export default LoginForm;
|