Framework examples
Those examples are using the full feature set of zxcvbn, and are marked with recommanded
and optional
Vue
<template>
<div class="example">
<label>
Password
<input v-model="password" type="text" />
</label>
<template v-if="result">
<div>
The password score is {{result.score}}/4
</div>
</template>
</div>
</template>
<script>
import { zxcvbn, zxcvbnOptions, debounce } from '@zxcvbn-ts/core'
import zxcvbnCommonPackage from '@zxcvbn-ts/language-common'
import zxcvbnEnPackage from '@zxcvbn-ts/language-en'
import zxcvbnDePackage from '@zxcvbn-ts/language-de'
import matcherPwnedFactory from '@zxcvbn-ts/matcher-pwned'
// optional
const matcherPwned = matcherPwnedFactory(fetch, zxcvbnOptions)
zxcvbnOptions.addMatcher('pwned', matcherPwned)
const options = {
// recommended
dictionary: {
...zxcvbnCommonPackage.dictionary,
...zxcvbnEnPackage.dictionary,
// recommended the language of the country that the user will be in
...zxcvbnDePackage.dictionary,
},
// recommended
graphs: zxcvbnCommonPackage.adjacencyGraphs,
// recommended
useLevenshteinDistance: true,
// optional
translations: zxcvbnEnPackage.translations,
}
zxcvbnOptions.setOptions(options)
export default {
name: 'ZxcvbnInput',
data() {
return {
password: '',
result: null,
// recommended
debounce: debounce(this.useZxcvbn, 200)
}
},
methods: {
setResult(result) {
this.result = result
},
async useZxcvbn(){
if (this.password) {
this.result = await zxcvbn(this.password)
} else {
this.result = null
}
}
},
watch: {
password() {
this.debounce()
},
},
}
</script>
React
tbd.
Angular
tbd.