Merge pull request #617 from aditya-bhaumik/captcha

added captcha to the login page
sk66641 · Aug 9, 2024 · 52b203c · 52b203c
2 parents 908c97a + 3f22c33
commit 52b203c
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 0 deletions.
diff --git a/Login/index1.html b/Login/index1.html
@@ -185,6 +185,14 @@ <h1 style="color: #f09819; margin-bottom: 2rem;">Activate Your Account</h1>
                     <input type="password" id="passwordSignIn" placeholder="Password">
                     <a href="#" class="icon password-toggle" id="togglePasswordSignIn"><i class="fas fa-eye"></i></a>
                 </div>
+                <div class="captcha-container">
+                  <span id="captcha-text" class="captcha-text">ABCD</span>
+                  <button type="button" id="refresh-captcha" class="refresh-captcha">
+                      <i class="fas fa-sync-alt"></i>
+                  </button>
+              </div>
+              <input type="text" id="captcha-input" placeholder="Enter CAPTCHA" required>
+
                 <a href="https://sk66641.github.io/Random-Disco-Light-Simulator/">Forget Your Password?</a>
                 <button type="submit">Sign In</button>
             </form>

diff --git a/Login/script1.js b/Login/script1.js
@@ -92,3 +92,33 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     }
 });
+
+document.addEventListener('DOMContentLoaded', function() {
+    const captchaText = document.getElementById('captcha-text');
+    const captchaInput = document.getElementById('captcha-input');
+    const refreshCaptchaBtn = document.getElementById('refresh-captcha');
+    const signInForm = document.querySelector('.form-container.sign-in form');
+
+    function generateCaptcha() {
+        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+        let captcha = '';
+        for (let i = 0; i < 6; i++) {
+            captcha += characters.charAt(Math.floor(Math.random() * characters.length));
+        }
+        captchaText.textContent = captcha;
+    }
+
+    refreshCaptchaBtn.addEventListener('click', generateCaptcha);
+
+    signInForm.addEventListener('submit', function(event) {
+        const enteredCaptcha = captchaInput.value;
+        if (enteredCaptcha !== captchaText.textContent) {
+            event.preventDefault();
+            alert('CAPTCHA does not match. Please try again.');
+            generateCaptcha(); // Generate new CAPTCHA on failed attempt
+        }
+    });
+
+    // Generate initial CAPTCHA on page load
+    generateCaptcha();
+});
diff --git a/Login/styles1.css b/Login/styles1.css
@@ -718,3 +718,45 @@ body {
     color: white;
     transition: all ease-in 0.1s;
   }
+
+
+  .captcha-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+    width: 100%;
+}
+
+.captcha-text {
+    font-size: 1rem;
+    font-weight: bold;
+    color: #f09819;
+    padding: 0.5rem;
+    background-color: #333;
+    border-radius: 5px;
+    flex: 1;
+    text-align: center;
+    margin-right: 10px;
+}
+
+.refresh-captcha {
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    font-size: 1.5rem;
+    color: #f09819;
+}
+
+.refresh-captcha:hover {
+    color: #ffba08;
+}
+
+#captcha-input {
+    width: 100%;
+    padding: 0.5rem;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin-bottom: 1rem;
+    font-size: 1rem;
+}