4c:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T3f57,"use client"; import { useState } from "react"; import type { PasswordField as PasswordFieldDef } from "@buildnbuzz/form-react"; import { useDataField } from "@buildnbuzz/form-react"; import { Input } from "@/components/ui/input"; import { Button } from "@/components/ui/button"; import { CopyButton } from "../components/copy-button"; import { IconPlaceholder } from "@/components/icon-placeholder"; import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, } from "@/components/ui/field"; import { cn } from "@/lib/utils"; interface PasswordUi { /** Show a password strength indicator bar. */ strengthIndicator?: boolean; /** Show a checklist of password requirements. */ showRequirements?: boolean; /** Show a generate strong password button. */ allowGenerate?: boolean; /** Show a copy button. */ copyable?: boolean; autoFocus?: boolean; className?: string; width?: string | number; asterisk?: boolean; /** Text and label overrides. */ labels?: { /** Labels for different strength levels. */ strength?: Partial>; /** Labels for individual requirements. */ requirements?: { minLength?: React.ReactNode | ((min: number) => React.ReactNode); maxLength?: React.ReactNode | ((max: number) => React.ReactNode); uppercase?: React.ReactNode; lowercase?: React.ReactNode; number?: React.ReactNode; special?: React.ReactNode; }; /** A11y and tooltip strings (must be strings for HTML attributes). */ aria?: { generate?: string; showPassword?: string; hidePassword?: string; requirementsList?: string; }; }; } interface StrengthResult { score: 0 | 1 | 2 | 3 | 4; label: "none" | "weak" | "fair" | "strong" | "excellent"; allMet: boolean; checks: { minLength: boolean; maxLength: boolean; hasUppercase: boolean; hasLowercase: boolean; hasNumber: boolean; hasSpecial: boolean; }; } const STRENGTH_LABELS: Record = { none: "", weak: "Weak", fair: "Fair", strong: "Strong", excellent: "Excellent", }; function calculateStrength( value: string, field: PasswordFieldDef, ): StrengthResult { const minLength = field.minLength ?? 8; const criteria = field.criteria ?? {}; const checks = { minLength: value.length >= minLength, maxLength: field.maxLength ? value.length <= field.maxLength : true, hasUppercase: /[A-Z]/.test(value), hasLowercase: /[a-z]/.test(value), hasNumber: /[0-9]/.test(value), hasSpecial: /[^A-Za-z0-9]/.test(value), }; const required = [ { met: checks.minLength }, ...(field.maxLength ? [{ met: checks.maxLength }] : []), ...(criteria.requireUppercase ? [{ met: checks.hasUppercase }] : []), ...(criteria.requireLowercase ? [{ met: checks.hasLowercase }] : []), ...(criteria.requireNumber ? [{ met: checks.hasNumber }] : []), ...(criteria.requireSpecial ? [{ met: checks.hasSpecial }] : []), ]; const allMet = required.every((r) => r.met); if (!value) return { score: 0, label: "none", allMet: false, checks }; const variety = [ checks.hasUppercase, checks.hasLowercase, checks.hasNumber, checks.hasSpecial, ].filter(Boolean).length; let score: number; if (value.length < 4) score = 0; else if (value.length < minLength) score = 1; else { score = Math.min(variety, 4); if (value.length >= 16) score = Math.min(score + 1, 4); } if (!allMet) score = Math.min(score, 2); const labels: Record = { 0: "none", 1: "weak", 2: "fair", 3: "strong", 4: "excellent", }; return { score: score as StrengthResult["score"], label: labels[score] ?? "none", allMet, checks, }; } function generatePassword(field: PasswordFieldDef): string { const criteria = field.criteria ?? {}; const minLength = Math.max(field.minLength ?? 16, 12); const upper = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; const lower = "abcdefghijklmnopqrstuvwxyz"; const numbers = "0123456789"; const special = "!@#$%^&*()_+-=[]{}|;:,.<>?"; let pool = lower + upper + numbers; let password = ""; if (criteria.requireUppercase) { pool += upper; password += upper[Math.floor(Math.random() * upper.length)]; } if (criteria.requireLowercase) { pool += lower; password += lower[Math.floor(Math.random() * lower.length)]; } if (criteria.requireNumber) { pool += numbers; password += numbers[Math.floor(Math.random() * numbers.length)]; } if (criteria.requireSpecial) { pool += special; password += special[Math.floor(Math.random() * special.length)]; } const remaining = Math.max(0, minLength - password.length); for (let i = 0; i < remaining; i++) { password += pool[Math.floor(Math.random() * pool.length)]; } return password.split("").sort(() => 0.5 - Math.random()).join(""); } function getStrengthBarColor(score: number, allMet: boolean): string { if (allMet && score >= 3) return "bg-green-500"; if (score >= 3) return "bg-emerald-500"; if (score === 2) return "bg-orange-500"; return "bg-red-500"; } function getStrengthTextColor(score: number, allMet: boolean): string { if (allMet && score >= 3) return "text-green-600 dark:text-green-400"; if (score >= 3) return "text-emerald-600 dark:text-emerald-400"; if (score === 2) return "text-orange-600 dark:text-orange-400"; return "text-red-600 dark:text-red-400"; } export function PasswordField() { const { fieldApi, field, isDisabled, isReadOnly, isRequired, label, placeholder, description, errors, isInvalid, descriptionId, errorId, ariaDescribedBy, handleChange, handleBlur, } = useDataField(); const [visible, setVisible] = useState(false); const value = (fieldApi.state.value as string) ?? ""; const ui = field.ui as PasswordUi | undefined; const labels = ui?.labels; const criteria = field.criteria; const width = ui?.width; const widthStyle = width ? { width: typeof width === "number" ? `${width}px` : width, flex: "0 1 auto", } : undefined; const strength = ui?.strengthIndicator || ui?.showRequirements ? calculateStrength(value, field) : null; const resolveRequirementLabel = < K extends keyof NonNullable< NonNullable["requirements"] >, >( key: K, defaultLabel: React.ReactNode, arg?: number, ): React.ReactNode => { const override = labels?.requirements?.[key]; if (typeof override === "function" && arg !== undefined) { // We know arg is a number and the only functions here take a number return (override as (v: number) => React.ReactNode)(arg); } return (override as React.ReactNode) ?? defaultLabel; }; const requirements = ui?.showRequirements ? [ { key: "minLength", label: resolveRequirementLabel( "minLength", `At least ${field.minLength ?? 8} characters`, field.minLength ?? 8, ), met: strength?.checks.minLength ?? false, }, ...(field.maxLength ? [ { key: "maxLength", label: resolveRequirementLabel( "maxLength", `At most ${field.maxLength} characters`, field.maxLength, ), met: strength?.checks.maxLength ?? false, }, ] : []), ...(criteria?.requireUppercase ? [ { key: "uppercase", label: resolveRequirementLabel("uppercase", "One uppercase letter"), met: strength?.checks.hasUppercase ?? false, }, ] : []), ...(criteria?.requireLowercase ? [ { key: "lowercase", label: resolveRequirementLabel("lowercase", "One lowercase letter"), met: strength?.checks.hasLowercase ?? false, }, ] : []), ...(criteria?.requireNumber ? [ { key: "number", label: resolveRequirementLabel("number", "One number"), met: strength?.checks.hasNumber ?? false, }, ] : []), ...(criteria?.requireSpecial ? [ { key: "special", label: resolveRequirementLabel("special", "One special character"), met: strength?.checks.hasSpecial ?? false, }, ] : []), ] : []; // pr class based on visible action buttons const inputPrClass = cn( "pr-9", ui?.allowGenerate && "pr-16", ui?.allowGenerate && ui?.copyable && "pr-24", ); return ( {label && ( {label} {isRequired && ui?.asterisk !== false ? ( * ) : null} )}

handleChange(e.target.value)} onBlur={handleBlur} placeholder={placeholder} disabled={isDisabled} readOnly={isReadOnly} aria-invalid={isInvalid} aria-describedby={ariaDescribedBy} minLength={field.minLength} maxLength={field.maxLength} required={isRequired} className={inputPrClass} />

{ui?.copyable && value && ( )} {ui?.allowGenerate && ( )}

{ui?.strengthIndicator && value && strength && (

{[0, 1, 2, 3].map((i) => (

))}

{strength.label !== "none" && ( {labels?.strength?.[strength.label] ?? STRENGTH_LABELS[strength.label]} )}

)} {requirements.length > 0 && (

{requirements.map((req) => (

{value ? ( req.met ? ( ) : ( ) ) : ( )} {req.label}

))}

)}

{description && !isInvalid && ( {description} )} {isInvalid && } ); } 4b:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4c",null,{"namespace":"@buzzform","registryDependencies":["@buzzform/init","input","field","@buzzform/copy"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"registry/shadcn/fields/password.tsx","content":"$4e","type":"registry:component","target":"components/buzzform/fields/password.tsx"}],"className":"h-[70svh] min-h-80"}]]}]