Password Strength Checker

Objectives

• Create a password strength checker by applying multiple regular expressions to validate the characteristics of a strong password.
• Use JavaScript to manipulate the HTML DOM to output feedback to the user.

JavaScript Assignment

A. Download the HTML file js_asmt03.html.

B. The file js_asmt03.html contains a password input and a paragraph tag. As the user enters a potential password, feedback regarding the strength of the password will be displayed in the paragraph tag.

C. Change the filename to js_Lastname_03.html, where Lastname is your last name.

D. Open js_Lastname_03.html in Atom to make changes and in a browser to view those changes.

E. Underneath the password input, indicated by an HTML comment, add HTML markup for a checkbox input. The checkbox will act as a way to reveal the password. Use "passwordReveal" as the value for the id and name attributes.

F. After the checkbox HTML, add the text "Show Password" so the user will know the purpose of the checkbox.

G. Here is what the page should look like after you add the checkbox and text: see image.

H. At the bottom of the HTML document, indicated by an HTML comment, create a script tag to import an external JavaScript file named js03-Lastname-logic.js, where Lastname is your last name.

I. Save js_Lastname_03.html. There will be no more modifications to this file.

J. Create a new file and save it as js03-Lastname-logic.js, where Lastname is your last name. This JavaScript file will contain all the behaviors for the page. Ensure this file is saved in the same folder as your js_Lastname_03.html file.

K. In js03-Lastname-logic.js two events will be added. The first event is for the checkbox input and the second event is for the password input. Add both events using the addEventListener method.

1. Get the password and checkbox elements and assign them to variables. Keep these variables at the top of the script.

2. Add a click event to the checkbox element that does the following:

• If the checkbox is checked, change the type attribute of the password element to "text"
• If the checkbox is unchecked, change the type attribute of the password element to "password"

3. Add a keyup event to the password element that does the following:

• Verifies if the password the user typed is a "strong" password and displays feedback to the user in the feedback paragraph tag.
  • All feedback must be displayed in the feedback paragraph that already exists in the HTML page.
  • You are NOT allowed to add or modify the < p > source code in the HTML page.
• We will use the following characteristics to define a strong password:
  • Contains a lowercase letter.
  • Contains an uppercase letter.
  • Contains a special character.
  • Contains a digit.
  • At least 8 characters long. (This means 8 characters or more)
• Create 4 RegExp objects to represent characteristics 1 through 4. Represent each characterisic using a single character class [ ].
  • For example, to represent "contains a lowercase letter," the RegExp object will look like this: let containsLowercase = /[a-z]/;
  • Create another RegExp object that represents "contains an uppercase letter."
  • For the special character, a special character is defined as a non-digit, non-letter. In other words, create a regex pattern that matches a character that is not a digit, uppercase letter, or a lowercase letter.
    • To do so, use a negated character class. Create a character class that will match a digit, uppercase letter, or lowercase letter, then negate it.
    • While some websites specify a limited set of special characters such as !@#$%, this regex will accept more than those symbols that you see on your keyboard. For instance, a space or a is a special character.
  • Lastly, create a regex pattern that matches a digit.
  • Each pattern should be represented by a character class [ ]. The patterns you create here simply match the characteristic, no groups or quantifiers are needed.
  • The use of positive lookahead groups (?= ) are not covered in this class, and it is not needed for these patterns. There should be no groups or quantifiers used for each pattern.
• For characteristic 5, use the length property on the password value. You do not need a regex pattern for characteristic 5.
• To be clear, you are not creating a single, unified regex that contains all the charactertistics. The ability to do so is not covered in this class. Even if you did create a unified regex, you will not be able to give targeted feedback on which charactersitics have not been met.
• Apply each regex pattern, one at a time, to the password to determine if the password does not meet the characteristic.
  • A password strength checker is about checking for the absence of a characteristic. In other words, if there was no match. In the condition of the if-statement, use the ! to flip the result of the test method; this will check if the password does NOT contain that characteristic.
  • The feedback messages associated with not meeting a characteristic are as follows:
    • Does not contain a lowercase letter.
    • Does not contain an uppercase letter.
    • Does not contain a special character.
    • Does not contain a digit.
    • Password is too short.
• Provide feedback on ALL characteristics that have not been met. If there are multiple characteristics that have not been met, ensure each feedback appears on its own line in the paragraph tag.
  • To display all the feedback in the paragraph, concatenate each feedback message on to a single variable. Then the last thing the event will do is assign that variable to the innerHTML of the feedback paragraph.
  • If you do not concatenate each message, only assign, the feedback variable will be overwritten with the next feedback message and the page will only show the last message.
• If all 5 characteristics are met, then the password is considered strong and the feedback should indicate the password is considered strong. There are a few approaches to determining if the password is strong:
  • A naive, brute force approach is to create one long condition that checks all the characteristics again.
  • A counter system where if the password does not satisfy a characteristic, increment a counter variable. At the end of all checks, the counter should be 0.
  • Another approach is understanding that if the password is a "strong" password, your feedback variable will be a certain value and checking for that value.
• If the password input is blank, there should not be any feedback shown.

js_asmt03.html

< !doctype html >
< html >
< head >
< meta charset="utf-8" >
< title >Password Checker< /title >
< /head >
< body >
Password: < input type="password" id="password" name="password" > < br >

< !-- Add a checkbox and some text for the checkbox here. -- >
< input id="passwordCheckbox" type="checkbox" > Show password < br >

< !-- Where to put the feedback regarding the characteristics of a password. -- >
< p id="feedback" >< /p >

< !-- Import your js03-Lastname-logic.js file here. -- >
< script src="js03-Lastname-logic.js" >< /script >
< /body >
< /html >