☰

Password Length Indicator

Indicate password fields that have a maximum length of characters.

// ==UserScript==
// @name         Password Length Indicator
// @namespace    trockenasche
// @version      3.1
// @description  Indicate password fields that have a maximum length of characters.
// @author       trockenasche
// @homepage     https://github.com/trockenasche/US-Password-Length-Indicator
// @supportURL   https://github.com/trockenasche/US-Password-Length-Indicator/issues
// @include      *
// @icon         https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Three_asterisks.svg/32px-Three_asterisks.svg.png
// @grant        none
// @run-at       document-idle
// @license      MIT
// ==/UserScript==

function addGlobalStyle(css) {
    var head, style;
    head = document.getElementsByTagName('head')[0];
    if (!head) {
        return;
    }
    style = document.createElement('style');
    style.innerHTML = css;
    head.appendChild(style);
}

function removeMaxLength() {
    var passFields = document.querySelectorAll("input[type='password']");
    [].forEach.call(passFields, function (passField) {
        passField.removeAttribute("maxLength");
        passField.style.border = "0px";
    })
    var divs = document.querySelectorAll("div.us-pli-div");
    [].forEach.call(divs, function (div) {
        div.remove();
    });
}

(function () {
    'use strict';
    var passFields = document.querySelectorAll("input[type='password']");

    if (passFields.length == 0) {
        // Couldn't find any password fields, leaving function.
        return;
    }

    addGlobalStyle(`div.us-pli {
                    position: relative;
                    display: flex;
                    flex-direction: row;
                    width: 100%;
                    align-content: flex-end;
                    }`);
    addGlobalStyle(`div.us-pli>div {
                    padding: 0px 1px;
                    background: coral;
                    border: 1px solid coral;
                    justify-content: center;
                    display: flex;
                    border-radius: 0px 5px 5px 0px;
                    }`);
    addGlobalStyle(`a.us-pli-button {
                    color: white;
                    font-family: Verdana, Arial, Helvetica, sans-serif;
                    font-size: 0.9em;
                    text-decoration: none;
                    align-self: center;
                    }`);
    addGlobalStyle(`a.us-pli-button:hover {
                    color: red;
                    text-decoration: line-through;
                    }`);

    [].forEach.call(passFields, function (passField) {
        if (passField.maxLength > 0) {
            passField.style.border = "2px solid coral";

            // Add the div before the input field.
            var wrapper = document.createElement('div');
            wrapper.classList.add('us-pli');
            passField.parentNode.insertBefore(wrapper, passField);
            // And move the input field inside the div element.
            wrapper.appendChild(passField);

            // Add the div element with the maxLength value at the end of the input element.
            passField.insertAdjacentHTML('afterend', '<div class="us-pli-div"><a href="javascript:void\(0\)" class="us-pli-button" title="remove limit!"> ' + passField.maxLength + '</a></div>');
        }
    });

    var usPliButtons = document.querySelectorAll("a.us-pli-button");
    if (usPliButtons.length > 0) {
        [].forEach.call(usPliButtons, function (usPliButton) {
            usPliButton.addEventListener("click", removeMaxLength);
        });
    }

    return;
})

();