mirror of
https://github.com/bretzel-app/crumbs.git
synced 2026-10-12 20:06:57 +02:00
Frederic CabassutandClaude Opus 4.6
522fdbfd13
- Move settings routes into (app) layout group for header/sidebar - Replace all gray/white/dark-mode Tailwind classes with CSS variables - Use rounded-sm, card-shadow, and parchment color tokens throughout - Fix PasswordStrengthMeter to use themed colors - Fix page titles from "KeepNotes" to "Crumbs" Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
37 lines
913 B
Svelte
37 lines
913 B
Svelte
<script lang="ts">
|
|
import zxcvbn from 'zxcvbn';
|
|
|
|
let { password = '' }: { password: string } = $props();
|
|
|
|
const result = $derived(password.length > 0 ? zxcvbn(password) : null);
|
|
|
|
const labels = ['Very weak', 'Weak', 'Fair', 'Strong', 'Very strong'];
|
|
const colors = [
|
|
'bg-[var(--destructive)]',
|
|
'bg-[var(--destructive)]',
|
|
'bg-[var(--primary)]',
|
|
'bg-[var(--success-text)]',
|
|
'bg-[var(--success-text)]'
|
|
];
|
|
</script>
|
|
|
|
{#if result}
|
|
<div class="mt-1 mb-2" data-testid="password-strength">
|
|
<div class="flex gap-1">
|
|
{#each { length: 4 } as _, i}
|
|
<div
|
|
class="h-1 flex-1 rounded-sm transition-colors {i <= result.score
|
|
? colors[result.score]
|
|
: 'bg-[var(--border-subtle)]'}"
|
|
></div>
|
|
{/each}
|
|
</div>
|
|
<p class="mt-1 text-xs text-[var(--text-muted)]">
|
|
{labels[result.score]}
|
|
{#if result.feedback.warning}
|
|
— {result.feedback.warning}
|
|
{/if}
|
|
</p>
|
|
</div>
|
|
{/if}
|