├── .github ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE │ └── feature_request.md └── PULL_REQUEST_TEMPLATE.md ├── LICENSE ├── README.md ├── index.html ├── index.js └── main.css /.github/CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by sending a message to the owner of the repository. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq 77 | -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | The purpose of this project is to be an intro into open source for any beginners so you can go through the project site here [Random Password Generator](https://jemimaabu.github.io/random-password-generator/) and then choose something to work on. 3 | 4 | I made the project as bare as possible so there should be many things to choose from (styling a button or optimizing the logic or whatever). 5 | 6 | ## Getting Started 7 | **Step 1**: Create an issue for the task you want to work on (go through the [Issues](https://github.com/jemimaabu/random-password-generator/issues) page first to make sure it doesn't already exist) or select an already existing issue to work on. 8 | 9 | **Step 2**: Assign the issue to yourself or leave a comment under an existing issue, requesting assignment. 10 | 11 | **Step 3**: Fork the repository, create a new branch with the same title as your issue (as long as it's something readable) and make whatever changes you want. 12 | 13 | **Step 4**: Create a pull request for the branch. 14 | 15 | - [A Step by Step Guide to Making Your First GitHub Contribution by Brandon Morelli](https://codeburst.io/a-step-by-step-guide-to-making-your-first-github-contribution-5302260a2940). 16 | 17 | **Step 5**: Once your PR is approved and merged, the change will be uploaded to the project website. 18 | 19 | **Step 6**: Congratulations, you've just contributed to an Open Source Project! Whoopwhoop. 20 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Problem**: *A clear and concise description of what the problem is. Ex. The page resets on submit[...]* 11 | 12 | **Solution**: *A clear and concise description of what you want to happen*. 13 | 14 | **Implementation**: *If you're handling the issue yourself, summarize how you plan to go about it*. 15 | 16 | **Additional context** 17 | *Add any other context or screenshots about the feature request here*. 18 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## Description 4 | 5 | 6 | ## Motivation and Context 7 | 8 | 9 | 10 | ## How Has This Been Tested? 11 | 12 | 13 | 14 | 15 | ## Screenshots (if appropriate): 16 | 17 | ## Types of changes 18 | 19 | - [ ] Bug fix (non-breaking change which fixes an issue) 20 | - [ ] New feature (non-breaking change which adds functionality) 21 | - [ ] Breaking change (fix or feature that would cause existing functionality to change) 22 | 23 | ## Checklist: 24 | 25 | 26 | - [ ] My code follows the code style of this project. 27 | - [ ] My change requires a change to the documentation. 28 | - [ ] I have updated the documentation accordingly. 29 | - [ ] I have read the **CONTRIBUTING** document. 30 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Jemima 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # random-password-generator 2 | 3 | ## A webpage that generates a random password. 4 | 5 | # How To Use 6 | 1. Type in password length. 7 | 2. Select type of password required (can also generate pins if you select only numbers). 8 | 3. Generate password. 9 | 10 | All passwords are generated on your browser so nothing is stored online, you're the only one who has knowledge of the generated password. 11 | ___ 12 | 13 | # Open Source 14 | This project is open to contributions from the public. 15 | Basically, if you're a beginner, think of it as your introduction to open source. 16 | And if you've been open sourcing for a while, here's another contribution to add to your belt. 17 | 18 | ## Contributing 19 | Check out [CONTRIBUTING.md](.github/CONTRIBUTING.md) for details on creating pull requests and solving issues and all that jazz. 20 | 21 | ## License 22 | This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. 23 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Random Password Generator 7 | 8 | 9 | 10 | 11 | 12 | 13 |

Random Password Generator

14 |
15 | 32 |
33 |
34 |
35 |
36 | 37 | 38 |
39 |
40 | 41 | 42 |
43 |
44 | 45 | 46 |
47 |
48 | 49 | 50 |
51 |
52 | 53 | 54 |
55 |
56 | 57 | 58 |
59 | 60 |
61 | Random password: 62 |
63 |
64 | 65 |
66 |
67 |
68 | show 69 |
70 |
71 | Password strength: 72 |
73 |
74 | 75 |
76 |
77 |
78 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | function minmax(value, min, max) 2 | { 3 | if (value.indexOf('.') > -1) 4 | { 5 | if (value === ".") return; //We're only interested in whole numbers, so we'll disallow this. A dot can't be in the first position. 6 | return value.split('.')[0]; 7 | } 8 | if (value.length < 2) return value; //We can't yet be sure the number is less than min. 9 | 10 | const parsedInput = parseInt(value); 11 | 12 | if (parsedInput >= min && parsedInput <= max) 13 | return value; 14 | else if(parsedInput < min) 15 | return min; 16 | 17 | else if(parsedInput > max) 18 | return max; 19 | return value; 20 | } 21 | 22 | var passwordLength = document.getElementById("password-length"); 23 | var repeatCharacters = document.getElementById("repeat-characters"); 24 | var specialCharacters = document.getElementById("special-characters"); 25 | var ambiguousCharacters = document.getElementById("ambiguous-characters"); 26 | var includeNumbers = document.getElementById("include-numbers"); 27 | var includeLetters = document.getElementById("include-letters"); 28 | var randomPassword = document.getElementById("random-password"); 29 | var errorMessage = document.getElementById("error-message"); 30 | 31 | var defaultCharacters = ["@", "!", "#", "$", "?", ".", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z","A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", 0,1,2,3,4,5,6,7,8,9] 32 | var characters = []; 33 | var passwordArray = []; 34 | 35 | const MIN = 4; 36 | const MAX = 256; 37 | 38 | function generatePassword() { 39 | randomPassword.innerHTML = ""; 40 | passwordArray=[]; 41 | characters = defaultCharacters; 42 | const pwLength = parseInt(passwordLength.value); 43 | 44 | if (!specialCharacters.checked) { 45 | characters = characters.join("").replace(/[@!#$?.]/g,'').split('') 46 | } 47 | if (!includeNumbers.checked) { 48 | characters = characters.join("").replace(/[0-9]/g,'').split('') 49 | } 50 | if (!includeLetters.checked) { 51 | characters = characters.join("").replace(/[a-zA-Z]/g,'').split('') 52 | } 53 | if (!ambiguousCharacters.checked) { 54 | characters = characters.join("").replace(/[1Ilo0]/g,'').split('') 55 | } 56 | 57 | if (pwLength < MIN || pwLength > MAX) {//Final validation in case something is wrong. 58 | errorMessage.innerHTML = "You must pick a password between " + MIN + " and " + MAX; 59 | return; 60 | } 61 | 62 | 63 | if (!specialCharacters.checked && !includeNumbers.checked && !includeLetters.checked) { 64 | errorMessage.innerHTML = "Alas, blank passwords aren't a thing yet." 65 | return; 66 | } 67 | if (!repeatCharacters.checked) { 68 | if (passwordLength.value > characters.length) { 69 | errorMessage.innerHTML = "There are only so many characters, we're going to have to repeat something" 70 | return; 71 | } else { 72 | errorMessage.innerHTML = "" 73 | while (passwordArray.length < passwordLength.value) { 74 | var randomIndex = Math.floor(Math.random()*characters.length); 75 | var newChar = characters[randomIndex]; 76 | newChar = isNaN(newChar) ? newChar.toLowerCase() : newChar; 77 | if (passwordArray.indexOf(newChar) === -1) { 78 | passwordArray.push(characters[randomIndex]); 79 | } 80 | } 81 | } 82 | } else { 83 | errorMessage.innerHTML = "" 84 | for (var i = 0; i < passwordLength.value; i++) { 85 | var randomIndex = Math.floor(Math.random()*characters.length); 86 | passwordArray.push(characters[randomIndex]) 87 | } 88 | } 89 | randomPassword.innerHTML = passwordArray.join(""); 90 | } 91 | 92 | //function copies the created password to clipboard 93 | function copyToClip() { 94 | var value = document.getElementById("random-password").innerHTML; 95 | var input_temp = document.createElement("input"); 96 | input_temp.value = value; 97 | document.body.appendChild(input_temp); 98 | input_temp.select(); 99 | document.execCommand("copy"); 100 | document.body.removeChild(input_temp); 101 | 102 | alert("Password copied!"); 103 | } 104 | 105 | function getMin() {return MIN;} 106 | function getMax () {return MAX;} 107 | 108 | // TOOGLE HOW TO USE 109 | let openInstructions = document.getElementById('instructions__header'); 110 | let arrow = document.querySelector('.fas'); 111 | 112 | openInstructions.addEventListener('click', () => { 113 | openInstructions.parentNode.classList.contains('active') ? 114 | (openInstructions.parentNode.classList.remove('active'), arrow.classList.remove('fa-angle-up'), arrow.classList.add('fa-angle-down') ) : 115 | (openInstructions.parentNode.classList.add('active'), arrow.classList.remove('fa-angle-down'), arrow.classList.add('fa-angle-up')) 116 | }); 117 | 118 | var passwordTest = document.getElementById("password-test"); 119 | passwordTest.addEventListener("change", indicator); 120 | 121 | function passwordScore() { 122 | var value = passwordTest.value.trim(); 123 | var score = 0; 124 | if (value.length < 8 ) { 125 | score = 0; 126 | } else { 127 | if (value.length > 8) { 128 | score++ 129 | } 130 | if (/\d/.test(value)) { 131 | score++ 132 | } 133 | if (/[!@#$%^&*()_+\-=\[\]{};':"\|\,.<>\?]/.test(value)) { 134 | score++ 135 | } 136 | if (/[A-Z]/.test(value)) { 137 | score++ 138 | } 139 | if (value.length > 24) { 140 | score++ 141 | } 142 | } 143 | return score; 144 | } 145 | 146 | var passwordIndicator = document.getElementById("password-indicator"); 147 | var passwordStrength = document.getElementById("password-strength"); 148 | 149 | function indicator() { 150 | if (passwordTest.value.trim().length < 1) { 151 | passwordIndicator.className=""; 152 | passwordStrength.innerHTML = ""; 153 | } else { 154 | var score = passwordScore(); 155 | switch (score) { 156 | case 0: 157 | passwordIndicator.className="weak"; 158 | passwordStrength.innerHTML = "Weak"; 159 | break; 160 | case 1: 161 | passwordIndicator.className="average"; 162 | passwordStrength.innerHTML = "Average"; 163 | break; 164 | case 2: 165 | passwordIndicator.className="good"; 166 | passwordStrength.innerHTML = "Good"; 167 | break; 168 | case 3: 169 | passwordIndicator.className="strong"; 170 | passwordStrength.innerHTML = "Strong"; 171 | break; 172 | case 4: 173 | passwordIndicator.className="strong"; 174 | passwordStrength.innerHTML = "Strong"; 175 | break; 176 | default: 177 | passwordIndicator.className=""; 178 | passwordStrength.innerHTML = ""; 179 | break; 180 | } 181 | } 182 | } 183 | 184 | passwordTest.onkeyup = function() { 185 | indicator(); 186 | } 187 | 188 | var passwordToggle = document.getElementById("password-toggle"); 189 | 190 | function togglePassword() { 191 | if (passwordTest.value.trim().length < 1 ) { 192 | return 193 | } else { 194 | if (passwordTest.type === "text") { 195 | passwordToggle.innerHTML="show"; 196 | passwordTest.type = "password"; 197 | } else if (passwordTest.type === "password") { 198 | passwordToggle.innerHTML="hide"; 199 | passwordTest.type = "text"; 200 | } 201 | } 202 | } 203 | 204 | passwordToggle.onclick = function() { 205 | togglePassword(); 206 | } 207 | 208 | //function strengthenPassword() { 209 | // var value = passwordTest.value.trim(); 210 | //} 211 | -------------------------------------------------------------------------------- /main.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | background-color: #1e272e; 7 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif 8 | } 9 | 10 | .github-corner:hover .octo-arm { 11 | animation: octocat-wave 560ms ease-in-out 12 | } 13 | 14 | #title { 15 | font-size: 28px; 16 | color: #2f3542; 17 | border: 3px solid lightslategray; 18 | padding: .2em; 19 | border-radius: 5px; 20 | background-color: #70a1ff; 21 | text-align: center; 22 | margin-top: 0; 23 | } 24 | 25 | #wrapper { 26 | position: relative; 27 | } 28 | 29 | aside { 30 | width: 33.5%; 31 | position: absolute; 32 | height: 85vh; 33 | right: 0; 34 | } 35 | 36 | #instructions { 37 | border: 2px solid gray; 38 | margin-bottom: 15px; 39 | border-radius: 5px; 40 | color: #2f3542; 41 | background-color: #f1f2f6; 42 | max-height: 55px; 43 | overflow: hidden; 44 | transition: max-height 0.3s ease-out 45 | } 46 | 47 | #instructions.active { 48 | height: auto; 49 | max-height: 500px; 50 | } 51 | 52 | #instructions__header { 53 | padding: 1em; 54 | cursor: pointer; 55 | border-bottom: 1px solid #2f3542; 56 | display: flex; 57 | justify-content: space-between; 58 | } 59 | 60 | #instructions__content { 61 | padding: 0 2em 1em 2em; 62 | } 63 | 64 | #instructions__content ul { 65 | padding: 0; 66 | } 67 | 68 | #how { 69 | margin: 0; 70 | } 71 | 72 | #instructions li { 73 | margin-bottom: 1em 74 | } 75 | 76 | main { 77 | width: 65%; 78 | } 79 | 80 | main div { 81 | margin: 0.5em 0; 82 | } 83 | 84 | #password-length { 85 | width: 5em; 86 | padding: .2rem; 87 | text-align: center; 88 | font-size: .8em; 89 | border: none; 90 | border-radius: 5px; 91 | } 92 | 93 | .button{ 94 | font-size: 1rem; 95 | border: none; 96 | padding: 5px 15px; 97 | border-radius: 4px; 98 | cursor: pointer; 99 | -webkit-transition: 0.2s; 100 | -o-transition: 0.2s; 101 | transition: 0.2s; 102 | } 103 | 104 | .button.generate { 105 | background-color: #70A1FF; 106 | color: #fff; 107 | } 108 | .button.generate:hover{ 109 | background-color: #91b6fb; 110 | } 111 | .button.copy { 112 | background-color: powderblue; 113 | color: black; 114 | } 115 | .button.copy:hover{ 116 | background-color: #b6e4eb; 117 | } 118 | 119 | #random-password-container { 120 | border: 2px solid gray; 121 | border-radius: 5px; 122 | background-color: #dfe4ea; 123 | padding: 1em; 124 | } 125 | 126 | #random-password { 127 | background-color: powderblue; 128 | padding: 1em; 129 | word-break: break-all; 130 | } 131 | 132 | input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { 133 | -webkit-appearance: none; 134 | margin: 0; 135 | } 136 | 137 | input[type="number"] { 138 | -moz-appearance: textfield; 139 | } 140 | 141 | #error-message{ 142 | opacity: 0; 143 | animation: fadeIn 1s forwards; 144 | color: #D8000C; 145 | } 146 | 147 | #password-strength-container { 148 | border: 2px solid gray; 149 | border-radius: 5px; 150 | background-color: #dfe4ea; 151 | padding: 1em; 152 | } 153 | 154 | #password-strength-container .input-container { 155 | position: relative; 156 | } 157 | 158 | #password-test { 159 | width: 100%; 160 | border-radius: 5px; 161 | border: 2px solid gray; 162 | padding: 0.5em; 163 | outline: none; 164 | } 165 | 166 | #password-indicator { 167 | width: 100%; 168 | padding: 2px; 169 | border-radius: 5px; 170 | background: white; 171 | } 172 | 173 | #password-indicator.weak { 174 | background: linear-gradient(to right, #ff0000 25%, #fff 25%); 175 | } 176 | 177 | #password-indicator.average { 178 | background: linear-gradient(to right,#ff9900 50%,#fff 50%); 179 | } 180 | 181 | #password-indicator.good { 182 | background: linear-gradient(to right,#70A1FF 75%, #fff 75%); 183 | } 184 | 185 | #password-indicator.strong { 186 | background: linear-gradient(to right, #43f04c 100%, #43f04c 100%); 187 | } 188 | 189 | #password-toggle { 190 | font-size: .8em; 191 | float: right; 192 | position: absolute; 193 | right: 0.5em; 194 | top: 0.75em; 195 | color: #70A1FF; 196 | cursor: pointer; 197 | } 198 | 199 | @keyframes octocat-wave { 200 | 0%, 100% { 201 | transform:rotate(0) 202 | } 203 | 20%, 60% { 204 | transform:rotate(-25deg) 205 | } 206 | 40%, 80% { 207 | transform:rotate(10deg) 208 | } 209 | } 210 | 211 | @keyframes fadeIn { 212 | from { opacity: 0 } 213 | to { opacity: 1 } 214 | } 215 | 216 | @media only screen and (max-width: 768px) { 217 | aside { 218 | position: relative; 219 | height: auto; 220 | width: 100%; 221 | } 222 | 223 | main { 224 | width: 100%; 225 | } 226 | } 227 | --------------------------------------------------------------------------------