97 lines
4.0 KiB
JavaScript
97 lines
4.0 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { Head, Link } from '@inertiajs/react';
|
|
import {
|
|
ArrowLeft,
|
|
Loader2,
|
|
Smartphone
|
|
} from 'lucide-react';
|
|
|
|
export default function EmployerOTP() {
|
|
const [otp, setOtp] = useState(['', '', '', '']);
|
|
const [timer, setTimer] = useState(59);
|
|
const [processing, setProcessing] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
if (timer > 0) setTimer(timer - 1);
|
|
}, 1000);
|
|
return () => clearInterval(interval);
|
|
}, [timer]);
|
|
|
|
const handleChange = (index, value) => {
|
|
if (value.length <= 1 && /^\d*$/.test(value)) {
|
|
const newOtp = [...otp];
|
|
newOtp[index] = value;
|
|
setOtp(newOtp);
|
|
|
|
if (value && index < 3) {
|
|
document.getElementById(`otp-${index + 1}`).focus();
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
setProcessing(true);
|
|
setTimeout(() => {
|
|
window.location.href = '/mobile/employer/home';
|
|
}, 1500);
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-white font-sans text-slate-900 flex flex-col max-w-md mx-auto">
|
|
<Head title="OTP Verification" />
|
|
|
|
<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 space-y-10">
|
|
<div className="space-y-2">
|
|
<h1 className="text-3xl font-bold tracking-tight">Verify email</h1>
|
|
<p className="text-slate-500 text-sm">Enter the code sent to your email address</p>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-10">
|
|
<div className="flex justify-between space-x-4">
|
|
{otp.map((digit, i) => (
|
|
<input
|
|
key={i}
|
|
id={`otp-${i}`}
|
|
type="text"
|
|
value={digit}
|
|
onChange={(e) => handleChange(i, e.target.value)}
|
|
className="w-16 h-18 bg-slate-50 border border-slate-200 rounded-2xl text-center text-2xl font-bold text-slate-900 focus:bg-white focus:ring-2 focus:ring-[#185FA5]/10 focus:border-[#185FA5] outline-none transition-all"
|
|
maxLength={1}
|
|
required
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<button
|
|
type="submit"
|
|
disabled={processing || otp.join('').length < 4}
|
|
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 active:scale-[0.98] transition-all disabled:opacity-50"
|
|
>
|
|
{processing ? <Loader2 className="w-6 h-6 animate-spin" /> : <span>Verify</span>}
|
|
</button>
|
|
|
|
<div className="text-center">
|
|
<p className="text-sm text-slate-500">
|
|
Didn't receive code? {timer > 0 ? (
|
|
<span className="text-[#185FA5] font-medium ml-1">00:{timer < 10 ? `0${timer}` : timer}</span>
|
|
) : (
|
|
<button type="button" onClick={() => setTimer(59)} className="text-[#185FA5] font-bold hover:underline ml-1">Resend now</button>
|
|
)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|