Functionality added to Sign-in and Sign-up

js/login.js

@@ -0,0 +1,113 @@
+const signUpButton = document.getElementById("signUp");
+const signInButton = document.getElementById("signIn");
+const container = document.getElementById("container");
+let uppass = [];
+let inpass = [];
+let userImgPassInput = [];
+signUpButton.addEventListener("click", () => {
+  container.classList.add("right-panel-active");
+  inpass = [];
+  uppass = [];
+});
+
+signInButton.addEventListener("click", () => {
+  container.classList.remove("right-panel-active");
+  inpass = [];
+  uppass = [];
+});
+// adding and removing border
+function upimg(element) {
+  var Image = element.querySelector("img");
+  if (Image) {
+    if (Image.classList.contains("clicked")) {
+      Image.classList.remove("clicked");
+      uppass.splice(uppass.indexOf(element.id), 1);
+    } else {
+      Image.classList.add("clicked");
+      uppass.push(element.id);
+    }
+  }
+}
+
+function inimg(element) {
+  var Image = element.querySelector("img");
+  if (Image) {
+    if (Image.classList.contains("clicked")) {
+      Image.classList.remove("clicked");
+    } else {
+      Image.classList.add("clicked");
+    }
+  }
+}
+// element image recognition
+function signup() {
+  sessionStorage.setItem("upname", document.getElementById("upmail").value);
+  sessionStorage.setItem("uppass", uppass);
+  sessionStorage.setItem("userpass", document.getElementById("s-pass").value);
+  var myText = "Account Created Succesfully";
+  alert(myText);
+}
+// image pattern authentication
+var v2 = new Boolean(false);
+function signin() {
+  userImgPassInput = [];
+  const userEmailInput = document.getElementById("inmail").value;
+  const userPassInput = document.getElementById("l-pass").value;
+  const userImgPass = sessionStorage.getItem("uppass");
+  const userEmail = sessionStorage.getItem("upname");
+  const userPass = sessionStorage.getItem("userpass");
+  const clickedImage = document.getElementsByClassName("clicked");
+  for (let index = 0; index < clickedImage.length; index++) {
+    userImgPassInput.push(clickedImage[index].parentElement.id);
+  }
+  console.log(userPass, userPassInput);
+  if (!graphicMode) {
+    if (
+      userImgPass === userImgPassInput.toString() &&
+      userEmailInput === userEmail
+    ) {
+      var myText = "Login is successful";
+      alert(myText);
+      NewTab();
+    } else {
+      var myText = "Login Failed";
+      alert(myText);
+    }
+  } else {
+    if (
+      userImgPass === userImgPassInput.toString() &&
+      userEmailInput === userEmail &&
+      userPassInput.toString() == userPass.toString()
+    ) {
+      var myText = "Login is successful";
+      alert(myText);
+      NewTab();
+    } else {
+      var myText = "Login Failed";
+      alert(myText);
+    }
+  }
+}
+
+function NewTab() {
+  window.open("index.html", "_blank");
+}
+
+// TIMEPASS KA CODE //
+// const inpassBtn = document.getElementsByClassName("inpass");
+// const timepassBtn = document.getElementsByClassName("timepass");
+// graphicMode = true;
+// for (let index = 0; index < timepassBtn.length; index++) {
+//   timepassBtn[index].addEventListener("click", function (event) {
+//     console.log(event.target);
+//     if (graphicMode) {
+//       graphicMode = false;
+//       inpassBtn[0].style.display = "none";
+//       inpassBtn[1].style.display = "none";
+//     } else {
+//       graphicMode = true;
+//       inpassBtn[0].style.display = "block";
+//       inpassBtn[1].style.display = "block";
+//     }
+//   });
+// }

log/script.js

@@ -1,11 +1,43 @@
-const registerButton = document.getElementById("register");
-const loginButton = document.getElementById("login");
-const container = document.getElementById("container");
+document.addEventListener("DOMContentLoaded", function() {
+  const registerButton = document.getElementById("register");
+  const loginButton = document.getElementById("login");
+  const container = document.getElementById("container");
+  const registerForm = document.getElementById("registerForm");
+  const loginForm = document.getElementById("loginForm");
 
-registerButton.addEventListener("click", () => {
-  container.classList.add("right-panel-active");
-});
+  registerButton.addEventListener("click", (event) => {
+    event.preventDefault();
+    container.classList.add("right-panel-active");
+    registerForm.scrollIntoView({ behavior: "smooth" });
+  });
+
+  loginButton.addEventListener("click", (event) => {
+    event.preventDefault();
+    container.classList.remove("right-panel-active");
+    loginForm.scrollIntoView({ behavior: "smooth" });
+  });
+
+  registerForm.addEventListener("submit", (event) => {
+    event.preventDefault();
+    // Your registration logic goes here
 
-loginButton.addEventListener("click", () => {
-  container.classList.remove("right-panel-active");
-});
+    // Simulate registration success
+    document.getElementById("registerMessage").style.display = "block";
+    setTimeout(() => {
+      container.classList.remove("right-panel-active");
+      loginForm.scrollIntoView({ behavior: "smooth" });
+    }, 2000);
+  });
+
+  loginForm.addEventListener("submit", (event) => {
+    event.preventDefault();
+    // Your login logic goes here
+
+    // Simulate login success
+    alert("Login successful!");
+    // Redirect to the homepage after login
+    setTimeout(() => {
+      window.location.href = "index.html"; // Change "index.html" to your desired URL
+    }, 1000); // Redirect after 1 second (1000 milliseconds)
+  });
+});

login.html

@@ -13,18 +13,13 @@
   <div class="container" id="container">
 
     <div class="form-container register-container">
-      <form action="#">
+      <form action="#" id="registerForm">
         <h1>RAPIDOC </h1>
         <input type="text" placeholder="Name">
         <input type="email" placeholder="Email">
         <input type="password" placeholder="Password">
-        <button onclick="refreshPage()">Register</button>
-        <script>
-          function refreshPage() {
-            location.reload();
-          }
-        </script>
-        <span>or use your account</span>
+        <button type="submit">Register</button>
+        <span id="registerMessage" style="display: none;">Account created successfully</span>
         <div class="social-container">
           <a href="www.facebook.com" class="social"><i class="lni lni-facebook-fill"></i></a>
           <a href="www.google.com" class="social"><i class="lni lni-google"></i></a>
@@ -34,7 +29,7 @@ <h1>RAPIDOC </h1>
     </div>
 
     <div class="form-container login-container">
-      <form action="#">
+      <form action="#" id="loginForm">
         <h1>RAPIDOC</h1>
         <input type="email" placeholder="Email">
         <input type="password" placeholder="Password">
@@ -47,7 +42,7 @@ <h1>RAPIDOC</h1>
             <a href="#">Forgot password?</a>
           </div>
         </div>
-        <a href="index.html"><button>Login</button></a>
+        <button type="submit">Login</button>
         <span>or use your account</span>
         <div class="social-container">
           <a href="www.facebook.com" class="social"><i class="lni lni-facebook-fill"></i></a>
@@ -61,13 +56,13 @@ <h1>RAPIDOC</h1>
       <div class="overlay">
         <div class="overlay-panel overlay-left">
           <h1 class="title">Hello <br> friends</h1>
-          <p>if Yout have an account, login here and have fun</p>
+          <p>if you have an account, login here and have fun</p>
           <button class="ghost" id="login">Login
             <i class="lni lni-arrow-left login"></i>
           </button>
         </div>
         <div class="overlay-panel overlay-right">
-          <h1 class="title">Start your <br> journy now</h1>
+          <h1 class="title">Start your <br> journey now</h1>
           <p>if you don't have an account yet, join us and start your journey.</p>
           <button class="ghost" id="register">Register
             <i class="lni lni-arrow-right register"></i>
@@ -77,8 +72,22 @@ <h1 class="title">Start your <br> journy now</h1>
     </div>
 
   </div>
-
+  
   <script src="log/script.js"></script>
+  <script>
+    document.addEventListener("DOMContentLoaded", function() {
+      const registerButton = document.getElementById("register");
+      const container = document.getElementById("container");
+
+      registerButton.addEventListener("click", (event) => {
+        event.preventDefault(); // Prevent the default behavior of the anchor tag
+
+        container.classList.add("right-panel-active");
 
+        // Scroll to the top of the form for better visibility
+        document.getElementById("registerForm").scrollIntoView({ behavior: "smooth" });
+      });
+    });
+  </script>
 </body>
 </html>