fix-password-validation-not-working

[benjaminshafii]

TL;DR

Updated the password validation logic in the PasswordCard component to only show the password mismatch message when both passwords are filled and to simplify the validation logic.

What changed?

• Show password mismatch message only when both passwords are filled.
• Simplified password match condition.
• Removed unnecessary length checks for password and confirmPassword fields.

How to test?

1. Go to the Join secure page.
2. Fill in the password and confirmPassword fields with non-matching passwords.
3. Verify that the password mismatch message only shows up when both fields are filled.

Why make this change?

Improving user experience by providing clearer validation messages and simplifying the component's logic.

---

What does this PR do?

Fixes # (issue)

If there is not an issue for this, please create one first. This is used to tracking purposes and also helps use understand why this PR exists

Type of change

• Bug fix (non-breaking change which fixes an issue)
• Chore (refactoring code, technical debt, workflow improvements)
• Enhancement (small improvements)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

Checklist

Required

• Read Contributing Guide
• Self-reviewed my own code
• Tested my code in a local environment
• Commented on my code in hard-to-understand areas
• Checked for warnings, there are none
• Removed all console.logs
• Merged the latest changes from main onto my branch with git pull origin main
• My changes don't cause any responsiveness issues

Appreciated

• If a UI change was made: Added a screen recording or screenshots to this PR
• Updated the UnInbox Docs if changes were necessary

Current Change

🎥 Video uploaded on Graphite:

Past Behavior

Nothing would happen until a user entered at least 8 chars.

🎥 Video uploaded on Graphite:

[benjaminshafii]

• fix-password-validation-not-working #595 👈
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @ashgansh and the rest of your teammates on Graphite

[OmarMcAdam]

@ashgansh I think that the "too weak" error message should be shown as soon as the first validation comes back (14 second timestamp in first video)

this would let the user make a stronger password BEFORE they start the confirmation step

also, i think previously the color of the strength bars were dynamic
red for weak
amber for medium
green for strong

maybe im imagining it @BlankParticle ?

[BlankParticle]

Yeah the remote validation doesn't occur until atleast 8 letters are there, also about the strength meter colors, it doesnt play well with when using the same component for both strength and confirm password.

[benjaminshafii]

@ashgansh I think that the "too weak" error message should be shown as soon as the first validation comes back (14 second timestamp in first video)

this would let the user make a stronger password BEFORE they start the confirmation step

also, i think previously the color of the strength bars were dynamic red for weak amber for medium green for strong

maybe im imagining it @BlankParticle ?

when user under 8 chars returning an error
when password over 8 return the strength in strength bar

note:
removed the color part of the bar for the moment + giving proper user follow up

[OmarMcAdam]

🫡