@torch-ui/solid 0.1.3

package/src/components/feedback/password/PasswordStrengthIndicator.tsx

@@ -0,0 +1,232 @@
+/**
+
+ * Password strength indicator - minimal implementation.
+
+ * Pass password as a prop; updates reactively when parent re-renders with new value.
+
+ *
+
+ * Usage: <PasswordStrengthIndicator password={password()} showHelperText />
+
+ */
+
+import { createMemo, createUniqueId, Show, splitProps } from 'solid-js'
+
+import { cn } from '../../../utilities/classNames'
+
+import { getPasswordAnalysis } from './password-strength'
+
+import type { PasswordStrength } from './password-strength'
+
+import { Progress } from '../Progress'
+
+
+
+const SEGMENT_COUNT = 8
+
+
+
+const CONFIG: Record<
+
+	PasswordStrength,
+
+	{ label: string; bg: string; textColor: string; helperText: string }
+
+> = {
+
+	empty: { label: '', bg: '', textColor: 'text-ink-500', helperText: '' },
+
+	poor: {
+
+		label: 'Poor',
+
+		bg: 'bg-danger-500',
+
+		textColor: 'text-danger-600',
+
+		helperText: 'Your password is easily guessable. You can do better.',
+
+	},
+
+	fair: {
+
+		label: 'Average',
+
+		bg: 'bg-amber-500',
+
+		textColor: 'text-amber-600',
+
+		helperText: 'Getting there, but could be stronger.',
+
+	},
+
+	good: {
+
+		label: 'Strong',
+
+		bg: 'bg-success-500',
+
+		textColor: 'text-success-600',
+
+		helperText: 'Your password is great. Nice work!',
+
+	},
+
+	excellent: {
+
+		label: 'Very Strong',
+
+		bg: 'bg-success-500',
+
+		textColor: 'text-success-600',
+
+		helperText: 'Excellent password. Nice work!',
+
+	},
+
+}
+
+
+
+export interface PasswordStrengthIndicatorProps {
+
+	/** Current password value - pass the signal's value, e.g. password={newPassword()} */
+
+	password?: string
+
+	class?: string
+
+	/** Show helper text below the bar. Default: true. */
+
+	showHelperText?: boolean
+
+}
+
+
+
+export function PasswordStrengthIndicator(props: PasswordStrengthIndicatorProps) {
+
+	const [local] = splitProps(props, ['password', 'class', 'showHelperText'])
+
+
+
+	const helperId = `psi-helper-${createUniqueId()}`
+
+	const pwd = () => local.password ?? ''
+
+	const analysis = createMemo(() => getPasswordAnalysis(pwd()))
+
+	const strength = createMemo(() => analysis().strength)
+
+	const cfg = createMemo(() => CONFIG[strength()])
+
+	const segmentValue = createMemo(() => (analysis().segmentScore / SEGMENT_COUNT) * 100)
+
+
+
+	const missing = createMemo(() => {
+
+		const r = analysis().requirements
+
+		const m: string[] = []
+
+		if (!r.hasMinLength) m.push('at least 8 characters')
+
+		if (!r.hasUppercase) m.push('an uppercase letter')
+
+		if (!r.hasLowercase) m.push('a lowercase letter')
+
+		if (!r.hasNumber) m.push('a number')
+
+		if (!r.hasSymbol) m.push('a symbol')
+
+		return m
+
+	})
+
+
+
+	const helperText = () => {
+
+		if (strength() === 'empty') return 'Enter a password to see strength.'
+
+		if (strength() === 'poor' || strength() === 'fair') {
+
+			const m = missing()
+
+			if (m.length === 0) return cfg().helperText
+
+			if (m.length === 1) return `Must contain ${m[0]}.`
+
+			return `Must contain ${m.slice(0, -1).join(', ')}, and ${m[m.length - 1]}.`
+
+		}
+
+		return cfg().helperText
+
+	}
+
+
+
+	const isEmpty = () => strength() === 'empty'
+
+
+
+	return (
+
+		<div class={cn('mt-1.5', local.class)}>
+
+			<div class="flex items-center justify-between mb-1.5">
+
+				<span class="text-sm font-medium text-ink-700">Password Strength</span>
+
+				<span class={cn('text-sm font-medium', cfg().textColor)}>{cfg().label}</span>
+
+			</div>
+
+			<Progress
+
+				value={segmentValue()}
+
+				segments={SEGMENT_COUNT}
+
+				fillClass={cfg().bg}
+
+				trackClass="bg-transparent"
+
+				showValueLabel={false}
+
+				aria-label={isEmpty() ? 'Password strength: not set' : `Password strength: ${cfg().label}`}
+
+				aria-describedby={local.showHelperText !== false ? helperId : undefined}
+
+			/>
+
+			<Show when={local.showHelperText !== false}>
+
+				<p
+
+					id={helperId}
+
+					class={cn(
+
+						'mt-1.5 text-sm',
+
+						(strength() === 'poor' || strength() === 'fair') ? 'text-ink-600' : 'text-ink-500'
+
+					)}
+
+				>
+
+					{helperText()}
+
+				</p>
+
+			</Show>
+
+		</div>
+
+	)
+
+}
+

package/src/components/feedback/password/password-strength.ts

@@ -0,0 +1,115 @@
+/**
+ * Password strength and requirements.
+ *
+ * Callers should NOT trim the password before passing it in; these functions
+ * operate on the raw value. isPasswordWeak (from password-validation) trims
+ * internally for its own pattern checks — that asymmetry is intentional so
+ * that leading/trailing spaces count toward length and character requirements
+ * but don't bypass weak-pattern detection.
+ */
+import { isPasswordWeak } from './password-validation'
+
+export type PasswordStrength = 'empty' | 'poor' | 'fair' | 'good' | 'excellent'
+
+export interface PasswordRequirements {
+	hasMinLength: boolean
+	hasUppercase: boolean
+	hasLowercase: boolean
+	hasNumber: boolean
+	hasSymbol: boolean
+}
+
+export interface PasswordAnalysis {
+	requirements: PasswordRequirements
+	/** Number of requirements met (0–5). */
+	met: number
+	strength: PasswordStrength
+	/** 0–8 segment score for smooth progress bar fill. */
+	segmentScore: number
+}
+
+/**
+ * Single-pass analysis: requirements, strength, and segment score.
+ * Use this instead of calling getPasswordRequirements / getPasswordStrength /
+ * getPasswordSegmentScore individually which avoids redundant computation on every keystroke.
+ */
+export function getPasswordAnalysis(password: string): PasswordAnalysis {
+	if (password.length === 0) {
+		return {
+			requirements: { hasMinLength: false, hasUppercase: false, hasLowercase: false, hasNumber: false, hasSymbol: false },
+			met: 0,
+			strength: 'empty',
+			segmentScore: 0,
+		}
+	}
+
+	const requirements = computeRequirements(password)
+	const met = [
+		requirements.hasMinLength,
+		requirements.hasUppercase,
+		requirements.hasLowercase,
+		requirements.hasNumber,
+		requirements.hasSymbol,
+	].filter(Boolean).length
+
+	const weak = isPasswordWeak(password)
+
+	const strength: PasswordStrength =
+		weak || met < 3 ? 'poor'
+		: met === 3 ? 'fair'
+		: met === 4 ? 'good'
+		: 'excellent'
+
+	// Segment score: 0–8 for smooth progress bar fill.
+	// When weak, cap at 2 regardless of met count.
+	let segmentScore: number
+	if (weak) {
+		segmentScore = Math.min(2, Math.max(1, met))
+	} else if (met <= 2) {
+		segmentScore = met
+	} else if (met === 3) {
+		segmentScore = requirements.hasMinLength && password.length >= 10 ? 4 : 3
+	} else if (met === 4) {
+		segmentScore = requirements.hasMinLength && password.length >= 12 ? 6 : 5
+	} else {
+		segmentScore = requirements.hasMinLength && password.length >= 14 ? 8 : 7
+	}
+
+	return { requirements, met, strength, segmentScore }
+}
+
+// Convenience wrappers (backward-compat, delegate to getPasswordAnalysis)
+
+export function getPasswordRequirements(password: string): PasswordRequirements {
+	return getPasswordAnalysis(password).requirements
+}
+
+export function getPasswordStrength(password: string): PasswordStrength {
+	return getPasswordAnalysis(password).strength
+}
+
+/** Returns 0–8 for smooth segment progression. */
+export function getPasswordSegmentScore(password: string): number {
+	return getPasswordAnalysis(password).segmentScore
+}
+
+// Internal
+
+function computeRequirements(password: string): PasswordRequirements {
+	let upper = false, lower = false, digit = false, symbol = false
+	for (let i = 0; i < password.length; i++) {
+		const c = password.charCodeAt(i)
+		if (c >= 65 && c <= 90) upper = true
+		else if (c >= 97 && c <= 122) lower = true
+		else if (c >= 48 && c <= 57) digit = true
+		else if (c >= 33 && c <= 126) symbol = true
+		if (upper && lower && digit && symbol) break
+	}
+	return {
+		hasMinLength: password.length >= 8,
+		hasUppercase: upper,
+		hasLowercase: lower,
+		hasNumber: digit,
+		hasSymbol: symbol,
+	}
+}

package/src/components/feedback/password/password-validation-data.ts

@@ -0,0 +1,66 @@
+/**
+ * Pattern data for password validation (common words, keyboard walks, sequential).
+ * Edit this file to add or remove patterns; used by password-validation.ts.
+ *
+ * Matching uses `includes()`, so longer entries implicitly cover shorter substrings.
+ * Only add a new entry when it is NOT a substring of an existing one in the same list.
+ */
+
+export const COMMON_WORDS = [
+	'password',
+	'admin',
+	'welcome',
+	'letmein',
+	'welcome1',
+	'monkey',
+	'dragon',
+	'master',
+	'sunshine',
+	'princess',
+	'football',
+	'iloveyou',
+	'admin123',
+	'root',
+	'pass',
+	'passw0rd',
+	'password1',
+	'qwerty123',
+	'abc123',
+	'admin1',
+	'welcome123',
+] as const
+
+// Longer walks cover shorter prefixes (e.g. 'qwertyuiop' covers 'qwerty').
+// Only unique, non-substring walks are listed.
+export const KEYBOARD_WALKS = [
+	'qwertyuiop',  // covers 'qwerty'
+	'asdfghjkl',   // covers 'asdfgh', 'asdf'
+	'zxcvbnm',     // covers 'zxcvbn'
+	'qazwsx',
+	'1qaz2wsx',
+	'qweasd',
+	'123qwe',
+	'qwe123',
+	'poiuyt',
+	'lkjhgf',
+	'mnbvcx',
+	'1q2w3e4r',
+	'q1w2e3r4',
+	'zaq1wsx',
+	'xsw2zaq',
+] as const
+
+// Full forward + reverse covers all shorter subsequences (e.g. '0123456789' covers '1234', '012', etc.).
+// '1234567890' and '0987654321' wrap around (9→0) and are NOT substrings of the straight sequences.
+export const SEQUENTIAL_DIGITS = [
+	'0123456789',
+	'1234567890',
+	'9876543210',
+	'0987654321',
+] as const
+
+// Full forward + reverse covers all shorter subsequences (e.g. 'abc', 'abcdef', 'cba', 'fedcba').
+export const SEQUENTIAL_LETTERS = [
+	'abcdefghijklmnopqrstuvwxyz',
+	'zyxwvutsrqponmlkjihgfedcba',
+] as const

package/src/components/feedback/password/password-validation.ts

@@ -0,0 +1,93 @@
+/**
+ * Password validation: blocks weak patterns and returns human-readable errors.
+ * Inlined for TorchUI standalone; patterns: sequential, keyboard walks, repetitive, common words.
+ *
+ * Note: common-word check uses substring matching (`includes`), so short words like
+ * "pass" or "root" may cause false positives on longer passwords. This is intentional —
+ * passwords that embed common words are weaker even in a longer context.
+ */
+import {
+	COMMON_WORDS,
+	KEYBOARD_WALKS,
+	SEQUENTIAL_DIGITS,
+	SEQUENTIAL_LETTERS,
+} from './password-validation-data'
+
+export interface PasswordValidationResult {
+	valid: boolean
+	error?: string
+}
+
+/**
+ * Checks the (already-trimmed) password against blocked patterns.
+ * Returns a human-readable error string if a pattern is found, or `null` if clean.
+ */
+function containsBlockedPattern(trimmed: string): string | null {
+	const lower = trimmed.toLowerCase()
+
+	for (const word of COMMON_WORDS) {
+		if (lower === word || lower.includes(word)) {
+			return 'Password contains a common word. Choose something more unique.'
+		}
+	}
+
+	for (const walk of KEYBOARD_WALKS) {
+		if (lower.includes(walk)) {
+			return 'Password contains a common keyboard pattern.'
+		}
+	}
+
+	for (const seq of SEQUENTIAL_DIGITS) {
+		if (lower.includes(seq)) {
+			return 'Password contains sequential numbers.'
+		}
+	}
+
+	for (const seq of SEQUENTIAL_LETTERS) {
+		if (lower.includes(seq)) {
+			return 'Password contains sequential letters.'
+		}
+	}
+
+	// No more than 2 identical characters in a row
+	if (/(.)\1{2,}/.test(trimmed)) {
+		return 'Password contains too many repeated characters.'
+	}
+
+	// Repetitive patterns (e.g. "abcabcabc"): checks 1-3 char repeating prefix
+	if (trimmed.length >= 6) {
+		for (let len = 1; len <= 3; len++) {
+			const pattern = lower.slice(0, len)
+			let repeats = 1
+			for (let i = len; i < lower.length; i += len) {
+				if (lower.slice(i, i + len) === pattern) repeats++
+				else break
+			}
+			if (repeats >= 3 && repeats * len >= 6) {
+				return 'Password is too repetitive.'
+			}
+		}
+	}
+
+	return null
+}
+
+/** Validate a password for form submission. Checks minimum length (8) and blocked patterns. */
+export function validatePassword(password: string): PasswordValidationResult {
+	const p = password.trim()
+	if (p.length < 8) {
+		return { valid: false, error: 'Password must be at least 8 characters' }
+	}
+	const error = containsBlockedPattern(p)
+	return error ? { valid: false, error } : { valid: true }
+}
+
+/**
+ * Check if a password contains blocked patterns (sequential, keyboard walks, etc.).
+ * Does NOT check length — use this for strength indicators, not form validation.
+ */
+export function isPasswordWeak(password: string): boolean {
+	const p = password.trim()
+	if (!p) return false // Empty is not "weak", just empty
+	return containsBlockedPattern(p) !== null
+}