Add password reset functionality with email confirmation flow

ralyodio · ralyodio · commit 9b10748b3b05 · 2025-04-27T08:24:55.000-07:00
diff --git a/public/i18n/en.json b/public/i18n/en.json
@@ -11,7 +11,8 @@
     "settings": "Settings",
     "logout": "Logout",
     "theme": "Theme",
-    "language": "Language"
+    "language": "Language",
+    "back_to_login": "Back to Login"
   },
   "errors": {
     "page_not_found": "404 - Page Not Found",
@@ -22,7 +23,12 @@
     "invalid_credentials": "Invalid credentials. Please check your email and password.",
     "auth_server_error": "Authentication server error. Please try again later.",
     "registration_failed": "Registration failed: ",
-    "passwords_not_match": "Passwords do not match"
+    "passwords_not_match": "Passwords do not match",
+    "password_reset_failed": "Password reset failed",
+    "reset_email_failed": "Failed to send password reset email",
+    "unknown_error": "An unknown error occurred",
+    "must_be_logged_in": "You must be logged in to reset your password",
+    "invalid_reset_token": "Invalid or expired password reset token"
   },
   "auth": {
     "email": "Email",
@@ -43,6 +49,14 @@
     "to_get_started": "to get started.",
     "forgot_password": "Forgot your password?",
     "reset_password": "Reset Password",
+    "reset_password_description": "Enter your new password below.",
+    "reset_password_email_description": "Enter your email address below and we'll send you a link to reset your password.",
+    "password_requirements": "Password must be at least 8 characters",
+    "password_reset_success": "Password reset successfully! Please log in with your new password.",
+    "reset_email_sent": "Password reset link has been sent to your email. Please check your inbox.",
+    "send_reset_link": "Send Reset Link",
+    "resetting": "Resetting...",
+    "sending": "Sending...",
     "first_time_login": "If this is your first time logging in after the system update, use the default password:",
     "password_change_prompt": "You'll be prompted to change your password after login.",
     "check_auth_status": "Check Auth Status",
diff --git a/public/js/main.js b/public/js/main.js
@@ -134,7 +134,42 @@ function initRouter() {
       }
     },
     '/reset-password': {
-      view: () => loadPage('/views/reset-password.html')
+      view: () => loadPage('/views/reset-password.html'),
+      afterRender: () => {
+        // Apply translations after rendering
+        const storedLang = localStorage.getItem('profullstack-language');
+        if (storedLang && window.app && window.app.localizer) {
+          console.log(`Post-render reset-password: Applying stored language: ${storedLang}`);
+          window.app.localizer.setLanguage(storedLang);
+          
+          // Force translation application
+          if (window.app.translatePage) {
+            window.app.translatePage();
+          }
+        }
+        
+        // Dispatch the spa-transition-end event to ensure translations are applied
+        document.dispatchEvent(new CustomEvent('spa-transition-end'));
+      }
+    },
+    '/reset-password-confirm': {
+      view: () => loadPage('/views/reset-password-confirm.html'),
+      afterRender: () => {
+        // Apply translations after rendering
+        const storedLang = localStorage.getItem('profullstack-language');
+        if (storedLang && window.app && window.app.localizer) {
+          console.log(`Post-render reset-password-confirm: Applying stored language: ${storedLang}`);
+          window.app.localizer.setLanguage(storedLang);
+          
+          // Force translation application
+          if (window.app.translatePage) {
+            window.app.translatePage();
+          }
+        }
+        
+        // Dispatch the spa-transition-end event to ensure translations are applied
+        document.dispatchEvent(new CustomEvent('spa-transition-end'));
+      }
     },
     '/state-demo': {
       view: () => loadPage('/views/state-demo.html')
diff --git a/public/views/reset-password-confirm.html b/public/views/reset-password-confirm.html
@@ -0,0 +1,86 @@
+<div class="login-container">
+  <h2 data-i18n="auth.reset_password">Reset Password</h2>
+  <p data-i18n="auth.reset_password_description">Enter your new password below.</p>
+  
+  <form id="reset-password-form">
+    <div class="form-group">
+      <label for="password" data-i18n="auth.new_password">New Password</label>
+      <input type="password" id="password" name="password" required minlength="8">
+      <div class="form-help" data-i18n="auth.password_requirements">Password must be at least 8 characters</div>
+    </div>
+    
+    <div class="form-group">
+      <label for="confirm-password" data-i18n="auth.confirm_password">Confirm Password</label>
+      <input type="password" id="confirm-password" name="confirm-password" required minlength="8">
+    </div>
+    
+    <button type="submit" class="login-button" data-i18n="auth.reset_password">Reset Password</button>
+  </form>
+  
+  <p class="login-link"><a href="/login" data-i18n="navigation.back_to_login">Back to Login</a></p>
+</div>
+
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    const form = document.getElementById('reset-password-form');
+    if (!form) return;
+    
+    form.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      
+      const password = document.getElementById('password').value;
+      const confirmPassword = document.getElementById('confirm-password').value;
+      
+      if (password !== confirmPassword) {
+        alert(window.i18n.t('errors.passwords_not_match'));
+        return;
+      }
+      
+      // Show loading state
+      const submitButton = form.querySelector('button[type="submit"]');
+      const originalButtonText = submitButton.textContent;
+      submitButton.textContent = window.i18n.t('auth.resetting');
+      submitButton.disabled = true;
+      
+      try {
+        // Get the reset token from the URL
+        const urlParams = new URLSearchParams(window.location.search);
+        const resetToken = urlParams.get('token');
+        
+        if (!resetToken) {
+          throw new Error(window.i18n.t('errors.invalid_reset_token'));
+        }
+        
+        // Send password reset confirmation to the server API
+        const response = await fetch('/api/1/auth/reset-password-confirm', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            token: resetToken,
+            password: password
+          })
+        });
+        
+        if (!response.ok) {
+          const errorData = await response.json();
+          throw new Error(errorData.error || response.statusText);
+        }
+        
+        // Show success message
+        alert(window.i18n.t('auth.password_reset_success'));
+        
+        // Redirect to login page
+        window.router.navigate('/login');
+      } catch (error) {
+        console.error('Password reset error:', error);
+        submitButton.textContent = originalButtonText;
+        submitButton.disabled = false;
+        
+        // Show error message
+        alert(window.i18n.t('errors.password_reset_failed') + ': ' + (error.message || window.i18n.t('errors.unknown_error')));
+      }
+    });
+  });
+</script>
diff --git a/public/views/reset-password.html b/public/views/reset-password.html
@@ -1,86 +1,67 @@
-<div class="auth-container">
-  <h1>Reset Password</h1>
-  <p class="auth-description">Enter your new password below.</p>
+<div class="login-container">
+  <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>
   
-  <form id="reset-password-form" class="auth-form">
+  <form id="reset-password-email-form">
     <div class="form-group">
-      <label for="password">New Password</label>
-      <input type="password" id="password" name="password" required minlength="8" placeholder="Enter your new password">
-      <small>Password must be at least 8 characters</small>
+      <label for="email" data-i18n="auth.email">Email</label>
+      <input type="email" id="email" name="email" required>
     </div>
     
-    <div class="form-group">
-      <label for="confirm-password">Confirm Password</label>
-      <input type="password" id="confirm-password" name="confirm-password" required minlength="8" placeholder="Confirm your new password">
-    </div>
-    
-    <button type="submit" class="btn btn-primary">Reset Password</button>
+    <button type="submit" class="login-button" data-i18n="auth.send_reset_link">Send Reset Link</button>
   </form>
   
-  <div class="auth-links">
-    <a href="/login">Back to Login</a>
-  </div>
+  <p class="login-link"><a href="/login" data-i18n="navigation.back_to_login">Back to Login</a></p>
 </div>
 
 <script>
   document.addEventListener('DOMContentLoaded', () => {
-    const form = document.getElementById('reset-password-form');
+    const form = document.getElementById('reset-password-email-form');
     if (!form) return;
     
     form.addEventListener('submit', async (e) => {
       e.preventDefault();
       
-      const password = document.getElementById('password').value;
-      const confirmPassword = document.getElementById('confirm-password').value;
-      
-      if (password !== confirmPassword) {
-        alert('Passwords do not match');
-        return;
-      }
+      const email = document.getElementById('email').value;
       
       // Show loading state
       const submitButton = form.querySelector('button[type="submit"]');
       const originalButtonText = submitButton.textContent;
-      submitButton.textContent = 'Resetting...';
+      submitButton.textContent = window.i18n.t('auth.sending');
       submitButton.disabled = true;
       
       try {
-        // Import Supabase client for JWT authentication
-        const { createClient } = await import('https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/+esm');
-        const supabaseUrl = 'https://arokhsfbkdnfuklmqajh.supabase.co'; // Should match server config
-        const supabaseAnonKey = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImFyb2toc2Zia2RuZnVrbG1xYWpoIiwicm9sZSI6ImFub24iLCJpYXQiOjE2ODI0NTI4MDAsImV4cCI6MTk5ODAyODgwMH0.KxwHdxWXLLrJtFzLAYI-fwzgz8m5xsHD4XGdNw_xJm8'; // Public anon key
-        
-        console.log('Creating Supabase client for password reset');
-        const supabase = createClient(supabaseUrl, supabaseAnonKey);
+        // Import the API client
+        const { ApiClient } = await import('./api-client.js');
         
-        // Get the JWT token from localStorage
-        const jwtToken = localStorage.getItem('jwt_token');
-        
-        if (!jwtToken) {
-          throw new Error('You must be logged in to reset your password');
-        }
-        
-        // Update the user's password
-        const { error } = await supabase.auth.updateUser({
-          password: password
+        // 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 })
         });
         
-        if (error) {
-          throw error;
+        if (!response.ok) {
+          const errorData = await response.json();
+          throw new Error(errorData.error || response.statusText);
         }
         
         // Show success message
-        alert('Password reset successfully! Please log in with your new password.');
+        alert(window.i18n.t('auth.reset_email_sent'));
         
-        // Redirect to login page
-        window.router.navigate('/login');
+        // Clear the form
+        form.reset();
+        submitButton.textContent = originalButtonText;
+        submitButton.disabled = false;
       } catch (error) {
-        console.error('Password reset error:', error);
+        console.error('Password reset email error:', error);
         submitButton.textContent = originalButtonText;
         submitButton.disabled = false;
         
         // Show error message
-        alert('Password reset failed: ' + (error.message || 'An unknown error occurred'));
+        alert(window.i18n.t('errors.reset_email_failed') + ': ' + (error.message || window.i18n.t('errors.unknown_error')));
       }
     });
   });
diff --git a/src/routes/auth.js b/src/routes/auth.js
@@ -129,6 +129,80 @@ export async function refreshTokenHandler(c) {
   }
 }
 
+/**
+ * Route handler for requesting a password reset
+ * @param {Object} c - Hono context
+ * @returns {Response} - JSON response with status
+ */
+export async function resetPasswordHandler(c) {
+  try {
+    // Get email from request body
+    const { email } = await c.req.json();
+    
+    if (!email) {
+      return c.json({ error: 'Email is required' }, 400);
+    }
+    
+    console.log(`Requesting password reset for ${email}`);
+    
+    // Request password reset from Supabase
+    const { error } = await supabase.auth.resetPasswordForEmail(email, {
+      redirectTo: `${c.req.header('origin') || 'http://localhost:3000'}/reset-password-confirm`
+    });
+    
+    if (error) {
+      console.error('Error requesting password reset:', error);
+      return c.json({ error: 'Failed to request password reset: ' + error.message }, 500);
+    }
+    
+    return c.json({
+      success: true,
+      message: 'Password reset email sent successfully'
+    });
+  } catch (error) {
+    console.error('Error in reset password handler:', error);
+    return errorUtils.handleError(error, c);
+  }
+}
+
+/**
+ * Route handler for confirming a password reset
+ * @param {Object} c - Hono context
+ * @returns {Response} - JSON response with status
+ */
+export async function resetPasswordConfirmHandler(c) {
+  try {
+    // Get token and new password from request body
+    const { token, password } = await c.req.json();
+    
+    if (!token || !password) {
+      return c.json({ error: 'Token and password are required' }, 400);
+    }
+    
+    console.log('Confirming password reset');
+    
+    // Update user's password using the token
+    const { error } = await supabase.auth.verifyOtp({
+      token_hash: token,
+      type: 'recovery',
+      new_password: password
+    });
+    
+    if (error) {
+      console.error('Error confirming password reset:', error);
+      return c.json({ error: 'Failed to reset password: ' + error.message }, 500);
+    }
+    
+    return c.json({
+      success: true,
+      message: 'Password reset successfully'
+    });
+  } catch (error) {
+    console.error('Error in reset password confirm handler:', error);
+    return errorUtils.handleError(error, c);
+  }
+}
+
 /**
  * Route configuration for auth endpoints
  */
@@ -143,3 +217,15 @@ export const registerRoute = {
   path: '/api/1/auth/register',
   handler: registerHandler
 };
+
+export const resetPasswordRoute = {
+  method: 'POST',
+  path: '/api/1/auth/reset-password',
+  handler: resetPasswordHandler
+};
+
+export const resetPasswordConfirmRoute = {
+  method: 'POST',
+  path: '/api/1/auth/reset-password-confirm',
+  handler: resetPasswordConfirmHandler
+};
diff --git a/src/routes/index.js b/src/routes/index.js
