Enhance Password Validation Logic in FE

Oct 13, 2025 by pinkandtrash.com 142 views

Introduction

In this article, we will discuss the enhancement of username and password validation in the user creation form. The current system checks if the username is available and also validates its strength. However, if the username is not available, the system incorrectly displays both "Your username is strong" and "Username is not available". Additionally, the frontend password validation shows "Your password is strong" but the backend throws a weak password error. We will enhance the password validation logic in the frontend and provide a detailed solution to resolve these issues.

Describe the Bug

Incorrect Validation Messages

When creating a user, the system checks if the username is available and also validates its strength. However, if the username is not available, the system incorrectly displays both:

"Your username is strong"
"Username is not available"

This is because the system is not properly handling the validation of the username. If the username is not available, it should only show "Username is not available".

Frontend Password Validation

The frontend password validation is showing "Your password is strong" but the backend is throwing a weak password error. This is because the frontend password validation is not properly checking the password strength.

To Reproduce

Steps to Reproduce the Behavior

Go to the user registration page.
Enter a username that is already taken.
Enter Password "Test1234" and create user
Observe the validation messages.

Expected Behavior

If the username is not available, it should only show "Username is not available". If the username is available, then proceed to validate its strength and show the appropriate message.

Enhance Password Validation Logic in FE

Password Validation Logic

To enhance the password validation logic in the frontend, we need to properly check the password strength. We can use a library like password-validator to check the password strength.

const passwordValidator = require('password-validator');

const schema = new passwordValidator();

schema
  .is().min(8) // Minimum length 8
  .is().max(30) // Maximum length 30
  .has().uppercase() // Must have uppercase letters
  .has().lowercase() // Must have lowercase letters
  .has().digits() // Must have digits
  .has().symbols() // Must have symbols
  .is().not().weak(); // Must not be weak

const password = 'Test1234';
const isValid = schema.validate(password);

if (!isValid) {
  console.log('Password is not strong');
} else {
  console.log('Password is strong');
}

Update Frontend Code

To update the frontend code, we need to use the password-validator library to check the password strength. We can use the following code:

const passwordValidator = require('password-validator');

const schema = new passwordValidator();

schema
  .is().min(8) // Minimum length 8
  .is().max(30) // Maximum length 30
  .has().uppercase() // Must have uppercase letters
  .has().lowercase() // Must have lowercase letters
  .has().digits() // Must have digits
  .has().symbols() // Must have symbols
  .is().not().weak(); // Must not be weak

const password = document.getElementById('password').value;
const isValid = schema.validate(password);

if (!isValid) {
  document.getElementById('password-error').innerHTML = 'Password is not strong';
} else {
  document.getElementById('password-error').innerHTML = '';
}

Screenshots

Username

Password

Password Error

Desktop (please complete the following information):

OS: [e.g. iOS]
Browser [e.g. chrome, safari]
Version [e.g. 22]

Smartphone (please complete the following information):

Device: [e.g. iPhone6]
OS: [e.g. iOS8.1]
Browser [e.g. stock browser, safari]
Version [e.g. 22]

Additional Context

Add any other context about the problem here.

🚨 DO NOT EDIT BELOW THIS LINE 🚨

Instructions for Requesting Assignment:

To request assignment, please clearly outline your solution and timeline by commenting on the issue using the format below:

Describe your solution clearly: Provide a detailed explanation of your proposed solution, including your approach, key implementation steps, and relevant examples or references. Mention any dependencies, assumptions, or risks you foresee that might affect your timeline or implementation.

Expected Timeline:

End date: [Expected submission date of a completed Pull Request]

Additional Context: Include any other relevant context, links, screenshots, or resources that support your proposed solution.

🚨 Your assignment may be unassigned if there is no activity or progress within the stated timeline unless communicated clearly and agreed upon.
Username and Password Validation Enhancement in User Creation Form: Q&A ====================================================================

Introduction

In our previous article, we discussed the enhancement of username and password validation in the user creation form. We identified the issues with the current system, including incorrect validation messages and frontend password validation. We also provided a solution to enhance the password validation logic in the frontend using the password-validator library.

In this article, we will provide a Q&A section to address any questions or concerns you may have about the solution.

Q&A

Q: Why is the current system displaying both "Your username is strong" and "Username is not available"?

A: The current system is displaying both messages because it is not properly handling the validation of the username. If the username is not available, it should only show "Username is not available".

Q: How can I enhance the password validation logic in the frontend?

A: You can use the password-validator library to enhance the password validation logic in the frontend. This library provides a simple and efficient way to check the password strength.

Q: What are the benefits of using the `password-validator` library?

A: The password-validator library provides several benefits, including:

Simple and efficient password validation
Customizable password strength requirements
Support for multiple password formats (e.g. uppercase, lowercase, digits, symbols)

Q: How can I update the frontend code to use the `password-validator` library?

A: You can update the frontend code by including the password-validator library and using its methods to check the password strength. Here is an example of how you can update the code:

const passwordValidator = require('password-validator');

const schema = new passwordValidator();

schema
  .is().min(8) // Minimum length 8
  .is().max(30) // Maximum length 30
  .has().uppercase() // Must have uppercase letters
  .has().lowercase() // Must have lowercase letters
  .has().digits() // Must have digits
  .has().symbols() // Must have symbols
  .is().not().weak(); // Must not be weak

const password = document.getElementById('password').value;
const isValid = schema.validate(password);

if (!isValid) {
  document.getElementById('password-error').innerHTML = 'Password is not strong';
} else {
  document.getElementById('password-error').innerHTML = '';
}

Q: What are the dependencies required to use the `password-validator` library?

A: The password-validator library has the following dependencies:

Node.js (version 14 or later)
npm (version 6 or later)

Q: How can I install the `password-validator` library?

A: You can install the password-validator library using npm by running the following command:

npm install password-validator

Conclusion

In this article, we provided a Q&A section to address any questions or concerns you may have about the solution to enhance the password validation logic in the frontend. We also provided an example of how you can update the frontend code to use the password-validator library.

We hope this article has been helpful in providing a clear understanding of the solution and its implementation. If you have any further questions or concerns, please do not hesitate to contact us.