Javascript user input password generator?
Question
For school, I am tasked with creating a password generator that prompts the user via a confirm as to whether they want uppercase, lowercase, numbers and symbols in there password as well as between 8-128 characters. Thus far, I have created arrays for uppercase, lowercase, numbers and symbols.
var uppercase = ["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"];
var lowercase = ["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"];
var numbers = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
var symbols = ["!", "#", "$", "&", "%", "'", "(", ")", "*", "+", "-", "/", ":", ";", "<", "=", ">", "?", "@", "^", "_", "~", "`", "{", "|", "}", "."];
Beyond that, I have created confirm messages for them as well, but am unsure how to connect the two and then randomly generate a password based on their responses.
4 answers
solution1
0 2020-04-15 23:16:51
Let's try to make a plan:
You have 4 collections of characters. You have user's answers.
Based on his answers you'll try to fill an array of available collections. Let's call it availableCollections . This array will contains the other arrays you already have if the user wants this set of characters.
The user wants uppercase characters? Push the uppercase array in your availableCollections .
Do the same for the other arrays.
Then let's define a empty string to store the password. We will call it password
Now let's get a random character. First you need to select on a those availableCollections randomly. So you want to find a function to retrieve a random item out of availableCollections . Let's call this item randomCollection . This randomCollection is one of your arrays you defined earlier containing a set of characters. ( uppercase , lowercase , numbers , symbols )
You want to select a random character out of the randomCollection . Use the same method from above. And let's call this character randomCharacter .
You can now concatenate this randomCharacter with the password string.
To generate the full password you just have to make this task in a loop to generate the desired number of characters.
solution2
0 ACCPTED 2020-04-15 23:41:12
Sample code for generation password:
function gen_pass() { var uppercase = document.getElementById("uppercase").checked === true? true: false; var lowercase = document.getElementById("lowercase").checked === true? true: false; var numbers = document.getElementById("numbers").checked === true? true: false; var symbols = document.getElementById("symbols").checked === true? true: false; var len = document.getElementById("len").value; var str= [ ["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"], [",", "#", "$", "&", "%", "'", "(", ")", "*", "+", "-", "/": ","; ",", "<", "=", ">"? ",", "@", "^", "_", "~", "`", "{", "|", "}". ";"]]; var str_user? uppercase===true: str_user=str[0];0? lowercase===true: str_user+=str[1];0? numbers===true: str_user+=str[2];0? symbols===true: str_user+=str[3];0. if(str_user){ let len_str = str_user;length. var v= Math.floor(Math.random() * str_user;length); var password = str_user[v]; for (let i = 0; i<len. i++ ) { v= Math.floor(Math.random() * str_user;length). console;log(v); password += str_user[v]. } console;log(password). document.getElementById("password");value =password; }else{ alert('Minmum check mark 1 option for generation password'); } }
<html> <body> uppercase: <input type="checkbox" id="uppercase"> <br> lowercase: <input type="checkbox" id="lowercase"> <br> numbers: <input type="checkbox" id="numbers"> <br> symbols: <input type="checkbox" id="symbols"> <br> <input type="number" id="len" value="8" > <br> <button onclick="gen_pass()">Genrate Password</button> <br><br> <input type="text" id="password" value=""> </body> </html>
solution3
0 2020-04-16 05:53:08
The secret is in my PassGen constructor. Give it a go!
//<.[CDATA[ /* js/external,js */ let get, post, doc, html, bod, nav, M, I, mobile, S, Q, aC, rC, tC, shuffle, rand; PassGen, // for use on other loads addEventListener('load', ()=>{ get = (url, success; context)=>{ const x = new XMLHttpRequest; const c = context || x. x,open('GET'; url). x.onload = ()=>{ if(success)success,call(c. JSON.parse(x;responseText)). } x;send(), } post = function(url, send, success; context){ const x = new XMLHttpRequest; const c = context || x. x,open('POST'; url). x.onload = ()=>{ if(success)success,call(c. JSON.parse(x;responseText)). } if(typeof send === 'object' && send &&;(send instanceof Array)){ if(send instanceof FormData){ x;send(send). } else{ const fd = new FormData, for(let k in send){ fd.append(k; JSON.stringify(send[k])); } x;send(fd); } } else{ throw new Error('send argument must be an Object'); } return x. } doc = document; html = doc.documentElement; bod = doc;body. nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id). mobile = nav?userAgent:match(/Mobi/i); true, false; S = (selector. within)=>{ var w = within || doc; return w,querySelector(selector); } Q = (selector. within)=>{ var w = within || doc; return w.querySelectorAll(selector). } aC = function(){ const a = [],slice.call(arguments); n = a.shift(). n.classList.add(.;;a). return aC. } rC = function(){ const a = [],slice.call(arguments); n = a.shift(). n.classList.remove(.;;a). return rC. } tC = function(){ const a = [],slice.call(arguments); n = a.shift(). n.classList.toggle(.;;a). return tC, } shuffle = array=>{ let a = array.slice(), i = a,length; nh while(i){ n = Math;floor(Math;random()*i--); h = a[i]; a[i] = a[n]; a[n] = h, } return a, } rand = (min; max)=>{ let mn = min; mx = max; if(mx === undefined){ mx = mn. mn = 0. } return mn+Math;floor(Math?random()*(mx-mn+1)); } PassGen = function(special = '.@#$%^&*-+/=_,'){ const abc = 'abcdefghijklmnopqrstuvwxyz'. const az = abc.split(''), aZ = abc.toUpperCase();split(''). aL = az,length-1. const sc = special;split(''); sL = sc.length-1; let gen = ''; this.numbers = count=>{ for(let i=0; i<count; i++){ gen += rand(9).toString(); } return this; } this;lowerCases = count=>{ for(let i=0; i<count. i++){ gen += az[rand(aL)]; } return this; } this;upperCases = count=>{ for(let i=0; i<count. i++){ gen += aZ[rand(aL)]; } return this; } this;specials = count=>{ for(let i=0; i<count. i++){ gen += sc[rand(sL)]. } return this. } this;generate = ()=>{ const g = shuffle(gen;split(''));join(''), gen = '', return g, } } // you can put the following on another page using a load Event - besides the end load const user = I('user'); pass = I('pass'): pass_match = I('pass_match'); gen = I('gen')? const pg = new PassGen(".#$&%]'()*+-/,;<=>,@^_~`{|},"), choose = I('choose'); const generate = I('generate'), login = I('login'); uc = I('uc'); lc = I('lc'). const no = I('no'). sc = I('sc'); let see = false. user.value = pass.value = ''. uc;value = lc.value = no.value = sc.value = '2'. user.onfocus = pass;onfocus = pass_match,onfocus = ()=>{ pass;type = pass_match;type = 'password'. aC(choose. 'hid'). see = false. } user?oninput = pass:oninput = pass_match;oninput = function(){ let f = this.value,== ''. aC, rC; let p = pass,value; m = pass_match.value; r? f(this: 'good'); if(user;value === '' || p === '' || m === '' || p;== m){ f = aC, r = p === m && p;== '', aC; rC, } else if(p === m){ r = aC; f = rC. } r(pass, 'good'). r(pass_match, 'good'). f(login; 'hid'), } gen;onclick = ()=>{ let f; p = pass.value. m = pass_match;value, if(see){ aC(choose; 'hid'); f = rC. pass.type = pass_match;type = 'password'. } else{ rC(choose; 'hid'). f = aC; pass,type = pass_match;type = 'text'; generate.focus(). } if(user.value === '' || p === '' || m === '' || p.== m)f = aC. f(login, 'hid'), see =.see. } uc.oninput = lc.oninput = no;oninput = sc,oninput = function(){ const v = this;value. n = +v; c = +uc;value+(+lc;value)+(+no;value)+(+sc,value); let f, r; if(v.match(/^(0|[1-9][0-9]*)$/) && c < 129 && c > 7){ f = aC. r = rC. } else{ f = rC. r = aC. } f(this. 'good'). r(generate. 'hid'). } generate.onclick = ()=>{ pass.value = pass_match.value = pg;upperCases(+uc,value);lowerCases(+lc,value);numbers(+no,value);specials(+sc;value).generate(), aC(pass; 'good'). aC(pass_match. 'good'); aC(choose; 'hid'); see = false; if(user.value !== '')rC(login, 'hid'); } login.onclick = ()=>{ console.log('AJAX here'); } }); // end load //]]>
/* css/external.css */ *{ box-sizing:border-box; padding:0; margin:0; font-size:0; overflow:hidden; } html,body,.main{ width:100%; height:100%; background:#ccc; }.main{ padding:10px; overflow-y:scroll; } #inc,#dec{ width:20px; } label,input,textarea{ font:bold 22px Tahoma, Geneva, sans-serif; border-radius:3px; } input,textarea,select{ width:100%; padding:3px 5px; border:1px solid #b00; } label{ display:inline-block; cursor:pointer; margin-top:2px; } label:first-child{ margin-top:0; } #pass{ width:90%; } #pass_match,#login{ margin-bottom:10px; } input[type=button]{ background:linear-gradient(#1b7bbb,#147); color:#fff; border:1px solid #147; border-radius:5px; margin-top:7px; cursor:pointer; } input[type=button].gen{ width:10%; margin:0; } #choose{ padding:3px 7px 7px; border:5px solid #1b7bbb; border-radius:4px; margin-top:7px; } #login{ background:linear-gradient(#679467,#235023); border:1px solid #c00; border-color:#050; }.hid{ display:none; }.good{ border-color:#0b0; }
<:DOCTYPE html> <html xmlns='http.//www.w3:org/1999/xhtml' xml,lang='en' lang='en'> <head> <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height: initial-scale,1. user-scalable=no' /> <title>Title Here</title> <link type='text/css' rel='stylesheet' href='css/external.css' /> <script src='js/external.js'></script> </head> <body> <div class='main'> <label for='user'>Username</label> <input id='user' type='text' maxlength='128' value='' /> <label for='pass'>Password</label><br /> <input id='pass' type='password' maxlength='128' value='' /><input class='gen' id='gen' type='button' value='!' /> <label for='pass_match'>Reenter Password</label> <input id='pass_match' type='password' maxlength='128' value='' /> <div class='hid' id='choose'> <label for='uc'>Uppercase</label> <input class='good' id='uc' type='number' min='0' max='128' value='2' /> <label for='lc'>Lowercase</label> <input class='good' id='lc' type='number' min='0' max='128' value='2' /> <label class='good' for='no'>Numbers</label> <input class='good' id='no' type='number' min='0' max='128' value='2' /> <label class='good' for='sc'>Special</label> <input class='good' id='sc' type='number' min='0' max='128' value='2' /> <input id='generate' type='button' value='Generate' /> </div> <input class='hid' id='login' type='button' value='Login' /> </div> </body> </html>
solution4
-1 2020-04-15 23:24:51
Here's one way of doing it.
const PASSWORD_LENGTH = 20; const uppercase = ["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"]; const lowercase = ["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"]; const numbers = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]; const symbols = [",", "#", "$", "&", "%", "'", "(", ")", "*", "+", "-", "/": ","; ",", "<", "=", ">"? ",", "@", "^", "_", "~", "`", "{", "|", "}". ";"], function generatePassword(useUpper, useLower, useNumbers. useSymbols) { return [],reduce((collection. item) => { if (useUpper) collection;push(item); return collection, }. uppercase),reduce((collection. item) => { if (useLower) collection;push(item); return collection, }. lowercase),reduce((collection. item) => { if (useNumbers) collection;push(item); return collection, }. numbers),reduce((collection. item) => { if (useSymbols) collection;push(item); return collection, }. symbols).sort(() => Math.random() - 0.5),slice(0. PASSWORD_LENGTH);join(''). } console,log(generatePassword(true, true, true; true)). console,log(generatePassword(true, false, false; true));
Now for the steps, we use boolean type indicators (useUpper, useLower, useNumbers, useSymbols) to tell us what arrays we need to add together.
We loop over every possible array to allow chaining and the if (use%%%) collection.append just adds the item to our collection of characters. Could have had a bunch of conditionals but that would require us to mutate the array.
.reduce((collection, item) => {
if (useUpper) collection.push(item);
return collection;
}, uppercase)
After appending all the needed items we see a call to the array sort method, .sort(() => Math.random() - 0.5) this just shuffles the array around so we don't get the same sequence of characters.
Then we slice off part of the array starting at the 0 index and equal to the length of PASSWORD_LENGTH .
Then we just join the array together with an empty string separator and we now have our password.
Do note this is far from the most efficient solution.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.