86 lines
2.7 KiB
TypeScript
86 lines
2.7 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 { useState } from 'react';
|
|
import axios from 'axios';
|
|
import toast from 'react-hot-toast';
|
|
|
|
const ComponentsAuthLoginForm = () => {
|
|
const [email, setEmail] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
const router = useRouter();
|
|
|
|
const submitForm = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
try {
|
|
const res = await axios.post('/api/login', { email, password });
|
|
toast.success(res.data?.message || 'Login successful!');
|
|
router.push('/adminDashboard');
|
|
router.refresh();
|
|
// token cookie is already set by the server:
|
|
} catch (err: any) {
|
|
console.error('Login error:', err);
|
|
const msg =
|
|
err?.response?.data?.message ||
|
|
err?.message ||
|
|
'Invalid credentials';
|
|
toast.error(msg);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<form className="space-y-3 dark:text-white" onSubmit={submitForm}>
|
|
<div>
|
|
<label htmlFor="Email" className="text-yellow-400 text-left">Email</label>
|
|
<div className="relative text-white-dark">
|
|
<input
|
|
id="Email"
|
|
type="email"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
placeholder="Enter Email"
|
|
className="form-input ps-10 placeholder:text-white-dark"
|
|
required
|
|
/>
|
|
<span className="absolute start-4 top-1/2 -translate-y-1/2">
|
|
<IconMail fill={true} />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="pb-2">
|
|
<label htmlFor="Password" className="text-yellow-400 text-left">Password</label>
|
|
<div className="relative text-white-dark">
|
|
<input
|
|
id="Password"
|
|
type="password"
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
required
|
|
placeholder="Enter Password"
|
|
className="form-input ps-10 placeholder:text-white-dark"
|
|
minLength={8}
|
|
/>
|
|
<span className="absolute start-4 top-1/2 -translate-y-1/2">
|
|
<IconLockDots fill={true} />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="w-full uppercase border-0 rounded-md bg-[#fcd913] text-black font-semibold py-2 hover:bg-[#E6C812] transition disabled:opacity-70"
|
|
>
|
|
{loading ? 'Logging in...' : 'Sign In'}
|
|
</button>
|
|
</form>
|
|
);
|
|
};
|
|
|
|
export default ComponentsAuthLoginForm;
|
|
|