Refactor password reset form and remove console logs

Author: ralyodio

public/views/reset-password.html

@@ -2,10 +2,10 @@
   <h2 data-i18n="auth.forgot_password">Forgot Password</h2>
   <p data-i18n="auth.reset_password_email_description">Enter your email address below and we'll send you a link to reset your password.</p>
 
-  <!-- Add status message container -->
+  <!-- Status message container -->
   <div id="status-message" class="status-message" style="display: none;"></div>
 
-  <form id="reset-password-email-form" method="post" onsubmit="return false;">
+  <form id="reset-password-form">
     <div class="form-group">
       <label for="email" data-i18n="auth.email">Email</label>
       <input type="email" id="email" name="email" required>
@@ -39,8 +39,6 @@ <h2 data-i18n="auth.forgot_password">Forgot Password</h2>
 </style>
 
 <script>
-  console.log('Reset password script loaded');
-  
   // Function to show status message
   function showStatusMessage(message, type) {
     const statusElement = document.getElementById('status-message');
@@ -54,22 +52,19 @@ <h2 data-i18n="auth.forgot_password">Forgot Password</h2>
     statusElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
   }
 
-  // Initialize form immediately
-  function initResetPasswordForm() {
-    console.log('Initializing reset password form');
-    const form = document.getElementById('reset-password-email-form');
-    if (!form) {
-      console.error('Reset password form not found');
-      return;
-    }
+  // Initialize form
+  document.addEventListener('DOMContentLoaded', () => {
+    const form = document.getElementById('reset-password-form');
+    if (!form) return;
 
-    console.log('Adding submit event listener to form');
     form.addEventListener('submit', async (e) => {
-      console.log('Form submit event triggered');
       e.preventDefault();
 
       const email = document.getElementById('email').value;
-      console.log('Email submitted:', email);
+      if (!email) {
+        showStatusMessage('Please enter your email address', 'error');
+        return;
+      }
 
       // Show loading state
       const submitButton = form.querySelector('button[type="submit"]');
@@ -78,7 +73,6 @@ <h2 data-i18n="auth.forgot_password">Forgot Password</h2>
       submitButton.disabled = true;
 
       try {
-        console.log('Sending password reset request to server');
         // Send password reset request to the server API
         const response = await fetch('/api/1/auth/reset-password', {
           method: 'POST',
@@ -88,9 +82,7 @@ <h2 data-i18n="auth.forgot_password">Forgot Password</h2>
           body: JSON.stringify({ email })
         });
 
-        console.log('Server response status:', response.status);
         const responseData = await response.json();
-        console.log('Server response data:', responseData);
 
         if (!response.ok) {
           throw new Error(responseData.error || response.statusText);
@@ -122,20 +114,74 @@ <h2 data-i18n="auth.forgot_password">Forgot Password</h2>
         submitButton.disabled = false;
       }
     });
-  }
-  
-  // Initialize immediately
-  initResetPasswordForm();
-  
-  // Also initialize on DOMContentLoaded for safety
-  document.addEventListener('DOMContentLoaded', () => {
-    console.log('DOMContentLoaded event fired');
-    initResetPasswordForm();
   });
 
   // Also initialize on spa-transition-end event for SPA router
   document.addEventListener('spa-transition-end', () => {
-    console.log('spa-transition-end event fired');
-    initResetPasswordForm();
+    const form = document.getElementById('reset-password-form');
+    if (!form) return;
+    
+    // Remove existing event listeners by cloning the form
+    const newForm = form.cloneNode(true);
+    form.parentNode.replaceChild(newForm, form);
+    
+    // Add event listener to the new form
+    newForm.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      
+      const email = document.getElementById('email').value;
+      if (!email) {
+        showStatusMessage('Please enter your email address', 'error');
+        return;
+      }
+      
+      // Show loading state
+      const submitButton = newForm.querySelector('button[type="submit"]');
+      const originalButtonText = submitButton.textContent;
+      submitButton.textContent = window.i18n ? window.i18n.t('auth.sending') : 'Sending...';
+      submitButton.disabled = true;
+      
+      try {
+        // Send password reset request to the server API
+        const response = await fetch('/api/1/auth/reset-password', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({ email })
+        });
+        
+        const responseData = await response.json();
+        
+        if (!response.ok) {
+          throw new Error(responseData.error || response.statusText);
+        }
+        
+        // Show success message
+        const successMessage = window.i18n ? window.i18n.t('auth.reset_email_sent') : 'Password reset link has been sent to your email. Please check your inbox.';
+        showStatusMessage(successMessage, 'success');
+        
+        // Clear the form
+        newForm.reset();
+      } catch (error) {
+        console.error('Password reset email error:', error);
+        
+        // Show error message
+        let errorMessage = window.i18n ? window.i18n.t('errors.reset_email_failed') : 'Failed to send password reset email';
+        
+        // Check if the error is about email not found
+        if (error.message && (error.message.includes('not found') || error.message.includes('not exist'))) {
+          errorMessage = window.i18n ? window.i18n.t('errors.email_not_found') : 'Email address not found. Please check your email and try again.';
+        } else {
+          errorMessage += ': ' + (error.message || (window.i18n ? window.i18n.t('errors.unknown_error') : 'An unknown error occurred'));
+        }
+        
+        showStatusMessage(errorMessage, 'error');
+      } finally {
+        // Reset button state
+        submitButton.textContent = originalButtonText;
+        submitButton.disabled = false;
+      }
+    });
   });
 </script>