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

Adding "remember me" to the signup and signin page connecting it to the local storage database for user authentication. (Issue #1912) #1916

Merged
merged 3 commits into from
Nov 10, 2024
Merged

Adding "remember me" to the signup and signin page connecting it to the local storage database for user authentication. (Issue #1912) #1916

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1b64056
remember me
shriyadindi Nov 5, 2024
d96a271
Merge branch 'main' into remember
shriyadindi Nov 10, 2024
081ff07
Merge branch 'main' into remember
shriyadindi Nov 10, 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
13 changes: 10 additions & 3 deletions auth.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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>
Loading