The goal of this project is to make a randomly generated password that a range of selected user criteria and allows them to smoothly and easily get a fresh and secure password.
- HTML (27.3%)
- CSS (16.4%)
- Javascript (56.3%)
1. A series of checkboxes for setting password criteria
Why?
To allow users to determine how secure they want their passwords. For instance, some security prompts require special characters and some don't allow them. We wanted to create a password generator that any employee could use to secure information regardless of the specific requirements of their application. One generator to rule them all.
What?/How?
First I started by creating the checkboxes in the html file:
<label>Password length <input type="number" id="length" min='4' max='20' value='20' /></label>
<label>Include uppercase letters <input type="checkbox" id="uppercase" class= "checkmark" checked /></label>
<label>Include lowercase letters <input type="checkbox" id="lowercase" class= "checkmark" checked /></label>
<label>Include numbers<input type="checkbox" id="numbers" class= "checkmark" checked /></label>
<label>Include special characters <input type="checkbox" id="symbols" class= "checkmark" checked /></label>
Then I created the variables to get the checkboxes by id:
const lengthEl = document.getElementById('length');
const uppercaseEl = document.getElementById('uppercase');
const lowercaseEl = document.getElementById('lowercase');
const numbersEl = document.getElementById('numbers');
and Finally I made sure I was able to listen to see if they are checked:
generateEl.addEventListener('click', () => {
const length = +lengthEl.value;
//have the other boxes been checked?
const hasLower = lowercaseEl.checked;
const hasUpper = uppercaseEl.checked;
const hasNumber = numbersEl.checked;
const hasSpecial = specialEl.checked;
resultEl.innerText = generatePassword(
hasLower,
hasUpper,
hasNumber,
hasSpecial,
length)
})
2. Validation for correct Input
Why?
This feature does feed into the others but I felt it important to address this issue separately. Before completely this projects, I saw a lot of code examples and projects similar to mine that did not validate and accepted incorrect input. I chose to build my validation in but I do know there are people that consider checking for a correct answer very different than checking for an answer.
What?/How?
In order to have a customizable password, selections need to be made before the password is generated. Therefore, when the button "Generate Password" is clicked a prompt comes up allows the user to input their specific criteria. If they don't enter any valid criteria then they alerted and sent back to the previous prompt to enter in valid criteria. If they do not select some combination of upper case, lower case, numbers and special characters they will be prompted again.
3. A Generated password that meets all criteria
Why?
If you are going to create something it really should meet all the criteria, shouldn't it? I don't want to create a password generator that doesn't do what it promises to do.
What?/How?
In order to validate that the boxes are checked I created a typeCont constant that tracks how many are checked, if none are being passed through then typesCount is equal to zero and instead of a password, text asking for the boxes to be checked is returned.
function generatePassword(lower, upper, number, special, length) {
let generatedPassword = '';
const typesCount = lower + upper + number + special
if(typesCount === 0) {
return 'Please check at least 1 box';
}
}
I used String.fromCharCode and looked up the CharCodes for each element. For lower case letters the code number starts at 97, so if we grow through 26 letters + 97 we will have gone through all of the lower case letters and randomly selected them.
function getRandomLower() {
//97 to 122 is are lowercase letters
return String.fromCharCode(Math.floor(Math.random() *26) + 97)
}
function getRandomUpper() {
return String.fromCharCode(Math.floor(Math.random() *26) + 65)
}
function getRandomNumbers() {
return String.fromCharCode(Math.floor(Math.random() *10)+ 48)
}
function getRandomSpecial() {
const specials = '!@#$%^&*(){}[]-_=,.<>?/|;:~`'
return specials[Math.floor(Math.random() * specials.length)];
}
These functions are then set to equal their respective groups:
randomFunc = {
lower: getRandomLower,
upper: getRandomUpper,
number: getRandomNumbers,
special: getRandomSpecial
}
After checking whether or not the box is checked, we then set those items into an array that will tell us what section (upper, lower, number or special) to go into to retrieve the char. This array is then iterated through based off of the desired length and builds the password using the Object.keys() method. Then it is turned into an array again and passed through the shuffle array function. Finally, it set back into a string using the join(") method and set the final Password.
function generatePassword(lower, upper, number, special, length) {
let generatedPassword = '';
const typesCount = lower + upper + number + special
const typesArray = [{lower}, {upper}, {number}, {special}].filter(item => Object.values(item)[0])
if(typesCount === 0) {
return 'Please check at least 1 box';
}
for (let i =0; i < length; i+=typesCount) {
typesArray.forEach(type => {
const funcName = Object.keys(type)[0];
generatedPassword += randomFunc[funcName]();
});
}
// creating an array
const passArray = [...generatedPassword.slice(0, length)];
// shuffling password array
const shufflePassword = shuffleArray(passArray);
// returning password array to a string and setting it to the final value
const finalPassword = shufflePassword.join("");
console.log(finalPassword)
return finalPassword
}
4. A button
Why?
I suppose we need a button to get started on the prompts. It is pretty annoying when you open a webpage and a prompt immediately comes up without you asking it to. The button allows to loop through as well. We can start and then if we need to we can start all over again. It will rewrite passwords to our hearts content.
What?How?
There are 3 separate parts of a button in java script that connect to an additional part in html.
in html are code looks like this:
'Generate Password'
It contains an id, a class and a area all encompassed in it's very own special button tag.
There are two ways to call a button and make it work in Javascript but I will only explain the way I did it.
First, I created a variable called generateBtn. I then set it equal to 'document.querySelector("#generate");' The #generate refers back to the id given in the html. We now have that very vital connection where our button is going to begin to think about doing a thing.
Second step is to make content -I need something for this button to do so when the button is pushed it needs to write to the document (html) in the text area called (id) password. This is is where our password will show up. We use the variable, pass to hold the password. 'document.getElementById('password').value = pass;'
'generateBtn.addEventListener("click", writePassword);'
Finally, we have to tell the button to listen. What to listen for? A click! What are we doing upon click? writing the password!
5. Copy Button
Why?
If we are generating a password, usually we are generating it in order to use it in some other application. This button improves usabilty by allowing the user to move the password into a clipboard rather than selecting it and hitting ctrl+ copy or, god forbid, reading it off of the screen and then typing it again.
What?How?
document.execCommand('copy');
textarea.remove()
alert('password copied to clipboard');
This is meant for employees who need to generate secure passwords to be used to access sensitive data.
Rachael Kelm-Southworth
-
[linkedin] (https://www.linkedin.com/in/rachael-kelm-southworth-87a3831b3)
-
[github] (https://github.com/RKSouth/)
I would like to thank Kerwin, Manuel, Roger, Jerome and all my classmates for helping me understand this subject matter and anyone that contributed to make the base code.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent