@passcore/svelte
Svelte
@passcore/svelte ofereix un component, <PasswordStrengthMeter>, i passwordStrength(), una funció auxiliar basada en runes, per a Svelte 5.
pnpm add @passcore/svelte
Tots els indicadors d’aquesta pàgina parlen la teva llengua. L’espai de proves dona a cadascun els textos de la llengua que triïs a dalt i el seu nom accessible. Perquè els fragments de codi siguin breus, només les demostracions de traducció mostren com es fa; el botó per mostrar i amagar la contrasenya és de l’espai de proves, no del paquet.
Per defecte
El component rep la contrasenya com a prop, així que n’hi ha prou amb un bind:value al teu camp. Sempre es veu; id l’associa al camp.
<script>
import { PasswordStrengthMeter } from '@passcore/svelte'
import '@passcore/svelte/styles.css'
let password = $state('')
</script>
<input id="password" type="password" bind:value={password} aria-describedby="password-strength" />
<PasswordStrengthMeter id="password-strength" {password} />Llista de requisits
El clàssic formulari de registre, amb el teu propi marcatge: passwordStrength() retorna el resultat com a getter, i result.rules enumera totes les regles actives, per ordre, amb el seu id, passed i params. El component dibuixa la barra al costat. Cada element es queda en gris fins que s’hi escriu alguna cosa: una contrasenya buida tampoc no és “comuna”, i mostrar-ho en verd seria enganyós.
<script>
import { PasswordStrengthMeter, passwordStrength } from '@passcore/svelte'
const rules = { minLength: 8, lowercase: 1, uppercase: 1, numbers: 1, symbols: 1 }
let username = $state('')
let password = $state('')
const strength = passwordStrength(() => password, () => ({ userInputs: [username], rules }))
const typed = $derived(password !== '')
const met = $derived(strength.result.rules.filter((rule) => rule.passed).length)
</script>
<PasswordStrengthMeter {password} userInputs={[username]} {rules} />
<ul>
{#each strength.result.rules as rule (rule.id)}
<li data-state={!typed ? 'idle' : rule.passed ? 'met' : 'unmet'}>
{t(`requirements.rule.${rule.id}`, { count: rule.params.min })}
</li>
{/each}
</ul>
<p aria-live="polite">
{typed ? `${met} of ${strength.result.rules.length} requirements met` : `${strength.result.rules.length} requirements to meet`}
</p>Amb el percentatge
showPercent afegeix el número al costat de la barra.
<PasswordStrengthMeter id="password-strength" {password} showPercent />Vinculat a un nom d’usuari
Amb userInputs la contrasenya no pot contenir el nom d’usuari. Passa-li els valors actuals, directament del teu estat.
<script>
let username = $state('')
</script>
<input type="text" autocomplete="username" bind:value={username} />
<PasswordStrengthMeter id="password-strength" {password} userInputs={[username]} showPercent />Traduccions incloses
Els fitxers inclosos van a translations, locale tria les formes del plural i label dona nom a l’indicador per als lectors de pantalla. Canvia la llengua a dalt: props noves, textos nous.
<script>
import en from '@passcore/svelte/locales/en.json'
import es from '@passcore/svelte/locales/es.json'
import ca from '@passcore/svelte/locales/ca.json'
const locales = { en, es, ca }
</script>
<PasswordStrengthMeter
{password}
translations={locales[lang]}
locale={lang}
label={labels[lang]}
showPercent
/>Traduccions amb i18next
translate rep la funció t d’una instància d’i18next, aquí la del mateix espai de proves. La funció no canvia mai, així que locale indica al component quan ha de tornar a traduir.
<script>
import i18next from 'i18next'
import es from '@passcore/svelte/locales/es.json'
import ca from '@passcore/svelte/locales/ca.json'
i18next.addResourceBundle('es', 'passcore', es)
i18next.addResourceBundle('ca', 'passcore', ca)
const translate = (key, params) => i18next.t(key, { ns: 'passcore', ...params })
</script>
<!-- locale tells the meter to translate again -->
<PasswordStrengthMeter {password} {translate} locale={lang} label={labels[lang]} showPercent />Callbacks i esdeveniments
onscore rep el percentatge cada vegada que canvia el resultat (mai en muntar-se). Aquí controla la puntuació i el botó Envia.
<script>
let percent = $state(0)
</script>
<PasswordStrengthMeter {password} onscore={(value) => (percent = value)} />
<output>{percent}%</output>
<button type="submit" disabled={percent <= 75}>Send</button>Grup de camps
L’indicador és un element més: posa’l després del grup de camps i n’ocuparà tota l’amplada.
<div class="form-group">
<label for="password">Password</label>
<div class="input-group">
<span class="input-group__addon">…</span>
<input id="password" type="password" bind:value={password} />
</div>
<PasswordStrengthMeter {password} />
</div>Temes
Els colors, la pista i l’alçada són propietats personalitzades de CSS: de --pass-color-very-weak a --pass-color-strong, --pass-track i --pass-height. Juga-hi aquí: el CSS de sota canvia alhora.
- Molt feble
- Feble
- Acceptable
- Bona
- Forta
.signup {
--pass-height: 6px;
--pass-track: #e4e2db;
--pass-color-very-weak: #d92d20;
--pass-color-weak: #e06a0f;
--pass-color-fair: #c99400;
--pass-color-good: #5e9e0f;
--pass-color-strong: #16884a;
}Els controls només canvien aquesta previsualització, de manera que les altres demostracions mantenen el seu aspecte. Defineix les propietats a :root per aplicar el tema a tot un lloc web.