@passcore/vue
Vue
@passcore/vue ofereix un component, <PasswordStrengthMeter>, i el composable usePasswordStrength(), per a Vue 3.5 o posterior.
pnpm add @passcore/vue
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 funciona amb qualsevol v-model. Sempre es veu; id l’associa al camp.
<script setup>
import { ref } from 'vue'
import { PasswordStrengthMeter } from '@passcore/vue'
import '@passcore/vue/styles.css'
const password = ref('')
</script>
<template>
<input id="password" v-model="password" type="password" aria-describedby="password-strength">
<PasswordStrengthMeter id="password-strength" :password="password" />
</template>Llista de requisits
El clàssic formulari de registre, amb el teu propi marcatge: el composable usePasswordStrength() retorna el resultat com a ref, 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 setup>
import { computed, ref } from 'vue'
import { PasswordStrengthMeter, usePasswordStrength } from '@passcore/vue'
const rules = { minLength: 8, lowercase: 1, uppercase: 1, numbers: 1, symbols: 1 }
const username = ref('')
const password = ref('')
const { result } = usePasswordStrength(password, () => ({ userInputs: [username.value], rules }))
const typed = computed(() => password.value !== '')
const met = computed(() => result.value.rules.filter((rule) => rule.passed).length)
</script>
<template>
<PasswordStrengthMeter :password="password" :user-inputs="[username]" :rules="rules" />
<ul>
<li v-for="rule in result.rules" :key="rule.id" :data-state="!typed ? 'idle' : rule.passed ? 'met' : 'unmet'">
{{ t(`requirements.rule.${rule.id}`, { count: rule.params.min }) }}
</li>
</ul>
<p aria-live="polite">
{{ typed ? `${met} of ${result.rules.length} requirements met` : `${result.rules.length} requirements to meet` }}
</p>
</template>Amb el percentatge
show-percent afegeix el número al costat de la barra.
<PasswordStrengthMeter id="password-strength" :password="password" show-percent />Vinculat a un nom d’usuari
Amb user-inputs la contrasenya no pot contenir el nom d’usuari. Passa-li els valors actuals, directament de les teves refs.
<input v-model="username" type="text" autocomplete="username">
<PasswordStrengthMeter
id="password-strength"
:password="password"
:user-inputs="[username]"
show-percent
/>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 setup>
import en from '@passcore/vue/locales/en.json'
import es from '@passcore/vue/locales/es.json'
import ca from '@passcore/vue/locales/ca.json'
const locales = { en, es, ca }
</script>
<template>
<PasswordStrengthMeter
:password="password"
:translations="locales[lang]"
:locale="lang"
:label="labels[lang]"
show-percent
/>
</template>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 setup>
import i18next from 'i18next'
import es from '@passcore/vue/locales/es.json'
import ca from '@passcore/vue/locales/ca.json'
i18next.addResourceBundle('es', 'passcore', es)
i18next.addResourceBundle('ca', 'passcore', ca)
const translate = (key, params) => i18next.t(key, { ns: 'passcore', ...params })
</script>
<template>
<!-- locale tells the meter to translate again -->
<PasswordStrengthMeter :password="password" :translate="translate" :locale="lang" :label="labels[lang]" show-percent />
</template>Callbacks i esdeveniments
L’esdeveniment score porta el percentatge cada vegada que canvia el resultat (mai en muntar-se). Aquí controla la puntuació i el botó Envia.
<script setup>
const percent = ref(0)
</script>
<template>
<PasswordStrengthMeter :password="password" @score="(value) => (percent = value)" />
<output>{{ percent }}%</output>
<button type="submit" :disabled="percent <= 75">Send</button>
</template>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" v-model="password" type="password">
</div>
<PasswordStrengthMeter :password="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.