diff --git a/src/components/onboarding/ActivationPending.jsx b/src/components/onboarding/ActivationPending.jsx new file mode 100644 index 0000000..eb98375 --- /dev/null +++ b/src/components/onboarding/ActivationPending.jsx @@ -0,0 +1,51 @@ +import React, { useState, useEffect } from "react"; +import { motion } from "framer-motion"; +import { MailCheck, RefreshCw, Clock, AlertCircle, CheckCircle2 } from "lucide-react"; +import { Button } from "@/components/ui/button"; +import { base44 } from "@/api/base44Client"; +import { createPageUrl } from "@/utils"; + +const SESSION_TIMEOUT_SECONDS = 600; // 10 minutes + +export default function ActivationPending({ email, userId, expectedCode, onResend, autoStart = true, userData = null }) { + const [secondsLeft, setSecondsLeft] = useState(SESSION_TIMEOUT_SECONDS); + const [resending, setResending] = useState(false); + const [resendSuccess, setResendSuccess] = useState(false); + const [timedOut, setTimedOut] = useState(false); + const [timerActive, setTimerActive] = useState(autoStart); + + const [code, setCode] = useState(""); + const [verifying, setVerifying] = useState(false); + const [codeError, setCodeError] = useState(""); + const [verified, setVerified] = useState(false); + + useEffect(() => { + if (!timerActive) return; + if (secondsLeft <= 0) { + setTimedOut(true); + return; + } + const interval = setInterval(() => { + setSecondsLeft((s) => s - 1); + }, 1000); + return () => clearInterval(interval); + }, [secondsLeft, timerActive]); + + const formatTime = (secs) => { + const m = Math.floor(secs / 60); + const s = secs % 60; + return `${m}:${s.toString().padStart(2, "0")}`; + }; + + const handleResend = async () => { + setResending(true); + await onResend(); + setResending(false); + setResendSuccess(true); + setSecondsLeft(SESSION_TIMEOUT_SECONDS); + setTimedOut(false); + setTimerActive(true); + setCode(""); + setCodeError(""); + setTimeout(() => setResendSuccess(false), 4000); + \ No newline at end of file