HTML login button not clicking , working , and zxcvbn result aren't showing

58 Views Asked by At

password meteor application but html button not working. in js i tried doing calculations using zxcvbn but some variables are empty i guess.But when i tried parsing object button didn't work.What should i do ?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="ganaa.css">
</head>
<body>
    <section>
        <div class="signin">
            <div class="content">
                <h2>Sign In</h2>
                <div class="form">
                    <div class="inputBox">
                        <input type="text" required> <i>Username</i>
                    </div>
                    <div class="inputBox">
                        <input type="password" id="password" required> <i>Password</i>
                    </div>
                    <div class="links">
                        <a href="#">Forgot Password</a> <a href="#">Signup</a>
                    </div>
                    <div class="inputBox">
                        <input type="submit" value="Login" onclick="checkPassword()">
                    </div>
                    <div id="message"></div>
                    <div id="timeToCrack"></div>
                </div>
            </div>
        </div>
    </section>
</body>
</html>

<script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.4.2/zxcvbn.js"></script>

<script>
function checkPassword() {
    var password = document.getElementById("password").value;
    var message = document.getElementById("message");
    var timeToCrackDisplay = document.getElementById("timeToCrack");
    alert("ZAil")
    var result = zxcvbn(password);
    var timeToCrack = result.crack_time;
    
    var strength1 = result.score;

    if (password.length === 0) {
        message.innerText = "Password cannot be empty.";
        timeToCrackDisplay.innerText = "";
        return;
    }

    message.innerText = "Password strength: " + getStrengthText(strength1);
    timeToCrackDisplay.innerText = "Estimated time to crack: " + ;
    alert("hi");
    timeToCrackDisplay.innerText = "" + getNumberWords(numberWords)
}

function getStrengthText(score) {
    switch (score) {
        case 0:
            return "Very Weak";
        case 1:
            return "Weak";
        case 2:
            return "Medium";
        case 3:
            return "Strong";
        case 4:
            return "Very Strong";
        default:
            return "No Password";
    }
}

function toWords(number) {
    if(number<120){
        return getNumberWords(number)+" seconds";
        }
        var hour = 60*60;
        if(number<hour){
        minutes = number/60;
        return  getNumberWords(minutes)+" minutes";
        } 
        var day = hour * 24;
        if(number<(2*day)){
        hours = number/hour;
        return  getNumberWords(hours)+" hours";
        } 
        var month = day * 30;
        if(number<month){
        days = number/day;
        return  getNumberWords(days)+" days";
        } 
        var year = day * 365;
        if(number<year){
        months = number/month;
        return  getNumberWords(months)+" months";
        } 
        var century = year * 100;
        if(number<century*10){
        years = number/year;
        return  getNumberWords(years)+" years";
        } 
        if(number<century*100){
        centuries = number/century;
        return  getNumberWords(centuries)+" centuries";
        } 
        years = number/year;
        return  getNumberWords(years)+" years";
       }
        function getNumberWords(number){
        var numberWords = ""; 
        var trillion = Math.pow(10, 12);
        var billion = Math.pow(10, 9);
        var million = Math.pow(10, 6);
        var thousand = Math.pow(10, 4);
        var hundred = Math.pow(10, 3); 
        while(number/trillion >= 1){
        numberWords = " trillion " + numberWords;
        number = number/trillion;
        } 
        while(number/billion >= 1){
        numberWords = " billion " + numberWords;
        number = number/billion;
        } 
        while(number/million >= 1){
        numberWords = " million " + numberWords;
        number = number/million;
        } 
        while(number/thousand >= 1){
        numberWords = " thousand " + numberWords;
        number = number/thousand;
        } 
        while(number/hundred >= 1){
        numberWords = " hundred " + numberWords;
        number = number/hundred;
        } 
        if(twoDP){
        decimalPoint = 100;
        }else{
        decimalPoint = 1;
        }
        number = (Math.round(number*decimalPoint)/decimalPoint) 
        numberWords = number + numberWords; 
        return numberWords;
       } 

</script>

Im trying to do password meteor programm but login button not working zxcvbn parameters are empty i guess

1

There are 1 best solutions below

0
undefined On

The problem lies in the way the results from zxcvbn are being processed and displayed. Theres a few syntax errors and as well as logical issues to address. .i.e

Incomplete Line in checkPassword Function:

The line timeToCrackDisplay.innerText = "Estimated time to crack: " + ; is incomplete. It's missing a value after the + sign.

Undefined Function getNumberWords:

The function getNumberWords is not defined in the provided code, but it is being called in toWords.

Unused Variables and Unnecessary Complexity:

The code for getNumberWords seems overly complex for the intended functionality. Also, the variable twoDP is referenced but not defined anywhere in your script.

This is your code refactored to address the above issues:

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Password Strength Checker</title>
  <link rel="stylesheet" href="ganaa.css">
</head>

<body>
  <section>
    <div class="signin">
      <div class="content">
        <h2>Sign In</h2>
        <div class="form">
          <div class="inputBox">
            <input type="text" required> <i>Username</i>
          </div>
          <div class="inputBox">
            <input type="password" id="password" required> <i>Password</i>
          </div>
          <div class="links">
            <a href="#">Forgot Password</a> <a href="#">Signup</a>
          </div>
          <div class="inputBox">
            <input type="button" value="Login" onclick="checkPassword()">
          </div>
          <div id="message"></div>
          <div id="timeToCrack"></div>
        </div>
      </div>
    </div>
  </section>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.4.2/zxcvbn.js"></script>
  <script>
    function checkPassword() {
      var password = document.getElementById("password").value;
      var message = document.getElementById("message");
      var timeToCrackDisplay = document.getElementById("timeToCrack");

      if (password.length === 0) {
        message.innerText = "Password cannot be empty.";
        timeToCrackDisplay.innerText = "";
        return;
      }

      var result = zxcvbn(password);
      message.innerText = "Password strength: " + getStrengthText(result.score);
      timeToCrackDisplay.innerText = "Estimated time to crack: " + toWords(result.crack_times_seconds.offline_slow_hashing_1e4_per_second);
    }

    function getStrengthText(score) {
      switch (score) {
        case 0:
          return "Very Weak";
        case 1:
          return "Weak";
        case 2:
          return "Medium";
        case 3:
          return "Strong";
        case 4:
          return "Very Strong";
        default:
          return "No Password";
      }
    }

    function toWords(seconds) {
      if (seconds < 60) return seconds + " seconds";
      let minutes = seconds / 60;
      if (minutes < 60) return minutes.toFixed(2) + " minutes";
      let hours = minutes / 60;
      if (hours < 24) return hours.toFixed(2) + " hours";
      let days = hours / 24;
      return days.toFixed(2) + " days";
    }
  </script>
</body>

</html>

I updated your code so that the incomplete line in checkPassword is fixed by correctly appending the result from toWords.

The toWords function is simplified for converting time to a human-readable format.

Removed the undefined getNumberWords function and other unnecessary complexities.

this code relies on the zxcvbn library and expects that the library is correctly loaded, in order for the checkPassword function to work properly. Check the browser console for any other JavaScript errors.

Cheers!!