Fixed signup even on lower password strength

dohinaf · Oct 22, 2024 · 81b7aa3 · 81b7aa3
1 parent 9c39a26
commit 81b7aa3
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/signup/signup.html b/signup/signup.html
@@ -25,13 +25,13 @@ <h2>Create an Account</h2>
                     <label>Password</label>
                     <div id="password-strength"></div>
                     <div id="password-requirements">
-                        <p id="length-requirement">At least 6 characters</p>
-                        <p id="uppercase-requirement">At least one uppercase letter</p>
-                        <p id="number-requirement">At least one number</p>
-                        <p id="special-requirement">At least one special character</p>
+                        <p id="length-requirement">✔️ At least 6 characters</p>
+                        <p id="uppercase-requirement">✔️ At least one uppercase letter</p>
+                        <p id="number-requirement">✔️ At least one number</p>
+                        <p id="special-requirement">✔️ At least one special character</p>
                     </div>
                 </div>
-                <button class="signup-btn" type="submit">Sign Up</button>
+                <button class="signup-btn" type="submit" disabled>Sign Up</button>
                 <div class="extra-links">
                     <button class="home-btn"><i class="fas fa-home"></i><a href="../index.html">Home</a></button>
                     <button class="login-btn"><i class="fas fa-sign-in-alt"></i><a href="../login/login.html">Login</a></button>

diff --git a/signup/signup.js b/signup/signup.js
@@ -34,7 +34,6 @@ card.addEventListener("mouseleave", function () {
   card.style.transform = "perspective(1000px)";
 });
 
-
 document.querySelector(".signup-form").addEventListener("submit", function (e) {
   e.preventDefault(); // Prevent form submission
 
@@ -83,6 +82,7 @@ document.getElementById('password').addEventListener('input', function() {
   const uppercaseRequirement = document.getElementById('uppercase-requirement');
   const numberRequirement = document.getElementById('number-requirement');
   const specialRequirement = document.getElementById('special-requirement');
+  const signupButton = document.querySelector('.signup-btn');
   let strength = '';
   let strengthClass = '';
 
@@ -119,4 +119,7 @@ document.getElementById('password').addEventListener('input', function() {
   strengthDiv.textContent = strength;
   strengthDiv.className = strengthClass;
   this.className = strengthClass;
+
+  // Enable/disable signup button
+  signupButton.disabled = strength !== 'Strong';
 });