import { Lock } from 'lucide-react'; import { FormEventHandler, useState } from 'react'; import { Head, Link, router } from '@inertiajs/react'; import { Logo, TextLogo } from '@/Components/branding/Logo'; import { ThemeToggle } from '@/Components/theme'; import { Alert, AlertDescription } from '@/Components/ui/alert'; import { Input } from '@/Components/ui/input'; import { Label } from '@/Components/ui/label'; import { LoadingButton } from '@/Components/ui/loading-button'; import { trackEvent } from '@/lib/analytics'; import { CTA_CLICKED } from '@/lib/event-catalog'; interface Props { token: string; error?: string; } export default function PasswordRequired({ token, error }: Props) { const [password, setPassword] = useState(''); const [processing, setProcessing] = useState(false); const submit: FormEventHandler = (e) => { e.preventDefault(); setProcessing(true); router.post( `/shared-reports/${token}/verify-password`, { password }, { onFinish: () => setProcessing(false), }, ); }; return ( <>
{/* Header */}
{/* Content */}

Password Protected Report

This report is protected. Please enter the password to view it.

{error && ( {error} )}
setPassword(e.target.value)} placeholder="Enter password" required autoFocus disabled={processing} />
View Report

Don't have access?{' '} trackEvent(CTA_CLICKED, { cta_text: 'Try RankWiz Free', cta_location: 'shared_report_password_gate' })}> Try RankWiz Free

{/* Footer */}
); }