From 25f287b217f51e029f41bf2393b5cce678167127 Mon Sep 17 00:00:00 2001 From: samarsajad <142666229+samarsajad@users.noreply.github.com> Date: Wed, 5 Jun 2024 18:26:15 +0530 Subject: [PATCH] Functionality added to Sign-in and Sign-up --- js/login.js | 113 ++++++++++++++++++++++++++++++++++++++++++++++++++ log/script.js | 50 ++++++++++++++++++---- login.html | 35 ++++++++++------ 3 files changed, 176 insertions(+), 22 deletions(-) create mode 100644 js/login.js diff --git a/js/login.js b/js/login.js new file mode 100644 index 00000000..270bd7f6 --- /dev/null +++ b/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"; +// } +// }); +// } \ No newline at end of file diff --git a/log/script.js b/log/script.js index acf88762..cdde04e0 100644 --- a/log/script.js +++ b/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"); -}); \ No newline at end of file + // 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) + }); +}); diff --git a/login.html b/login.html index 16c9cd67..d02fe988 100644 --- a/login.html +++ b/login.html @@ -13,18 +13,13 @@