PasswordTextBox - Documentation | www.HtmlElements.com

Overview

Smart.PasswordTextBox element represents an password input, supported password strength validation.

Files

  • CSS files
    • smart.default.css - the CSS file containing the styles for the element.
  • Javascript module
    • smart.textbox.js - the JS module which is in the source/modules/ folder and loads all script dependencies.
  • Javascript files
    • smart.element.js - the base class.
    • smart.button.js - the JS file containing the definition for the buttons inside the Scroll Bars. Required for smart-text-box.
    • smart.listbox.js - the JS file containing the definition for the listBox in the drop down list popup. Required for smart-text-box.
    • smart.dropdownlist.js - the JS file containing the definition for drop down list popup. Required for smart-text-box.
    • smart.textbox.js - the JS file containing the base class about all text box elements
    • smart.tooltip.js - the JS file containing the definition for the tooltip element used for the notifications of password strength.
    • smart.passwordtextbox.js - the JS file containing the element definition

Usage

  • Import a module

    With this approach, we import a module and create the web component by using the Smart function. The #textbox is a smart-password-text-box tag.

    import {smartPasswordTextBox} from "../../source/modules/smart.textbox.js";
    
    Smart('#textbox', class {
    get properties() {
    	return {
    		value: 'Password'
    	}
    }
    });
    
    document.readyState === 'complete' ? init() : window.onload = init;
    
    function init() { 
    
    }
    
    Using the Smart function is optional. You can use const textbox = document.querySelector("#textbox"); and set the properties like that:
    const textbox = document.querySelector("#textbox");
    
    textbox.value = 'password';
    

  • Import a module, Init on Demand

    The following imports the web component's module and creates it on demand, when the document is ready. The #textbox is a DIV tag.

    import {smartPasswordTextBox} from "../../source/modules/smart.textbox.js";
    
    document.readyState === 'complete' ? init() : window.onload = init;
    
    function init() { 
    const textbox = new smartPasswordTextBox('#textbox', {
       	value: 'Password'
    });
    }
    
  • Load scripts

    The following code adds the custom element to the page.

    <html lang="en"> <head> <link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" /> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smart.button.js"></script> <script type="text/javascript" src="../../source/smart.scrollbar.js"></script> <script type="text/javascript" src="../../source/smart.listbox.js"></script> <script type="text/javascript" src="../../source/smart.textbox.js"></script> <script type="text/javascript" src="../../source/smart.tooltip.js"></script> <script type="text/javascript" src="../../source/smart.passwordtextbox.js"></script> </head> <body> <smart-password-text-box></smart-password-text-box> </body> </html>

    Note how smart.element.js is declared before everything else. This is mandatory for all custom elements.

Demo

Create, Append, Remove, Get/Set Property, Invoke Method, Bind to Event


Create a new element:
const textbox = document.createElement('smart-password-text-box');

Append it to the DOM:
document.body.appendChild(textbox);

Remove it from the DOM:
textbox.parentNode.removeChild(textbox);

Set a property:
textbox.propertyName = propertyValue;

Get a property value:
const propertyValue = textbox.propertyName;

Invoke a method:
textbox.methodName(argument1, argument2);

Add Event Listener:
const eventHandler = (event) => {
// your code here.
};

textbox.addEventListener(eventName, eventHandler);

Remove Event Listener:
textbox.removeEventListener(eventName, eventHandler, true);

Appearance

The user can see and check it's password via clicking an icon when showPasswordIcon is true. This icon is displayed when the element is focussed.

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" />
 <script type="text/javascript" src="../../source/smart.element.js"></script>
 <script type="text/javascript" src="../../source/smart.button.js"></script>
 <script type="text/javascript" src="../../source/smart.scrollbar.js"></script>
 <script type="text/javascript" src="../../source/smart.listbox.js"></script>
 <script type="text/javascript" src="../../source/smart.textbox.js"></script>
 <script type="text/javascript" src="../../source/smart.tooltip.js"></script>
 <script type="text/javascript" src="../../source/smart.passwordtextbox.js"></script>
 <script>
 window.onload = function () {
    document.querySelector('smart-password-text-box').showPasswordIcon = true;
 }
 </script>
</head>
<body>
 <smart-password-text-box></smart-password-text-box>
</body>
</html>

Demo

The password strength could be visualized via tooltip and border color change. The property allowed this is showPasswordStrength.

 <smart-password-text-box show-password-strength></smart-password-text-box>

Demo

The password strength tooltip could be with arrow when tooltipArrow is true. By default it's false

 <smart-password-text-box show-password-strength tooltip-arrow></smart-password-text-box>

Demo

The password strength tooltip could be positioned in few different positions.

  • top
  • right
  • bottom
  • left
  • absolute - tooltip is absolute positioned on left and top position
 <smart-password-text-box show-password-strength tooltip-arrow tooltip-position="left"></smart-password-text-box>

Demo

Behavior

The user can controll the password strength response via passwordStrength callback.

Here's how to set passwordStrength callback:

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" />
 <script type="text/javascript" src="../../source/smart.element.js"></script>
 <script type="text/javascript" src="../../source/smart.button.js"></script>
 <script type="text/javascript" src="../../source/smart.scrollbar.js"></script>
 <script type="text/javascript" src="../../source/smart.listbox.js"></script>
 <script type="text/javascript" src="../../source/smart.textbox.js"></script>
 <script type="text/javascript" src="../../source/smart.tooltip.js"></script>
 <script type="text/javascript" src="../../source/smart.passwordtextbox.js"></script>
 <script>
 window.onload = function () {
    document.querySelector('smart-password-text-box').passwordStrength = function (password, allowedSymbols) {
        const passwordLength = password.length;
        if (passwordLength < 3) {
            return 'short' ;
        } else if (passwordLength < 10) {
            return 'weak';
        } else {
            return 'strong';
        }
   };
 }
 </script>
</head>
<body>
 <smart-password-text-box show-password-strength tooltip-arrow tooltip-position="left"></smart-password-text-box>
</body>
</html>

Demo

Keyboard Support

The element is focusable and can be focused using the Tab button.