CodeDevMLH/ToDo-App_Node.js_Test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

it's working!!!

Browse Source
This commit is contained in:
MLH
2025-04-06 15:27:27 +02:00
parent 68c55593b3
commit a976c2f200
9 changed files with 506 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
public/index.html
View File

@ -10,17 +10,26 @@
<div class="container todo-container">
<div class="header">
<h1>Meine Todo-Liste</h1>
<button id="logout-button" class="btn btn-secondary">Abmelden</button>
<div id="auth-button-container">
</div>
</div>
<form id="add-todo-form">
<input type="text" id="new-todo-input" placeholder="Neue Aufgabe hinzufügen..." required>
<button type="submit" class="btn btn-add">+</button>
</form>
<div id="todo-app-content" style="display: none;">
<form id="add-todo-form">
<input type="text" id="new-todo-input" placeholder="Neue Aufgabe hinzufügen..." required>
<button type="submit" class="btn btn-add">+</button>
</form>
<ul id="todo-list">
</ul>
<p id="error-message" class="error-message"></p>
</div>
<div id="login-prompt" style="display: none;" class="login-prompt-container">
<p>Bitte melden Sie sich an, um Ihre Todos zu sehen und zu verwalten.</p>
<a href="/login" class="btn">Zur Anmeldung</a>
</div>
<ul id="todo-list">
</ul>
<p id="error-message" class="error-message"></p>
</div>
<script src="script.js"></script> </body>

572
public/script.js
View File

@ -1,5 +1,6 @@
// public/script.js
// Handles frontend logic for login, registration, and todo management
// Version 3: Improved error handling message for JSON parse errors
document.addEventListener('DOMContentLoaded', () => {
const path = window.location.pathname;
@ -10,12 +11,12 @@ document.addEventListener('DOMContentLoaded', () => {
} else if (path === '/register' || path.endsWith('register.html')) {
setupRegisterForm();
} else if (path === '/' || path.endsWith('index.html')) {
// User should be authenticated to be here (handled by viewRoutes)
setupTodoPage();
// Main page logic: Check login status and set up UI accordingly
checkLoginStatusAndSetupPage();
}
});
// --- Authentication Form Handlers ---
// --- Authentication Form Handlers (Unchanged from previous version) ---
function setupLoginForm() {
const loginForm = document.getElementById('login-form');
@ -102,33 +103,127 @@ function setupRegisterForm() {
}
}
// --- Todo Page Logic ---
// --- Main Page Logic (index.html) ---
function setupTodoPage() {
// Global references for main page elements
let todoAppContent = null;
let loginPrompt = null;
let authButtonContainer = null;
let todoList = null;
let errorMessage = null; // Error message specifically for todo actions
// Function to check login status and set up the main page UI
async function checkLoginStatusAndSetupPage() {
// Get references to the main containers
todoAppContent = document.getElementById('todo-app-content');
loginPrompt = document.getElementById('login-prompt');
authButtonContainer = document.getElementById('auth-button-container');
todoList = document.getElementById('todo-list'); // Needed for clearing/rendering
errorMessage = document.getElementById('error-message'); // Error display within todo-app-content
if (!todoAppContent || !loginPrompt || !authButtonContainer || !todoList || !errorMessage) {
console.error('Essential page elements not found!');
return;
}
try {
const response = await fetch('/api/auth/status');
// Check if response is ok and content type is JSON before parsing
if (response.ok && response.headers.get('Content-Type')?.includes('application/json')) {
const status = await response.json();
if (status.loggedIn) {
updateUIForLoggedIn(status.username);
setupTodoListeners(); // Set up listeners only if logged in
await fetchTodos(); // Fetch todos only if logged in
} else {
updateUIForLoggedOut();
}
} else {
// Handle non-JSON or error responses from /status endpoint
console.error('Unexpected response from /api/auth/status:', response.status, response.statusText);
updateUIForLoggedOut(); // Fallback to logged out state
errorMessage.textContent = 'Fehler beim Prüfen des Login-Status (Serverantwort).';
}
} catch (error) {
console.error('Error checking login status:', error);
// Show logged out state as a fallback in case of network error etc.
updateUIForLoggedOut();
errorMessage.textContent = 'Fehler beim Prüfen des Login-Status (Netzwerk/Skript).';
}
}
// Update UI for Logged-In User
function updateUIForLoggedIn(username) {
if (!todoAppContent || !loginPrompt || !authButtonContainer) return;
// Show Todo content, hide login prompt
todoAppContent.style.display = 'block';
loginPrompt.style.display = 'none';
// Update Auth Button to "Abmelden"
authButtonContainer.innerHTML = ''; // Clear previous button
const logoutButton = document.createElement('button');
logoutButton.id = 'logout-button';
logoutButton.textContent = 'Abmelden';
logoutButton.classList.add('btn', 'btn-secondary');
logoutButton.addEventListener('click', handleLogout); // Add listener directly
authButtonContainer.appendChild(logoutButton);
// Optional: Display username (e.g., next to the button or in the header)
const welcomeMessage = document.createElement('span');
welcomeMessage.textContent = `Hallo, ${username}! `;
welcomeMessage.style.marginRight = '10px';
authButtonContainer.prepend(welcomeMessage); // Add before button
}
// Update UI for Logged-Out User
function updateUIForLoggedOut() {
if (!todoAppContent || !loginPrompt || !authButtonContainer || !todoList) return;
// Hide Todo content, show login prompt
todoAppContent.style.display = 'none';
loginPrompt.style.display = 'block';
// Update Auth Button to "Anmelden"
authButtonContainer.innerHTML = ''; // Clear previous button
const loginLink = document.createElement('a'); // Use a link for navigation
loginLink.href = '/login';
loginLink.textContent = 'Anmelden';
loginLink.classList.add('btn'); // Style as button
authButtonContainer.appendChild(loginLink);
// Clear any existing todos from the list
todoList.innerHTML = '';
// Clear any previous error messages related to todos
if(errorMessage) errorMessage.textContent = '';
}
// Set up event listeners for the todo form and list (only when logged in)
function setupTodoListeners() {
const addTodoForm = document.getElementById('add-todo-form');
const newTodoInput = document.getElementById('new-todo-input');
const todoList = document.getElementById('todo-list');
const logoutButton = document.getElementById('logout-button');
const errorMessage = document.getElementById('error-message');
// --- Event Listeners ---
// todoList reference is already global
// Add Todo Form Submission
if (addTodoForm) {
addTodoForm.addEventListener('submit', async (event) => {
// Remove previous listener if any to prevent duplicates
addTodoForm.onsubmit = null;
addTodoForm.onsubmit = async (event) => {
event.preventDefault();
const task = newTodoInput.value.trim();
if (task) {
await addTodoItem(task);
newTodoInput.value = ''; // Clear input field
}
});
};
}
// Todo List Click Handler (for checkboxes and delete buttons)
if (todoList) {
todoList.addEventListener('click', async (event) => {
// Remove previous listener if any
todoList.onclick = null;
todoList.onclick = async (event) => {
const target = event.target;
const todoItem = target.closest('.todo-item'); // Find the parent li element
@ -146,192 +241,267 @@ function setupTodoPage() {
if (target.classList.contains('btn-delete')) {
await deleteTodoItem(todoId);
}
});
};
}
// Logout Button Click
if (logoutButton) {
logoutButton.addEventListener('click', async () => {
errorMessage.textContent = ''; // Clear errors
try {
const response = await fetch('/api/auth/logout', { method: 'POST' });
if (response.ok) {
// Logout successful, redirect to login page
window.location.href = '/login';
} else {
const result = await response.json();
errorMessage.textContent = result.message || 'Logout fehlgeschlagen.';
}
} catch (error) {
console.error('Logout failed:', error);
errorMessage.textContent = 'Logout fehlgeschlagen. Netzwerkfehler.';
}
});
}
// --- API Call Functions ---
// Fetch Todos from Server
async function fetchTodos() {
errorMessage.textContent = '';
try {
const response = await fetch('/api/todos'); // GET request by default
if (response.status === 401 || response.status === 403) {
// If unauthorized (e.g., token expired), redirect to login
window.location.href = '/login';
return;
}
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const todos = await response.json();
renderTodoList(todos);
} catch (error) {
console.error('Error fetching todos:', error);
errorMessage.textContent = 'Fehler beim Laden der Todos.';
// Handle error display or potentially redirect to login if it's an auth issue
}
}
// Add a New Todo Item
async function addTodoItem(task) {
errorMessage.textContent = '';
try {
const response = await fetch('/api/todos', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ task }),
});
if (response.status === 401 || response.status === 403) {
window.location.href = '/login';
return;
}
if (!response.ok) {
const result = await response.json();
throw new Error(result.message || 'Fehler beim Hinzufügen');
}
const newTodo = await response.json();
addTodoToDOM(newTodo); // Add the new todo to the page immediately
} catch (error) {
console.error('Error adding todo:', error);
errorMessage.textContent = `Fehler beim Hinzufügen: ${error.message}`;
}
}
// Update Todo Completion Status
async function updateTodoStatus(id, isCompleted) {
errorMessage.textContent = '';
try {
const response = await fetch(`/api/todos/${id}`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ is_completed: isCompleted }),
});
if (response.status === 401 || response.status === 403) {
window.location.href = '/login';
return;
}
if (!response.ok) {
const result = await response.json();
throw new Error(result.message || 'Fehler beim Aktualisieren');
}
const updatedTodo = await response.json();
// Update the specific todo item in the DOM
const todoElement = todoList.querySelector(`li[data-id="${id}"]`);
if (todoElement) {
todoElement.classList.toggle('completed', updatedTodo.is_completed);
const checkbox = todoElement.querySelector('input[type="checkbox"]');
if(checkbox) checkbox.checked = updatedTodo.is_completed;
}
} catch (error) {
console.error('Error updating todo status:', error);
errorMessage.textContent = `Fehler beim Aktualisieren: ${error.message}`;
// Optional: Revert checkbox state on error
const todoElement = todoList.querySelector(`li[data-id="${id}"]`);
if(todoElement) {
const checkbox = todoElement.querySelector('input[type="checkbox"]');
if(checkbox) checkbox.checked = !isCompleted; // Revert state
}
}
}
// Delete a Todo Item
async function deleteTodoItem(id) {
errorMessage.textContent = '';
try {
const response = await fetch(`/api/todos/${id}`, {
method: 'DELETE',
});
if (response.status === 401 || response.status === 403) {
window.location.href = '/login';
return;
}
if (!response.ok && response.status !== 204) { // Allow 204 No Content
const result = await response.json();
throw new Error(result.message || 'Fehler beim Löschen');
}
// Remove the todo item from the DOM
const todoElement = todoList.querySelector(`li[data-id="${id}"]`);
if (todoElement) {
todoElement.remove();
}
} catch (error) {
console.error('Error deleting todo:', error);
errorMessage.textContent = `Fehler beim Löschen: ${error.message}`;
}
}
// --- DOM Manipulation ---
// Render the entire list of todos
function renderTodoList(todos) {
if (!todoList) return;
todoList.innerHTML = ''; // Clear existing list
if (todos.length === 0) {
todoList.innerHTML = '<p style="text-align: center; color: #888;">Noch keine Aufgaben vorhanden.</p>';
} else {
todos.forEach(todo => addTodoToDOM(todo));
}
}
// Add a single todo item to the DOM
function addTodoToDOM(todo) {
if (!todoList) return;
// Remove the "no tasks" message if it exists
const noTasksMessage = todoList.querySelector('p');
if (noTasksMessage) {
noTasksMessage.remove();
}
const li = document.createElement('li');
li.classList.add('todo-item');
li.dataset.id = todo.id; // Store todo ID on the element
if (todo.is_completed) {
li.classList.add('completed');
}
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.checked = todo.is_completed;
const span = document.createElement('span');
span.textContent = todo.task;
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Löschen';
deleteButton.classList.add('btn-delete'); // Use specific class for deletion
li.appendChild(checkbox);
li.appendChild(span);
li.appendChild(deleteButton);
// Prepend to show newest todos first, or append for oldest first
todoList.prepend(li); // Add new todos to the top
}
// --- Initial Load ---
fetchTodos(); // Load todos when the page loads
}
// Handle Logout Process
async function handleLogout() {
if(errorMessage) errorMessage.textContent = ''; // Clear errors
try {
const response = await fetch('/api/auth/logout', { method: 'POST' });
if (response.ok) {
// Logout successful, update UI to logged-out state
updateUIForLoggedOut();
} else {
// Try to parse error response as JSON
let result = { message: 'Logout fehlgeschlagen (unbekannter Fehler).' };
try {
result = await response.json();
} catch (e) {
console.error("Could not parse logout error response as JSON");
}
if(errorMessage) errorMessage.textContent = result.message || 'Logout fehlgeschlagen.';
}
} catch (error) {
console.error('Logout failed:', error);
if(errorMessage) errorMessage.textContent = 'Logout fehlgeschlagen. Netzwerkfehler.';
}
}
// --- API Call Functions (Modified Error Handling) ---
// Fetch Todos from Server
async function fetchTodos() {
if(errorMessage) errorMessage.textContent = '';
try {
const response = await fetch('/api/todos'); // GET request by default
// Check for auth errors specifically (though status check should prevent this)
if (response.status === 401 || response.status === 403) {
console.warn('Auth error during fetchTodos - should have been caught by status check.');
updateUIForLoggedOut(); // Update UI to logged out state
return; // Stop processing
}
if (!response.ok) {
// Handle other potential errors (e.g., 500 server error)
const errorData = await response.json().catch(() => ({ message: 'Unbekannter Serverfehler beim Laden der Todos' }));
throw new Error(errorData.message || `HTTP error! status: ${response.status}`);
}
// Ensure response is JSON before parsing
if (!response.headers.get('Content-Type')?.includes('application/json')) {
throw new Error('Unerwartete Serverantwort (kein JSON) beim Laden der Todos.');
}
const todos = await response.json();
renderTodoList(todos);
} catch (error) {
console.error('Error fetching todos:', error);
if(errorMessage) errorMessage.textContent = `Fehler beim Laden der Todos: ${error.message}`;
// Do NOT switch to logged-out UI here, as it might be a temporary server issue
}
}
// Add a New Todo Item
async function addTodoItem(task) {
if(errorMessage) errorMessage.textContent = '';
let response;
console.log('Adding todo item:', task);
try {
response = await fetch('/api/todos/newEntry', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json' // Explicitly request JSON response
},
credentials: 'same-origin', // Explicitly include cookies/credentials
body: JSON.stringify({ task }),
});
console.log('Response status:', response.status);
// If we got redirected to the login page, the status might still be 200
// but the content type will be text/html instead of application/json
const contentType = response.headers.get('Content-Type');
console.log('Response headers:', contentType);
if (contentType && contentType.includes('text/html')) {
// We got HTML instead of JSON - this means auth failed and we were redirected
console.warn('Auth failed - received HTML instead of JSON');
updateUIForLoggedOut();
return;
}
if (response.status === 401 || response.status === 403) {
console.warn('Auth error during addTodoItem.');
updateUIForLoggedOut();
return;
}
// Clone and log response body for debugging
console.log('Response body:', await response.clone().text());
console.log('Response ok:', response.ok);
if (!response.ok) {
const result = await response.json().catch(() => ({
message: `Serverfehler (${response.status}) beim Hinzufügen.`
}));
throw new Error(result.message);
}
// We already checked content type above, so just parse JSON now
const newTodo = await response.json();
addTodoToDOM(newTodo);
} catch (error) {
console.error('Error adding todo:', error);
let displayError = `Fehler beim Hinzufügen: ${error.message}`;
if (error instanceof SyntaxError) {
displayError = 'Fehler beim Hinzufügen: Unerwartete Antwort vom Server.';
}
if(errorMessage) errorMessage.textContent = displayError;
}
}
// Update Todo Completion Status
async function updateTodoStatus(id, isCompleted) {
if(errorMessage) errorMessage.textContent = '';
let response;
try {
response = await fetch(`/api/todos/${id}`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ is_completed: isCompleted }),
});
if (response.status === 401 || response.status === 403) {
console.warn('Auth error during updateTodoStatus.');
updateUIForLoggedOut();
return;
}
if (!response.ok) {
const result = await response.json().catch(() => ({ message: `Serverfehler (${response.status}) beim Aktualisieren.` }));
throw new Error(result.message);
}
if (!response.headers.get('Content-Type')?.includes('application/json')) {
throw new Error('Unerwartete Serverantwort (kein JSON) nach dem Aktualisieren.');
}
const updatedTodo = await response.json();
// Update the specific todo item in the DOM
const todoElement = todoList.querySelector(`li[data-id="${id}"]`);
if (todoElement) {
todoElement.classList.toggle('completed', updatedTodo.is_completed);
const checkbox = todoElement.querySelector('input[type="checkbox"]');
if(checkbox) checkbox.checked = updatedTodo.is_completed;
}
} catch (error) {
console.error('Error updating todo status:', error);
let displayError = `Fehler beim Aktualisieren: ${error.message}`;
if (error instanceof SyntaxError) {
displayError = 'Fehler beim Aktualisieren: Unerwartete Antwort vom Server.';
}
if(errorMessage) errorMessage.textContent = displayError;
// Optional: Revert checkbox state on error
const todoElement = todoList.querySelector(`li[data-id="${id}"]`);
if(todoElement) {
const checkbox = todoElement.querySelector('input[type="checkbox"]');
if(checkbox) checkbox.checked = !isCompleted; // Revert state
}
}
}
// Delete a Todo Item
async function deleteTodoItem(id) {
if(errorMessage) errorMessage.textContent = '';
try {
const response = await fetch(`/api/todos/${id}`, {
method: 'DELETE',
});
if (response.status === 401 || response.status === 403) {
console.warn('Auth error during deleteTodoItem.');
updateUIForLoggedOut();
return;
}
// Allow 204 No Content (which might not have a JSON body)
if (!response.ok && response.status !== 204) {
const result = await response.json().catch(() => ({ message: `Serverfehler (${response.status}) beim Löschen.` }));
throw new Error(result.message);
}
// Remove the todo item from the DOM
const todoElement = todoList.querySelector(`li[data-id="${id}"]`);
if (todoElement) {
todoElement.remove();
// Check if list is now empty and show message if needed
if (todoList.children.length === 0) {
renderTodoList([]); // Will add the "empty" message
}
}
} catch (error) {
console.error('Error deleting todo:', error);
let displayError = `Fehler beim Löschen: ${error.message}`;
if (error instanceof SyntaxError) { // Should not happen for DELETE usually, but good practice
displayError = 'Fehler beim Löschen: Unerwartete Antwort vom Server.';
}
if(errorMessage) errorMessage.textContent = displayError;
}
}
// --- DOM Manipulation (Rendering Todos) ---
// Render the entire list of todos
function renderTodoList(todos) {
if (!todoList) return;
todoList.innerHTML = ''; // Clear existing list
if (todos.length === 0) {
// Display a message within the todo list area if empty
const emptyMsg = document.createElement('p');
emptyMsg.textContent = 'Noch keine Aufgaben vorhanden.';
emptyMsg.style.textAlign = 'center';
emptyMsg.style.color = '#888';
emptyMsg.style.padding = '20px 0';
todoList.appendChild(emptyMsg);
} else {
todos.forEach(todo => addTodoToDOM(todo));
}
}
// Add a single todo item to the DOM
function addTodoToDOM(todo) {
if (!todoList) return;
// Remove the "no tasks" message if it exists and we are adding the first item
const emptyMsg = todoList.querySelector('p');
if (emptyMsg && todoList.children.length === 1 && emptyMsg.parentNode === todoList) {
emptyMsg.remove();
}
const li = document.createElement('li');
li.classList.add('todo-item');
li.dataset.id = todo.id; // Store todo ID on the element
if (todo.is_completed) {
li.classList.add('completed');
}
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.checked = todo.is_completed;
const span = document.createElement('span');
span.textContent = todo.task;
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Löschen';
deleteButton.classList.add('btn-delete'); // Use specific class for deletion
li.appendChild(checkbox);
li.appendChild(span);
li.appendChild(deleteButton);
// Prepend to show newest todos first
todoList.prepend(li);
}

25
public/style.css
View File

@ -80,6 +80,13 @@ body {
padding-bottom: 15px;
}
/* Container for the auth button */
#auth-button-container {
min-width: 100px; /* Ensure space for the button */
text-align: right;
}
.todo-container h1 {
margin: 0;
color: #2c3e50;
@ -151,6 +158,8 @@ body {
transition: background-color 0.2s ease, box-shadow 0.2s ease;
background-color: #3498db; /* Primary button color */
color: white;
text-decoration: none; /* For anchor tags styled as buttons */
display: inline-block; /* For anchor tags */
}
.btn:hover {
@ -211,3 +220,19 @@ body {
min-height: 1.2em; /* Prevent layout shift */
}
/* Styling for the login prompt */
.login-prompt-container {
text-align: center;
padding: 40px 20px;
background-color: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 5px;
margin-top: 20px;
}
.login-prompt-container p {
margin-bottom: 15px;
font-size: 1.1em;
color: #555;
}