Merge pull request #202 from vakrahul/my_contribution

Reset password funtionality

Author: omroy07

firebase.js

@@ -1,5 +1,5 @@
 import { initializeApp } from "https://www.gstatic.com/firebasejs/10.11.0/firebase-app.js";
-import { getAuth, GoogleAuthProvider, signInWithPopup} from "https://www.gstatic.com/firebasejs/10.11.0/firebase-auth.js";
+import { getAuth, GoogleAuthProvider, signInWithPopup, sendPasswordResetEmail } from "https://www.gstatic.com/firebasejs/10.11.0/firebase-auth.js";
 
 // Secure Firebase configuration - fetched from server
 let firebaseConfig = null;
@@ -34,7 +34,7 @@ async function initializeFirebase() {
 
 const provider = new GoogleAuthProvider();
 
-// Initialize Firebase and set up event listeners
+// Handle Google Login and Password Reset
 async function setupFirebaseAuth() {
   const initialized = await initializeFirebase();
   if (!initialized) {
@@ -44,7 +44,7 @@ async function setupFirebaseAuth() {
 
   const googleLogin = document.getElementById("google-login-btn");
   if (googleLogin) {
-        googleLogin.addEventListener("click", async function () {
+    googleLogin.addEventListener("click", async function () {
       try {
         const result = await signInWithPopup(auth, provider);
         const credential = GoogleAuthProvider.credentialFromResult(result);
@@ -77,8 +77,59 @@ async function setupFirebaseAuth() {
       }
     });
   }
+
+  // Handle forgot password form submission
+  const forgotPasswordForm = document.getElementById("forgot-password-form");
+  if (forgotPasswordForm) {
+    forgotPasswordForm.addEventListener("submit", async (event) => {
+      event.preventDefault();
+      const emailInput = document.getElementById('email');
+      const resetBtn = document.getElementById('reset-btn');
+      const resetText = document.getElementById('reset-text');
+
+      const email = emailInput.value.trim();
+      if (!email) {
+        alert("Please enter a valid email address.");
+        return;
+      }
+
+      // Add loading state
+      resetBtn.classList.add('loading');
+      resetText.textContent = 'Sending...';
+      resetBtn.disabled = true;
+
+      try {
+        await sendPasswordResetEmail(auth, email);
+        alert("A password reset link has been sent to your email. Please check your inbox.");
+        // Redirect to login page after a short delay
+        setTimeout(() => {
+          window.location.href = 'login.html';
+        }, 3000);
+      } catch (error) {
+        const errorCode = error.code;
+        const errorMessage = error.message;
+        console.error("Password reset error:", errorCode, errorMessage);
+        
+        // Show user-friendly error message
+        switch (errorCode) {
+          case 'auth/invalid-email':
+            alert("The email address is not valid.");
+            break;
+          case 'auth/user-not-found':
+            alert("No account found with this email address.");
+            break;
+          default:
+            alert("Failed to send password reset email. Please try again.");
+            break;
+        }
+
+        resetBtn.classList.remove('loading');
+        resetText.textContent = 'Reset Password';
+        resetBtn.disabled = false;
+      }
+    });
+  }
 }
 
 // Initialize Firebase authentication when the script loads
-setupFirebaseAuth();
-});
+setupFirebaseAuth();

forgot-password.html

@@ -27,7 +27,7 @@ <h2>Reset Password</h2>
       <p class="form-subtitle">Enter your email to reset your password</p>
     </div>
 
-    <form onsubmit="handleForgotPassword(event)">
+    <form id="forgot-password-form">
       <div class="input-group">
         <i class="fas fa-envelope"></i>
         <input type="email" id="email" placeholder="Enter your email" required>
@@ -40,49 +40,7 @@ <h2>Reset Password</h2>
       <p>Remember your password? <a href="login.html">Sign In</a></p>
     </form>
   </div>
-
-  <script src="auth.js"></script>
   <script src="theme.js"></script>
-  <script>
-    function handleForgotPassword(event) {
-      event.preventDefault();
-      
-      const resetBtn = document.getElementById('reset-btn');
-      const resetText = document.getElementById('reset-text');
-      const emailInput = document.getElementById('email');
-      
-      // Add loading state
-      resetBtn.classList.add('loading');
-      resetText.textContent = 'Processing...';
-      resetBtn.disabled = true;
-      
-      // Reset previous states
-      emailInput.classList.remove('error', 'success');
-      
-      const email = emailInput.value.trim();
-      
-      setTimeout(() => {
-        const result = window.authManager.resetPassword(email);
-        
-        if (result.success) {
-          emailInput.classList.add('success');
-          resetText.textContent = 'Password Reset!';
-          
-          // Show temporary password (in production, this would be sent via email)
-          showAuthMessage(`Password reset successful! Your temporary password is: ${result.tempPassword}`, 'success');
-          
-          setTimeout(() => {
-            window.location.href = 'login.html';
-          }, 5000);
-        } else {
-          showAuthMessage(result.message, 'error');
-          emailInput.classList.add('error');
-          resetBtn.classList.remove('loading');
-          resetText.textContent = 'Reset Password';
-          resetBtn.disabled = false;
-        }
-      }, 1500);
-    }
-  </script>
+  <script type="module" src="firebase.js"></script>
 </body>
 </html>