add forgot password link

src/main/resources/static/css/main.css

@@ -263,4 +263,8 @@ body {
     color: #333;
     font-size: 1rem;
     font-weight: 600;
+}
+
+.forgot-password-link {
+    margin-top: 10px;
 }

src/main/resources/static/index.html

@@ -29,6 +29,9 @@
                         <input type="password" id="loginPassword" name="password" required>
                     </div>
                     <button type="submit" class="submit-btn" id="loginBtn">Sign In</button>
+                    <div class="forgot-password-link">
+                        <a href="#" id="forgotPasswordLink">Forgot password</a>
+                    </div>
                     <div id="loginMessage" class="message" style="display: none;"></div>
                 </form>
 

src/main/resources/static/js/main.js

@@ -35,6 +35,11 @@ document.addEventListener('DOMContentLoaded', function() {
             localStorage.removeItem('userData');
         }
     }
+
+    const forgotPasswordLink = document.getElementById('forgotPasswordLink');
+    if (forgotPasswordLink) {
+        forgotPasswordLink.addEventListener('click', handleForgotPassword);
+    }
 });
 
 function switchTab(tab) {
@@ -444,4 +449,52 @@ function hideEditProfileForm() {
     // Clear form and messages
     document.getElementById('editProfileForm').reset();
     clearEditProfileMessages();
+}
+
+async function handleForgotPassword(e) {
+    e.preventDefault();
+
+    const username = document.getElementById('loginUsername').value.trim();
+
+    if (!username) {
+        showMessage('loginMessage', 'Please enter your username above and then click "Forgot password" again.', 'error');
+        document.getElementById('loginUsername').focus();
+        return;
+    }
+
+    clearMessages();
+
+    const link = document.getElementById('forgotPasswordLink');
+    const originalText = link.textContent;
+    link.textContent = 'Sending email...';
+    link.style.pointerEvents = 'none';
+
+    try {
+        const response = await fetch(`${API_BASE_URL}/forgot-password?username=${encodeURIComponent(username)}`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        });
+
+        if (response.ok) {
+            showMessage('loginMessage', 'Password reset email sent! Please check your inbox.', 'success');
+            document.getElementById('loginUsername').value = '';
+        } else {
+            try {
+                const errorData = await response.json();
+                const errorMessage = errorData.message || 'Failed to send reset email. Please try again.';
+                showMessage('loginMessage', errorMessage, 'error');
+            } catch (parseError) {
+                const errorText = await response.text();
+                showMessage('loginMessage', errorText || 'Failed to send reset email. Please try again.', 'error');
+            }
+        }
+    } catch (error) {
+        console.error('Forgot password error:', error);
+        showMessage('loginMessage', 'Network error. Please check if the auth service is running.', 'error');
+    } finally {
+        link.textContent = originalText;
+        link.style.pointerEvents = 'auto';
+    }
 }