JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<input class="pw1" type="password" value="xxxxxxxxxxxxx" /> 
<input class="pw2 is-inactive" type="password" />

CSS

.pw2.is-active {
    display: block;
}

.pw2.is-inactive {
    display: none;
}

JavaScript

var $pw1 = $('.pw1'),
    $pw2 = $('.pw2'),
    $pws = $pw1.add($pw2),
    
    is_closed = true,

    twoPwsAreEmpty = function() {
        if ($pw1.val() === "" && $pw2.val() === "") {
            return true;
        }
        return false;
    },

    focus_$pw1 = function() {
        if ( is_closed ) {
            is_closed = false;
            $pw1.val('');
            $pw2.removeClass('is-inactive').addClass('is-active');
        }
    },

    focus_$pws = function() {
        $(this).data('has_focus', true);
    },

    focusOut_$pws = function() {
        var $this = $(this);
        $this.data('has_focus', false);
        
        setTimeout(function() {
            if (!$pws.not($this).data('has_focus')) {
                if (twoPwsAreEmpty()) {
                    $pw2.removeClass('is-active').addClass('is-inactive');
                    $pw1.val($pw1.saved_val);
                    is_closed = true;
                }
            }
        }, 25);
    };


$pw1.saved_val = $pw1.val();

$pws.on({
    'focus': focus_$pws,
    'focusout': focusOut_$pws
});

$pw1.on('focus', focus_$pw1);