How to Start

Upload strong-password folder to the server.

Include strong-password.min.css, strong-password.min.js, jQuery files in your <head> section of the page:

<link rel="stylesheet" href="strong-password/css/strong-password.min.css">
<script type="text/javascript" src="lib/jquery-2.2.2.min.js"></script>
<script type="text/javascript" src="strong-password/js/strong-password.min.js"></script>

Plug strongPassword plugin to you password field in the script:

$('input[type=password]').strongPassword();

You can use options:

var options = {
  cssClass: 'sp-black',
  backdrop: false
// other options...
}
$('input[type=password]').strongPassword(options);

Options

afterHide(element)

type: function
default: function(){}
@param {jQuery object} element — the element to witch the plugin is pluged

The callback function that will be called after the plugin is removed

Example

$('input[name=password]').strongPassword({
  afterHide: function(el) {
    el.one('click', function() {
      el.blur();
    });
  }
});

animation

type: String
default: 'fade'
values: 'none', 'fade', 'pop', 'from-top', 'from-bottom', from-right', 'from-left'

Specifies the type of animation (css transition)

Example

$('input[name=password]').strongPassword({
  animation: 'none' //no animation
});

arrow

type: Boolean
default: true

Specifies whether to use the arrow element or not

Example

$('input[name=password]').strongPassword({
  arrow: false
});

backdrop

type: Boolean
default: true

Specifies whether to use the backdrop or not

Example

$('input[name=password]').strongPassword({
  backdrop: false
});

buttons

type: Object
default:
buttons: {
  regen: 'Renew',
  ok: 'Apply',
  cancel: 'Cancel'
}

Specifies names of buttons

Example

$('input[name=password]').strongPassword({
  buttons: {
    regen: 'New',
    ok: 'Ok',
    cancel: 'Close'
  }
});

caption

type: String
default: 'Do you like this password?'

Specifies the caption

Example

$('input[name=password]').strongPassword({
  caption: 'Are you argee?'
});

cssClass

type: String
default: null

If defined, specifies the css class that will be added to the popover element. You can use predefined 'sp-black' class or develope your own css class.

Example

$('input[name=password]').strongPassword({
  cssClass: 'sp-black'
});

firstVowel

type: Boolean
default: false

Prepends a random vovel to the result with probability of 50%

Example

$('input[name=password]').strongPassword({
  firstVowel: true
});

followClick

type: Boolean
default: true

Specifies whether the arrow element must be placed to the point with coordinates of a click.

Example

$('input[name=password]').strongPassword({
  placement: 'vertical',
  followClick: false
});

height

type: String or Integer
default: 'auto'

Height of the popover element.

lastConsonant

type: Boolean
default: false

Appends a random consonant to the result with probability of 50%

Example

$('input[name=password]').strongPassword({
  lastConsonant: true
});

offset

type: Object
default:
offset: {
  top: 0,
  left: 0
}

Specifies an offset of the popover element

Example

$('input[name=password]').strongPassword({
  offset: {
    top: 40,
    left: 50
  }
});

onHide (popover)

type: function
default: function(){}
@param {jQuery object} popover — the popover element

The callback function that will be called when the popover is hiding

Example

$('input[name=password]').strongPassword({
  onHide: function(popover) {
    popover.css('border', '4px solid red');
  }
});

placement

type: String
default: 'vertical'
values: 'auto', 'top', 'right', 'bottom', 'left', 'top-right', 'top-left', 'bottom-right', 'bottom-left', 'auto-top', 'auto-right', 'auto-bottom', 'auto-left', 'horizontal', 'vertical'

The placement of the popover element

Example

$('input[name=password]').strongPassword({
  placement: 'right'
});

range

type: Array
default: undefined

If defined, the number of sounds will calculated in a range from the first element to the second element

Example

$('input[name=password]').strongPassword({
  range: [3,5]
});

sounds

type: Integer
default: 4

The number of sounds in the password

Example

$('input[name=password]').strongPassword({
  sounds: 3
});

visibleTime

type: Integer
default: 1000

Time in ms during which the password in a form field will be visible

Example

$('input[name=password]').strongPassword({
  visibleTime: 5000
});

width

type: String or Integer
default: 222

Width of the popover element.