Initial commit

lib/components/PasswordStrengthIndicator.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	interface Props {
+		password: string;
+	}
+
+	let { password }: Props = $props();
+
+	// Calculate password strength (0-4)
+	const strength = $derived.by(() => {
+		if (!password) return 0;
+
+		let score = 0;
+
+		// Length checks
+		if (password.length >= 8) score++;
+		if (password.length >= 12) score++;
+
+		// Character variety checks
+		if (/[a-z]/.test(password) && /[A-Z]/.test(password)) score++;
+		if (/\d/.test(password)) score++;
+		if (/[^a-zA-Z0-9]/.test(password)) score++;
+
+		return Math.min(score, 4);
+	});
+
+	const strengthLabel = $derived(
+		strength === 0 ? 'Too short' :
+		strength === 1 ? 'Weak' :
+		strength === 2 ? 'Fair' :
+		strength === 3 ? 'Good' :
+		'Strong'
+	);
+
+	const strengthColor = $derived(
+		strength === 0 ? 'bg-muted' :
+		strength === 1 ? 'bg-red-500' :
+		strength === 2 ? 'bg-orange-500' :
+		strength === 3 ? 'bg-yellow-500' :
+		'bg-green-500'
+	);
+
+	const strengthTextColor = $derived(
+		strength === 0 ? 'text-muted-foreground' :
+		strength === 1 ? 'text-red-500' :
+		strength === 2 ? 'text-orange-500' :
+		strength === 3 ? 'text-yellow-500' :
+		'text-green-500'
+	);
+</script>
+
+{#if password}
+	<div class="space-y-1">
+		<div class="flex gap-1 h-1">
+			{#each [1, 2, 3, 4] as level}
+				<div
+					class="flex-1 rounded-full transition-colors {strength >= level ? strengthColor : 'bg-muted'}"
+				></div>
+			{/each}
+		</div>
+		<p class="text-xs {strengthTextColor}">{strengthLabel}</p>
+	</div>
+{/if}