101 lines
4.7 KiB
JavaScript
101 lines
4.7 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Head, Link } from '@inertiajs/react';
|
|
import {
|
|
ArrowLeft,
|
|
Loader2,
|
|
Mail,
|
|
ArrowRight,
|
|
CheckCircle2
|
|
} from 'lucide-react';
|
|
|
|
export default function EmployerForgotPassword() {
|
|
const [email, setEmail] = useState('');
|
|
const [isSent, setIsSent] = useState(false);
|
|
const [processing, setProcessing] = useState(false);
|
|
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
setProcessing(true);
|
|
setTimeout(() => {
|
|
setIsSent(true);
|
|
setProcessing(false);
|
|
}, 1500);
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-white font-sans text-slate-900 flex flex-col max-w-md mx-auto">
|
|
<Head title="Forgot Password" />
|
|
|
|
<div className="px-6 pt-12 pb-6">
|
|
<button onClick={() => window.history.back()} className="p-2 -ml-2 text-slate-600">
|
|
<ArrowLeft className="w-6 h-6" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex-1 px-8 pt-4">
|
|
{!isSent ? (
|
|
<div className="space-y-10">
|
|
<div className="space-y-2">
|
|
<h1 className="text-3xl font-bold tracking-tight">Forgot password</h1>
|
|
<p className="text-slate-500 text-sm">No worries, we'll send you reset instructions</p>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-8">
|
|
<div className="space-y-1.5">
|
|
<label className="text-sm font-semibold text-slate-700 ml-1">Email</label>
|
|
<div className="relative">
|
|
<Mail className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" />
|
|
<input
|
|
type="email"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
placeholder="Enter your email"
|
|
className="w-full pl-12 pr-4 py-4 bg-slate-50 border border-slate-200 rounded-2xl text-sm focus:bg-white focus:ring-2 focus:ring-[#185FA5]/10 focus:border-[#185FA5] outline-none transition-all"
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={processing}
|
|
className="w-full h-16 bg-[#185FA5] text-white rounded-2xl font-bold text-base shadow-lg shadow-blue-500/20 flex items-center justify-center space-x-2 active:scale-[0.98] transition-all"
|
|
>
|
|
{processing ? <Loader2 className="w-6 h-6 animate-spin" /> : (
|
|
<>
|
|
<span>Reset password</span>
|
|
<ArrowRight className="w-5 h-5" />
|
|
</>
|
|
)}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-8 text-center py-10">
|
|
<div className="flex justify-center">
|
|
<div className="w-20 h-20 bg-blue-50 rounded-full flex items-center justify-center text-[#185FA5]">
|
|
<CheckCircle2 className="w-10 h-10" />
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<h2 className="text-2xl font-bold tracking-tight">Check your email</h2>
|
|
<p className="text-sm text-slate-500 leading-relaxed">
|
|
We've sent a password reset link to <br />
|
|
<span className="font-bold text-slate-900">{email}</span>
|
|
</p>
|
|
</div>
|
|
<div className="pt-4">
|
|
<Link
|
|
href="/mobile/employer/login"
|
|
className="font-bold text-[#185FA5] hover:text-[#144f8a] underline underline-offset-4 text-sm"
|
|
>
|
|
Back to login
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|