Javascript генератор ввода пароля пользователя?

Question

Для школы мне поручено создать генератор паролей, который запрашивает у пользователя подтверждение того, хотят ли они прописные, строчные, цифры и символы в этом пароле, а также между 8-128 символами. До сих пор я создал массивы для прописных, строчных букв, цифр и символов.

    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 = ["!", "#", "$", "&", "%", "'", "(", ")", "*", "+", "-", "/", ":", ";", "<", "=", ">", "?", "@", "^", "_", "~", "`", "{", "|", "}", "."];

Кроме того, я также создал для них подтверждающие сообщения, но не уверен, как их соединить, а затем случайным образом сгенерировать пароль на основе их ответов.

Answer 1

Секрет в моем PassGen конструкторе. Дайте ему 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, n, h;
  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>

Answer 2

Вот один из способов сделать это.

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));

Теперь для шагов мы используем индикаторы логического типа (useUpper, useLower, useNumbers, useSymbols), чтобы указать нам, какие массивы нам нужно сложить вместе.

Мы l oop над каждым возможным массивом, чтобы разрешить цепочку, и if (use%%%) collection.append просто добавляет элемент в нашу коллекцию символов. Могло бы быть несколько условных выражений, но для этого потребовалось бы изменить массив.

.reduce((collection, item) => {
  if (useUpper) collection.push(item);
  return collection;
}, uppercase)

После добавления всех необходимых элементов мы видим вызов метода сортировки массива, .sort(() => Math.random() - 0.5) это просто перетасовывает массив вокруг, поэтому мы не получаем ту же последовательность символов.

Затем мы slice выключаем часть массива, начинающуюся с индекса 0 и равную длине PASSWORD_LENGTH.

Затем мы просто join массив вместе с пустым разделителем строк, и теперь у нас есть наш пароль.

Обратите внимание, это далеко не самое эффективное решение.

Answer 3

Пример кода для генерации пароля:

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>

Answer 4

Давайте попробуем составить план:

У вас есть 4 коллекции персонажей. У вас есть ответы пользователя.

На основе его ответов вы попытаетесь заполнить массив доступных коллекций. Давайте назовем это availableCollections. Этот массив будет содержать другие массивы, которые у вас уже есть, если пользователь хочет этот набор символов.

Пользователь хочет символы верхнего регистра? Pu sh массив uppercase в вашем availableCollections.

Сделайте то же самое для других массивов.

Затем давайте определим пустую строку для хранения пароля. Мы назовем это password

---

Теперь давайте получим случайный символ. Сначала вам нужно выбрать те availableCollections случайным образом. Итак, вы хотите найти функцию для извлечения случайного элемента из availableCollections. Давайте назовем этот пункт randomCollection. Это randomCollection - один из ваших ранее определенных массивов, содержащий набор символов. (uppercase, lowercase, numbers, symbols)

Вы хотите выбрать случайный символ из randomCollection. Используйте тот же метод сверху. И давайте назовем этот символ randomCharacter.

Теперь вы можете объединить этот randomCharacter со строкой password.

---

Чтобы создать полный пароль, вам просто нужно сделать это Задача в al oop для генерации нужного количества символов.