☰

Password Length Indicator

Indicate password fields that have a maximum length of characters.

  1. // ==UserScript==
  2. // @name         Password Length Indicator
  3. // @namespace    trockenasche
  4. // @version      3.1
  5. // @description  Indicate password fields that have a maximum length of characters.
  6. // @author       trockenasche
  7. // @homepage     https://github.com/trockenasche/US-Password-Length-Indicator
  8. // @supportURL   https://github.com/trockenasche/US-Password-Length-Indicator/issues
  9. // @include      *
  10. // @icon         https://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Three_asterisks.svg/32px-Three_asterisks.svg.png
  11. // @grant        none
  12. // @run-at       document-idle
  13. // @license      MIT
  14. // ==/UserScript==
  15.  
  16. function addGlobalStyle(css) {
  17.     var head, style;
  18.     head = document.getElementsByTagName('head')[0];
  19.     if (!head) {
  20.         return;
  21.     }
  22.     style = document.createElement('style');
  23.     style.innerHTML = css;
  24.     head.appendChild(style);
  25. }
  26.  
  27. function removeMaxLength() {
  28.     var passFields = document.querySelectorAll("input[type='password']");
  29.     [].forEach.call(passFields, function (passField) {
  30.         passField.removeAttribute("maxLength");
  31.         passField.style.border = "0px";
  32.     })
  33.     var divs = document.querySelectorAll("div.us-pli-div");
  34.     [].forEach.call(divs, function (div) {
  35.         div.remove();
  36.     });
  37. }
  38.  
  39. (function () {
  40.     'use strict';
  41.     var passFields = document.querySelectorAll("input[type='password']");
  42.  
  43.     if (passFields.length == 0) {
  44.         // Couldn't find any password fields, leaving function.
  45.         return;
  46.     }
  47.  
  48.     addGlobalStyle(`div.us-pli {
  49.                     position: relative;
  50.                     display: flex;
  51.                     flex-direction: row;
  52.                     width: 100%;
  53.                     align-content: flex-end;
  54.                     }`);
  55.     addGlobalStyle(`div.us-pli>div {
  56.                     padding: 0px 1px;
  57.                     background: coral;
  58.                     border: 1px solid coral;
  59.                     justify-content: center;
  60.                     display: flex;
  61.                     border-radius: 0px 5px 5px 0px;
  62.                     }`);
  63.     addGlobalStyle(`a.us-pli-button {
  64.                     color: white;
  65.                     font-family: Verdana, Arial, Helvetica, sans-serif;
  66.                     font-size: 0.9em;
  67.                     text-decoration: none;
  68.                     align-self: center;
  69.                     }`);
  70.     addGlobalStyle(`a.us-pli-button:hover {
  71.                     color: red;
  72.                     text-decoration: line-through;
  73.                     }`);
  74.  
  75.     [].forEach.call(passFields, function (passField) {
  76.         if (passField.maxLength > 0) {
  77.             passField.style.border = "2px solid coral";
  78.  
  79.             // Add the div before the input field.
  80.             var wrapper = document.createElement('div');
  81.             wrapper.classList.add('us-pli');
  82.             passField.parentNode.insertBefore(wrapper, passField);
  83.             // And move the input field inside the div element.
  84.             wrapper.appendChild(passField);
  85.  
  86.             // Add the div element with the maxLength value at the end of the input element.
  87.             passField.insertAdjacentHTML('afterend', '<div class="us-pli-div"><a href="javascript:void\(0\)" class="us-pli-button" title="remove limit!"> ' + passField.maxLength + '</a></div>');
  88.         }
  89.     });
  90.  
  91.     var usPliButtons = document.querySelectorAll("a.us-pli-button");
  92.     if (usPliButtons.length > 0) {
  93.         [].forEach.call(usPliButtons, function (usPliButton) {
  94.             usPliButton.addEventListener("click", removeMaxLength);
  95.         });
  96.     }
  97.  
  98.     return;
  99. })
  100.  
  101. ();