apertureless / Vue Password Strength Meter
Licence: mit
🔐 Password strength meter based on zxcvbn in vue.js
Stars: ✭ 510
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Password Strength Meter
Passwordpusher
🔐 PasswordPusher is an application to securely communicate passwords over the web. Passwords automatically expire after a certain number of views and/or time has passed.
Stars: ✭ 484 (-5.1%)
Mutual labels: password, password-safety
Password Strength
Angular UI library to illustrate and validate a password's strength with material design - Angular V9 supported
Stars: ✭ 186 (-63.53%)
Mutual labels: password, password-safety
Probable Wordlists
Version 2 is live! Wordlists sorted by probability originally created for password generation and testing - make sure your passwords aren't popular!
Stars: ✭ 7,312 (+1333.73%)
Mutual labels: password, password-safety
keevault
Kee Vault is a password manager for your web browser. Password databases (Vaults) are encrypted using the KeePass storage format before being sent to a remote server for synchronisation across any modern device/browser
Stars: ✭ 57 (-88.82%)
Mutual labels: password, password-safety
laravel-pwned-passwords
Simple Laravel validation rule that allows you to prevent or limit the re-use of passwords that are known to be pwned (unsafe). Based on TroyHunt's Have I Been Pwned (https://haveibeenpwned.com)
Stars: ✭ 67 (-86.86%)
Mutual labels: password, password-safety
Kaonashi
Wordlist, rules and masks from Kaonashi project (RootedCON 2019)
Stars: ✭ 353 (-30.78%)
Mutual labels: password, password-safety
Passpwn
See if your passwords in pass has been breached.
Stars: ✭ 130 (-74.51%)
Mutual labels: password, password-safety
mopass
A OpenSource Clientless & Serverless Password Manager
Stars: ✭ 40 (-92.16%)
Mutual labels: password, password-safety
password-list
Password lists with top passwords to optimize bruteforce attacks
Stars: ✭ 174 (-65.88%)
Mutual labels: password, password-safety
Bewgor
Bull's Eye Wordlist Generator - Does your password rely on predictable patterns of accessible info?
Stars: ✭ 333 (-34.71%)
Mutual labels: password, password-safety
Passmaker
可以自定义规则的密码字典生成器,支持图形界面 A password-generator that base on the rules that you specified
Stars: ✭ 363 (-28.82%)
Mutual labels: password, password-safety
Tiptap Vuetify
Vuetify editor. Component simplifies integration tiptap editor with vuetify.
Stars: ✭ 498 (-2.35%)
Mutual labels: vuejs2
Dictionary Of Pentesting
Dictionary collection project such as Pentesing, Fuzzing, Bruteforce and BugBounty. 渗透测试、SRC漏洞挖掘、爆破、Fuzzing等字典收集项目。
Stars: ✭ 492 (-3.53%)
Mutual labels: password
Passwall Server
PassWall Server is the core backend infrastructure for PassWall platform
Stars: ✭ 489 (-4.12%)
Mutual labels: password
Sing App Vue Dashboard
Vue.js admin dashboard template built with Bootstrap 4.5
Stars: ✭ 482 (-5.49%)
Mutual labels: vuejs2
Vuetify Admin Dashboard
A Crud Admin panel made from Vue js and Vuetify
Stars: ✭ 481 (-5.69%)
Mutual labels: vuejs2
Vue Star Rating
⭐️ A simple, highly customisable star rating component for Vue 2.x. / 3.x
Stars: ✭ 509 (-0.2%)
Mutual labels: vuejs2
🔓 vue-password-strength-meter
Interactive password strength meter based on zxcvbn for vue.js
📺 Demo
🔧 Install
yarn add vue-password-strength-meter zxcvbn
👈 Usage
<template>
<password v-model="password"/>
</template>
<script>
import Password from 'vue-password-strength-meter'
export default {
components: { Password },
data: () => ({
password: null
})
}
</script>
👈 With events
<template>
<password
v-model="password"
:toggle="true"
@score="showScore"
@feedback="showFeedback"
/>
</template>
<script>
import Password from 'vue-password-strength-meter'
export default {
components: { Password },
data: () => ({
password: null
}),
methods: {
showFeedback ({suggestions, warning}) {
console.log('🙏', suggestions)
console.log('⚠', warning)
},
showScore (score) {
console.log('💯', score)
}
}
}
</script>
With custom input
<template>
<div>
<input type="password" v-model="password">
<password v-model="password" :strength-meter-only="true"/>
</div>
</template>
<script>
import Password from 'vue-password-strength-meter'
export default {
components: { Password },
data: () => ({
password: null
})
}
</script>
Props
Prop | Type | Default Value | Description |
---|---|---|---|
secureLength | Number | 7 | password min length |
badge | Boolean | true | display password count badge |
toggle | Boolean | false | show button to toggle password visibility |
showPassword | Boolean | false | If you are not using the toggle button you can directly show / hide the password with this prop |
defaultClass | String | Password__field | input field class |
disabledClass | String | Password__field--disabled | disabled input field class |
errorClass | String | Password__badge--error | error class for password count badge |
successClass | String | Password__badge--success | success class for password count badge |
strengthMeterClass | String | Password__strength-meter | strength-meter class |
strengthMeterFillClass | String | Password__strength-meter--fill | strength-meter class for individual data fills |
showStrengthMeter | Boolean | true | Hide the Strength Meter if you want to implement your own |
strengthMeterOnly | Boolean | false | Hides the built-in input if you want to implement your own |
labelHide | String | 'Hide Password' | Label for the hide icon |
labelShow | String | 'Show Password' | Label for the show icon |
userInputs | Array | empty array | Array of strings that zxcvbn will treat as an extra dictionary |
referenceValue | String | 'input' | Prop to change the ref of the input. This way you can have the input outside of the component. |
Events
Show / Hide Password
-
@show
will be emitted if showing the password -
@hide
will be emitted if hiding the password -
@score
will return the zxcvbn score (Integer from 0-4) [ℹ] (https://github.com/dropbox/zxcvbn#usage) -
@feedback
will return an zxcvbn feedback object withsuggestion
andwarning
💅 Customizing
You can customize the styling of the input field, badge and strength-meter by passing your own css classes
to defaultClass
, strengthMeterClass
etc.
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# run unit tests
npm run unit
# run all tests
npm test
For detailed explanation on how things work, checkout the guide and docs for vue-loader.
Support
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].