Skip to content

Update login.html #102

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

Open
singh71 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update login.html #102

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
92 changes: 81 additions & 11 deletions login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
body {
font-family: Arial, sans-serif;
Expand All @@ -26,16 +27,31 @@
z-index: 10;
}

input {
display: block;
.input-container {
position: relative;
margin: 10px auto;
padding: 10px;
width: 80%;
max-width: 300px;
}

input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
padding-right: 40px; /* Space for the icon */
}

.toggle-password {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: #888;
}

button {
margin: 10px;
padding: 10px 20px;
Expand Down Expand Up @@ -156,25 +172,41 @@
.signup-link a:hover {
text-decoration: underline;
}

#resendVerificationBtn {
display: none;
margin-top: 10px;
background-color: #ffc107;
color: #212529;
}
#resendVerificationBtn:hover {
background-color: #e0a800;
}
</style>
</head>
<body>
<div class="clothes-animation" id="clothesAnimation"></div>

<div class="container">
<h2>Login to Your Account</h2>
<input type="email" id="email" placeholder="Email"><br>
<input type="password" id="password" placeholder="Password"><br>
<div class="input-container">
<input type="email" id="email" placeholder="Email">
</div>
<div class="input-container">
<input type="password" id="password" placeholder="Password">
<span class="toggle-password" onclick="togglePasswordVisibility()"><i class="fas fa-eye-slash" id="toggleIcon"></i></span>
</div>
<button onclick="loginUser()">Login</button>
<button onclick="resetPassword()">Forgot Password</button>
<p id="message"></p>
<button id="resendVerificationBtn" onclick="resendVerification()">Resend Verification Email</button>
<p class="signup-link">Don't have an account? <a href="register.html">Sign up here</a></p>
</div>

<script type="module">
// Import Firebase SDK
import { initializeApp } from "https://www.gstatic.com/firebasejs/10.4.0/firebase-app.js";
import { getAuth, signInWithEmailAndPassword, sendPasswordResetEmail } from "https://www.gstatic.com/firebasejs/10.4.0/firebase-auth.js";
import { getAuth, signInWithEmailAndPassword, sendPasswordResetEmail, sendEmailVerification } from "https://www.gstatic.com/firebasejs/10.4.0/firebase-auth.js";

// Firebase configuration
const firebaseConfig = {
Expand All @@ -197,7 +229,7 @@ <h2>Login to Your Account</h2>
const justRegistered = urlParams.get('registered');

if (justRegistered === 'true') {
document.getElementById("message").innerText = "Registration successful! Please log in.";
document.getElementById("message").innerText = "Registration successful! Please check your email to verify your account and log in.";
document.getElementById("message").className = "success-message";
}
};
Expand All @@ -210,6 +242,7 @@ <h2>Login to Your Account</h2>
if (!email || !password) {
document.getElementById("message").innerText = "Please enter both email and password";
document.getElementById("message").className = "";
document.getElementById("resendVerificationBtn").style.display = "none";
return;
}

Expand All @@ -219,20 +252,21 @@ <h2>Login to Your Account</h2>
if (user.emailVerified) {
document.getElementById("message").innerText = "Logged in successfully!";
document.getElementById("message").className = "success-message";
console.log("User logged in:", user);
document.getElementById("resendVerificationBtn").style.display = "none";

// Redirect to dashboard or home page after successful login
setTimeout(() => {
window.location.href = "Index.html"; // Create this page separately
window.location.href = "Index.html";
}, 1500);
} else {
document.getElementById("message").innerText = "Please verify your email before logging in.";
document.getElementById("message").innerText = "Please verify your email before logging in. If you haven't received it, you can resend it below.";
document.getElementById("message").className = "";
document.getElementById("resendVerificationBtn").style.display = "block";
}
})
.catch(error => {
document.getElementById("message").innerText = error.message;
document.getElementById("message").className = "";
document.getElementById("resendVerificationBtn").style.display = "none";
});
};

Expand All @@ -243,6 +277,7 @@ <h2>Login to Your Account</h2>
if (!email) {
document.getElementById("message").innerText = "Please enter your email";
document.getElementById("message").className = "";
document.getElementById("resendVerificationBtn").style.display = "none";
return;
}

Expand All @@ -256,9 +291,44 @@ <h2>Login to Your Account</h2>
document.getElementById("message").className = "";
});
};

// Resend Verification Email function
window.resendVerification = () => {
const user = auth.currentUser;
if (user) {
sendEmailVerification(user)
.then(() => {
document.getElementById("message").innerText = "Verification email resent! Please check your inbox.";
document.getElementById("message").className = "success-message";
document.getElementById("resendVerificationBtn").style.display = "none";
})
.catch(error => {
document.getElementById("message").innerText = error.message;
document.getElementById("message").className = "";
});
} else {
document.getElementById("message").innerText = "No user is currently logged in.";
document.getElementById("message").className = "";
}
};
</script>

<script>
// Toggle password visibility function
function togglePasswordVisibility() {
const passwordInput = document.getElementById("password");
const toggleIcon = document.getElementById("toggleIcon");
if (passwordInput.type === "password") {
passwordInput.type = "text";
toggleIcon.classList.remove("fa-eye-slash");
toggleIcon.classList.add("fa-eye");
} else {
passwordInput.type = "password";
toggleIcon.classList.remove("fa-eye");
toggleIcon.classList.add("fa-eye-slash");
}
}

// Create clothing animation
function createClothingAnimation() {
const animationContainer = document.getElementById('clothesAnimation');
Expand Down