Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 | 1x 125x 125x 125x 125x 125x 125x 91x 91x 12x 12x 12x 12x 12x 12x 12x 12x 12x 91x 79x 79x 40x 79x 39x 39x 79x 91x 91x 125x 91x 91x 91x 125x 3x 3x 3x 3x 3x 3x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 3x 122x 125x 125x 125x 125x 78x 78x 125x 13x 13x 13x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 375x 375x 375x 375x 375x 375x 375x 375x 375x 375x 375x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x 125x | 'use client';
import { useState, useRef } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { ShieldCheck, ArrowLeft, Search, CheckCircle, XCircle, Loader2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
export default function VerifyPage() {
const router = useRouter();
const [code, setCode] = useState('');
const [isSearching, setIsSearching] = useState(false);
const inputRef = useRef<HTMLInputElement>(null);
const formatIdentityCode = (value: string): string => {
let cleaned = value.toUpperCase().replace(/[^A-Z0-9-]/g, '');
if (!cleaned.startsWith('PFID-')) {
cleaned = cleaned.replace(/-/g, '');
if (cleaned.length > 0 && !cleaned.startsWith('PFID')) {
if (cleaned.length <= 8) {
if (cleaned.length > 4) {
cleaned = `PFID-${cleaned.slice(0, 4)}-${cleaned.slice(4, 8)}`;
} else if (cleaned.length > 0) {
cleaned = `PFID-${cleaned}`;
}
}
}
} else {
const afterPrefix = cleaned.slice(5).replace(/-/g, '');
if (afterPrefix.length > 4) {
cleaned = `PFID-${afterPrefix.slice(0, 4)}-${afterPrefix.slice(4, 8)}`;
} else if (afterPrefix.length > 0) {
cleaned = `PFID-${afterPrefix}`;
} else {
cleaned = 'PFID-';
}
}
return cleaned;
};
const handleCodeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const formatted = formatIdentityCode(e.target.value);
setCode(formatted);
};
const handleVerify = async (e: React.FormEvent) => {
e.preventDefault();
if (!code.trim()) return;
setIsSearching(true);
const verifyCode = code.trim().toUpperCase();
router.push(`/verify/${encodeURIComponent(verifyCode)}`);
};
const isValidFormat = /^PFID-[A-Z0-9]{4}-[A-Z0-9]{4}$/.test(code);
return (
<div className="min-h-screen bg-gradient-to-b from-background to-muted/20">
<div className="container max-w-4xl py-12">
<div className="mb-4 flex items-center justify-between">
<Link href="/">
<Button variant="ghost">
<ArrowLeft className="mr-2 h-4 w-4" />
Back to Home
</Button>
</Link>
</div>
<div className="mb-8 flex items-center gap-3">
<ShieldCheck className="h-10 w-10 text-primary" />
<h1 className="text-4xl font-bold">Verify Profile</h1>
</div>
<p className="mb-8 text-xl text-muted-foreground">
Enter an identity code to confirm the authenticity of a ProofID profile.
</p>
{/* Verification Form */}
<Card className="mb-12">
<CardHeader>
<CardTitle>Enter Identity Code</CardTitle>
<CardDescription>
The identity code is in the format{' '}
<code className="font-mono text-primary">PFID-XXXX-XXXX</code> and can be found on any
ProofID profile.
</CardDescription>
</CardHeader>
<CardContent>
<form onSubmit={handleVerify} className="space-y-4">
<div className="flex gap-4">
<div className="flex-1">
<Input
ref={inputRef}
type="text"
placeholder="PFID-XXXX-XXXX"
value={code}
onChange={handleCodeChange}
className="h-12 font-mono text-lg tracking-wider"
maxLength={14}
/>
</div>
<Button
type="submit"
disabled={!isValidFormat || isSearching}
size="lg"
className="h-12"
>
{isSearching ? (
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
) : (
<Search className="mr-2 h-4 w-4" />
)}
Verify
</Button>
</div>
{code && !isValidFormat && (
<p className="text-sm text-muted-foreground">
Enter a valid identity code (e.g., PFID-XQ52-B91C)
</p>
)}
{isValidFormat && (
<p className="flex items-center gap-1 text-sm text-green-600 dark:text-green-400">
<CheckCircle className="h-4 w-4" />
Valid format - ready to verify
</p>
)}
</form>
</CardContent>
</Card>
{/* How It Works */}
<div className="space-y-8">
<h2 className="text-2xl font-semibold">How Verification Works</h2>
<div className="grid gap-6 md:grid-cols-3">
{(
[
{
title: 'Find the Code',
desc: "Look for the identity code on any ProofID profile. It's displayed prominently near the profile information in the format PFID-XXXX-XXXX.",
},
{
title: 'Enter the Code',
desc: "Type or paste the full identity code into the form above. We'll auto-format it for you as you type.",
},
{
title: 'View Results',
desc: "See the verified profile details including the owner's name, profession, and when the profile was created.",
},
] as const
).map((step, index) => (
<Card
key={index}
className="transition-all duration-200 hover:-translate-y-1 hover:shadow-lg"
>
<CardContent className="pt-6">
<div className="mb-4 w-fit rounded-full bg-primary/10 p-3">
<span className="text-2xl font-bold text-primary">{index + 1}</span>
</div>
<h3 className="mb-2 font-semibold">{step.title}</h3>
<p className="text-sm text-muted-foreground">{step.desc}</p>
</CardContent>
</Card>
))}
</div>
</div>
{/* What Verification Means */}
<div className="mt-12 space-y-6">
<h2 className="text-2xl font-semibold">What Verification Means</h2>
<div className="grid gap-4 md:grid-cols-2">
<Card className="border-green-200 transition-all duration-200 hover:shadow-lg dark:border-green-900">
<CardContent className="pt-6">
<div className="flex items-start gap-3">
<CheckCircle className="mt-1 h-6 w-6 flex-shrink-0 text-green-500" />
<div>
<h3 className="mb-2 font-semibold text-green-700 dark:text-green-400">
What it confirms
</h3>
<ul className="space-y-1 text-sm text-muted-foreground">
<li>• The profile exists on ProofID</li>
<li>• The profile owner created an account</li>
<li>• The content was uploaded by the profile owner</li>
<li>• The identity code is authentic</li>
</ul>
</div>
</div>
</CardContent>
</Card>
<Card className="border-orange-200 transition-all duration-200 hover:shadow-lg dark:border-orange-900">
<CardContent className="pt-6">
<div className="flex items-start gap-3">
<XCircle className="mt-1 h-6 w-6 flex-shrink-0 text-orange-500" />
<div>
<h3 className="mb-2 font-semibold text-orange-700 dark:text-orange-400">
What it doesn't confirm
</h3>
<ul className="space-y-1 text-sm text-muted-foreground">
<li>• Quality or accuracy of work samples</li>
<li>• Authenticity of testimonials</li>
<li>• Professional qualifications</li>
<li>• Background or identity verification</li>
</ul>
</div>
</div>
</CardContent>
</Card>
</div>
<p className="text-sm text-muted-foreground">
ProofID verification confirms that a profile is hosted on our platform. We recommend
conducting your own due diligence when hiring or working with any professional.
</p>
</div>
{/* CTA */}
<div className="mt-12 border-t pt-8 text-center">
<h3 className="mb-4 text-xl font-semibold">Want your own verified profile?</h3>
<p className="mb-6 text-muted-foreground">
Create your ProofID profile and get your unique identity code today.
</p>
<Link href="/login">
<Button size="lg" className="transition-all duration-200 hover:scale-105">
Create Your Profile
</Button>
</Link>
</div>
</div>
</div>
);
}
|