ToggleShowPassword

Content Type: Widget
Categories: User Interface

Overview

Display a toggle to show/hide password input fields.

Documentation

ToggleShowPassword

Display a toggle to show/hide password input fields.

Features and limitations

Features

Place the widget close to password input field(s).

Display an icon for switching a password input to visible text. Then displaying another icon for switching back.

In many cases this would be images such as eyes open and eyes closed.

The widget provides default open/close images. They can be overwritten by configuring your own images.

Limitations

The used images can be SVG, though they are still added as image (no dynamic colors options right now).

Dependencies

Place close to a password textbox.

Installation

Install the widget and configure the 2 icons. Then place close by a password textbox field.

Bugs

none known at this moment.

Development and contribution

  1. Install NPM package dependencies by using: npm install. If you use NPM v7.x.x, which can be checked by executing npm -v, execute: npm install --legacy-peer-deps.
  2. Run npm start to watch for code changes. On every change:
    • the widget will be bundled;
    • the bundle will be included in a dist folder in the root directory of the project;
    • the bundle will be included in the deployment and widgets folder of the Mendix test project.

Releases

Version: 1.0.3
Framework Version: 9.7.0
Release Notes: Resolve alignment issue Update script to work with multiple password fields on the same page.
Version: 1.0.2
Framework Version: 9.7.0
Release Notes: Updated script to work with multiple password fields on the same page
Version: 1.0.1
Framework Version: 9.7.0
Release Notes: Works with default icons when none provided.
Version: 1.0.0
Framework Version: 9.4.0
Release Notes: Initial widget release