111 lines
5.6 KiB
JavaScript
111 lines
5.6 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { useForm, Head, Link } from '@inertiajs/react';
|
|
import {
|
|
ArrowLeft,
|
|
Eye,
|
|
EyeOff,
|
|
Loader2,
|
|
Mail,
|
|
Lock,
|
|
ChevronLeft
|
|
} from 'lucide-react';
|
|
|
|
export default function WorkerLogin() {
|
|
const { data, setData, post, processing, errors } = useForm({
|
|
email: '',
|
|
password: '',
|
|
remember: false,
|
|
source: 'mobile',
|
|
});
|
|
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
// post('/worker/login');
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-white font-sans text-slate-900 flex flex-col max-w-md mx-auto">
|
|
<Head title="Worker Login" />
|
|
|
|
{/* Minimal Header */}
|
|
<div className="px-6 pt-12 pb-4 flex items-center">
|
|
<button onClick={() => window.history.back()} className="p-3 bg-slate-50 rounded-2xl text-slate-400 border border-slate-100 active:scale-95 transition-all">
|
|
<ChevronLeft className="w-6 h-6" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex-1 px-8 pt-8 space-y-12">
|
|
{/* Title Section */}
|
|
<div className="space-y-3">
|
|
<h1 className="text-4xl font-black tracking-tight text-slate-900 leading-none">Welcome back</h1>
|
|
<p className="text-sm font-medium text-slate-400">Please enter your details to sign in</p>
|
|
</div>
|
|
|
|
{/* Login Form */}
|
|
<form onSubmit={handleSubmit} className="space-y-8">
|
|
<div className="space-y-5">
|
|
<div className="space-y-2">
|
|
<label className="text-[11px] font-bold text-slate-400 uppercase tracking-widest ml-2">Email Address</label>
|
|
<div className="relative">
|
|
<Mail className="absolute left-6 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-300" />
|
|
<input
|
|
type="email"
|
|
value={data.email}
|
|
onChange={(e) => setData('email', e.target.value)}
|
|
placeholder="Enter your email"
|
|
className="w-full pl-14 pr-6 py-5 bg-slate-50 border border-slate-100 rounded-[24px] text-sm font-medium focus:bg-white focus:border-[#185FA5] focus:ring-4 focus:ring-blue-500/10 transition-all outline-none"
|
|
required
|
|
/>
|
|
</div>
|
|
{errors.email && <p className="text-xs text-red-500 mt-1 ml-2">{errors.email}</p>}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between ml-2">
|
|
<label className="text-[11px] font-bold text-slate-400 uppercase tracking-widest">Password</label>
|
|
<Link href="#" className="text-[11px] font-bold text-[#185FA5] uppercase tracking-widest">Forgot?</label>
|
|
</div>
|
|
<div className="relative">
|
|
<Lock className="absolute left-6 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-300" />
|
|
<input
|
|
type={showPassword ? 'text' : 'password'}
|
|
value={data.password}
|
|
onChange={(e) => setData('password', e.target.value)}
|
|
placeholder="••••••••"
|
|
className="w-full pl-14 pr-14 py-5 bg-slate-50 border border-slate-100 rounded-[24px] text-sm font-medium focus:bg-white focus:border-[#185FA5] focus:ring-4 focus:ring-blue-500/10 transition-all outline-none"
|
|
required
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPassword(!showPassword)}
|
|
className="absolute right-6 top-1/2 -translate-y-1/2 text-slate-300 hover:text-slate-500"
|
|
>
|
|
{showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={processing}
|
|
className="w-full py-5 bg-[#185FA5] text-white rounded-[24px] font-bold text-sm uppercase tracking-widest shadow-xl shadow-blue-500/20 flex items-center justify-center space-x-3 active:scale-[0.98] transition-all disabled:opacity-70 mt-8"
|
|
>
|
|
{processing ? <Loader2 className="w-6 h-6 animate-spin" /> : <span>Sign in</span>}
|
|
</button>
|
|
</form>
|
|
|
|
{/* Footer */}
|
|
<div className="text-center pt-4 pb-10">
|
|
<p className="text-xs font-bold text-slate-400 uppercase tracking-widest leading-loose">
|
|
Don't have an account? <br />
|
|
<Link href="/mobile/worker/register" className="text-[#185FA5] underline underline-offset-4 decoration-4">Sign up here</Link>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|