"use client"; import * as React from "react"; import { signInCredentials } from "@/lib/credentials-sign-in"; import { REMEMBER_EMAIL_STORAGE_KEY } from "@/lib/client-sign-out"; import { useRouter } from "next/navigation"; import { useQueryState, parseAsString } from "nuqs"; import { useQueryClient } from "@tanstack/react-query"; import { prefetchDashboardSections } from "@/features/dashboard/api/prefetch-dashboard-sections"; import { fetchGroupedPipelineStages, fetchPipelinesClientCacheRevision, fetchPipelinesList, pipelinesKeys, } from "@/hooks/use-pipelines-query"; import { writeLeadsPipelineStagesReady, writePipelinesRevisionPayload, } from "@/lib/query-persist-storage"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card"; import { Checkbox } from "@/components/ui/checkbox"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Eye, EyeOff, Loader2 } from "lucide-react"; import { InputOTP, InputOTPGroup, InputOTPSlot, } from "@/components/ui/input-otp"; import { parseTwoFactorRequiredMessage } from "@/lib/two-factor-login-message"; import Link from "next/link"; import { ensureClientPublicIpForLogin, getStoredClientPublicIp, } from "@/lib/client-public-ip"; import { CLIENT_GEO_KEYS, ensureClientGeoForLogin, } from "@/lib/client-geo"; import { getSession } from "next-auth/react"; import { seedCachedSession } from "@/api/session-cache"; import type { PermissionSource } from "@/lib/permissions"; import { PROFILE_SETTINGS_PATH } from "@/lib/app-paths"; import { hasNoAppPermissions, getFirstAccessiblePath } from "@/lib/permissions"; function LoginForm() { const router = useRouter(); const queryClient = useQueryClient(); const dashboardUrl = "/leads"; const [callbackUrl] = useQueryState( "callbackUrl", parseAsString.withDefault(dashboardUrl), ); const [email, setEmail] = React.useState(""); const [password, setPassword] = React.useState(""); const [showPassword, setShowPassword] = React.useState(false); const [error, setError] = React.useState(""); const [loading, setLoading] = React.useState(false); const [prefetching, setPrefetching] = React.useState(false); const [step, setStep] = React.useState<"password" | "2fa">("password"); const [twoFactorMode, setTwoFactorMode] = React.useState<"totp" | "backup">( "totp", ); const [twoFactorCode, setTwoFactorCode] = React.useState(""); const [backupCode, setBackupCode] = React.useState(""); const [rememberMe, setRememberMe] = React.useState(false); React.useEffect(() => { if (typeof window !== "undefined") { const savedEmail = localStorage.getItem(REMEMBER_EMAIL_STORAGE_KEY); if (savedEmail) { setEmail(savedEmail); setRememberMe(true); } } }, []); React.useEffect(() => { void ensureClientPublicIpForLogin(); }, []); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setError(""); setLoading(true); try { await ensureClientPublicIpForLogin(); await ensureClientGeoForLogin(); const clientPublicIp = getStoredClientPublicIp(); const lat = sessionStorage.getItem(CLIENT_GEO_KEYS.lat) || ""; const lng = sessionStorage.getItem(CLIENT_GEO_KEYS.lng) || ""; const acc = sessionStorage.getItem(CLIENT_GEO_KEYS.acc) || ""; const deviceMac = typeof window !== "undefined" ? sessionStorage.getItem("saleshub_device_mac")?.trim() || undefined : undefined; const result = await signInCredentials({ email, password, clientPublicIp: clientPublicIp || undefined, deviceMac, latitude: lat, longitude: lng, accuracy: acc, ...(step === "2fa" && twoFactorMode === "totp" && twoFactorCode.trim().length === 6 ? { twoFactorToken: twoFactorCode.trim() } : {}), ...(step === "2fa" && twoFactorMode === "backup" && backupCode.trim() ? { twoFactorBackupCode: backupCode.trim() } : {}), callbackUrl, redirect: false, }); if (result?.error || !result?.ok) { setLoading(false); const errorMessage = result?.error || "Invalid email or password"; const need2fa = parseTwoFactorRequiredMessage(errorMessage); if (need2fa && step === "password") { setStep("2fa"); setTwoFactorMode("totp"); setTwoFactorCode(""); setBackupCode(""); setError(""); return; } if (errorMessage.toLowerCase().includes("inactive")) { setError( "Your account has been deactivated. Please contact an administrator.", ); } else if (errorMessage.toLowerCase().includes("invalid credentials")) { setError("Invalid email or password"); } else if (errorMessage.toLowerCase().includes("backup code")) { setError("Invalid backup code or key. Check dashes and try again."); } else if (errorMessage.toLowerCase().includes("verification code")) { setError("Invalid authenticator code. Try again."); } else { setError(errorMessage); } return; } // Start prefetching setLoading(false); setPrefetching(true); const nextUrl = result.url ?? callbackUrl ?? dashboardUrl; const sessionAfterSignIn = await getSession(); seedCachedSession(sessionAfterSignIn); const backendUser = ( sessionAfterSignIn as { backendUser?: PermissionSource } | null )?.backendUser; const destination = sessionAfterSignIn && backendUser ? getFirstAccessiblePath(backendUser) : nextUrl; try { if ( destination !== "/profile" && destination !== PROFILE_SETTINGS_PATH ) { // Prefetch basic data to make the transition smoother const pipelineStale = 1000 * 60 * 60 * 24 * 365; // Warm `/leads` board: pipelines list + **Lead** stages-grouped before navigation. // Deal stages-grouped stays deferred to `BackgroundPrefetcher` (idle) to cut load. await Promise.allSettled([ queryClient.prefetchQuery({ queryKey: pipelinesKeys.lists(), queryFn: fetchPipelinesList, staleTime: pipelineStale, }), queryClient.prefetchQuery({ queryKey: pipelinesKeys.grouped({ stageType: "Lead" }), queryFn: () => fetchGroupedPipelineStages({ stageType: "Lead" }), staleTime: pipelineStale, }), prefetchDashboardSections(queryClient, "Lead", undefined), ]); if (typeof window !== "undefined") { try { const rev = await fetchPipelinesClientCacheRevision(); const userKey = email.trim().toLowerCase(); writePipelinesRevisionPayload({ userKey, pipelinesList: rev.pipelinesList, stagesGroupedLead: rev.stagesGroupedLead, stagesGroupedDeal: rev.stagesGroupedDeal, }); writeLeadsPipelineStagesReady({ userKey, stagesGroupedLeadRev: rev.stagesGroupedLead, at: Date.now(), }); } catch { // revision is optional; board still works from prefetch cache } } } } catch (prefetchErr) { console.warn("Prefetching during login failed:", prefetchErr); } setPrefetching(false); setStep("password"); setTwoFactorMode("totp"); setTwoFactorCode(""); setBackupCode(""); if (rememberMe) { localStorage.setItem(REMEMBER_EMAIL_STORAGE_KEY, email); } else { localStorage.removeItem(REMEMBER_EMAIL_STORAGE_KEY); } router.replace(destination); router.refresh(); } catch (err) { setLoading(false); setPrefetching(false); setError("An unexpected error occurred. Please try again."); console.error("Login error:", err); } }; return (
J
Welcome back Jumppace Sales Hub
{error && (

{error}

)} {step === "2fa" ? (
{twoFactorMode === "totp" ? ( <>

Open your authenticator app and enter the 6-digit code for{" "} SalesHub .

setTwoFactorCode(value.replace(/\D/g, "")) } >
) : ( <>

Paste one line from the{" "} 2FA recovery email (or the list shown in settings right after you enabled 2FA). Short codes use{" "} three blocks (e.g.{" "} XXXX-XXXX-XXXX ); long keys use six blocks.

The authenticator secret (QR / manual setup key) is not a backup code — it will always show invalid here.

setBackupCode(e.target.value)} className="bg-white/80 border-[#E4E6EF] text-[#101828] text-sm h-11 font-mono tracking-wide" /> )}
) : ( <>
setEmail(e.target.value)} required className="bg-white/80 border-[#E4E6EF] focus-visible:ring-accent/50 text-[#101828] placeholder:text-[#6B7280] text-sm h-11" />
setPassword(e.target.value)} required className="bg-white/80 border-[#E4E6EF] focus-visible:ring-accent/50 text-[#101828] placeholder:text-[#6B7280] text-sm h-11 pr-10" />
setRememberMe(!!checked)} className="border-[#E4E6EF] data-[state=checked]:bg-accent data-[state=checked]:border-accent" />
Forgot password?
)}
); } export default function LoginPage() { return (
} > ); }