Skip to content

Update login.js #119

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
gbowne1 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Update login.js #119

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
162 changes: 21 additions & 141 deletions src/js/login.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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');
Expand All @@ -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;
Expand All @@ -79,17 +41,13 @@ document.addEventListener('DOMContentLoaded', () => {
}
}

/**
* Handle form submission
*/
loginForm.addEventListener('submit', async (e) => {
e.preventDefault();
hideError();

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;
Expand All @@ -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 = '<i class="fas fa-check-circle me-2"></i>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 =
'<i class="fas fa-check-circle me-2"></i>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);
});
Loading