Skip to content

Commit

Permalink
Merge pull request #1916 from shriyadindi/remember
Browse files Browse the repository at this point in the history 
Adding "remember me" to the signup and signin page connecting it to the local storage database for user authentication. (Issue #1912)
  • Loading branch information
@PriyaGhosal
PriyaGhosal authored Nov 10, 2024
2 parents c57cd8c + 081ff07 commit 7bb8970
Show file tree
Hide file tree
Showing 3 changed files with 50 additions and 122 deletions.
13 changes: 10 additions & 3 deletions auth.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,11 @@ <h2 class="title">Sign in</h2>
<i class="fas fa-lock"></i>
<input type="password" placeholder="Password" id="sign-in-password" />
<i class="fas fa-eye password-toggle" onclick="togglePassword('sign-in-password', this)"></i>
</div>
</div>
<div class="form-check d-flex">
<input type="checkbox" class="form-check-input" id="login-remember" />
<label class="form-check-label">Remember me</label>
</div>
<div class="login">
<input type="submit" value="Login" class="btn solid" />
</div>
Expand Down Expand Up @@ -81,12 +85,15 @@ <h2 class="title">Sign up</h2>
</div>

<!-- Password Strength Bars -->
<div class="password-strength">
<!-- <div class="password-strength">
<div id="strength-weak"></div>
<div id="strength-medium"></div>
<div id="strength-strong"></div>
</div> -->
<div class="form-check d-flex">
<input type="checkbox" class="form-check-input" id="login-remember" />
<label class="form-check-label">Remember me</label>
</div>

<input type="submit" class="btn" value="Sign up" />
</form>
<p id="error-message" style="color: red; display: none;"></p>
Expand Down
14 changes: 14 additions & 0 deletions auth.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,20 @@ document.querySelector(".sign-up-form").addEventListener('submit', function(even
console.error('Signup error:', error);
}
});
document.querySelector('#login-btn').addEventListener('click', (event) => {
event.preventDefault();

const emailInput = document.getElementById('login-email');
const rememberMeCheckbox = document.getElementById('login-remember');

if (rememberMeCheckbox.checked) {
localStorage.setItem('rememberedEmail', emailInput.value);
} else {
localStorage.removeItem('rememberedEmail');
}

// Continue with your existing login logic...
});

// Toggle password visibility
function togglePassword(fieldId, icon) {
Expand Down
145 changes: 26 additions & 119 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -322,55 +322,16 @@

/* circle styles */
.circle {
height: 24px;
width: 24px;
border-radius: 24px;
background-color: rgb(255, 0, 0);
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 99999999;
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
(function () {
const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
document.body.classList.add(savedTheme === 'dark' ? 'dark-mode' : 'light-mode');
} else if (userPrefersDark) {
document.body.classList.add('dark-mode');
} else {
document.body.classList.add('light-mode');
}
})();
</script>
</head>
<body class="light-mode">
<!-- Preloader -->
<div id="preloader">
<div class="loader-wrapper">
<img src="img/logo.png" alt="Travel Website Logo" id="logo">
<div class="loader-globe"></div>
</div>
<div id="loading-text">Ready to Explore the World...</div>
</div>
<style>
/* Preloader Container */
#preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: rgba(0, 0, 0, 0.9);
z-index: 1000;
}
height: 24px;
width: 24px;
border-radius: 24px;
background-color: rgb(255, 0, 0);
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 99999999;
}

/* Wrapper for the logo and loader */
.loader-wrapper {
Expand Down Expand Up @@ -3852,21 +3813,16 @@ <h2>Exclusive Deals and Offers!</h2>

document.getElementById("progressBar").style.width = scrollPercent + "%";
}

</script>
<style>
.popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(24, 23, 24, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
.custom-alert p {
/* white color text on black background will look nice */
color:white;
margin: 0;
line-height: 1.5;
}
</style>
<script src="script.js">
document.getElementById('newsletter-form').addEventListener('submit', function (e) {
e.preventDefault(); // Prevent the default form submission

.popup-content {
background-color: white;
Expand Down Expand Up @@ -3926,55 +3882,8 @@ <h2>Exclusive Deals and Offers!</h2>
<script>window.gtranslateSettings = { "default_language": "en", "detect_browser_language": true, "wrapper_selector": ".gtranslate_wrapper" }</script>
<script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>


<script>
main
// coordinates for the cursor :
const coords = { x: 0, y: 0 };
const circles = document.querySelectorAll(".circle");

const colors = [
"#fc5720", "#fc6532", "#fc6532", "#fd8b65", "#d5585c", "#fac3b1", "#f4d5cb", "#fefefe", "#fefefe", "#cdf2c5", "#b2eca5", "#95e283", "#7dda68", "#4adc2d", "#69d451", "#54c939", "#34b916", "#28b309", "#1e9c02",
];

circles.forEach(function (circle, index) {
circle.x = 0;
circle.y = 0;
circle.style.backgroundColor = colors[index % colors.length];
});

// update the coordinates when the mouse moves:
window.addEventListener("mousemove", function (e) {
coords.x = e.clientX;
coords.y = e.clientY;
});

// animation function to move the circles:
function animateCircles() {
let x = coords.x;
let y = coords.y;

circles.forEach(function (circle, index) {


circle.style.left = x - 12 + "px";
circle.style.top = y - 12 + "px";
circle.style.scale = (circles.length - index) / circles.length;

circle.x = x;
circle.y = y;

const nextCircle = circles[index + 1] || circles[0];
x += (nextCircle.x - x) * 0.3;
y += (nextCircle.y - y) * 0.3;
});

requestAnimationFrame(animateCircles);
}

animateCircles();

document.addEventListener("DOMContentLoaded", function () {
<script>
// coordinates for the cursor :
const coords = { x: 0, y: 0 };
const circles = document.querySelectorAll(".circle");

Expand Down Expand Up @@ -4010,10 +3919,9 @@ <h2>Exclusive Deals and Offers!</h2>

animateCircles();
});

main
</script>

animateCircles();
});
</script>
<body>
<div class="container">
<!-- Your existing content -->
Expand Down Expand Up @@ -4206,6 +4114,5 @@ <h2>Exclusive Deals and Offers!</h2>
<script src="visi.js"></script>
<script src="script.js"></script>

</body>

</body>
</html>

0 comments on commit 7bb8970

Please sign in to comment.