Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add popup for successful login and register #1152

Merged
merged 2 commits into from
Jul 21, 2024
Merged

feat: add popup for successful login and register #1152

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b363de7
add popup for successful login and register
ANKeshri Jul 20, 2024
ad7ba29
Merge branch 'main' into feat/popup-on-suxccessful-login
ANKeshri Jul 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 18 additions & 1 deletion login/login.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ h1 {
font-weight: 700;
letter-spacing: -1.5px;
margin: 0;
display: contents;
margin-bottom: 15px;
}

Expand Down Expand Up @@ -353,6 +354,21 @@ input {
padding:2px;
transition: 0.3s ease-in-out;
}


/* Add styles for the success banners */
.success-banner {
display: none;
background-color: #4CAF50;
color: white;
padding: 15px;
text-align: center;
position: fixed;
top: 0;
width: 100%;
z-index: 10000;
}

/* hover ibn social icons */
.social-container .fb:hover {
color: white;
Expand All @@ -365,4 +381,5 @@ input {
.social-container .lin:hover {
color: white;
background-color: #0A66C2;
}
}

10 changes: 0 additions & 10 deletions login/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,16 +27,6 @@ document.addEventListener("DOMContentLoaded", function() {
}, 2000);
});

loginForm.addEventListener("submit", (event) => {
event.preventDefault();


// login success
alert("Login successful!");
setTimeout(() => {
window.location.href = "index.html";
}, 1000);
});
});

function togglePasswordVisibility(buttonId, inputId, iconId) {
Expand Down
130 changes: 120 additions & 10 deletions newLogin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,23 @@
<link rel="stylesheet" href="./login/login.css">
</head>
<body>
<div id="loginSuccessBanner" class="success-banner">Logged in successfully</div>
<div id="registerSuccessBanner" class="success-banner">Registered successfully</div>
<div class="main-container">
<div class="container" id="container">
<div class="form-container register-container">
<form action="#" id="registerForm">
<form id="registerForm">
<h1>Tour Guide</h1>
<input type="text" placeholder="Name">
<input type="email" placeholder="Email">
<div id="register-section">
<input type="text" placeholder="Name" id="registerName">
<input type="email" placeholder="Email" id="registerEmail">
<div id="register-section" class="input-container">
<input type="password" placeholder="Password" id="registerPassword">
<button type="button" id="toggleRegisterPassword">
<i id="registerIcon" class="fas fa-eye"></i>
</button>
</div>
<button type="submit">Register</button>
<span id="registerMessage" style="display: none;">Account created successfully</span>
<!-- <span id="registerMessage" style="display: none;">Account created successfully</span> -->
<div class="social-container">
<a class="fb" href="www.facebook.com" class="social"><i class="lni lni-facebook-fill"></i></a>
<a class="goog" href="www.google.com" class="social"><i class="lni lni-google"></i></a>
Expand All @@ -35,16 +37,16 @@ <h1>Tour Guide</h1>
</div>

<div class="form-container login-container">
<form action="#" id="loginForm">
<form id="loginForm">

<h1><a style="margin-right: 300px;" href="index.html" class="back-to-home">

<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 24 24">
<!-- <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 24 24">
<path d="M19 12H5M5 12L12 19M5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</svg> -->
</a>Tour Guide</h1>
<input type="email" placeholder="Email">
<div id="login-section">
<input type="email" placeholder="Email" id="loginEmail">
<div id="login-section" class="input-container">
<input type="password" placeholder="Password" id="loginPassword">
<button type="button" id="toggleLoginPassword">
<i id="loginIcon" class="fas fa-eye"></i>
Expand Down Expand Up @@ -103,5 +105,113 @@ <h1 class="title">Start your <br> journey now</h1>
});
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
const registerButton = document.getElementById("register");
const loginButton = document.getElementById("login");
const container = document.getElementById("container");
const loginSuccessBanner = document.getElementById("loginSuccessBanner");
const registerSuccessBanner = document.getElementById("registerSuccessBanner");

registerButton.addEventListener("click", (event) => {
event.preventDefault();
container.classList.add("right-panel-active");
document.getElementById("registerForm").scrollIntoView({ behavior: "smooth" });
});

loginButton.addEventListener("click", (event) => {
event.preventDefault();
container.classList.remove("right-panel-active");
document.getElementById("loginForm").scrollIntoView({ behavior: "smooth" });
});

// Form validation and submission
document.getElementById("registerForm").addEventListener("submit", function (event) {
event.preventDefault();
validateForm("register");
});

document.getElementById("loginForm").addEventListener("submit", function (event) {
event.preventDefault();
validateForm("login");
});

function validateForm(formType) {
let email, password, name;
const spcharRegex = /[<>"/]/;
if (formType === "register") {
name = document.getElementById("registerName").value;
email = document.getElementById("registerEmail").value;
password = document.getElementById("registerPassword").value;
if (name === "" || email === "" || password === "") {
alert("Please fill in all fields");
return;
}
if (!validateEmail(email)) {
alert("Please enter a valid email address");
return;
}
if (spcharRegex.test(name) || spcharRegex.test(password)) {
alert('Name Or Password Cannot Contain <,>,", or /');
return;
}
// Show register success banner
registerSuccessBanner.style.display = "block";
setTimeout(() => {
registerSuccessBanner.style.display = "none";
}, 3000);
} else {
email = document.getElementById("loginEmail").value;
password = document.getElementById("loginPassword").value;
if (email === "" || password === "") {
alert("Please fill in all fields");
return;
}
if (!validateEmail(email)) {
alert("Please enter a valid email address");
return;
}
if (spcharRegex.test(password)) {
alert('Password cannot contain <,>,", or /');
return;
}
// Show login success banner
loginSuccessBanner.style.display = "block";
setTimeout(() => {
loginSuccessBanner.style.display = "none";
}, 3000);
}
}

function validateEmail(email) {
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return re.test(email);
}

// Password toggle visibility for login
const togglePassword = document.getElementById("togglePassword");
const passwordInput = document.getElementById("loginPassword");

togglePassword.addEventListener("click", function () {
const type = passwordInput.getAttribute("type") === "password" ? "text" : "password";
passwordInput.setAttribute("type", type);

this.classList.toggle("fa-eye");
this.classList.toggle("fa-eye-slash");
});

// Password toggle visibility for register
const toggleRegisterPassword = document.getElementById("toggleRegisterPassword");
const passwordRegisterInput = document.getElementById("registerPassword");

toggleRegisterPassword.addEventListener("click", function () {
const type = passwordRegisterInput.getAttribute("type") === "password" ? "text" : "password";
passwordRegisterInput.setAttribute("type", type);

this.classList.toggle("fa-eye");
this.classList.toggle("fa-eye-slash");
});
});
    </script>
</body>
</html>
Loading