221 lines
12 KiB
JavaScript
221 lines
12 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { useForm, Head, Link } from '@inertiajs/react';
|
|
import {
|
|
Eye,
|
|
EyeOff,
|
|
Loader2,
|
|
AlertTriangle,
|
|
Info,
|
|
XCircle,
|
|
Users,
|
|
DollarSign,
|
|
MessageSquare
|
|
} from 'lucide-react';
|
|
|
|
export default function Login({ flash }) {
|
|
const { data, setData, post, processing, errors, setError, clearErrors } = useForm({
|
|
email: '',
|
|
password: '',
|
|
remember: false,
|
|
});
|
|
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
|
|
const validateForm = () => {
|
|
let valid = true;
|
|
clearErrors();
|
|
|
|
if (!data.email.trim()) {
|
|
setError('email', 'Email address is required.');
|
|
valid = false;
|
|
} else if (!/\S+@\S+\.\S+/.test(data.email)) {
|
|
setError('email', 'Please enter a valid email address.');
|
|
valid = false;
|
|
}
|
|
|
|
if (!data.password) {
|
|
setError('password', 'Password is required.');
|
|
valid = false;
|
|
}
|
|
|
|
return valid;
|
|
};
|
|
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
|
|
if (!validateForm()) {
|
|
return;
|
|
}
|
|
|
|
post('/employer/login');
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen grid grid-cols-1 lg:grid-cols-12 bg-slate-50 font-sans">
|
|
<Head title="Employer Login - Migrant Portal" />
|
|
|
|
{/* Left Brand Panel (Desktop Only) */}
|
|
<div className="hidden lg:flex lg:col-span-5 bg-[#185FA5] p-12 flex-col justify-between text-white relative overflow-hidden select-none">
|
|
<div className="absolute inset-0 bg-gradient-to-br from-blue-600/20 to-black/30 pointer-events-none" />
|
|
|
|
<div className="relative z-10 space-y-6">
|
|
<div className="flex items-center space-x-3">
|
|
<div className="w-10 h-10 bg-white text-[#185FA5] rounded-xl flex items-center justify-center font-bold text-xl shadow-md">
|
|
M
|
|
</div>
|
|
<span className="font-bold text-2xl tracking-tight">Migrant Portal</span>
|
|
</div>
|
|
|
|
<div className="space-y-3 pt-6">
|
|
<span className="inline-block px-3 py-1 bg-white/10 border border-white/20 rounded-full text-xs font-semibold uppercase tracking-wider">
|
|
Employer Login
|
|
</span>
|
|
<h1 className="text-4xl font-extrabold tracking-tight leading-tight">
|
|
Find verified domestic workers directly.
|
|
</h1>
|
|
<p className="text-blue-100 text-sm font-medium">
|
|
Unlock direct access to top domestic candidates with a Migrant premium subscription. Find, interview, and hire directly without middlemen.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Stat Row */}
|
|
<div className="grid grid-cols-3 gap-4 pt-8 border-t border-white/10">
|
|
<div className="bg-white/10 backdrop-blur-sm p-4 rounded-xl border border-white/10 text-center space-y-1">
|
|
<Users className="w-6 h-6 text-emerald-300 mx-auto" />
|
|
<div className="font-bold text-lg">500+</div>
|
|
<div className="text-[10px] text-blue-100 uppercase tracking-wider font-semibold">Verified Workers</div>
|
|
</div>
|
|
|
|
<div className="bg-white/10 backdrop-blur-sm p-4 rounded-xl border border-white/10 text-center space-y-1">
|
|
<DollarSign className="w-6 h-6 text-emerald-300 mx-auto" />
|
|
<div className="font-bold text-lg">Premium</div>
|
|
<div className="text-[10px] text-blue-100 uppercase tracking-wider font-semibold">Employer Access</div>
|
|
</div>
|
|
|
|
<div className="bg-white/10 backdrop-blur-sm p-4 rounded-xl border border-white/10 text-center space-y-1">
|
|
<MessageSquare className="w-6 h-6 text-emerald-300 mx-auto" />
|
|
<div className="font-bold text-lg">Direct</div>
|
|
<div className="text-[10px] text-blue-100 uppercase tracking-wider font-semibold">Messaging</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative z-10 text-xs text-blue-200 font-medium">
|
|
© 2026 Migrant. All rights reserved.
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Login Form */}
|
|
<div className="col-span-1 lg:col-span-7 flex flex-col justify-center items-center p-6 sm:p-12 overflow-y-auto">
|
|
<div className="w-full max-w-md bg-white rounded-2xl shadow-sm border border-slate-200 p-8 space-y-6">
|
|
<div>
|
|
<h2 className="text-2xl font-bold text-gray-900 tracking-tight">Welcome Back</h2>
|
|
<p className="text-xs text-gray-500 mt-1">Sign in to your employer portal to continue searching</p>
|
|
</div>
|
|
|
|
{/* Status Flash Alerts */}
|
|
{flash?.status === 'pending_verification' && (
|
|
<div className="flex items-start space-x-3 p-4 bg-amber-50 border border-amber-200 rounded-xl text-amber-800 text-xs font-medium">
|
|
<AlertTriangle className="w-5 h-5 text-amber-600 flex-shrink-0 mt-0.5" />
|
|
<span>Your account is pending Emirates ID verification. We'll notify you within 24 hours.</span>
|
|
</div>
|
|
)}
|
|
|
|
{flash?.status === 'rejected' && (
|
|
<div className="flex items-start space-x-3 p-4 bg-red-50 border border-red-200 rounded-xl text-red-800 text-xs font-medium">
|
|
<XCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
|
|
<div>
|
|
<div className="font-bold">Verification Rejected</div>
|
|
<div className="mt-0.5 text-red-700">Reason: {flash?.reason || 'Document unreadable.'} Please re-register.</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{flash?.status === 'subscription_expired' && (
|
|
<div className="flex items-start space-x-3 p-4 bg-blue-50 border border-blue-200 rounded-xl text-blue-800 text-xs font-medium">
|
|
<Info className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" />
|
|
<span>Your subscription has expired. Renew to continue searching and shortlisting.</span>
|
|
</div>
|
|
)}
|
|
|
|
<form onSubmit={handleSubmit} noValidate className="space-y-5">
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-700 mb-1">Email Address</label>
|
|
<input
|
|
type="email"
|
|
value={data.email}
|
|
onChange={(e) => setData('email', e.target.value)}
|
|
placeholder="name@company.com"
|
|
className={`w-full px-3.5 py-2.5 rounded-xl border text-sm focus:outline-none focus:ring-2 focus:ring-[#185FA5]/20 focus:border-[#185FA5] ${
|
|
errors.email ? 'border-red-500 focus:ring-red-500/20' : 'border-slate-300'
|
|
}`}
|
|
autoFocus
|
|
/>
|
|
{errors.email && <p className="mt-1 text-xs text-red-500">{errors.email}</p>}
|
|
</div>
|
|
|
|
<div>
|
|
<div className="flex items-center justify-between mb-1">
|
|
<label className="block text-xs font-medium text-gray-700">Password</label>
|
|
<Link href="/employer/forgot-password" className="text-xs text-[#185FA5] font-semibold hover:underline">
|
|
Forgot password?
|
|
</Link>
|
|
</div>
|
|
<div className="relative">
|
|
<input
|
|
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-xl border text-sm focus:outline-none focus:ring-2 focus:ring-[#185FA5]/20 focus:border-[#185FA5] ${
|
|
errors.password ? 'border-red-500 focus:ring-red-500/20' : 'border-slate-300'
|
|
}`}
|
|
/>
|
|
<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 focus:outline-none"
|
|
>
|
|
{showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
|
|
</button>
|
|
</div>
|
|
{errors.password && <p className="mt-1 text-xs text-red-500">{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="h-4 w-4 rounded border-slate-300 text-[#185FA5] focus:ring-[#185FA5]"
|
|
/>
|
|
<label htmlFor="remember" className="ml-2 block text-xs text-gray-700 select-none">
|
|
Remember me for 30 days
|
|
</label>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={processing}
|
|
className="w-full bg-[#185FA5] hover:bg-[#0C447C] active:bg-[#08305c] text-white rounded-xl h-11 font-semibold text-sm transition-colors shadow-sm flex items-center justify-center disabled:opacity-70 disabled:cursor-not-allowed"
|
|
>
|
|
{processing ? <Loader2 className="w-5 h-5 animate-spin mr-2" /> : 'Sign in to Employer Portal'}
|
|
</button>
|
|
</form>
|
|
|
|
<div className="border-t border-slate-100 pt-6 text-center">
|
|
<p className="text-xs text-gray-600 font-medium">
|
|
New employer?{' '}
|
|
<Link href="/employer/register" className="text-[#185FA5] font-bold hover:underline">
|
|
Create account
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|