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: fixed issue #1476 #1566

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
+97 −84
Open

feat: fixed issue #1476 #1566

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c994b34
Fixed issue #1476
LNischala Oct 23, 2024
293575e
fixing issue
LNischala Oct 27, 2024
fcea3ec
feat: fixed issue #1566
LNischala Oct 27, 2024
b45f673
feat:fixed issue #1566
LNischala Oct 31, 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
8 changes: 6 additions & 2 deletions Theme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,17 @@ function applyTheme(theme) {
if (theme === "dark") {
document.body.classList.add("dark-theme");
document.body.classList.remove("light-theme");
themeLabel.style.background = "var(--primary-color)";
// themeLabel.style.background = "var(--primary-color)";
themeToggle.setAttribute('title','Switch to Light mode');
themeToggle.checked = true;

} else {
document.body.classList.add("light-theme");
document.body.classList.remove("dark-theme");
themeLabel.style.background = "#fff";
// themeLabel.style.background = "fff";
themeToggle.setAttribute('title','Switch to Dark mode');
themeToggle.checked = false;

}
}

Expand Down
11 changes: 8 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,8 +99,8 @@
.toggle-container {
position: relative;
right: 2.5rem;

}


.toggle {
width: 130%;
Expand Down Expand Up @@ -851,7 +851,7 @@ <h2 data-max="30" id="test">+ Developers</h2>
<div class="modal-container">
<div class="modal-wrapper">
<div class="cross-container">
<i class="fas fa-times close-btn" onclick="closeModal()"></i>
<i class="fas fa-times close-btn" onclick="closeModal()" title="Close"></i>
</div>
<div class="modal-newsletter">
<div class="modal-header">
Expand Down Expand Up @@ -2185,7 +2185,7 @@ <h4>Contact Us</h4>


<a class="goupbtn" href="#" onclick="goToTop()"><i class="fa-solid fa-arrow-up"></i></a>

<script>
// Get the button
var mybutton = document.querySelector(".goupbtn");
Expand All @@ -2198,6 +2198,11 @@ <h4>Contact Us</h4>
mybutton.style.display = "none";
}
});
let btn1 = document.querySelector(".goupbtn");
btn1.addEventListener("mouseover", () => {
btn1.setAttribute("title", "Back to top");
});


// When the user clicks on the button, scroll to the top of the document
function goToTop() {
Expand Down
14 changes: 14 additions & 0 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,20 @@ const closeBtn = document.querySelector(".close-btn");
const subscribeBtn = document.querySelector("#news-subscribe");
const form = document.querySelector("#modal-form");

// const toggleContainer = document.querySelector('.toggle-container');
// const hoverText = document.querySelector('.hover-txt');
// // Show hover text on mouseover
// toggleContainer.addEventListener('mouseover', () => {
// hoverText.style.display = 'block';
// hoverText.style.color = 'white';
// });

// // Hide hover text on mouseout
// toggleContainer.addEventListener('mouseout', () => {
// hoverText.style.display = 'none';
// });


function openModal() {
modalContainer.style.display = "flex";
}
Expand Down
3 changes: 3 additions & 0 deletions login/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,14 +38,17 @@ function togglePasswordVisibility(buttonId, inputId, iconId) {
// Toggle the type attribute
const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
passwordInput.setAttribute('type', type);


// Toggle the icon
if (type === 'password') {
icon.classList.remove('fa-eye-slash');
icon.classList.add('fa-eye');
toggleButton.setAttribute('title', 'Show');
} else {
icon.classList.remove('fa-eye');
icon.classList.add('fa-eye-slash');
toggleButton.setAttribute('title', 'Hide');
}
});
}
Expand Down
145 changes: 66 additions & 79 deletions newLogin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,56 +9,56 @@
<link href="https://cdn.lineicons.com/4.0/lineicons.css" rel="stylesheet" />
<script src="https://kit.fontawesome.com/f2e55912f8.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./login/login.css">
<link rel="icon" type="image/x-icon" href="favicon.ico"/>
</head>
<body>
<div id="loginSuccessBanner" class="success-banner">Logged in successfully</div>
<div id="loginDeclineBanner" class="decline-banner">Logged in Blocked <br> credentials didn't match</div>
<div id="registerSuccessBanner" class="success-banner">Registered successfully</div>
<div id="registerDeclineBanner" class="decline-banner">Registered Blocked <br> Same email address</div>
<!-- Back to Home Button -->
<div>
<a href="index.html">
<button style="padding: 25px 25px 25px 25px; border-radius: 40px; font-size: 20px;">
<i class="lni lni-home"></i>
</button>
</a>
</div>
<div id="registerSuccessBanner" class="success-banner">Registered successfully</div>
<div id="registerDeclineBanner" class="decline-banner">Registered Blocked <br> Same email address</div>

<div>
<a href="index.html">
<button style="padding: 25px 25px 25px 25px; border-radius: 40px; font-size: 20px;">
<i class="lni lni-home"></i>
</button>
</a>
</div>

<div class="main-container">
<div class="container" id="container">
<div class="form-container register-container">
<form id="registerForm">
<form id="registerForm">
<h1>Tour Guide</h1>
<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">
<input type="password" placeholder="Password" id="registerPassword" oninput="checkPasswordStrength()">
<button type="button" id="toggleRegisterPassword">
<i id="registerIcon" class="fas fa-eye"></i>
</button>
</button>
</div>
<small id="passwordStrengthMsg" style="color: red;"></small>
<button type="submit">Register</button>
<!-- <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>
<a class="lin" href="www.linkedin.com" class="social"><i class="lni lni-linkedin-original"></i></a>
</div>
</form>
</div>

<div class="form-container login-container">
<form id="loginForm">
<!-- <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> -->
<form id="loginForm">
<h1>Tour Guide</h1>
<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>
</button>
</div>
</button>
</div>
<div class="content">
<div class="checkbox">
<input type="checkbox" name="checkbox" id="checkbox">
Expand All @@ -76,7 +76,6 @@ <h1>Tour Guide</h1>
<a class="lin" href="www.linkedin.com" class="social"><i class="lni lni-linkedin-original"></i></a>
</div>
</form>

</div>

<div class="overlay-container">
Expand All @@ -99,27 +98,31 @@ <h1 class="title">Start your <br> journey now</h1>
</div>
</div>
</div>
<script src="login\script.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
const registerButton = document.getElementById("register");
const container = document.getElementById("container");
registerButton.addEventListener("click", (event) => {
event.preventDefault();
container.classList.add("right-panel-active");
document.getElementById("registerForm").scrollIntoView({ behavior: "smooth" });
});
});
</script>

<script src="login/script.js"></script>
<script>
function checkPasswordStrength() {
const password = document.getElementById("registerPassword").value;
const strengthMsg = document.getElementById("passwordStrengthMsg");
let strength = "Weak";
let color = "red";

if (password.length >= 8 && /[A-Z]/.test(password) && /[a-z]/.test(password) && /[0-9]/.test(password) && /[!@#\$%\^\&*\)\(+=._-]/.test(password)) {
strength = "Strong";
color = "green";
} else if (password.length >= 6 && ((/[A-Z]/.test(password) && /[a-z]/.test(password)) || /[0-9]/.test(password))) {
strength = "Medium";
color = "orange";
}

strengthMsg.textContent = `Password strength: ${strength}`;
strengthMsg.style.color = color;
}

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");
const loginDeclineBanner = document.getElementById("loginDeclineBanner");
const registerDeclineBanner = document.getElementById("registerDeclineBanner");

registerButton.addEventListener("click", (event) => {
event.preventDefault();
Expand All @@ -139,6 +142,15 @@ <h1 class="title">Start your <br> journey now</h1>
validateForm("register");
});

//Form validation for registration name
document.getElementById("registerName").addEventListener("keypress", function (event) {
var char = String.fromCharCode(event.which);
if (!(/[a-zA-Z]/.test(char))) {
event.preventDefault();
}
});


document.getElementById("loginForm").addEventListener("submit", function (event) {
event.preventDefault();
validateForm("login");
Expand All @@ -164,18 +176,17 @@ <h1 class="title">Start your <br> journey now</h1>
return;
}

if(localStorage.getItem("email")===email){
if (localStorage.getItem("email") === email) {
registerDeclineBanner.style.display = "block";
setTimeout(() => {
registerDeclineBanner.style.display = "none";
}, 6000);
}

localStorage.setItem("name", name)
localStorage.setItem("email", email)
localStorage.setItem("password", password)
localStorage.setItem("name", name);
localStorage.setItem("email", email);
localStorage.setItem("password", password);

// Show register success banner
registerSuccessBanner.style.display = "block";
setTimeout(() => {
registerSuccessBanner.style.display = "none";
Expand All @@ -195,58 +206,34 @@ <h1 class="title">Start your <br> journey now</h1>
return;
}
if (spcharRegex.test(password)) {
alert('Password cannot contain <,>,", or /');
alert('Password Cannot Contain <,>,", or /');
return;
}
const email_check = localStorage.getItem("email")
const password_check = localStorage.getItem("password")

if (email_check === email && password_check=== password){
// Show login success banner
const storedEmail = localStorage.getItem("email");
const storedPassword = localStorage.getItem("password");

if (email === storedEmail && password === storedPassword) {
loginSuccessBanner.style.display = "block";
setTimeout(() => {
loginSuccessBanner.style.display = "none";
document.getElementById("loginEmail").value = "";
document.getElementById("loginPassword").value = "";
}, 3000);
document.getElementById("loginEmail").value = "";
document.getElementById("loginPassword").value = "";
}else{
} else {
loginDeclineBanner.style.display = "block";
setTimeout(() => {
loginDeclineBanner.style.display = "none";
}, 3000);
}, 6000);
}
}
}

function validateEmail(email) {
const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
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>
</script>
</body>
</html>
</html>
Loading