Update src/templates/login.html

src/templates/login.html

@@ -1,209 +1,255 @@
-{% extends "auth_base.html" %}
-
-{% block title %}ResearchMate - Login{% endblock %}
-
-{% block content %}
-<div class="row min-vh-100 justify-content-center align-items-center">
-    <div class="col-md-6 col-lg-4">
-        <div class="card shadow-lg">
-            <div class="card-body p-5">
-                <div class="text-center mb-4">
-                    <i class="fas fa-user-lock fa-3x text-primary mb-3"></i>
-                    <h3 class="text-primary-custom">Welcome to ResearchMate</h3>
-                    <p class="text-muted">Please log in to access your research projects</p>
-                </div>
-                <form id="login-form">
-                    <div class="mb-3">
-                        <label for="username" class="form-label">Username</label>
-                        <input type="text" class="form-control" id="username" name="username" required>
-                    </div>
-                    <div class="mb-3">
-                        <label for="password" class="form-label">Password</label>
-                        <input type="password" class="form-control" id="password" name="password" required>
-                    </div>
-                    <div class="d-grid">
-                        <button type="submit" class="btn btn-primary">
-                            <i class="fas fa-sign-in-alt me-2"></i>Login
-                        </button>
-                    </div>
-                </form>
-                <div class="text-center mt-4">
-                    <p class="text-muted">
-                        Don't have an account? 
-                        <a href="#" class="text-primary" data-bs-toggle="modal" data-bs-target="#registerModal">Register here</a>
-                    </p>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Register Modal -->
-<div class="modal fade" id="registerModal" tabindex="-1">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title">
-                    <i class="fas fa-user-plus me-2"></i><span style="color: #000;">Create Account</span>
-                </h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
-            </div>
-            <div class="modal-body">
-                <form id="register-form">
-                    <div class="mb-3">
-                        <label for="reg-username" class="form-label">Username</label>
-<input type="text" class="form-control bg-white text-dark" id="reg-username" name="username" required>
-                    </div>
-                    <div class="mb-3">
-                        <label for="reg-email" class="form-label">Email</label>
-<input type="email" class="form-control bg-white text-dark" id="reg-email" name="email" required>
-                    </div>
-                    <div class="mb-3">
-                        <label for="reg-password" class="form-label">Password</label>
-<input type="password" class="form-control bg-white text-dark" id="reg-password" name="password" required>
-                    </div>
-                    <div class="mb-3">
-                        <label for="reg-confirm-password" class="form-label">Confirm Password</label>
-<input type="password" class="form-control bg-white text-dark" id="reg-confirm-password" name="confirm_password" required>
-                    </div>
-                </form>
-            </div>
-            <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-                <button type="submit" form="register-form" class="btn btn-primary">
-                    <i class="fas fa-user-plus me-2"></i>Create Account
-                </button>
-            </div>
-        </div>
-    </div>
-</div>
-{% endblock %}
-
-{% block extra_js %}
-<script>
-// Include authentication utilities
-function setAuthToken(token) {
-    // Store in sessionStorage for better security (clears on browser close)
-    sessionStorage.setItem('authToken', token);
-    // Also store in localStorage for compatibility, but with shorter expiry
-    localStorage.setItem('authToken', token);
-    localStorage.setItem('tokenTimestamp', Date.now().toString());
-    
-    // Set cookie with HttpOnly equivalent behavior
-    document.cookie = `authToken=${token}; path=/; SameSite=Strict; Secure=${location.protocol === 'https:'}`;
-}
-
-document.addEventListener('DOMContentLoaded', function() {
-    const loginForm = document.getElementById('login-form');
-    const registerForm = document.getElementById('register-form');
-    
-    // Login handler
-    loginForm.addEventListener('submit', function(e) {
-        e.preventDefault();
-        
-        const username = document.getElementById('username').value;
-        const password = document.getElementById('password').value;
-        
-        fetch('/api/auth/login', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({
-                username: username,
-                password: password
-            })
-        })
-        .then(response => response.json())
-        .then(data => {
-            if (data.success) {
-                // Use secure token storage
-                setAuthToken(data.token);
-                sessionStorage.setItem('userId', data.user_id);
-                localStorage.setItem('userId', data.user_id);
-                
-                // Show success message
-                showAlert('success', 'Login successful! Redirecting...');
-                
-                // Redirect to home page after a short delay
-                setTimeout(() => {
-                    window.location.href = '/';
-                }, 1000);
-            } else {
-                showAlert('danger', data.error || 'Login failed');
-            }
-        })
-        .catch(error => {
-            showAlert('danger', 'Network error: ' + error.message);
-        });
-    });
-    
-    // Register handler
-    registerForm.addEventListener('submit', function(e) {
-        e.preventDefault();
-        
-        const username = document.getElementById('reg-username').value;
-        const email = document.getElementById('reg-email').value;
-        const password = document.getElementById('reg-password').value;
-        const confirmPassword = document.getElementById('reg-confirm-password').value;
-        
-        if (password !== confirmPassword) {
-            showAlert('danger', 'Passwords do not match');
-            return;
-        }
-        
-        fetch('/api/auth/register', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({
-                username: username,
-                email: email,
-                password: password
-            })
-        })
-        .then(response => response.json())
-        .then(data => {
-            if (data.success) {
-                const modal = bootstrap.Modal.getInstance(document.getElementById('registerModal'));
-                modal.hide();
-                showAlert('success', 'Account created successfully! Please log in.');
-                registerForm.reset();
-            } else {
-                showAlert('danger', data.error || 'Registration failed');
-            }
-        })
-        .catch(error => {
-            showAlert('danger', 'Network error: ' + error.message);
-        });
-    });
-    
-    function showAlert(type, message) {
-        const alert = document.createElement('div');
-        alert.className = `alert alert-${type} alert-dismissible fade show`;
-        alert.innerHTML = `
-            <i class="fas fa-${type === 'success' ? 'check' : 'exclamation-triangle'} me-2"></i>
-            ${message}
-            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
-        `;
-
-        // Try to insert into .container, else fallback to main content
-        const container = document.querySelector('.container');
-        if (container) {
-            container.insertBefore(alert, container.firstChild);
-        } else {
-            // Fallback: insert at top of main content
-            const main = document.querySelector('main') || document.body;
-            main.insertBefore(alert, main.firstChild);
-        }
-
-        setTimeout(() => {
-            if (alert.parentNode) {
-                alert.remove();
-            }
-        }, 5000);
-    }
-});
-</script>
-{% endblock %}
+{% extends "auth_base.html" %}
+
+{% block title %}ResearchMate - Login{% endblock %}
+
+{% block content %}
+<div class="row min-vh-100 justify-content-center align-items-center">
+    <div class="col-md-6 col-lg-4">
+        <div class="card shadow-lg">
+            <div class="card-body p-5">
+                <div class="text-center mb-4">
+                    <i class="fas fa-user-lock fa-3x text-primary mb-3"></i>
+                    <h3 class="text-primary-custom">Welcome to ResearchMate</h3>
+                    <p class="text-muted">Please log in to access your research projects</p>
+                </div>
+                
+                <!-- Alert container for messages -->
+                <div id="alert-container"></div>
+                
+                <form id="login-form">
+                    <div class="mb-3">
+                        <label for="username" class="form-label">Username</label>
+                        <input type="text" class="form-control" id="username" name="username" required>
+                    </div>
+                    <div class="mb-3">
+                        <label for="password" class="form-label">Password</label>
+                        <input type="password" class="form-control" id="password" name="password" required>
+                    </div>
+                    <div class="d-grid">
+                        <button type="submit" class="btn btn-primary" id="login-btn">
+                            <i class="fas fa-sign-in-alt me-2"></i>Login
+                        </button>
+                    </div>
+                </form>
+                <div class="text-center mt-4">
+                    <p class="text-muted">
+                        Don't have an account? 
+                        <a href="#" class="text-primary" data-bs-toggle="modal" data-bs-target="#registerModal">Register here</a>
+                    </p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Register Modal -->
+<div class="modal fade" id="registerModal" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">
+                    <i class="fas fa-user-plus me-2"></i><span style="color: #000;">Create Account</span>
+                </h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+                <form id="register-form">
+                    <div class="mb-3">
+                        <label for="reg-username" class="form-label">Username</label>
+                        <input type="text" class="form-control bg-white text-dark" id="reg-username" name="username" required>
+                    </div>
+                    <div class="mb-3">
+                        <label for="reg-email" class="form-label">Email</label>
+                        <input type="email" class="form-control bg-white text-dark" id="reg-email" name="email" required>
+                    </div>
+                    <div class="mb-3">
+                        <label for="reg-password" class="form-label">Password</label>
+                        <input type="password" class="form-control bg-white text-dark" id="reg-password" name="password" required>
+                    </div>
+                    <div class="mb-3">
+                        <label for="reg-confirm-password" class="form-label">Confirm Password</label>
+                        <input type="password" class="form-control bg-white text-dark" id="reg-confirm-password" name="confirm_password" required>
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                <button type="submit" form="register-form" class="btn btn-primary">
+                    <i class="fas fa-user-plus me-2"></i>Create Account
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const loginForm = document.getElementById('login-form');
+    const registerForm = document.getElementById('register-form');
+    const loginBtn = document.getElementById('login-btn');
+    
+    // Login handler
+    loginForm.addEventListener('submit', async function(e) {
+        e.preventDefault();
+        
+        const username = document.getElementById('username').value.trim();
+        const password = document.getElementById('password').value;
+        
+        if (!username || !password) {
+            showAlert('danger', 'Please fill in all fields');
+            return;
+        }
+        
+        // Show loading state
+        const originalBtnText = loginBtn.innerHTML;
+        loginBtn.disabled = true;
+        loginBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Logging in...';
+        
+        try {
+            const response = await fetch('/api/auth/login', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                credentials: 'include', // Important: Include cookies
+                body: JSON.stringify({
+                    username: username,
+                    password: password
+                })
+            });
+            
+            const data = await response.json();
+            
+            if (response.ok && data.success) {
+                // Store token as backup
+                localStorage.setItem('authToken', data.token);
+                localStorage.setItem('userId', data.user_id);
+                localStorage.setItem('username', data.username);
+                
+                // Show success message
+                showAlert('success', 'Login successful! Redirecting...');
+                
+                // Redirect after short delay
+                setTimeout(() => {
+                    window.location.href = data.redirect_url || '/';
+                }, 1500);
+            } else {
+                showAlert('danger', data.detail || data.error || 'Login failed. Please try again.');
+            }
+        } catch (error) {
+            console.error('Login error:', error);
+            showAlert('danger', 'Network error. Please check your connection and try again.');
+        } finally {
+            // Reset button state
+            loginBtn.disabled = false;
+            loginBtn.innerHTML = originalBtnText;
+        }
+    });
+    
+    // Register handler
+    registerForm.addEventListener('submit', async function(e) {
+        e.preventDefault();
+        
+        const username = document.getElementById('reg-username').value.trim();
+        const email = document.getElementById('reg-email').value.trim();
+        const password = document.getElementById('reg-password').value;
+        const confirmPassword = document.getElementById('reg-confirm-password').value;
+        
+        if (!username || !email || !password || !confirmPassword) {
+            showAlert('danger', 'Please fill in all fields');
+            return;
+        }
+        
+        if (password !== confirmPassword) {
+            showAlert('danger', 'Passwords do not match');
+            return;
+        }
+        
+        if (password.length < 6) {
+            showAlert('danger', 'Password must be at least 6 characters long');
+            return;
+        }
+        
+        try {
+            const response = await fetch('/api/auth/register', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    username: username,
+                    email: email,
+                    password: password
+                })
+            });
+            
+            const data = await response.json();
+            
+            if (response.ok && data.success) {
+                const modal = bootstrap.Modal.getInstance(document.getElementById('registerModal'));
+                modal.hide();
+                showAlert('success', 'Account created successfully! Please log in.');
+                registerForm.reset();
+            } else {
+                showAlert('danger', data.detail || data.error || 'Registration failed. Please try again.');
+            }
+        } catch (error) {
+            console.error('Registration error:', error);
+            showAlert('danger', 'Network error. Please check your connection and try again.');
+        }
+    });
+    
+    function showAlert(type, message) {
+        const alertContainer = document.getElementById('alert-container');
+        
+        // Clear existing alerts
+        alertContainer.innerHTML = '';
+        
+        const alert = document.createElement('div');
+        alert.className = `alert alert-${type} alert-dismissible fade show`;
+        alert.innerHTML = `
+            <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-triangle'} me-2"></i>
+            ${message}
+            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
+        `;
+        
+        alertContainer.appendChild(alert);
+        
+        // Auto-remove after 5 seconds for error messages
+        if (type === 'danger') {
+            setTimeout(() => {
+                if (alert.parentNode) {
+                    alert.remove();
+                }
+            }, 5000);
+        }
+    }
+    
+    // Check if user is already logged in
+    const token = localStorage.getItem('authToken');
+    if (token) {
+        // Verify token is still valid
+        fetch('/api/user/status', {
+            headers: {
+                'Authorization': `Bearer ${token}`
+            },
+            credentials: 'include'
+        })
+        .then(response => {
+            if (response.ok) {
+                // User is already logged in, redirect
+                window.location.href = '/';
+            }
+        })
+        .catch(() => {
+            // Token is invalid, clear it
+            localStorage.removeItem('authToken');
+            localStorage.removeItem('userId');
+            localStorage.removeItem('username');
+        });
+    }
+});
+</script>
+{% endblock %}