296 lines
15 KiB
JavaScript
296 lines
15 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Head, Link, router } from '@inertiajs/react';
|
|
import axios from 'axios';
|
|
import { toast } from 'sonner';
|
|
import {
|
|
Loader2,
|
|
Users,
|
|
DollarSign,
|
|
MessageSquare
|
|
} from 'lucide-react';
|
|
|
|
const countries = [
|
|
'United Arab Emirates',
|
|
'Saudi Arabia',
|
|
'Qatar',
|
|
'Oman',
|
|
'Kuwait',
|
|
'Bahrain',
|
|
'United Kingdom',
|
|
'United States',
|
|
'Canada',
|
|
'Australia',
|
|
'Singapore'
|
|
];
|
|
|
|
export default function Register() {
|
|
const [data, setData] = useState({
|
|
company_name: '',
|
|
name: '',
|
|
email: '',
|
|
phone: '',
|
|
country: 'United Arab Emirates',
|
|
});
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
const [errors, setErrors] = useState({});
|
|
|
|
const handleInputChange = (field, value) => {
|
|
setData(prev => ({ ...prev, [field]: value }));
|
|
if (errors[field]) {
|
|
setErrors(prev => ({ ...prev, [field]: null }));
|
|
}
|
|
};
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
setErrors({});
|
|
|
|
try {
|
|
await axios.post('/employer/register', data);
|
|
toast.success('Registration details saved! A 6-digit verification code has been sent to your email.');
|
|
router.visit('/employer/verify-email');
|
|
} catch (err) {
|
|
if (err.response) {
|
|
if (err.response.status === 409) {
|
|
const errMsg = err.response.data?.errors?.email || 'This email address is already registered.';
|
|
setErrors({ email: errMsg });
|
|
toast.error(errMsg);
|
|
} else if (err.response.status === 422) {
|
|
setErrors(err.response.data.errors || {});
|
|
toast.error('Validation failed. Please correct the fields in red.');
|
|
} else {
|
|
toast.error('Something went wrong. Please try again.');
|
|
}
|
|
} else {
|
|
toast.error('Network error. Please check your internet connection.');
|
|
}
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const renderStepIndicator = () => (
|
|
<div className="flex items-center justify-between mb-6 relative max-w-xs mx-auto px-2 select-none">
|
|
<div className="absolute top-1/2 left-0 w-full h-0.5 bg-slate-100 -translate-y-1/2 -z-10" />
|
|
|
|
{[
|
|
{ step: 1, label: 'Register' },
|
|
{ step: 2, label: 'Verify' },
|
|
{ step: 3, label: 'Password' }
|
|
].map((s) => (
|
|
<div key={s.step} className="flex flex-col items-center">
|
|
<div className={`w-8 h-8 rounded-full flex items-center justify-center font-bold text-xs border-2 transition-all duration-300 ${
|
|
s.step === 1
|
|
? 'bg-[#185FA5] text-white border-[#185FA5] shadow-sm'
|
|
: 'bg-white text-slate-400 border-slate-200'
|
|
}`}>
|
|
{s.step}
|
|
</div>
|
|
<span className={`text-[9px] font-semibold uppercase mt-1 tracking-wider ${
|
|
s.step === 1 ? 'text-[#185FA5]' : 'text-slate-400'
|
|
}`}>{s.label}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className="min-h-screen grid grid-cols-1 lg:grid-cols-12 bg-slate-50 font-sans">
|
|
<Head title="Employer Registration - Marketplace 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">Marketplace 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 Registration
|
|
</span>
|
|
<h1 className="text-4xl font-extrabold tracking-tight leading-tight">
|
|
Find verified domestic workers — no agents, no fees.
|
|
</h1>
|
|
<p className="text-blue-100 text-sm font-medium">
|
|
Register to review your shortlisted candidates, manage interview schedules, and communicate directly.
|
|
</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">0 AED</div>
|
|
<div className="text-[10px] text-blue-100 uppercase tracking-wider font-semibold">Agent Fees</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 Domestic Worker Marketplace. All rights reserved.
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Registration 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-lg bg-white rounded-2xl shadow-sm border border-slate-200 p-8 space-y-6">
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
|
<div>
|
|
<h2 className="text-2xl font-bold text-gray-900 tracking-tight">Create Account</h2>
|
|
<p className="text-xs text-gray-500 mt-1">Register your employer portal to start searching</p>
|
|
</div>
|
|
{renderStepIndicator()}
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
{/* Company Name */}
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-700 mb-1">Company / Household Name</label>
|
|
<input
|
|
type="text"
|
|
value={data.company_name}
|
|
onChange={(e) => handleInputChange('company_name', e.target.value)}
|
|
placeholder="e.g. Al Mansoor Household"
|
|
className={`w-full px-3.5 py-2.5 rounded-xl border text-sm focus:outline-none focus:ring-2 ${
|
|
errors.company_name
|
|
? 'border-red-500 focus:ring-red-500/20 focus:border-red-500'
|
|
: 'border-slate-300 focus:ring-[#185FA5]/20 focus:border-[#185FA5]'
|
|
}`}
|
|
required
|
|
/>
|
|
{errors.company_name && (
|
|
<p className="mt-1 text-xs text-red-500">{errors.company_name[0] || errors.company_name}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
{/* Contact Name */}
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-700 mb-1">Contact Name</label>
|
|
<input
|
|
type="text"
|
|
value={data.name}
|
|
onChange={(e) => handleInputChange('name', e.target.value)}
|
|
placeholder="e.g. Abdullah Bin Ahmed"
|
|
className={`w-full px-3.5 py-2.5 rounded-xl border text-sm focus:outline-none focus:ring-2 ${
|
|
errors.name
|
|
? 'border-red-500 focus:ring-red-500/20 focus:border-red-500'
|
|
: 'border-slate-300 focus:ring-[#185FA5]/20 focus:border-[#185FA5]'
|
|
}`}
|
|
required
|
|
/>
|
|
{errors.name && (
|
|
<p className="mt-1 text-xs text-red-500">{errors.name[0] || errors.name}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Work Email */}
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-700 mb-1">Work Email</label>
|
|
<input
|
|
type="email"
|
|
value={data.email}
|
|
onChange={(e) => handleInputChange('email', e.target.value)}
|
|
placeholder="employer@domain.com"
|
|
className={`w-full px-3.5 py-2.5 rounded-xl border text-sm focus:outline-none focus:ring-2 ${
|
|
errors.email
|
|
? 'border-red-500 focus:ring-red-500/20 focus:border-red-500'
|
|
: 'border-slate-300 focus:ring-[#185FA5]/20 focus:border-[#185FA5]'
|
|
}`}
|
|
required
|
|
/>
|
|
{errors.email && (
|
|
<p className="mt-1 text-xs text-red-500">{errors.email[0] || errors.email}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
{/* Mobile Number */}
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-700 mb-1">Mobile Number</label>
|
|
<input
|
|
type="tel"
|
|
value={data.phone}
|
|
onChange={(e) => handleInputChange('phone', e.target.value)}
|
|
placeholder="e.g. +971501234567"
|
|
className={`w-full px-3.5 py-2.5 rounded-xl border text-sm focus:outline-none focus:ring-2 ${
|
|
errors.phone
|
|
? 'border-red-500 focus:ring-red-500/20 focus:border-red-500'
|
|
: 'border-slate-300 focus:ring-[#185FA5]/20 focus:border-[#185FA5]'
|
|
}`}
|
|
required
|
|
/>
|
|
{errors.phone && (
|
|
<p className="mt-1 text-xs text-red-500">{errors.phone[0] || errors.phone}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Country Dropdown */}
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-700 mb-1">Country of Residence</label>
|
|
<select
|
|
value={data.country}
|
|
onChange={(e) => handleInputChange('country', e.target.value)}
|
|
className="w-full px-3.5 py-2.5 rounded-xl border border-slate-300 text-sm focus:outline-none focus:ring-2 focus:ring-[#185FA5]/20 focus:border-[#185FA5] bg-white cursor-pointer appearance-none"
|
|
required
|
|
>
|
|
{countries.map((c) => (
|
|
<option key={c} value={c}>
|
|
{c}
|
|
</option>
|
|
))}
|
|
</select>
|
|
{errors.country && (
|
|
<p className="mt-1 text-xs text-red-500">{errors.country[0] || errors.country}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
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 mt-2"
|
|
>
|
|
{loading ? (
|
|
<Loader2 className="w-5 h-5 animate-spin mr-2" />
|
|
) : (
|
|
'Send Verification Code'
|
|
)}
|
|
</button>
|
|
</form>
|
|
|
|
<div className="border-t border-slate-100 pt-6 text-center">
|
|
<p className="text-xs text-gray-600 font-medium">
|
|
Already have an account?{' '}
|
|
<Link href="/employer/login" className="text-[#185FA5] font-bold hover:underline">
|
|
Sign in
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|