first test
This commit is contained in:
15
.env
Normal file
15
.env
Normal file
@ -0,0 +1,15 @@
|
||||
# PostgreSQL Database Configuration
|
||||
# Replace with your actual database connection details
|
||||
DB_USER=postgres
|
||||
DB_HOST=localhost
|
||||
DB_DATABASE=todo_app_db
|
||||
DB_PASSWORD=password
|
||||
DB_PORT=5432 # Default PostgreSQL port
|
||||
|
||||
# JWT Configuration
|
||||
# Use a strong, random secret for JWT signing in production
|
||||
JWT_SECRET=873hfd23rh2rzr1h61rh13z1hß1r1ß4gr1fnwe5vgqwerf # Ändere dies unbedingt!
|
||||
JWT_EXPIRES_IN=1h # How long the login token is valid
|
||||
|
||||
# Server Configuration
|
||||
PORT=3000 # Port the Node.js server will run on
|
||||
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
node_modules
|
||||
39
db.js
Normal file
39
db.js
Normal file
@ -0,0 +1,39 @@
|
||||
// db.js
|
||||
// Handles PostgreSQL database connection and queries
|
||||
|
||||
const { Pool } = require('pg');
|
||||
require('dotenv').config(); // Load environment variables from .env file
|
||||
|
||||
// Create a new pool instance using environment variables
|
||||
// The pool manages multiple client connections
|
||||
const pool = new Pool({
|
||||
user: process.env.DB_USER,
|
||||
host: process.env.DB_HOST,
|
||||
database: process.env.DB_DATABASE,
|
||||
password: process.env.DB_PASSWORD,
|
||||
port: process.env.DB_PORT,
|
||||
// Optional: Add SSL configuration if required by your database provider
|
||||
// ssl: {
|
||||
// rejectUnauthorized: false // Adjust as needed
|
||||
// }
|
||||
});
|
||||
|
||||
// Test the database connection on startup
|
||||
pool.connect((err, client, release) => {
|
||||
if (err) {
|
||||
console.error('Error acquiring client for initial DB connection test:', err.stack);
|
||||
// Exit the process if the database connection fails on startup
|
||||
process.exit(1);
|
||||
} else {
|
||||
console.log('Successfully connected to PostgreSQL database.');
|
||||
// Release the client back to the pool
|
||||
release();
|
||||
}
|
||||
});
|
||||
|
||||
// Export a query function to interact with the database
|
||||
module.exports = {
|
||||
query: (text, params) => pool.query(text, params),
|
||||
// You can add more specific database functions here if needed
|
||||
// Example: getClient: () => pool.connect()
|
||||
};
|
||||
26
db/init_postgres.sql
Normal file
26
db/init_postgres.sql
Normal file
@ -0,0 +1,26 @@
|
||||
-- SQL script to create the necessary tables in your PostgreSQL database
|
||||
|
||||
-- Users table to store login information
|
||||
CREATE TABLE users (
|
||||
id SERIAL PRIMARY KEY, -- Unique identifier for each user
|
||||
username VARCHAR(255) UNIQUE NOT NULL, -- Unique username for login
|
||||
password_hash VARCHAR(255) NOT NULL, -- Hashed password
|
||||
created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP -- Timestamp of user creation
|
||||
);
|
||||
|
||||
-- Todos table to store todo items
|
||||
CREATE TABLE todos (
|
||||
id SERIAL PRIMARY KEY, -- Unique identifier for each todo
|
||||
user_id INTEGER NOT NULL, -- Foreign key referencing the users table
|
||||
task TEXT NOT NULL, -- The content of the todo item
|
||||
is_completed BOOLEAN DEFAULT FALSE, -- Status of the todo item
|
||||
created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP, -- Timestamp of todo creation
|
||||
FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE -- Ensure referential integrity
|
||||
);
|
||||
|
||||
-- Optional: Add an index for faster lookups by user_id in the todos table
|
||||
CREATE INDEX idx_todos_user_id ON todos(user_id);
|
||||
|
||||
-- Optional: Add an index for faster lookups by username in the users table
|
||||
CREATE INDEX idx_users_username ON users(username);
|
||||
|
||||
47
middleware/authMiddleware.js
Normal file
47
middleware/authMiddleware.js
Normal file
@ -0,0 +1,47 @@
|
||||
// middleware/authMiddleware.js
|
||||
// Middleware to protect routes by verifying JWT
|
||||
|
||||
const jwt = require('jsonwebtoken');
|
||||
require('dotenv').config();
|
||||
|
||||
const JWT_SECRET = process.env.JWT_SECRET;
|
||||
|
||||
const authenticateToken = (req, res, next) => {
|
||||
// Get token from the 'token' cookie
|
||||
const token = req.cookies.token;
|
||||
|
||||
// If no token is present, deny access
|
||||
if (!token) {
|
||||
// If the request is for an API endpoint, return 401 Unauthorized
|
||||
if (req.path.startsWith('/api/')) {
|
||||
return res.status(401).json({ message: 'Zugriff verweigert. Kein Token vorhanden.' });
|
||||
}
|
||||
// Otherwise, redirect to the login page
|
||||
return res.redirect('/login');
|
||||
}
|
||||
|
||||
// Verify the token
|
||||
jwt.verify(token, JWT_SECRET, (err, user) => {
|
||||
if (err) {
|
||||
console.error('JWT Verification Error:', err.message);
|
||||
// If token is invalid or expired
|
||||
if (req.path.startsWith('/api/')) {
|
||||
// Clear the invalid cookie and return 403 Forbidden for API requests
|
||||
res.clearCookie('token');
|
||||
return res.status(403).json({ message: 'Token ungültig oder abgelaufen.' });
|
||||
}
|
||||
// Clear the invalid cookie and redirect to login for page requests
|
||||
res.clearCookie('token');
|
||||
return res.redirect('/login');
|
||||
}
|
||||
|
||||
// If token is valid, attach the decoded user information (payload) to the request object
|
||||
// The payload typically contains user ID, username, etc. (whatever was put in during login)
|
||||
req.user = user; // Example: user might be { id: 1, username: 'testuser' }
|
||||
|
||||
// Proceed to the next middleware or route handler
|
||||
next();
|
||||
});
|
||||
};
|
||||
|
||||
module.exports = authenticateToken;
|
||||
1960
package-lock.json
generated
Normal file
1960
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
36
package.json
Normal file
36
package.json
Normal file
@ -0,0 +1,36 @@
|
||||
{
|
||||
"name": "todo-app-nodejs-postgres",
|
||||
"version": "1.0.0",
|
||||
"description": "Simple Todo App with Node.js, Express, PostgreSQL, and Authentication",
|
||||
"main": "server.js",
|
||||
"scripts": {
|
||||
"start": "node server.js",
|
||||
"dev": "nodemon server.js",
|
||||
"start-dev-db": "docker compose -f 'docker-compose.yml' up -d --build",
|
||||
"create-db-container": "docker compose -f \"docker-compose.yml\" up -d --build",
|
||||
"db:create": "docker exec -i postgresql psql -U postgres -c \"CREATE DATABASE todo_app_db;\"",
|
||||
"db:init": "docker cp db/init_postgres.sql postgresql:/tmp/init.sql && docker exec -i postgresql psql -U postgres -d todo_app_db -f /tmp/init.sql"
|
||||
|
||||
},
|
||||
"keywords": [
|
||||
"todo",
|
||||
"nodejs",
|
||||
"express",
|
||||
"postgres",
|
||||
"authentication",
|
||||
"jwt"
|
||||
],
|
||||
"author": "Your Name",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"bcrypt": "^5.1.1",
|
||||
"cookie-parser": "^1.4.7",
|
||||
"dotenv": "^16.4.7",
|
||||
"express": "^5.1.0",
|
||||
"jsonwebtoken": "^9.0.2",
|
||||
"pg": "^8.14.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"nodemon": "^3.1.9"
|
||||
}
|
||||
}
|
||||
27
public/index.html
Normal file
27
public/index.html
Normal file
@ -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>
|
||||
28
public/login.html
Normal file
28
public/login.html
Normal file
@ -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>
|
||||
33
public/register.html
Normal file
33
public/register.html
Normal file
@ -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>
|
||||
337
public/script.js
Normal file
337
public/script.js
Normal file
@ -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
|
||||
}
|
||||
213
public/style.css
Normal file
213
public/style.css
Normal file
@ -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 */
|
||||
}
|
||||
|
||||
113
routes/authRoutes.js
Normal file
113
routes/authRoutes.js
Normal file
@ -0,0 +1,113 @@
|
||||
// routes/authRoutes.js
|
||||
// Handles user registration, login, and logout
|
||||
|
||||
const express = require('express');
|
||||
const bcrypt = require('bcrypt');
|
||||
const jwt = require('jsonwebtoken');
|
||||
const db = require('../db'); // Import database query function
|
||||
require('dotenv').config();
|
||||
|
||||
const router = express.Router();
|
||||
const JWT_SECRET = process.env.JWT_SECRET;
|
||||
const JWT_EXPIRES_IN = process.env.JWT_EXPIRES_IN || '1h';
|
||||
const SALT_ROUNDS = 10; // Cost factor for bcrypt hashing
|
||||
|
||||
// POST /api/auth/register - User Registration
|
||||
router.post('/register', async (req, res) => {
|
||||
const { username, password } = req.body;
|
||||
|
||||
// Basic validation
|
||||
if (!username || !password) {
|
||||
return res.status(400).json({ message: 'Benutzername und Passwort sind erforderlich.' });
|
||||
}
|
||||
|
||||
try {
|
||||
// Check if user already exists
|
||||
const userCheck = await db.query('SELECT * FROM users WHERE username = $1', [username]);
|
||||
if (userCheck.rows.length > 0) {
|
||||
return res.status(409).json({ message: 'Benutzername bereits vergeben.' }); // 409 Conflict
|
||||
}
|
||||
|
||||
// Hash the password
|
||||
const passwordHash = await bcrypt.hash(password, SALT_ROUNDS);
|
||||
|
||||
// Insert new user into the database
|
||||
const newUser = await db.query(
|
||||
'INSERT INTO users (username, password_hash) VALUES ($1, $2) RETURNING id, username',
|
||||
[username, passwordHash]
|
||||
);
|
||||
|
||||
console.log(`User registered: ${newUser.rows[0].username}`);
|
||||
// Respond with success message (or automatically log them in)
|
||||
// For simplicity, we just confirm registration here. User needs to login separately.
|
||||
res.status(201).json({ message: 'Registrierung erfolgreich. Bitte einloggen.' });
|
||||
|
||||
} catch (error) {
|
||||
console.error('Registration Error:', error);
|
||||
res.status(500).json({ message: 'Serverfehler bei der Registrierung.' });
|
||||
}
|
||||
});
|
||||
|
||||
// POST /api/auth/login - User Login
|
||||
router.post('/login', async (req, res) => {
|
||||
const { username, password } = req.body;
|
||||
|
||||
if (!username || !password) {
|
||||
return res.status(400).json({ message: 'Benutzername und Passwort sind erforderlich.' });
|
||||
}
|
||||
|
||||
try {
|
||||
// Find user by username
|
||||
const result = await db.query('SELECT * FROM users WHERE username = $1', [username]);
|
||||
const user = result.rows[0];
|
||||
|
||||
// Check if user exists and password is correct
|
||||
if (!user || !(await bcrypt.compare(password, user.password_hash))) {
|
||||
return res.status(401).json({ message: 'Ungültiger Benutzername oder Passwort.' }); // 401 Unauthorized
|
||||
}
|
||||
|
||||
// User authenticated successfully, create JWT payload
|
||||
const payload = {
|
||||
id: user.id,
|
||||
username: user.username
|
||||
// Add other relevant non-sensitive user info if needed
|
||||
};
|
||||
|
||||
// Sign the JWT
|
||||
const token = jwt.sign(payload, JWT_SECRET, { expiresIn: JWT_EXPIRES_IN });
|
||||
|
||||
// Set JWT as an HTTP-Only cookie
|
||||
// HttpOnly: Prevents client-side JS access (safer against XSS)
|
||||
// Secure: Transmit cookie only over HTTPS (set to true in production with HTTPS)
|
||||
// SameSite: Controls cross-site request behavior ('Strict' or 'Lax' recommended)
|
||||
res.cookie('token', token, {
|
||||
httpOnly: true,
|
||||
secure: process.env.NODE_ENV === 'production', // Use secure cookies in production
|
||||
maxAge: parseInt(JWT_EXPIRES_IN) * 1000 || 3600000, // Cookie expiry in milliseconds (e.g., 1h)
|
||||
sameSite: 'Lax' // Or 'Strict'
|
||||
});
|
||||
|
||||
console.log(`User logged in: ${user.username}`);
|
||||
// Send success response (client-side JS will redirect)
|
||||
res.status(200).json({ message: 'Login erfolgreich.' });
|
||||
|
||||
} catch (error) {
|
||||
console.error('Login Error:', error);
|
||||
res.status(500).json({ message: 'Serverfehler beim Login.' });
|
||||
}
|
||||
});
|
||||
|
||||
// POST /api/auth/logout - User Logout
|
||||
router.post('/logout', (req, res) => {
|
||||
// Clear the authentication cookie
|
||||
res.clearCookie('token', {
|
||||
httpOnly: true,
|
||||
secure: process.env.NODE_ENV === 'production',
|
||||
sameSite: 'Lax'
|
||||
});
|
||||
console.log('User logged out');
|
||||
res.status(200).json({ message: 'Logout erfolgreich.' });
|
||||
});
|
||||
|
||||
|
||||
module.exports = router;
|
||||
108
routes/todoRoutes.js
Normal file
108
routes/todoRoutes.js
Normal file
@ -0,0 +1,108 @@
|
||||
// routes/todoRoutes.js
|
||||
// Handles CRUD operations for todo items for the logged-in user
|
||||
|
||||
const express = require('express');
|
||||
const db = require('../db');
|
||||
const authenticateToken = require('../middleware/authMiddleware'); // Import auth middleware
|
||||
|
||||
const router = express.Router();
|
||||
|
||||
// All routes in this file require authentication
|
||||
router.use(authenticateToken);
|
||||
|
||||
// GET /api/todos - Get all todos for the logged-in user
|
||||
router.get('/', async (req, res) => {
|
||||
const userId = req.user.id; // Get user ID from the authenticated token payload
|
||||
|
||||
try {
|
||||
const result = await db.query(
|
||||
'SELECT id, task, is_completed FROM todos WHERE user_id = $1 ORDER BY created_at DESC',
|
||||
[userId]
|
||||
);
|
||||
res.status(200).json(result.rows);
|
||||
} catch (error) {
|
||||
console.error('Error fetching todos:', error);
|
||||
res.status(500).json({ message: 'Fehler beim Abrufen der Todos.' });
|
||||
}
|
||||
});
|
||||
|
||||
// POST /api/todos - Create a new todo for the logged-in user
|
||||
router.post('/', async (req, res) => {
|
||||
const userId = req.user.id;
|
||||
const { task } = req.body;
|
||||
|
||||
if (!task || task.trim() === '') {
|
||||
return res.status(400).json({ message: 'Aufgabeninhalt darf nicht leer sein.' });
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await db.query(
|
||||
'INSERT INTO todos (user_id, task) VALUES ($1, $2) RETURNING id, task, is_completed',
|
||||
[userId, task.trim()]
|
||||
);
|
||||
res.status(201).json(result.rows[0]); // Return the newly created todo
|
||||
} catch (error) {
|
||||
console.error('Error creating todo:', error);
|
||||
res.status(500).json({ message: 'Fehler beim Erstellen des Todos.' });
|
||||
}
|
||||
});
|
||||
|
||||
// PUT /api/todos/:id - Update a todo's completion status
|
||||
router.put('/:id', async (req, res) => {
|
||||
const userId = req.user.id;
|
||||
const todoId = parseInt(req.params.id, 10);
|
||||
const { is_completed } = req.body; // Expecting { is_completed: true/false }
|
||||
|
||||
if (isNaN(todoId)) {
|
||||
return res.status(400).json({ message: 'Ungültige Todo ID.' });
|
||||
}
|
||||
if (typeof is_completed !== 'boolean') {
|
||||
return res.status(400).json({ message: 'Ungültiger Statuswert.' });
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await db.query(
|
||||
'UPDATE todos SET is_completed = $1 WHERE id = $2 AND user_id = $3 RETURNING id, task, is_completed',
|
||||
[is_completed, todoId, userId]
|
||||
);
|
||||
|
||||
if (result.rows.length === 0) {
|
||||
// Either todo doesn't exist or doesn't belong to the user
|
||||
return res.status(404).json({ message: 'Todo nicht gefunden oder Zugriff verweigert.' });
|
||||
}
|
||||
|
||||
res.status(200).json(result.rows[0]); // Return the updated todo
|
||||
} catch (error) {
|
||||
console.error('Error updating todo:', error);
|
||||
res.status(500).json({ message: 'Fehler beim Aktualisieren des Todos.' });
|
||||
}
|
||||
});
|
||||
|
||||
// DELETE /api/todos/:id - Delete a todo
|
||||
router.delete('/:id', async (req, res) => {
|
||||
const userId = req.user.id;
|
||||
const todoId = parseInt(req.params.id, 10);
|
||||
|
||||
if (isNaN(todoId)) {
|
||||
return res.status(400).json({ message: 'Ungültige Todo ID.' });
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await db.query(
|
||||
'DELETE FROM todos WHERE id = $1 AND user_id = $2 RETURNING id',
|
||||
[todoId, userId]
|
||||
);
|
||||
|
||||
if (result.rowCount === 0) {
|
||||
// Either todo doesn't exist or doesn't belong to the user
|
||||
return res.status(404).json({ message: 'Todo nicht gefunden oder Zugriff verweigert.' });
|
||||
}
|
||||
|
||||
res.status(200).json({ message: 'Todo erfolgreich gelöscht.' }); // Or use 204 No Content
|
||||
} catch (error) {
|
||||
console.error('Error deleting todo:', error);
|
||||
res.status(500).json({ message: 'Fehler beim Löschen des Todos.' });
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
50
routes/viewRoutes.js
Normal file
50
routes/viewRoutes.js
Normal file
@ -0,0 +1,50 @@
|
||||
// routes/viewRoutes.js
|
||||
// Handles serving the HTML pages
|
||||
|
||||
const express = require('express');
|
||||
const path = require('path');
|
||||
const authenticateToken = require('../middleware/authMiddleware'); // Import auth middleware
|
||||
const jwt = require('jsonwebtoken');
|
||||
require('dotenv').config();
|
||||
|
||||
const router = express.Router();
|
||||
const JWT_SECRET = process.env.JWT_SECRET;
|
||||
|
||||
// Helper function to check if a user is already logged in (valid token exists)
|
||||
const checkAlreadyLoggedIn = (req, res, next) => {
|
||||
const token = req.cookies.token;
|
||||
if (token) {
|
||||
jwt.verify(token, JWT_SECRET, (err, user) => {
|
||||
if (!err && user) {
|
||||
// If token is valid, redirect logged-in users away from login/register pages
|
||||
return res.redirect('/');
|
||||
}
|
||||
// If token is invalid, clear it and proceed
|
||||
res.clearCookie('token');
|
||||
next();
|
||||
});
|
||||
} else {
|
||||
// No token, proceed
|
||||
next();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Serve the main todo app page (index.html) - Requires authentication
|
||||
// The authenticateToken middleware will redirect to /login if not authenticated
|
||||
router.get('/', authenticateToken, (req, res) => {
|
||||
// The user is authenticated, serve the main app page
|
||||
res.sendFile(path.join(__dirname, '..', 'public', 'index.html'));
|
||||
});
|
||||
|
||||
// Serve the login page - If already logged in, redirect to '/'
|
||||
router.get('/login', checkAlreadyLoggedIn, (req, res) => {
|
||||
res.sendFile(path.join(__dirname, '..', 'public', 'login.html'));
|
||||
});
|
||||
|
||||
// Serve the registration page - If already logged in, redirect to '/'
|
||||
router.get('/register', checkAlreadyLoggedIn, (req, res) => {
|
||||
res.sendFile(path.join(__dirname, '..', 'public', 'register.html'));
|
||||
});
|
||||
|
||||
module.exports = router;
|
||||
55
server.js
Normal file
55
server.js
Normal file
@ -0,0 +1,55 @@
|
||||
// server.js
|
||||
// Main application file for the Node.js Express server
|
||||
|
||||
require('dotenv').config(); // Load environment variables first
|
||||
const express = require('express');
|
||||
const path = require('path');
|
||||
const cookieParser = require('cookie-parser');
|
||||
|
||||
// Import route handlers
|
||||
const authRoutes = require('./routes/authRoutes');
|
||||
const todoRoutes = require('./routes/todoRoutes');
|
||||
const viewRoutes = require('./routes/viewRoutes');
|
||||
|
||||
// Initialize Express app
|
||||
const app = express();
|
||||
const PORT = process.env.PORT || 3000;
|
||||
|
||||
// --- Middleware ---
|
||||
|
||||
// Parse JSON request bodies
|
||||
app.use(express.json());
|
||||
// Parse URL-encoded request bodies
|
||||
app.use(express.urlencoded({ extended: true }));
|
||||
// Parse cookies (needed for JWT authentication)
|
||||
app.use(cookieParser());
|
||||
|
||||
// Serve static files (HTML, CSS, JS) from the 'public' directory
|
||||
// Files in 'public' will be accessible directly, e.g., /style.css, /script.js
|
||||
app.use(express.static(path.join(__dirname, 'public')));
|
||||
|
||||
|
||||
// --- Routes ---
|
||||
|
||||
// API routes
|
||||
app.use('/api/auth', authRoutes); // Authentication routes (login, register, logout)
|
||||
app.use('/api/todos', todoRoutes); // Todo CRUD routes (protected by auth middleware inside the router)
|
||||
|
||||
// View routes (serving HTML pages)
|
||||
// These should generally be last, especially the '/' route,
|
||||
// to avoid conflicts with static files or API routes.
|
||||
app.use('/', viewRoutes);
|
||||
|
||||
|
||||
// --- Global Error Handler (Basic Example) ---
|
||||
// Catches errors passed via next(error)
|
||||
app.use((err, req, res, next) => {
|
||||
console.error("Global Error Handler:", err.stack);
|
||||
res.status(500).send('Etwas ist schiefgelaufen!');
|
||||
});
|
||||
|
||||
// --- Start Server ---
|
||||
app.listen(PORT, () => {
|
||||
console.log(`Server läuft auf http://localhost:${PORT}`);
|
||||
// Database connection message is handled in db.js
|
||||
});
|
||||
Reference in New Issue
Block a user