diff --git a/src/js/login.js b/src/js/login.js
index 30baf4e..aca0cd4 100644
--- a/src/js/login.js
+++ b/src/js/login.js
@@ -1,29 +1,6 @@
-/**
- * Login Page JavaScript
- * Handles user authentication with proper status code handling:
- * - 400: Missing fields
- * - 401: Invalid credentials
- * - 200: Successful login
- */
-
import { checkAuth } from './auth.js';
document.addEventListener('DOMContentLoaded', async () => {
- const loginForm = document.getElementById('loginForm');
- const emailInput = document.getElementById('email');
- const passwordInput = document.getElementById('password');
- const loginBtn = document.getElementById('loginBtn');
- const btnText = document.getElementById('btnText');
- const btnSpinner = document.getElementById('btnSpinner');
- const errorAlert = document.getElementById('errorAlert');
- const errorMessage = document.getElementById('errorMessage');
-
- // Check if user is already logged in (validate token)
- const isAuthenticated = await checkAuth();
- if (isAuthenticated) {
- window.location.href = '/';
- return;
-document.addEventListener('DOMContentLoaded', () => {
const loginForm = document.getElementById('loginForm');
const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password');
@@ -33,40 +10,25 @@ document.addEventListener('DOMContentLoaded', () => {
const errorAlert = document.getElementById('errorAlert');
const errorMessage = document.getElementById('errorMessage');
- // Check if user is already logged in
- const token = localStorage.getItem('token');
- if (token) {
- // Redirect to home if already logged in
+ // Redirect if already authenticated
+ const isAuthenticated = await checkAuth();
+ if (isAuthenticated) {
window.location.href = '/';
return;
}
- /**
- * Show error message to user
- * @param {string} message - Error message to display
- */
function showError(message) {
errorMessage.textContent = message;
errorAlert.classList.remove('d-none');
- // Auto-hide after 5 seconds
- setTimeout(() => {
- hideError();
- }, 5000);
+ setTimeout(() => hideError(), 5000);
}
- /**
- * Hide error message
- */
function hideError() {
errorAlert.classList.add('d-none');
errorMessage.textContent = '';
}
- /**
- * Set loading state for login button
- * @param {boolean} isLoading - Whether the form is submitting
- */
function setLoading(isLoading) {
if (isLoading) {
loginBtn.disabled = true;
@@ -79,9 +41,6 @@ document.addEventListener('DOMContentLoaded', () => {
}
}
- /**
- * Handle form submission
- */
loginForm.addEventListener('submit', async (e) => {
e.preventDefault();
hideError();
@@ -89,7 +48,6 @@ document.addEventListener('DOMContentLoaded', () => {
const email = emailInput.value.trim();
const password = passwordInput.value.trim();
- // Client-side validation (additional to HTML5 required attribute)
if (!email || !password) {
showError('Please fill out all fields.');
return;
@@ -98,135 +56,57 @@ document.addEventListener('DOMContentLoaded', () => {
setLoading(true);
try {
- const response = await fetch('http://localhost:3000/api/auth/login', {
+ const response = await fetch('/api/auth/login', {
method: 'POST',
- headers: {
- 'Content-Type': 'application/json',
- },
+ headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email, password }),
});
- const data = await response.json();
+ const rawText = await response.text();
+ let data = {};
- // Handle different status codes
- if (response.status === 200) {
- // SUCCESS - Login successful
- console.log('Login successful:', data);
+ try {
+ data = rawText ? JSON.parse(rawText) : {};
+ } catch {
+ data = { message: rawText || 'Unexpected server response.' };
+ }
- // Store token in localStorage
+ if (response.status === 200) {
+ // Save token + user
localStorage.setItem('token', data.token);
-
- setLoading(true);
-
- try {
- const response = await fetch('/api/auth/login', {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json',
- },
- body: JSON.stringify({ email, password }),
- });
-
- const rawText = await response.text();
- let data = {};
- try {
- data = rawText ? JSON.parse(rawText) : {};
- } catch (parseError) {
- data = { message: rawText || 'Unexpected server response.' };
- }
-
- // Handle different status codes
- if (response.status === 200) {
- // SUCCESS - Login successful
- console.log('Login successful:', data);
-
- // Store token in localStorage
- localStorage.setItem('token', data.token);
-
- // Store user info (optional)
- if (data.user) {
- localStorage.setItem('user', JSON.stringify(data.user));
- }
-
- // Show success message briefly
- errorAlert.classList.remove('alert-danger');
- errorAlert.classList.add('alert-success');
- errorMessage.innerHTML = 'Login successful! Redirecting...';
- errorAlert.classList.remove('d-none');
-
- // Redirect to home page after short delay
- setTimeout(() => {
- window.location.href = '/';
- }, 1000);
-
- } else if (response.status === 400) {
- // BAD REQUEST - Missing or invalid fields
- showError(data.message || 'Please fill out all fields.');
- setLoading(false);
-
- } else if (response.status === 401) {
- // UNAUTHORIZED - Invalid credentials
- showError(data.message || 'Invalid email or password.');
- setLoading(false);
-
- } else if (response.status === 500) {
- // SERVER ERROR
- showError(data.message || 'Server error. Please try again later.');
- setLoading(false);
-
- } else {
- // OTHER ERRORS
- showError(data.message || 'An unexpected error occurred.');
- setLoading(false);
- }
-
- } catch (error) {
- // Network error or other fetch errors
- console.error('Login error:', error);
- showError('Unable to connect to server. Please check your connection.');
- setLoading(false);
- // Store user info (optional)
if (data.user) {
localStorage.setItem('user', JSON.stringify(data.user));
}
- // Show success message briefly
+ // Success message
errorAlert.classList.remove('alert-danger');
errorAlert.classList.add('alert-success');
errorMessage.innerHTML =
'Login successful! Redirecting...';
errorAlert.classList.remove('d-none');
- // Redirect to home page after short delay
setTimeout(() => {
window.location.href = '/';
}, 1000);
+
} else if (response.status === 400) {
- // BAD REQUEST - Missing or invalid fields
showError(data.message || 'Please fill out all fields.');
- setLoading(false);
} else if (response.status === 401) {
- // UNAUTHORIZED - Invalid credentials
showError(data.message || 'Invalid email or password.');
- setLoading(false);
} else if (response.status === 500) {
- // SERVER ERROR
- showError('Server error. Please try again later.');
- setLoading(false);
+ showError(data.message || 'Server error. Please try again later.');
} else {
- // OTHER ERRORS
showError(data.message || 'An unexpected error occurred.');
- setLoading(false);
}
+
} catch (error) {
- // Network error or other fetch errors
console.error('Login error:', error);
showError('Unable to connect to server. Please check your connection.');
- setLoading(false);
}
+
+ setLoading(false);
});
- // Hide error when user starts typing
emailInput.addEventListener('input', hideError);
passwordInput.addEventListener('input', hideError);
});