first test

2025-04-03 19:34:31 +02:00
parent 32141f7a26
commit 68c55593b3
16 changed files with 3088 additions and 0 deletions
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Meine Todos</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container todo-container">
+        <div class="header">
+            <h1>Meine Todo-Liste</h1>
+            <button id="logout-button" class="btn btn-secondary">Abmelden</button>
+        </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>
+
+        <ul id="todo-list">
+            </ul>
+         <p id="error-message" class="error-message"></p>
+    </div>
+
+    <script src="script.js"></script> </body>
+</html>
--- a/public/login.html
+++ b/public/login.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login - Todo App</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container auth-container">
+        <h1>Anmelden</h1>
+        <form id="login-form">
+            <div class="form-group">
+                <label for="username">Benutzername:</label>
+                <input type="text" id="username" name="username" required>
+            </div>
+            <div class="form-group">
+                <label for="password">Passwort:</label>
+                <input type="password" id="password" name="password" required>
+            </div>
+            <button type="submit" class="btn">Anmelden</button>
+        </form>
+        <p id="error-message" class="error-message"></p>
+        <p class="switch-link">Noch kein Konto? <a href="/register">Registrieren</a></p>
+    </div>
+
+    <script src="script.js"></script> </body>
+</html>
--- a/public/register.html
+++ b/public/register.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Registrieren - Todo App</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container auth-container">
+        <h1>Registrieren</h1>
+        <form id="register-form">
+            <div class="form-group">
+                <label for="username">Benutzername:</label>
+                <input type="text" id="username" name="username" required>
+            </div>
+            <div class="form-group">
+                <label for="password">Passwort:</label>
+                <input type="password" id="password" name="password" required>
+            </div>
+             <div class="form-group">
+                <label for="confirm-password">Passwort bestätigen:</label>
+                <input type="password" id="confirm-password" name="confirm-password" required>
+            </div>
+            <button type="submit" class="btn">Registrieren</button>
+        </form>
+        <p id="error-message" class="error-message"></p>
+         <p id="success-message" class="success-message"></p>
+        <p class="switch-link">Bereits ein Konto? <a href="/login">Anmelden</a></p>
+    </div>
+
+    <script src="script.js"></script> </body>
+</html>
--- a/public/script.js
+++ b/public/script.js
@@ -0,0 +1,337 @@
+// public/script.js
+// Handles frontend logic for login, registration, and todo management
+
+document.addEventListener('DOMContentLoaded', () => {
+    const path = window.location.pathname;
+
+    // --- Page-Specific Logic ---
+    if (path === '/login' || path.endsWith('login.html')) {
+        setupLoginForm();
+    } 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();
+    }
+});
+
+// --- Authentication Form Handlers ---
+
+function setupLoginForm() {
+    const loginForm = document.getElementById('login-form');
+    const errorMessage = document.getElementById('error-message');
+
+    if (loginForm) {
+        loginForm.addEventListener('submit', async (event) => {
+            event.preventDefault(); // Prevent default form submission
+            errorMessage.textContent = ''; // Clear previous errors
+
+            const username = loginForm.username.value;
+            const password = loginForm.password.value;
+
+            try {
+                const response = await fetch('/api/auth/login', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ username, password }),
+                });
+
+                const result = await response.json();
+
+                if (response.ok) {
+                    // Login successful, redirect to the main todo page
+                    window.location.href = '/'; // Redirect to home page
+                } else {
+                    // Display error message from server
+                    errorMessage.textContent = result.message || 'Login fehlgeschlagen.';
+                }
+            } catch (error) {
+                console.error('Login request failed:', error);
+                errorMessage.textContent = 'Ein Netzwerkfehler ist aufgetreten. Bitte versuchen Sie es erneut.';
+            }
+        });
+    }
+}
+
+function setupRegisterForm() {
+    const registerForm = document.getElementById('register-form');
+    const errorMessage = document.getElementById('error-message');
+    const successMessage = document.getElementById('success-message');
+
+
+    if (registerForm) {
+        registerForm.addEventListener('submit', async (event) => {
+            event.preventDefault();
+            errorMessage.textContent = '';
+            successMessage.textContent = '';
+
+
+            const username = registerForm.username.value;
+            const password = registerForm.password.value;
+            const confirmPassword = registerForm['confirm-password'].value;
+
+            if (password !== confirmPassword) {
+                errorMessage.textContent = 'Passwörter stimmen nicht überein.';
+                return;
+            }
+
+            try {
+                const response = await fetch('/api/auth/register', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ username, password }),
+                });
+
+                const result = await response.json();
+
+                if (response.ok) {
+                     successMessage.textContent = result.message + ' Sie werden zum Login weitergeleitet...';
+                     registerForm.reset(); // Clear the form
+                     // Redirect to login page after a short delay
+                     setTimeout(() => {
+                         window.location.href = '/login';
+                     }, 2000); // 2 seconds delay
+                } else {
+                    errorMessage.textContent = result.message || 'Registrierung fehlgeschlagen.';
+                }
+            } catch (error) {
+                console.error('Registration request failed:', error);
+                errorMessage.textContent = 'Ein Netzwerkfehler ist aufgetreten. Bitte versuchen Sie es erneut.';
+            }
+        });
+    }
+}
+
+// --- Todo Page Logic ---
+
+function setupTodoPage() {
+    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 ---
+
+    // Add Todo Form Submission
+    if (addTodoForm) {
+        addTodoForm.addEventListener('submit', 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) => {
+            const target = event.target;
+            const todoItem = target.closest('.todo-item'); // Find the parent li element
+
+            if (!todoItem) return; // Click was not inside a todo item
+
+            const todoId = todoItem.dataset.id;
+
+            // Handle Checkbox Click (Toggle Completion)
+            if (target.type === 'checkbox') {
+                const isCompleted = target.checked;
+                await updateTodoStatus(todoId, isCompleted);
+            }
+
+            // Handle Delete Button Click
+            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
+}
--- a/public/style.css
+++ b/public/style.css
@@ -0,0 +1,213 @@
+/* public/style.css */
+/* Basic styling for the Todo App */
+
+body {
+    font-family: sans-serif;
+    background-color: #f4f7f6;
+    margin: 0;
+    padding: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start; /* Align items to the top */
+    min-height: 100vh;
+    color: #333;
+}
+
+.container {
+    background-color: #ffffff;
+    padding: 30px;
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    width: 100%;
+    max-width: 500px; /* Limit container width */
+    margin-top: 20px;
+}
+
+/* Authentication Forms Specific Styling */
+.auth-container {
+    max-width: 400px;
+    text-align: center;
+}
+
+.auth-container h1 {
+    margin-bottom: 25px;
+    color: #2c3e50;
+}
+
+.form-group {
+    margin-bottom: 15px;
+    text-align: left;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: bold;
+    color: #555;
+}
+
+.form-group input[type="text"],
+.form-group input[type="password"] {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box; /* Include padding in width */
+}
+
+.switch-link {
+    margin-top: 20px;
+    font-size: 0.9em;
+    color: #555;
+}
+
+.switch-link a {
+    color: #3498db;
+    text-decoration: none;
+}
+
+.switch-link a:hover {
+    text-decoration: underline;
+}
+
+/* Todo List Specific Styling */
+.todo-container .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+    border-bottom: 1px solid #eee;
+    padding-bottom: 15px;
+}
+
+.todo-container h1 {
+    margin: 0;
+    color: #2c3e50;
+    font-size: 1.8em;
+}
+
+#add-todo-form {
+    display: flex;
+    margin-bottom: 20px;
+}
+
+#new-todo-input {
+    flex-grow: 1;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px 0 0 4px;
+    font-size: 1em;
+}
+
+#todo-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.todo-item {
+    display: flex;
+    align-items: center;
+    padding: 12px 0;
+    border-bottom: 1px solid #eee;
+    transition: background-color 0.2s ease;
+}
+
+.todo-item:last-child {
+    border-bottom: none;
+}
+
+.todo-item:hover {
+    background-color: #f9f9f9;
+}
+
+.todo-item input[type="checkbox"] {
+    margin-right: 12px;
+    cursor: pointer;
+    /* Larger checkbox for easier clicking */
+    width: 18px;
+    height: 18px;
+}
+
+.todo-item span {
+    flex-grow: 1;
+    margin-right: 10px;
+    font-size: 1em;
+    word-break: break-word; /* Prevent long words from overflowing */
+}
+
+.todo-item.completed span {
+    text-decoration: line-through;
+    color: #aaa;
+}
+
+/* Buttons */
+.btn {
+    padding: 10px 15px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 1em;
+    transition: background-color 0.2s ease, box-shadow 0.2s ease;
+    background-color: #3498db; /* Primary button color */
+    color: white;
+}
+
+.btn:hover {
+    background-color: #2980b9;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+
+.btn-add {
+    border-radius: 0 4px 4px 0;
+    background-color: #2ecc71; /* Add button color */
+}
+
+.btn-add:hover {
+    background-color: #27ae60;
+}
+
+.btn-secondary {
+    background-color: #e74c3c; /* Logout/Delete button color */
+}
+
+.btn-secondary:hover {
+    background-color: #c0392b;
+}
+
+.btn-delete {
+    padding: 5px 10px;
+    font-size: 0.9em;
+    background-color: #e74c3c;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-left: auto; /* Push delete button to the right */
+    opacity: 0.7;
+    transition: opacity 0.2s ease;
+}
+
+.todo-item:hover .btn-delete {
+    opacity: 1;
+}
+
+.btn-delete:hover {
+    background-color: #c0392b;
+}
+
+/* Messages */
+.error-message {
+    color: #e74c3c;
+    margin-top: 10px;
+    font-size: 0.9em;
+    min-height: 1.2em; /* Prevent layout shift */
+}
+
+.success-message {
+    color: #2ecc71;
+    margin-top: 10px;
+    font-size: 0.9em;
+     min-height: 1.2em; /* Prevent layout shift */
+}
+