Password Strength Meter

Demo Project

https://editor.momen.app/tool/MGAZXjej0RA/WEB?code=2V7MQ6BqJZ0ob 

Introduction

• Goal: Show users how strong their password is while they type, with a live indicator and a checklist of the rules they have already met.
• Use Cases: Sign-up forms, password reset flows, and account security settings.
• Core Logic: A page variable holds a strength score. On every keystroke, an Actionflow resets the score to 0 and runs five REGEX_MATCH checks in sequence, adding 1 for each rule met. Conditional Views read that score to render the indicator.

Steps

Page Setup

Create two pages so you can compare the two layout approaches side by side:

• Page 1 — the whole indicator lives in one Conditional View, with one state per strength level.
• Page 2 — the text and each bar get their own Conditional View.

On Page 1, add a Text input component for the password and rename it Password Input. Every formula in this tutorial binds to Password Input / Value, so the name has to match.

Page Variable Definition

1. Go to the Pages tab, select the current page, and switch to the Data tab in the right sidebar.
2. Create a page variable to hold the score.
   • Variable Name: password_strength_level
   • Type: BigInt
   • Default Value: 0

Input Actionflow Construction

Configure the scoring logic on the Password Input component so it recomputes on every keystroke.

• Trigger: On change

Step 1 — Reset the score

Add a Set Variable node as the first node in the flow and set password_strength_level to 0, so the score is recalculated from scratch on every change rather than accumulating.

Step 2 — Check the first rule (minimum 8 characters)

Add a Condition node:

• Formula: REGEX_MATCH
• Text: Password Input / Value
• Regex: ^.{8,}$
• Result Value Type: Boolean

Step 3 — Increment the score on the True branch

On the True branch of that condition, add a Set Variable node that increments the score by 1:

• Operator: +
• Number 1: password_strength_level
• Number 2: 1
• Result Value Type: BigInt

Step 4 — Add the remaining four rules

Repeat the condition + increment pair for each remaining rule:

UI Construction & Interaction

Master Container

So the indicator and the rule list stay hidden until the user types, wrap the whole feedback UI in an outer container.

1. Master Conditional View: Place a Conditional View component directly below the input field and name it Conditional Password Rules.
2. Configure States: Create two states, Case Not Empty and Initializing.
3. Set Entry Condition (Case Not Empty):
   • Formula: TEXT_LEN
   • Text: Password Input / Value
   • Operator: Greater than 0

The feedback UI now appears as soon as the user starts typing, and reverts to Initializing if the field is cleared.

Note that the five rules collapse into four display tiers: 1 and 2 rules both read as Weak, so there are four bars and four labels, not five.

Below are two ways to drive those tiers from password_strength_level. They differ in more than structure — see the callout under Method 2 before choosing.

Method 1: One Container, One State Per Level (Page 1)

This keeps the level text and all bars inside a single Conditional View and swaps between four pre-designed layout blocks.

1. Add Conditional View: Inside the Case Not Empty branch of the master container, add a Conditional View named Conditional Strength Bar.
2. Configure States: Create five branches — Case Weak, Case Medium, Case Strong, Case Very Strong, and Initializing. Initializing is the fallback and takes no condition.
3. Set Entry Conditions:
   • Case Weak: password_strength_level Greater than 0 AND Less than 3
   • Case Medium: password_strength_level Equal to 3
   • Case Strong: password_strength_level Equal to 4
   • Case Very Strong: password_strength_level Equal to 5

4. Design Within Each Case: Select each state and place the label and the four bars. Because each state is a separate layout, you can color the bars per level — one bar for Weak, two for Medium, and a different color at each tier.

Method 2: Per-Component States (Page 2)

To avoid rebuilding the identical bar track in four branches, duplicate Page 1 and rework it: remove the master bar container, then give the label and each of the four bars its own lightweight Conditional View.

1. Decouple the strength label
   • Wrap the text block showing Weak / Medium / Strong / Very Strong in its own container named Conditional View Strength Level.
   • Give it the same entry conditions as Method 1 so the wording switches with the score.

2. Configure each bar independently

   • Wrap each of the four bar segments in its own conditional container (Bar 1 through Bar 4).
   • Give each one two branches: the active state Case1 and the inactive default Initializing.
   • Bar 1: password_strength_level Greater than 0
   • Bar 2: password_strength_level Greater than 2
   • Bar 3: password_strength_level Greater than 3
   • Bar 4: password_strength_level Greater than 4

   These thresholds produce the same tiers as Method 1 — 1 bar for Weak, 2 for Medium, 3 for Strong, 4 for Very Strong.

3. Style the two states
   • Select a bar track under Case1, open the Style panel, set Background color to a medium gray (#6B7280), border radius to 3px, and height to 6px.
   • Switch to the Initializing branch and set Background color to light gray (#F3F3F3) for the inactive contrast.

Dynamic Rule List (applies to both methods)

To highlight each rule in the checklist as it starts passing:

1. Wrap each rule label (e.g. · Minimum 8 characters) in its own Conditional View (e.g. Conditional Rule 1).
2. Give it two branches: Case1 and Initializing.
3. Inline formula: put a REGEX_MATCH formula straight into the Case1 entry condition — for rule 1, REGEX_MATCH(Password Input / Value, "^.{8,}$") is true.
4. Under Case1, set the text to bold and change its color from light gray to near-black.

Verification

Click Preview and type into the input field.

Step 1: Empty Input

• Action: Leave the field blank.
• Expected Result: Conditional Password Rules stays in Initializing — no bars, no level label, and no checklist on the page. The input field itself is of course still visible.

Step 2: Build the Password Up in Four Steps

Enter 1 → A → a → # → 1111, checking the UI after each step:

• Action 1: type 1
  • Expected Result: the master container sees a length above 0 and reveals the feedback UI. “Contains a number” matches, the score becomes 1, the label reads Weak, and bar 1 lights up.
• Action 2: append A (value 1A)
  • Expected Result: “Contains an uppercase letter” matches and the score reaches 2. The label stays Weak and only bar 1 stays lit — bar 2 needs a score of 3.
• Action 3: append a (value 1Aa)
  • Expected Result: “Contains a lowercase letter” matches, score 3. The label switches to Medium and bars 1–2 are lit.
• Action 4: append # (value 1Aa#)
  • Expected Result: “Contains a special character” matches, score 4. The label reads Strong, bars 1–3 are lit, and the four matched rule labels are now bold.
• Action 5: append 1111 (value 1Aa#1111)
  • Expected Result: “Minimum 8 characters” is now satisfied too, reaching the maximum score of 5. The label reads Very Strong and all four bars are lit.