Overview

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

To initialize a password text box element the user has to include the following files to the head of the page:

  • smart.base.css – the CSS file containing the styles for element
  • 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

The following code adds a password text box to the page.

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <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>

Demo

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

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.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <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.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <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.