[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","6895c38eb5e481919df99a2d250eb37f","versionInt","title","Password Judge Field (react)","type","code/react","content","import React, { useMemo, useState, useEffect } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { Eye, EyeOff, Copy, ShieldAlert, CheckCircle2, AlertTriangle, Info } from \"lucide-react\";\nimport zxcvbn from \"zxcvbn\";\n\n// Tailwind is available by default. All NPM libs are available.\n// Drop this component into any React/Next.js app. It is self-contained.\n// Optional: For UI primitives you can replace raw elements with shadcn/ui components.\n\nexport default function PasswordJudgeDemo() {\n return (\n

\n \n

\n );\n}\n\nfunction PasswordJudge({ label = \"Password\", placeholder = \"Enter password\" }) {\n const [pwd, setPwd] = useState(\"\");\n const [show, setShow] = useState(false);\n const [capsOn, setCapsOn] = useState(false);\n const [copied, setCopied] = useState(false);\n const [pwned, setPwned] = useState(null);\n const [checking, setChecking] = useState(false);\n\n const result = useMemo(() => zxcvbn(pwd), [pwd]);\n const score = result.score; // 0-4\n const guessesLog10 = result.guesses_log10;\n const crackTimeDisplay = result.crack_times_display.offline_slow_hashing_1e4_per_second;\n\n const entropyBits = Math.round(guessesLog10 * Math.LOG10E * Math.log(2)); // approx\n\n // Derived checks\n const checks = useMemo(() => {\n const hasLength = pwd.length >= 12;\n const hasUpper = /[A-Z]/.test(pwd);\n const hasLower = /[a-z]/.test(pwd);\n const hasNumber = /[0-9]/.test(pwd);\n const hasSymbol = /[^A-Za-z0-9]/.test(pwd);\n const noSpaces = !/\\s/.test(pwd);\n const notEmailLike = !/^[^@\\s]+@[^@\\s]+\\.[^@\\s]+$/.test(pwd);\n const notCommonSub = !/(password|qwerty|letmein|admin|welcome|iloveyou|12345)/i.test(pwd);\n return [\n { ok: hasLength, label: \"At least 12 characters\" },\n { ok: hasUpper, label: \"Uppercase letter\" },\n { ok: hasLower, label: \"Lowercase letter\" },\n { ok: hasNumber, label: \"Number\" },\n { ok: hasSymbol, label: \"Symbol\" },\n { ok: noSpaces, label: \"No spaces\" },\n { ok: notEmailLike, label: \"Not an email address\" },\n { ok: notCommonSub, label: \"Avoids common patterns\" },\n ];\n }, [pwd]);\n\n // Caps Lock detection\n useEffect(() => {\n const onKey = (e) => setCapsOn(e.getModifierState && e.getModifierState(\"CapsLock\"));\n window.addEventListener(\"keydown\", onKey);\n window.addEventListener(\"keyup\", onKey);\n return () => {\n window.removeEventListener(\"keydown\", onKey);\n window.removeEventListener(\"keyup\", onKey);\n };\n }, []);\n\n const verdict = useMemo(() => {\n const messages = [\n {\n title: \"Abandon ship\",\n tone: \"This password would lose a fight with a goldfish.\",\n emoji: \"🪫\",\n },\n {\n title: \"Very weak\",\n tone: \"Hackers are giggling. You can do better.\",\n emoji: \"😬\",\n },\n {\n title: \"Okay-ish\",\n tone: \"Not terrible, not great. Add length + symbols.\",\n emoji: \"🤨\",\n },\n {\n title: \"Solid\",\n tone: \"Respectable. A few tweaks could make it rock-solid.\",\n emoji: \"👍\",\n },\n {\n title: \"Fortress\",\n tone: \"Chef's kiss. Store it in a password manager.\",\n emoji: \"🛡️\",\n },\n ];\n return messages[score];\n }, [score]);\n\n const progress = (score + 1) * 20; // 20..100\n\n // Optional: Have I Been Pwned k-anonymity check (SHA-1 prefix). Disabled by default for demos.\n async function checkPwned(password) {\n // For production, run this via your backend to avoid CORS and to keep network clean.\n // Leaving implemented but not auto-called to keep the demo fast and offline-friendly.\n const sha1 = await sha1Hex(password);\n const prefix = sha1.substring(0, 5);\n const suffix = sha1.substring(5).toUpperCase();\n try {\n setChecking(true);\n const res = await fetch(`https://api.pwnedpasswords.com/range/${prefix}`);\n const text = await res.text();\n const line = text.split(\"\\n\").find((l) => l.startsWith(suffix));\n if (!line) return setPwned({ count: 0 });\n const parts = line.split(\":\");\n const count = parseInt(parts[1].trim(), 10);\n setPwned({ count });\n } catch (e) {\n setPwned(null);\n } finally {\n setChecking(false);\n }\n }\n\n async function sha1Hex(message) {\n const enc = new TextEncoder().encode(message);\n const hash = await crypto.subtle.digest(\"SHA-1\", enc);\n const bytes = Array.from(new Uint8Array(hash));\n return bytes.map((b) => b.toString(16).padStart(2, \"0\")).join(\"\").toUpperCase();\n }\n\n function copyPwd() {\n navigator.clipboard.writeText(pwd).then(() => {\n setCopied(true);\n setTimeout(() => setCopied(false), 1200);\n });\n }\n\n return (\n

\n {label}\n\n

\n {\n setPwd(e.target.value);\n setPwned(null);\n }}\n placeholder={placeholder}\n className=\"w-full rounded-2xl border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 px-4 py-3 pr-24 text-base\"\n autoComplete=\"new-password\"\n />\n

\n setShow((s) => !s)}\n className=\"p-2 rounded-xl hover:bg-gray-100\"\n aria-label={show ? \"Hide password\" : \"Show password\"}\n title={show ? \"Hide\" : \"Show\"}\n >\n {show ? : }\n \n \n \n \n

\n\n {capsOn && (\n

\n Caps Lock is on\n

\n )}\n\n {/* Strength meter */}\n

\n \n {verdict.emoji}\n {verdict.title}\n \n Entropy ≈ {entropyBits} bits\n

\n \n

{verdict.tone} (~{crackTimeDisplay} offline)

\n\n {/* Hints */}\n

\n {checks.map((c, i) => (\n \n {c.ok ? : }\n {c.label}\n

\n ))}\n

\n\n {/* zxcvbn suggestions */}\n {result.feedback.warning || result.feedback.suggestions.length > 0 ? (\n

Hints from our cranky judge:

{result.feedback.warning}
{s}

\n ) : null}\n\n {/* Breach check */}\n

\n checkPwned(pwd)}\n disabled={!pwd || checking}\n >\n {checking ? \"Checking breaches…\" : \"Check if this password has leaked\"}\n \n {pwned && (\n

\n {pwned.count > 0 ? (\n Found in {pwned.count.toLocaleString()} breaches. Please pick another.\n ) : (\n No known breaches for this exact password.\n )}\n

\n )}\n

\n\n {/* Dev tips */}\n

Dev notes

This uses zxcvbn for realistic strength scoring (0–4) and guidance.
Consider enforcing rules server-side and rate-limiting breach checks.
Encourage passphrases (4+ random words) for both strength and memorability.
Never block paste. Support password managers.

\n \n );\n}\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","4831251604653203962","traceTime",1776525282362]