Made the Password Strength Indicator dynamic

[RajatX24]

Description

This PR fixes the issue #1.

Summary:

Implemented a dynamic password strength indicator by adding a strength-bar-container and a strength-bar in the HTML, styling them in CSS with properties like padding, border, and color. In the JavaScript, modified the calcStrength function to calculate password strength based on user-selected criteria (uppercase, lowercase, numbers, symbols), capping the strength at 100. The setStrengthBar function updates the bar's color (green, yellow, red) and width according to the calculated strength percentage. Event listeners on input fields ensure that the strength is recalculated and displayed in real-time as users modify their input.

Since its a dynamic password strength indicator, i feel screenshots don't do it justice. Here is a link to a short youtube video showing this feature in action:

https://youtu.be/B5bb6Jbpw1o?si=LXkmpqb7QJpOq_95

Detailed Walkthrough

In order to make a dynamic strength indicator, I have made the following changes:

Changes in index.html

1. Added a div with class strength-bar-container. It provides the outline for the actual strength bar.
2. Added a div with class strength-bar. This represents the actual strength bar. Its attributes such as the width and color are set using CSS and updated using JavaScript.

Changes in style.css

1. Added some basic styles for strength-bar-container and strength-bar.
2. Styles added include:
   • Padding
   • Border
   • Border-radius
   • Color
   • Height
   • Width

Changes in script.js

1. Changes have been made in the calcStrength function.
2. The calcStrength function finds the strength of the password as follows:
   1. Initial strength starts with a password strength of 0.
   2. 0.2 is added if the uppercase letters checkbox is ticked by the user.
   3. 0.2 is added if the lowercase letters checkbox is ticked by the user.
   4. 0.3 is added if the numbers checkbox is ticked by the user.
   5. 0.3 is added if the symbols checkbox is ticked by the user.
   6. Password strength is multiplied by the length of the password and a constant.
   7. Finally, if password strength exceeds 100, it is set to 100.
3. After calculating the strength, the calcStrength function calls the setStrengthBar function, passing the calculated strength as an argument.
4. The setStrengthBar function sets the color of the strength bar as follows:
   • If 66 < strength <= 100 → Green
   • If 33 < strength <= 66 → Yellow
   • If 0 <= strength <= 33 → Red
5. The setStrengthBar function also sets the width of the strength bar to the password strength.
6. Since password strength is between 0-100, the width is set between 0% to 100% accordingly.
7. Finally, event listeners have been added to inputs so that when the user changes any of the input values, the calcStrength function is called, and password strength is recalculated and set accordingly.

Type of change

• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] 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

Screenshots:

Checklist:

• [x] I have registered myself at Contrihub website.
• [x] My code follows the code style of this project.
• [x] I have commented my code, particularly in hard-to-understand areas
• [x] My changes generate no new warnings
• [ ] My change requires a change to the documentation.
• [ ] I have updated the documentation accordingly.
• [x] I have read the CONTRIBUTING document.
• [ ] Any dependent changes have been merged and published in downstream modules
• [ ] I have added tests to cover my changes.
• [ ] All new and existing tests passed.

Test Configuration:

• Firmware version:NA
• Hardware:NA
• Toolchain:NA
• SDK:NA

[chow870]

@RajatX24 I am also contributing to another issue of the same project. But in my pr there is some issue. Could you please help me to figure out the problem?

[Codipk]

@RajatX24 make a Pr verification request from the website