# Vue Password Strength Component
A password input field for Vue.js with a password strength indicator.<br>
It uses [zxcvbn](https://github.com/dropbox/zxcvbn) to calcuate a score based on the input value entered by the user.

## Table of Contents

- [Installation](#installation)
- [How to use](#how-to-use)
- [Options](#options)
- [Events](#events)
- [Issues](#issues)
- [Contributing](#contributing)

<a name="installation"></a>
## Installation
#### Yarn
```
yarn add vue-password-strength
```
#### Npm
```
npm i vue-password-strength --save
```

#### Unpkg
```
<script src="https://unpkg.com/vue-password-strength"></script>
```

<a name="how-to-use"></a>
## How to use
#### Component
In your component you can use the default `vue-password-strength` component as follows:
```html
<template>
    <div id="app">
        <vue-password-strength />
    </div>
</template>
```

```js
<script>
import VuePasswordStrength from 'vue-password-strength';

export default {
    name: 'app',
    components: {
        VuePasswordStrength
    },
    // ... rest of your component
}
</script>
```

#### SSR
For a boost in performance in SSR applications you can use the `.vue` component instead of the complied component.<br>
Use `import VuePasswordStrength from 'vue-password-strength/sfc'`.

<a name="options"></a>
## Options
The `vue-password-strength` component is fully customizable and can be changed to your liking.<br>
<b>Example</b>
```html
<template>
    <div id="app">
        <vue-password-strength
            :value="oldPasswordValue"
            placeholder="Your old password" 
        />
    </div>
</template>
```
#### Available options:

| Name                       | Type    | Default                           |
|----------------------------|---------|-----------------------------------|
| id                         | String  | 'input-password'                  |
| type                       | String  | 'password'                        |
| placeholder                | String  | 'Enter your password'             |
| value                      | String  |                                   |
| required                   | Boolean | false                             |
| labelText                  | String  | 'Password'                        |
| inputGroupClass            | String  | 'dhk-password-input'              |
| aboveInputClass            | String  | 'dhk-password-above-input'        |
| labelClass                 | String  | 'dhk-input-label'                 |
| inputClass                 | String  | 'dhk-input'                       |
| passwordStrengthClass      | String  | 'dhk-password-strength-container' |
| passwordStrengthInnerClass | String  | 'dhk-password-strength-inner'     |

<a name="events"></a>
## Events
When a user enters a value in the input field, multiple events will be fired.<br>
You can catch these events and do stuff with it.<br>
Events fired by the `vue-password-strength` component are:<br>

<b>Score:</b> The score calculated based on the current input value.<br>
<b>inputChange:</b> Current input value.<br>
<b>feedback:</b> Feedback generated by the zxcvbn library.

#### Example
```html
<template>
    <div id="app">
        <vue-password-strength 
            @score="handleScore"
            @inputChange="handleInputChange"
            @feedback="handleFeedback"
        />
    </div>
</template>
```
```js
<script>
import VuePasswordStrength from 'vue-password-strength';

export default {
    name: 'app',
    components: {
        VuePasswordStrength
    },
    methods: {
        handleScore(score) {
            // do something with the score value
        },
        handleInputChange(value) {
            // do something with the input value
        },
        handleFeedback(feedback) {
            // do something with the feedback
        }
    },
    // ... rest of your component
}
</script>
```

<a name="issues"></a>
## Issues
Issues can be created on the [issues](https://github.com/Pixeldenker/vue-password-strength/issues) page.

<a name="contributing"></a>
## Contributing
To contribute, please make a [pull request](https://github.com/Pixeldenker/vue-password-strength/pulls).