samedi 21 avril 2018

Javascript pw generator - incorrect password lengths

Caveat: I'm a JS newbie.

I'm playing with trying to make my own password generator using checkboxes to control the character groups which are included in the selections.

I started with a script I found online about 6 years ago (don't remember where) and after spending the past 3 days on w3schools I have tried combining some different examples to come up with a (mostly) working prototype.

Except, there's an odd behaviour in which if all checkboxes are selected, the length of password is as expected. But, if fewer than all checkboxes are selected then the password length is anywhere from 0 to maximum length of characters.

The expected result would be, regardless of number of checkboxes selected (one or more), the generated password length should be the same as the number selected from the drop-down list.

Could someone offer some suggestions on how to achieve the expected result?

Thank you.

Original (almost):

<!DOCTYPE html>
<html lang="en">

<head>
  <title>My Password Generator</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    html,
    body {
      height: auto;
      min-height: 100%;
      margin: 0 auto;
      border: 0;
      padding: 0;
      text-align: center;
    }
    
    table {
      background-color: #cc66cc;
      border: 5px dashed #00f;
      margin: 0 auto;
    }
  </style>
</head>

<body>

  <script>
    function randomPassword(length) {
      chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!@#$%^&*()[]{}";
      pass = "";
      for (x = 0; x < length; x++) {
        i = Math.floor(Math.random() * 76);
        pass += chars.charAt(i);
      }
      return pass;
    }

    function formSubmit() {
      passform.passbox.value = randomPassword(passform.length.value);
      return false;
    }
  </script>

  <table>
    <tr>
      <td valign="middle" align="center">
        <form name="passform">
          <p>
            <select name="length">
              <option value="1">01</option>
              <option value="2">02</option>
              <option value="3">03</option>
              <option value="4">04</option>
              <option value="5">05</option>
              <option value="6">06</option>
              <option value="7">07</option>
              <option value="8">08</option>
              <option value="9">09</option>
              <option value="10">10</option>
              <option value="11">11</option>
              <option value="12">12</option>
              <option value="13">13</option>
              <option value="14">14</option>
              <option value="15">15</option>
              <option value="16">16</option>
              <option value="17">17</option>
              <option value="18">18</option>
              <option value="19">19</option>
              <option value="20">20</option>
              <option value="21">21</option>
              <option value="22">22</option>
              <option value="23">23</option>
              <option value="24">24</option>
              <option value="25">25</option>
              <option value="26">26</option>
              <option value="27">27</option>
              <option value="28">28</option>
              <option value="29">29</option>
              <option value="30">30</option>
            </select>
          </p>
          <p>
            <input name="passbox" type="text" size="100" tabindex="1" style="padding-left: 5px;">
          </p>

          <p>
            <input type="button" value="Generate" onClick="javascript:formSubmit()" tabindex="2">
            <input type="reset" value="Clear" tabindex="3">
          </p>
        </form>
      </td>
    </tr>
  </table>
</body>

</html>

New Version:

<!DOCTYPE html>
<html lang="en">

<head>
  <title>My Password Generator</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    * {
      margin: 0;
      border: 0;
      padding: 0;
      color: #000;
      box-size: border-box;
    }
    
    html,
    body {
      height: auto;
      min-height: 100%;
      text-align: center;
      font: normal normal 17px/17px serif;
    }
    
    .box {
      background-color: #ccf;
      border: 1px solid #669;
      margin: 0 auto;
      width: 900px;
      height: 260px;
    }
    
    ::selection {
      color: #fff;
      background: #f90;
    }
    
    .select,
    .text,
    .button,
    .button2 {
      height: 25px;
      margin: 15px 5px 10px;
      padding: 0 10px;
      border: 1px solid #669;
    }
    
    .select {
      width: 80px;
      background: #aad;
    }
    
    .button {
      height: 25px;
      background: #aad;
    }
    
    #checkboxes {
      text-align: left;
      border: 1px solid #000;
    }
    
    .chkbx {
      text-align: left;
      display: inline-block;
      color: #f00 !important;
      width: 15px;
      height: 15px;
      margin: 10px 10px 10px 25px;
    }
    
    .bold {
      font: normal bold 23px/23px serif;
    }
    
    .text {
      padding: 2px 10px;
      background: #99f;
      height: 25px;
      width: 860px;
    }
    
    #passbox1 {
      letter-spacing: 1px;
      font: normal normal 17px/17px serif;
    }
  </style>
</head>

<body>
  <script>
    function ranPass1(length) {
      var lower = "";
      var upper = "";
      var number = "";
      var spec1 = "";
      var spec2 = "";
      var spec3 = "";
      var chars1 = "";
      var pass1 = "";
      if (lowercheck.checked == true) {
        lower = "abcdefghijklmnopqrstuvwxyz";
        chars1 = chars1.concat(lower);
      }
      if (uppercheck.checked == true) {
        upper = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        chars1 = chars1.concat(upper);
      }
      if (numbercheck.checked == true) {
        number = "0123456789";
        chars1 = chars1.concat(number);
      }
      if (spec1check.checked == true) {
        spec1 = "!@#$%^&*|?";
        chars1 = chars1.concat(spec1);
      }
      if (spec2check.checked == true) {
        spec2 = "`~.,;:-_";
        chars1 = chars1.concat(spec2);
      }
      if (spec3check.checked == true) {
        spec3 = "()[]{}\<\>";
        chars1 = chars1.concat(spec3);
      }

      for (x1 = 0; x1 < length; x1++) {
        i1 = Math.floor(Math.random() * 71);
        pass1 += chars1.charAt(i1);
      }
      return pass1;
    }

    function formSubmit1() {
      passform1.passbox1.value = ranPass1(passform1.length.value);
      return false;
    }
  </script>
  <div class="box">
    <form name="passform1">
      <p>
        <select class="select" name="length">
          <option value="1">01</option>
          <option value="2">02</option>
          <option value="3">03</option>
          <option value="4">04</option>
          <option value="5">05</option>
          <option value="6">06</option>
          <option value="7">07</option>
          <option value="8">08</option>
          <option value="9">09</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
          <option value="13">13</option>
          <option value="14">14</option>
          <option value="15">15</option>
          <option value="16">16</option>
          <option value="17">17</option>
          <option value="18">18</option>
          <option value="19">19</option>
          <option value="20">20</option>
          <option value="21">21</option>
          <option value="22">22</option>
          <option value="23">23</option>
          <option value="24">24</option>
          <option value="25">25</option>
          <option value="26">26</option>
          <option value="27">27</option>
          <option value="28">28</option>
          <option value="29">29</option>
          <option value="30">30</option>
        </select>
      </p>
      <div id="checkboxes">
        <p><input type="checkbox" id="lowercheck" class="chkbx"> <span class="bold">[</span> a - z <span class="bold">]</span></p>
        <p><input type="checkbox" id="uppercheck" class="chkbx"> <span class="bold">[</span> A - Z <span class="bold">]</span></p>
        <p><input type="checkbox" id="numbercheck" class="chkbx"> <span class="bold">[</span> 0 1 2 3 4 5 6 7 8 9 <span class="bold">]</span></p>
        <p><input type="checkbox" id="spec1check" class="chkbx"> <span class="bold">[</span> ! @ # $ % ^ & * | ? <span class="bold">]</span></p>
        <p><input type="checkbox" id="spec2check" class="chkbx"> <span class="bold">[</span> ` ~ . , ; : - _ <span class="bold">]</span></p>
        <p><input type="checkbox" id="spec3check" class="chkbx"> <span class="bold">[</span> ( ) [ ] { } &lt; &gt; <span class="bold">]</span></p>
      </div>
      <p>
        <input class="text" name="passbox1" type="text" tabindex="1" id="passbox1">
      </p>
      <p>
        <input class="button" type="button" value="Generate" onClick="javascript:formSubmit1()" tabindex="2">
        <input class="button" type="reset" value="Clear" tabindex="3">
      </p>
    </form>
  </div>
</body>

</html>



Publié par à
Libellés :

Aucun commentaire:

Enregistrer un commentaire

Inscription à : Publier les commentaires (Atom)