Пароли UX

Добавление кнопки [показать/скрыть] для полей ввода пароля и кастомная проверка соответствия введенных паролей при регистрации, смены пароля и т.д.

by Yunus Gaziev

HTML

<script src="http://fonts.googleapis.com/css?family=PT+Sans&amp;subset=latin,cyrillic"></script>
<form>
    <h2>Пароли UX</h2>
    <br>
    <label for="password">Введите пароль</label>
    <input type="password" id="password" value="password">
    <label for="confirm_password">Подтвердите пароль</label>
    <input type="password" id="confirm_password" value="confirm_password">
    <button type="submit">Отправить</button>
</form>
        
<script>
    $(document).ready(function () {

        $('input[type = "password"]').passwordUX({
            showHtml: 'показать',
            hideHtml: 'скрыть',
            textTransform: 'lowercase'
        });

    });
</script>

CSS

body {
    font-family : 'PT Sans', sans-serif;
}

form {
    width   : 320px;
    margin  : 0 auto;
    padding : 20px;
}

label {
    display       : block;
    margin-bottom : 2px;
}

input {
    display       : block;
    width         : 100%;
    font-size     : 14px;
    line-height   : 20px;
    color         : #333;
    padding       : 5px 8px;
    margin-bottom : 10px;
    border        : 1px solid #999;
    outline       : none;
}

JavaScript

(function ($) {

    $.fn.passwordUX = function (options) {

        var settings = $.extend(
            {
                wrapperClass: 'password-ux',
                switcherClass: 'switch',
                switcherBg: '#F2F2F2',
                switcherIndent: 4,
                textTransform: 'transform',
                showHtml: 'show',
                hideHtml: 'hide',
                dataAttr: 'data-pux-show'
            }, options);

        return this.each(function (i, el) {

            var $el = $(el),
                elHeight = $el[0].offsetHeight,
                $wrapper = $('<div/>'),
                $switcher = $('<div/>'),
                switcherWrapper,
                switchState,
                passwordInput;

            $wrapper
                .css({position: 'relative'})
                .addClass(settings.wrapperClass)
                .attr(settings.dataAttr, false);

            $switcher
                .css({
                    position: 'absolute',
                    top: settings.switcherIndent,
                    right: settings.switcherIndent,
                    padding: '0 ' + (settings.switcherIndent * 2) + 'px',
                    background: settings.switcherBg,
                    lineHeight: elHeight - (settings.switcherIndent * 2) + 'px',
                    textTransform: settings.textTransform,
                    cursor: 'pointer',
                    userSelect: 'none'
                })
                .addClass(settings.wrapperClass + '_' + settings.switcherClass)
                .html(settings.showHtml);

            $el
                .css({boxSizing: 'border-box'})
                .wrap($wrapper);

            $switcher.insertAfter($el);

            $switcher.on('click', function (event) {

                switcherWrapper = $(this).parents('.' + settings.wrapperClass);
                switchState = switcherWrapper.attr(settings.dataAttr);
                passwordInput = switcherWrapper.find('input');

   ...