Skip to content

Added "remember me" to the signup and signin page connecting it to the local storage database for user authentication. #280

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

Merged
merged 2 commits into from
Nov 4, 2024
Merged

Added "remember me" to the signup and signin page connecting it to the local storage database for user authentication. #280

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3d64712
remember me
shriyadindi Nov 4, 2024
da199a6
Implemented the changes
shriyadindi Nov 4, 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
76 changes: 49 additions & 27 deletions website/login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<style>
body{
body {
background-color: black;
overflow-x: hidden;
}
.image1{
.image1 {
width: 43%;
height: 90.9%;
object-fit: cover;
Expand All @@ -22,7 +22,7 @@
top: -10%;
rotate: 36deg;
}
.image2{
.image2 {
width: 37%;
height: 47%;
position: absolute;
Expand All @@ -32,48 +32,46 @@
right: 84%;
rotate: -46deg;
}
.login-container{
.login-container {
width: 40vw;
padding-bottom: 10px;
height: min-content;
position: relative;
background-color: rgba(58, 58, 58, 0.288);
box-shadow: 0 0 5px black;
top:20px;
top: 20px;
backdrop-filter: blur(10px);
border-radius: 10px;
}
.form-check-input:checked {
background-color: #004ab7; /* Change to your desired color */
border-color: #004ab7; /* Change to your desired color */
}

@media screen and (max-width: 660px) {
.login-container{
.login-container {
width: 90vw;
margin-bottom: 100px;
}
.image1{
height:100px;
.image1 {
height: 100px;
display: none;
}
.image2{
.image2 {
height: 100px;
overflow-x: hidden;
}
#forget{
#forget {
width: 90%;
}
}

</style>
</head>

<body >
<img class="image1" src="./web_images/2dglow.png" alt="login_bg">
<img class="image2" src="./web_images/2dglowhalfbg-removebg-preview.png" alt="login_bg">
<img style="
top:10px;
margin-left: 10px;
position: relative;
width: 80px;
height: 80px;" src="./web_images/3d_glow.webp" alt="Dataverse Logo">
<body>
<img class="image1" src="./web_images/2dglow.png" alt="login_bg">
<img class="image2" src="./web_images/2dglowhalfbg-removebg-preview.png" alt="login_bg">
<img style="top:10px; margin-left: 10px; position: relative; width: 80px; height: 80px;" src="./web_images/3d_glow.webp" alt="Dataverse Logo">
<center>
<div class="login-container" style="padding-top: 20px; margin-top: 0px;">
<h1 style="text-align: center; color: rgb(255, 255, 255); font-weight: 400; font-size: 35px">HEY! WELCOME BACK</h1>
Expand All @@ -93,29 +91,53 @@ <h6 style="text-align: center; color: rgb(197 197 197); font-weight: 500; font-s
• Must not contain spaces, special characters, or emojis.
</div>
</div>
<!-- Remember Me Checkbox -->
<div style="text-align: left; margin-left: 35%;">
<input type="checkbox" id="rememberMe" style="margin-top: -5px; width: 15px; height: 15px;">
<label for="rememberMe" style="color: white;">Remember Me</label>
</div>
<button type="button" class="btn btn-primary" id="loginButton" style="width: 50%; font-weight: 400;">LOGIN</button>
<div style="text-align: center; margin-top: 10px;">
<p>Don't have an account ? <a href="signup.html" style="text-decoration: underline; color: #004ab7;"> Sign Up</a></p>
<p>Don't have an account? <a href="signup.html" style="text-decoration: underline; color: #004ab7;"> Sign Up</a></p>
</div>
</div>
<!--login form end-->
</center>
<a href="../index.html"><button class="goBack">Go To Home</button></a>
<script>
// On page load, check local storage for email
window.onload = function() {
const savedEmail = localStorage.getItem('email');
if (savedEmail) {
document.getElementById('emailInput').value = savedEmail;
document.getElementById('rememberMe').checked = true;
}
};

document.getElementById('loginButton').addEventListener('click', function() {
const emailInput = document.getElementById('emailInput');
const passwordInput = document.getElementById('passwordInput');
const emailValue = emailInput.value.trim();
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
if (!emailRegex.test(emailValue)) {
alert('Invalid email address');
return;
}
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
if (!emailRegex.test(emailValue)) {
alert('Invalid email address');
return;
}

// Check if "Remember Me" is checked
const rememberMe = document.getElementById('rememberMe').checked;
if (rememberMe) {
localStorage.setItem('email', emailValue);
} else {
localStorage.removeItem('email');
}

// Clear the input fields
emailInput.value = '';
passwordInput.value = '';
// Redirect to index.html
window.location.href = '/index.html';
alert('Login successful!');
window.location.href = '/index.html';
});
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
Expand Down
99 changes: 63 additions & 36 deletions website/signup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up</title>
<style>
body{
body {
background-color: black;
}
.image1{
.image1 {
width: 43%;
height: 90.9%;
object-fit: cover;
Expand All @@ -21,7 +21,7 @@
top: -10%;
rotate: 36deg;
}
.image2{
.image2 {
width: 37%;
height: 47%;
position: absolute;
Expand All @@ -31,7 +31,7 @@
right: 84%;
rotate: -46deg;
}
.login-container{
.login-container {
backdrop-filter: blur(10px);
margin-bottom: 100px;
width: 40vw;
Expand All @@ -41,99 +41,126 @@
top: 20px;
border-radius: 10px;
}


@media screen and (max-width: 660px) {
.login-container{
.login-container {
width: 90vw;
}
.image1{
height:100px;
.image1 {
height: 100px;
display: none;
}
.image2{
.image2 {
height: 100px;
overflow-x: hidden;
}
input{
input {
width: 90%;
}
}
</style>
</head>

<body >
<img class="image1" src="./web_images/2dglow.png" alt="sign_bg">
<img class="image2" src="./web_images/2dglowhalfbg-removebg-preview.png" alt="sign_bg">
<img style="
top: 10px;
margin-left: 10px;
position: relative;
width: 80px;
height: 80px;" src="./web_images/3d_glow.webp" alt="Dataverse Logo">
<body>
<img class="image1" src="./web_images/2dglow.png" alt="sign_bg">
<img class="image2" src="./web_images/2dglowhalfbg-removebg-preview.png" alt="sign_bg">
<img style="top: 10px; margin-left: 10px; position: relative; width: 80px; height: 80px;" src="./web_images/3d_glow.webp" alt="Dataverse Logo">
<center>
<div class="login-container" style="padding-top: 20px;">
<div class="login-container" style="padding-top: 20px; margin-left: 700px;">
<h1 style="text-align: center; color: rgb(255, 255, 255); font-weight: 400; font: sans-serif;">SIGN UP</h1>
<div id="errorContainer" class="error-message"></div> <!-- Error message container -->
<div id="errorContainer" class="error-message"></div>
<div style="text-align: left; margin-left: 10%;" class="mb-3">
<label for="emailInput" class="form-label" style="color: white;">Email address</label>
<input type="email" class="form-control" id="emailInput" placeholder="Enter your Email Address" style="width: 90%; margin-top: -5px">
</div>
<div style="text-align: left; margin-left: 10%;" class="mb-3">
<label for="passwordInput" class="form-label" style="color: white;">Password</label>
<input type="password" placeholder="Enter your Password" id="passwordInput" class="form-control" aria-describedby="passwordHelpBlock" style="width: 90%; margin-top: -5px"></div>
<div style="text-align: left; margin-left: 10%;" class="mb-3">
<label for="confirmPasswordInput" class="form-label" style="color: white;">Confirm Password</label>
<input type="password" placeholder="Confirm your Password" id="confirmPasswordInput" class="form-control" aria-describedby="passwordHelpBlock" style="width: 90%; margin-top: -5px">
</div>
<div id="passwordHelpBlock" class="form-text" style="width: 90%; text-align: left; margin-top: -10px; margin-left: 10px; color: white;">
<span style="color: rgb(255, 255, 255); font-size: 14px; position: relative;">Your password must be :</span><br>
• 8-20 characters long.<br>
• Should contain letters and numbers<br>
• Must not contain spaces, special characters, or emojis.
</div>
<input type="password" placeholder="Enter your Password" id="passwordInput" class="form-control" aria-describedby="passwordHelpBlock" style="width: 90%; margin-top: -5px">
</div>
<div style="text-align: left; margin-left: 10%;" class="mb-3">
<label for="confirmPasswordInput" class="form-label" style="color: white;">Confirm Password</label>
<input type="password" placeholder="Confirm your Password" id="confirmPasswordInput" class="form-control" aria-describedby="passwordHelpBlock" style="width: 90%; margin-top: -5px">
</div>
<div id="passwordHelpBlock" class="form-text" style="width: 90%; text-align: left; margin-top: -10px; margin-left: 10px; color: white;">
<span style="color: rgb(255, 255, 255); font-size: 14px; position: relative;">Your password must be :</span><br>
• 8-20 characters long.<br>
• Should contain letters and numbers<br>
• Must not contain spaces, special characters, or emojis.
</div>

<!-- Remember Me Checkbox -->
<div class="form-check" style="text-align: left; margin-left: 35%; margin-bottom: -5px; margin-top: 5px;">
<input type="checkbox" id="rememberMe" class="form-check-input" style="width: 5px;">
<label for="rememberMe" class="form-check-label" style="color: white; font-weight: 500;">Remember Me</label>
</div>

<button type="button" class="btn btn-primary" id="signupButton" style="width: 60%; margin-top: 15px; font-weight: 400;">SIGN UP</button>
<div style="text-align: center; margin-top: 10px;">
<p>Already have an account? <a href="login.html" style="text-decoration: underline; color: #004ab7;">Login</a></p>
</div>
</div>
<a href="../index.html"><button class="goBack">Go To Home</button></a>
<script>
document.getElementById('signupButton').addEventListener('click', function() {
// Function to handle signup
document.getElementById('signupButton').addEventListener('click', function () {
const emailInput = document.getElementById('emailInput');
const passwordInput = document.getElementById('passwordInput');
const confirmPasswordInput = document.getElementById('confirmPasswordInput');
const errorContainer = document.getElementById('errorContainer');
const rememberMe = document.getElementById('rememberMe');

const emailValue = emailInput.value.trim();
const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

// Trusted email domains
const trustedDomains = ["gmail.com", "outlook.com", "yahoo.com", "hotmail.com" , "protonmail.com" , "icloud.com" , "tutanota.com"];
const trustedDomains = ["gmail.com", "outlook.com", "yahoo.com", "hotmail.com", "protonmail.com", "icloud.com", "tutanota.com"];
const emailDomain = emailValue.split('@')[1];

// Clear previous error messages
errorContainer.style.display = 'none';
errorContainer.innerHTML = '';

// Validate email format and trusted domain
if (!emailRegex.test(emailValue) || !trustedDomains.includes(emailDomain)) {
errorContainer.innerHTML = 'Please use a valid email address from trusted providers (e.g., Gmail, Outlook, Yahoo) etc.';
errorContainer.style.display = 'block'; // Show error message
return;
}

// Check if passwords match
if (passwordInput.value !== confirmPasswordInput.value) {
errorContainer.innerHTML = 'Both passwords do not match.';
errorContainer.style.display = 'block'; // Show error message
return;
}

// Save email to local storage if "Remember Me" is checked
if (rememberMe.checked) {
localStorage.setItem('rememberedEmail', emailValue);
} else {
localStorage.removeItem('rememberedEmail');
}

// Clear input fields
emailInput.value = '';
passwordInput.value = '';
confirmPasswordInput.value = '';

// Redirect to login page
alert('Your account has been created successfully!');
window.location.href = 'login.html';
});

// Load remembered email on page load
window.onload = function () {
const rememberedEmail = localStorage.getItem('rememberedEmail');
if (rememberedEmail) {
document.getElementById('emailInput').value = rememberedEmail;
document.getElementById('rememberMe').checked = true;
}
};
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="website/script.js"></script>
</body>
</html>
</body>
</html>