How can I simulate the function show/hide password?

Doreen shared this question 3 years ago
Answered

I created a Login page with 2 input fields for E-Mail and Password. I use the data master for validation of correct user logins. Now I want to use the function show/hide password. The input field for the password ist now masked by using Type: password. Now I want to add a condition to the link "show password". If the user clicks the link, the type of the input field is changed to text and the link of the button changes to "hide password". How can I build the condition, especially for showing the user the typed password?


Thank you in advance for your help.

Best Answer
photo

There are a few ways to do this, but in our example, we're using a Dynamic Panel. Here's how to create this:

1. Drag one Input Text Field and one Text widget onto the Canvas. Label the Text widget 'show password'. Change the Input Text Field's type to 'password' in the Properties palette.

2. Select both the Input Text Field and the Text widget by shift-clicking on them. Then, right click on this selection and click 'group in Dynamic Panel'.

3. Create another panel so that there will be two panels. In this panel, drag another Input Text Field and a Text widget, labelling the Text widget 'hide password', and leaving the Input Text Field type as text.

4. Go back to the first panel and select the 'show password' text. Create an "On Click" + "Set Active Panel" event, and select the other panel to be set as active.

5. Select the 'password' type Input Text Field and create an "On Key Up" + "Set Value" event, and select the other Input Text field in the other panel as the target of the "Set Value" action. For its value, click 'calculated' and the Calculated Expression builder will appear. In the open space in the expression, drag the 'password' type Input Text Field. This will transfer whatever value is entered in this Input Text Field into the other Input Text Field.

6. Look to the other panel. Create an "On Click" + "Set Active Panel" event, and select the first panel to be set as active. Then, repeat step 5 to set the value from the 'text' Input Text Field over to the 'password' Input Text Field.

That's it! Check out the attached prototype to see how this works.

Comments (2)

photo
1

I also would like to receive a prototype of that feature so I can make my own by looking yours. Can I send an email?

photo
1

There are a few ways to do this, but in our example, we're using a Dynamic Panel. Here's how to create this:

1. Drag one Input Text Field and one Text widget onto the Canvas. Label the Text widget 'show password'. Change the Input Text Field's type to 'password' in the Properties palette.

2. Select both the Input Text Field and the Text widget by shift-clicking on them. Then, right click on this selection and click 'group in Dynamic Panel'.

3. Create another panel so that there will be two panels. In this panel, drag another Input Text Field and a Text widget, labelling the Text widget 'hide password', and leaving the Input Text Field type as text.

4. Go back to the first panel and select the 'show password' text. Create an "On Click" + "Set Active Panel" event, and select the other panel to be set as active.

5. Select the 'password' type Input Text Field and create an "On Key Up" + "Set Value" event, and select the other Input Text field in the other panel as the target of the "Set Value" action. For its value, click 'calculated' and the Calculated Expression builder will appear. In the open space in the expression, drag the 'password' type Input Text Field. This will transfer whatever value is entered in this Input Text Field into the other Input Text Field.

6. Look to the other panel. Create an "On Click" + "Set Active Panel" event, and select the first panel to be set as active. Then, repeat step 5 to set the value from the 'text' Input Text Field over to the 'password' Input Text Field.

That's it! Check out the attached prototype to see how this works.