146 lines
6.9 KiB
JavaScript
146 lines
6.9 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Shield, Eye, EyeOff, Loader2, UserCircle, Globe, Smartphone } from 'lucide-react';
|
|
import { useForm, Head, Link } from '@inertiajs/react';
|
|
|
|
export default function Login() {
|
|
const { data, setData, post, processing, errors } = useForm({
|
|
email: '',
|
|
password: '',
|
|
remember: false,
|
|
});
|
|
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
post('/admin/login');
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen flex flex-col justify-center items-center px-4 relative overflow-hidden bg-slate-50 font-sans">
|
|
<Head title="Admin Portal - Login" />
|
|
|
|
{/* Subtle animated diagonal grid background */}
|
|
<div
|
|
className="absolute inset-[-50%] z-0 opacity-40 pointer-events-none"
|
|
style={{
|
|
backgroundImage: `
|
|
linear-gradient(to right, rgba(15, 110, 86, 0.08) 1px, transparent 1px),
|
|
linear-gradient(to bottom, rgba(15, 110, 86, 0.08) 1px, transparent 1px)
|
|
`,
|
|
backgroundSize: '48px 48px',
|
|
transform: 'rotate(-20deg)',
|
|
animation: 'diagonalGrid 30s linear infinite',
|
|
}}
|
|
/>
|
|
<style>{`
|
|
@keyframes diagonalGrid {
|
|
0% { background-position: 0 0; }
|
|
100% { background-position: 48px 48px; }
|
|
}
|
|
`}</style>
|
|
|
|
{/* Login Card */}
|
|
<div className="w-full max-w-md bg-white rounded-xl shadow-sm border border-slate-200 p-8 z-10 relative">
|
|
{/* Header / Logo */}
|
|
<div className="flex flex-col items-center mb-6 text-center">
|
|
<div className="w-16 h-16 bg-[#0F6E56]/10 rounded-2xl flex items-center justify-center mb-4 shadow-inner">
|
|
<Shield className="w-10 h-10 text-[#0F6E56]" />
|
|
</div>
|
|
<h1 className="text-2xl font-semibold text-gray-800 tracking-tight">Admin Portal</h1>
|
|
<p className="text-sm text-gray-500 mt-1">Domestic Worker Marketplace</p>
|
|
</div>
|
|
|
|
<hr className="border-slate-100 mb-6" />
|
|
|
|
{/* Form */}
|
|
<form onSubmit={handleSubmit} noValidate className="space-y-5">
|
|
<div>
|
|
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1.5">
|
|
Email Address
|
|
</label>
|
|
<input
|
|
id="email"
|
|
type="email"
|
|
autoFocus
|
|
value={data.email}
|
|
onChange={(e) => setData('email', e.target.value)}
|
|
placeholder="admin@example.com"
|
|
className="w-full px-3.5 py-2.5 rounded-lg border border-slate-300 focus:outline-none focus:ring-2 focus:ring-[#0F6E56]/20 focus:border-[#0F6E56] text-gray-800 placeholder-slate-400 text-sm transition-colors"
|
|
/>
|
|
{errors.email && (
|
|
<p className="mt-1.5 text-sm text-red-500 font-medium">{errors.email}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1.5">
|
|
Password
|
|
</label>
|
|
<div className="relative">
|
|
<input
|
|
id="password"
|
|
type={showPassword ? 'text' : 'password'}
|
|
value={data.password}
|
|
onChange={(e) => setData('password', e.target.value)}
|
|
placeholder="••••••••"
|
|
className="w-full pl-3.5 pr-10 py-2.5 rounded-lg border border-slate-300 focus:outline-none focus:ring-2 focus:ring-[#0F6E56]/20 focus:border-[#0F6E56] text-gray-800 placeholder-slate-400 text-sm transition-colors"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPassword(!showPassword)}
|
|
className="absolute inset-y-0 right-0 pr-3 flex items-center text-slate-400 hover:text-slate-600 transition-colors focus:outline-none"
|
|
>
|
|
{showPassword ? (
|
|
<EyeOff className="w-5 h-5" />
|
|
) : (
|
|
<Eye className="w-5 h-5" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
{errors.password && (
|
|
<p className="mt-1.5 text-sm text-red-500 font-medium">{errors.password}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex items-center">
|
|
<input
|
|
id="remember"
|
|
type="checkbox"
|
|
checked={data.remember}
|
|
onChange={(e) => setData('remember', e.target.checked)}
|
|
className="w-4 h-4 rounded border-slate-300 text-[#0F6E56] focus:ring-[#0F6E56]"
|
|
/>
|
|
<label htmlFor="remember" className="ml-2.5 text-sm text-gray-600 select-none">
|
|
Remember me
|
|
</label>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={processing}
|
|
className="w-full bg-[#0F6E56] hover:bg-[#085041] active:bg-[#063c31] text-white rounded-lg h-11 flex items-center justify-center font-medium text-sm transition-colors shadow-sm disabled:opacity-70 disabled:cursor-not-allowed"
|
|
>
|
|
{processing ? (
|
|
<>
|
|
<Loader2 className="w-5 h-5 animate-spin mr-2" />
|
|
Signing in...
|
|
</>
|
|
) : (
|
|
'Sign in to Admin'
|
|
)}
|
|
</button>
|
|
<Link
|
|
href="/employer/login"
|
|
className="w-full h-11 flex items-center justify-center text-sm font-medium text-slate-500 hover:text-[#0F6E56] transition-colors"
|
|
>
|
|
Sign in as Employer
|
|
</Link>
|
|
</form>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
);
|
|
}
|