From 60869d06b2abc508df5e515511ac8538d61648c6 Mon Sep 17 00:00:00 2001
From: Mahendra2611 <stpmpv30@gmail.com>
Date: Thu, 17 Oct 2024 17:53:52 +0530
Subject: [PATCH 1/3] added email validation

---
 signin.html | 131 ++++++++++++++++++++++++++++++++--------------------
 1 file changed, 81 insertions(+), 50 deletions(-)

diff --git a/signin.html b/signin.html
index 6fa353e5..88af52f1 100644
--- a/signin.html
+++ b/signin.html
@@ -51,63 +51,94 @@ <h1>Welcome to <span class="brand">SkillWise</span></h1>
                 <p class="suggestion">
                   <small>Use special characters and numbers for a strong password</small>
                 </p>
-                <button type="submit" class="signin-btn">Sign In</button>
+                <button type="submit" class="signin-btn" id="submit">Sign In</button>
                 <p class="signup-link">Don't have an account? <a href="./signup.html">Sign up here</a></p>
             </form>
         </div>
     </div>
     <script src="https://kit.fontawesome.com/a076d05399.js"></script>
-    <script >
-        const togglePassword = document.querySelector("#togglePassword");
-const passwordInput = document.querySelector("#password");
-
-togglePassword.addEventListener("click", function () {
-  const type = passwordInput.getAttribute("type") === "password" ?  "text": "password";
-  passwordInput.setAttribute("type", type);
-
-  this.classList.toggle("fa-eye-slash");
-  this.classList.toggle("fa-eye");
-});
-
-    function checkPasswordStrength() {
-      const password = document.getElementById('password').value;
-      const strengthBar = document.getElementById('strengthBar');
-      let strength = 0;
-
-      if (password.length >= 8) strength += 1;
-      if (/[A-Z]/.test(password)) strength += 1;
-      if (/[a-z]/.test(password)) strength += 1;
-      if (/[0-9]/.test(password)) strength += 1;
-      if (/[\W]/.test(password)) strength += 1;
-
-      switch (strength) {
-        case 1:
-          strengthBar.style.width = '20%';
-          strengthBar.style.backgroundColor = 'red';
-          break;
-        case 2:
-          strengthBar.style.width = '40%';
-          strengthBar.style.backgroundColor = 'orange';
-          break;
-        case 3:
-          strengthBar.style.width = '60%';
-          strengthBar.style.backgroundColor = 'yellow';
-          break;
-        case 4:
-          strengthBar.style.width = '80%';
-          strengthBar.style.backgroundColor = 'lightgreen';
-          break;
-        case 5:
-          strengthBar.style.width = '100%';
-          strengthBar.style.backgroundColor = 'green';
-          break;
-        default:
-          strengthBar.style.width = '0%';
-          break;
+    <script>
+      const togglePassword = document.querySelector("#togglePassword");
+      const passwordInput = document.querySelector("#password");
+      const submitBtn = document.querySelector("#submit");
+      const emailInput = document.querySelector("#email");
+    
+      togglePassword.addEventListener("click", function () {
+        const type = passwordInput.getAttribute("type") === "password" ? "text" : "password";
+        passwordInput.setAttribute("type", type);
+    
+        this.classList.toggle("fa-eye-slash");
+        this.classList.toggle("fa-eye");
+      });
+    
+      function checkPasswordStrength() {
+        const password = document.getElementById('password').value;
+        const strengthBar = document.getElementById('strengthBar');
+        let strength = 0;
+    
+        if (password.length >= 8) strength += 1;
+        if (/[A-Z]/.test(password)) strength += 1;
+        if (/[a-z]/.test(password)) strength += 1;
+        if (/[0-9]/.test(password)) strength += 1;
+        if (/[\W]/.test(password)) strength += 1;
+    
+        switch (strength) {
+          case 1:
+            strengthBar.style.width = '20%';
+            strengthBar.style.backgroundColor = 'red';
+            break;
+          case 2:
+            strengthBar.style.width = '40%';
+            strengthBar.style.backgroundColor = 'orange';
+            break;
+          case 3:
+            strengthBar.style.width = '60%';
+            strengthBar.style.backgroundColor = 'yellow';
+            break;
+          case 4:
+            strengthBar.style.width = '80%';
+            strengthBar.style.backgroundColor = 'lightgreen';
+            break;
+          case 5:
+            strengthBar.style.width = '100%';
+            strengthBar.style.backgroundColor = 'green';
+            break;
+          default:
+            strengthBar.style.width = '0%';
+            break;
         }
-    }
-
+      }
+    
+    
+      submitBtn.addEventListener("click", (e) => {
+         e.preventDefault();
+    
+        const email = emailInput.value;
+        const emailError = document.getElementById("emailError");
+        
+      
+        const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
+    
+        if (!emailPattern.test(email)) {
+         
+          if (!emailError) {
+            const errorMsg = document.createElement("p");
+            errorMsg.id = "emailError";
+            errorMsg.style.color = "red";
+            errorMsg.textContent = "Email is incorrect. Please enter a valid email address.";
+            emailInput.parentElement.appendChild(errorMsg);
+          }
+        } else {
+         
+          if (emailError) {
+            emailError.remove();
+          }
+        
+          e.target.closest("form").submit();
+        }
+      });
     </script>
+    
 
 </body>
 </html>

From b70723e515b64e39faa89327971ed90425a78a69 Mon Sep 17 00:00:00 2001
From: Mahendra2611 <stpmpv30@gmail.com>
Date: Fri, 18 Oct 2024 18:33:52 +0530
Subject: [PATCH 2/3] resolved conflict

---
 signin.html | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/signin.html b/signin.html
index e57ace28..f98b5a82 100644
--- a/signin.html
+++ b/signin.html
@@ -50,18 +50,17 @@ <h1>Welcome to <span class="brand">SkillWise</span></h1>
                 </div>
                 <p class="suggestion">
                   <small>Use special characters and numbers for a strong password</small>
-<<<<<<< HEAD
-                </p>
+
+                </p> -->
+               
                 <button type="submit" class="signin-btn" id="submit">Sign In</button>
-=======
-              
->>>>>>> origin
+
                 <p class="signup-link">Don't have an account? <a href="./signup.html">Sign up here</a></p>
             </form>
         </div>
     </div>
     <script src="https://kit.fontawesome.com/a076d05399.js"></script>
-<<<<<<< HEAD
+
     <script>
       const togglePassword = document.querySelector("#togglePassword");
       const passwordInput = document.querySelector("#password");
@@ -142,10 +141,7 @@ <h1>Welcome to <span class="brand">SkillWise</span></h1>
           e.target.closest("form").submit();
         }
       });
-=======
-   
 
->>>>>>> origin
     </script>
     
 

From 80ffee24d2fb049e3a5821250794b0379850a5e8 Mon Sep 17 00:00:00 2001
From: Mahendra2611 <stpmpv30@gmail.com>
Date: Fri, 18 Oct 2024 18:43:09 +0530
Subject: [PATCH 3/3] conflict resolved

---
 signin.html | 39 +--------------------------------------
 1 file changed, 1 insertion(+), 38 deletions(-)

diff --git a/signin.html b/signin.html
index f98b5a82..35ed5257 100644
--- a/signin.html
+++ b/signin.html
@@ -75,44 +75,7 @@ <h1>Welcome to <span class="brand">SkillWise</span></h1>
         this.classList.toggle("fa-eye");
       });
     
-      function checkPasswordStrength() {
-        const password = document.getElementById('password').value;
-        const strengthBar = document.getElementById('strengthBar');
-        let strength = 0;
-    
-        if (password.length >= 8) strength += 1;
-        if (/[A-Z]/.test(password)) strength += 1;
-        if (/[a-z]/.test(password)) strength += 1;
-        if (/[0-9]/.test(password)) strength += 1;
-        if (/[\W]/.test(password)) strength += 1;
-    
-        switch (strength) {
-          case 1:
-            strengthBar.style.width = '20%';
-            strengthBar.style.backgroundColor = 'red';
-            break;
-          case 2:
-            strengthBar.style.width = '40%';
-            strengthBar.style.backgroundColor = 'orange';
-            break;
-          case 3:
-            strengthBar.style.width = '60%';
-            strengthBar.style.backgroundColor = 'yellow';
-            break;
-          case 4:
-            strengthBar.style.width = '80%';
-            strengthBar.style.backgroundColor = 'lightgreen';
-            break;
-          case 5:
-            strengthBar.style.width = '100%';
-            strengthBar.style.backgroundColor = 'green';
-            break;
-          default:
-            strengthBar.style.width = '0%';
-            break;
-        }
-      }
-    
+     
     
       submitBtn.addEventListener("click", (e) => {
          e.preventDefault();