How to check password strength

In this example, you will learn how to check password strength.

Here’s how you build it:

View

• Select “Input text field” from the “Interactive input fields” section and place it on the canvas, go to the Properties palette and select the Type: Password.
• Place a “Text” above the input and write “Password”.
• Select a “Dynamic panel” from the “Dynamic content” section and place it below the “Input text field”.
• Selected the “Dynamic panel”, you’ll see a floating menu near it; add two more panels by clicking the “+” button in the menu.

• With panel number 1 selected, go to the Properties palette and change the background color to red; next, place a “Text” inside the panel, and write “Low”; hold command (Mac) or control (Windows) when dragging the element inside, you will see blue tint.
• Repeat the actions for panel 2, change the background color to yellow and write “Medium”.
• For panel 3, select the background color green and write “High”.
• To finish your view, to the right side of your input, place a “Text” and write the Length: 0-2 weak, 3-5 medium, 6-10 high.

Events

Select the “Input text field”, go to the Events palette and click “Add event.” 

1. In the dialog box, click on “Choose Trigger”, hover over “Keyboard”, and select “on Key Up”.
2. In the “Choose Action”, select “Set active panel” and click on the first panel. Click “Ok” to finish creating the event.

Go back to the Events palette, and click “Add condition”.

In the condition builder’s first field, drag the function “Count,” next drag the “Input text field”, and in the following area, pull the function “≤”; for the last field, write “2”. Click “Ok” to finish creating your condition.

Go to the Events palette and click on “Else”.

1. In the dialog box, click on “Choose Trigger”, hover over “Keyboard”, and select “on Key Up”.
2. In “Choose Action”, select “Set active panel” and click on the second panel. Click “Ok” to finish creating the event.

Go back to the Events palette, and click “Add condition”.

In the condition builder’s first field, drag the function “Count”, next drag the “Input text field”, and in the following area, pull the function “≤”; for the last field, write “5”. Click “Ok” to finish creating your condition.

Go to the Events palette and click on “Else”.

1. In the dialog box, click on “Choose Trigger”, hover over “Keyboard”, and select “on Key Up”.
2. In “Choose Action”, select “Set active panel” and click on the last panel. Click “Ok” to finish creating the event.

Go back to the Events palette, and click “Else add condition”.

In the condition builder’s first field, drag the function “Count,” next drag the “Input text field”, and in the following area, the function “≤”; for the last field, write “10”. Click “Ok” to finish creating your condition.

Simulate your prototype.