password-chck/test.js at main · cmdpropt/password-chck · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
const passwordField = document.getElementById('password');
const strengthBar = document.getElementById('strength-bar');
const strengthText = document.getElementById('password-strength-text');
const scontainer= document.getElementById('strength-bar-container');
const passwordInput = document.querySelector('input[type="password"]');
const strengthBarContainer = document.querySelector('#strength-bar-container');
const passwordMessageContainer = document.querySelector('.pmcontainer');
const commment=document.getElementById('comment-msg');
document.getElementById('popup-link').addEventListener('click', function() {
  document.getElementById('popup-container').style.display = 'block';
});

document.getElementById('popup-close').addEventListener('click', function() {
  document.getElementById('popup-container').style.display = 'none';
});

// Add event listener to show/hide the strength bar and message container
passwordInput.addEventListener('input', function() {
    if (passwordInput.value.length > 0) {
        // Show strength bar and message container
        strengthBarContainer.style.opacity = 1;
        strengthBarContainer.style.visibility = 'visible';
        passwordMessageContainer.style.opacity = 1;
        passwordMessageContainer.style.visibility = 'visible';
        commment.style.display='none';
    } else {
        // Hide strength bar and message container if input is empty
        strengthBarContainer.style.opacity = 0;
        strengthBarContainer.style.visibility = 'hidden';
        passwordMessageContainer.style.opacity = 0;
        passwordMessageContainer.style.visibility = 'hidden';
        commment.style.visibility='visible';
    }
});

function Strength(password){
  let i = 0;

  if(password.length >= 8){
      i++;
  }
  if(password.length >=10){
      i++;
  }
  if(/[0-9]/.test(password)){
      i++;
  }
  if(/[A-Z]/.test(password)){
      i++;
  }
   if(/[a-z]/.test(password)){
      i++;
  }
  if(/[!@#$%^&*(),.?":{}|<>]/.test(password)){
      i++;
  }
  return i;
}
let container = document.querySelector(".form-container");
document.addEventListener("keyup", function(e) {
    let password = document.querySelector("#ourpassword").value;

  let strengthPercentage = 0;
  let strengthClass = 'weak';
  let strengthMessage = 'Weak';
  let strength = Strength(password);

  if (strength === 2) {
    strengthPercentage = 20;
    strengthClass = 'weak';
    strengthMessage = 'Weak';
  } else if (strength === 3) {
    strengthPercentage = 40;
    strengthClass = 'weak';
    strengthMessage = 'Weak';
  } else if (strength === 4) {
    strengthPercentage = 60;
    strengthClass = 'medium';
    strengthMessage = 'Medium';
  } else if (strength === 5) {
    strengthPercentage = 80;
    strengthClass = 'strong';
    strengthMessage = 'Strong';
  } else if (strength === 6) {
    strengthPercentage = 100;
    strengthClass = 'strong';
    strengthMessage = 'Very Strong';
  }

  strengthBar.style.width = strengthPercentage + '%';
  strengthBar.className = strengthClass;
  strengthText.textContent = strengthMessage;
}
);
document.querySelector("#ourpassword").addEventListener("keydown", function(event) {
  if (event.key === "Enter") {
      event.preventDefault();
  }
});