86 lines
2.0 KiB
TypeScript
86 lines
2.0 KiB
TypeScript
import Button from "@/utils/button";
|
|
import OTPInput from "./otpInput";
|
|
import { useEffect, useState, } from "react";
|
|
|
|
import {Props} from "@/constants/types"
|
|
|
|
|
|
export default function VerifyCode({ onBack }: Props) {
|
|
const [timer, setTimer] = useState(30);
|
|
|
|
useEffect(() => {
|
|
if (timer === 0) return;
|
|
|
|
const interval = setInterval(() => {
|
|
setTimer((prev) => prev - 1);
|
|
}, 1000);
|
|
|
|
return () => clearInterval(interval);
|
|
}, [timer]);
|
|
|
|
const handleResend = () => {
|
|
if (timer > 0) return;
|
|
|
|
// Call your resend OTP API here
|
|
|
|
setTimer(30);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<button
|
|
onClick={onBack}
|
|
className="text-slate-400 hover:text-white"
|
|
>
|
|
← Back to sign in
|
|
</button>
|
|
|
|
<div>
|
|
<h2 className="text-2xl font-bold text-white">
|
|
Two-factor authentication
|
|
</h2>
|
|
|
|
<p className="text-slate-400">
|
|
Enter the 6-digit code from your authenticator app, or the<br/>
|
|
code we sent to{" "}
|
|
<span className="font-semibold text-white">
|
|
d•••@kafm.io
|
|
</span>.
|
|
</p>
|
|
</div>
|
|
|
|
<OTPInput />
|
|
|
|
<div className="flex items-center gap-2">
|
|
<Button
|
|
|
|
onClick={handleResend}
|
|
|
|
className={`font-semibold transition-colors ${
|
|
timer > 0
|
|
? "text-slate-400 cursor-not-allowed"
|
|
: "text-teal-400 hover:text-teal-300 cursor-pointer"
|
|
}`}
|
|
>
|
|
Resend code
|
|
</Button>
|
|
|
|
{timer > 0 && (
|
|
<span className="text-sm text-slate-500">
|
|
{timer}s
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
|
|
<label className="flex items-center gap-2 text-slate-300">
|
|
<input type="checkbox" />
|
|
Trust this device for 30 days
|
|
</label>
|
|
|
|
<Button className="h-10 w-full rounded-xl bg-gradient-to-r from-teal-400 to-emerald-400 font-semibold text-black">
|
|
Verify & Continue
|
|
</Button>
|
|
</div>
|
|
);
|
|
} |