Merge pull request 'f052_admin_area' (#27) from f052_admin_area into development

Reviewed-on: #27

src/init/init_db.ts

@@ -1,17 +1,18 @@
 import Database from 'better-sqlite3';
-import jsSHA from 'jssha';
+import bcrypt from 'bcrypt';
 
 const db = new Database('./src/lib/data/tatort.db');
 
 let createSQLStmt = `CREATE TABLE IF NOT EXISTS users
         (id INTEGER PRIMARY KEY AUTOINCREMENT,
-            name TEXT NOT NULL,
+            name TEXT NOT NULL UNIQUE,
             pw TEXT NOT NULL)`;
 db.exec(createSQLStmt);
 
 // check if there are any users; if not add one default admin one
 const userPassword = 'A-InnoHUB_2025!';
-const hashedUserPassword = new jsSHA('SHA-512', 'TEXT').update(userPassword).getHash('HEX');
+const saltRounds = 12;
+const hashedUserPassword = bcrypt.hashSync(userPassword, saltRounds);
 const checkInsertSQLStmt = `INSERT INTO users (name, pw) SELECT 'admin', '${hashedUserPassword}'
                     WHERE NOT EXISTS (SELECT * FROM users);`;
 

src/lib/auth.ts

@@ -1,5 +1,5 @@
 import jwt from 'jsonwebtoken';
-import jsSHA from 'jssha';
+import bcrypt from 'bcrypt';
 import { db } from '$lib/server/dbService';
 
 import config from '$lib/config';
@@ -7,7 +7,6 @@ import config from '$lib/config';
 const SECRET = config.jwt.secret;
 const EXPIRES_IN = config.jwt.expiresIn;
 
-
 export function createToken(userData) {
 	return jwt.sign(userData, SECRET, { expiresIn: EXPIRES_IN });
 }
@@ -19,14 +18,16 @@ export function decryptToken(token: string) {
 export function authenticate(user, password) {
 	let JWTToken;
 
-	// hash user password
-	const hashedPW = new jsSHA('SHA-512', 'TEXT').update(password).getHash('HEX');
-
 	const getUserSQLStmt = 'SELECT name, pw FROM users WHERE name = ?';
 	const row = db.prepare(getUserSQLStmt).get(user);
+
+	if (!row) {
+		return null;
+	}
 	const storedPW = row.pw;
 
-	if (hashedPW && hashedPW === storedPW) {
+	const isValid = bcrypt.compareSync(password, storedPW)
+	if (isValid) {
 		JWTToken = createToken({ id: user, admin: true });
 	}
 

src/lib/server/userService.ts

@@ -0,0 +1,51 @@
+import { db } from '$lib/server/dbService';
+
+export const getUsers = (): { userId: string; userName: string }[] => {
+	const getUsersSQLStmt = `SELECT id, name
+													 FROM users;`;
+	const statement = db.prepare(getUsersSQLStmt);
+	const result = statement.all() as { id: string; name: string }[];
+	const userList: { userId: string; userName: string }[] = [];
+
+	for (const resultItem of result) {
+		const user = { userId: resultItem.id, userName: resultItem.name };
+		userList.push(user);
+	}
+
+	return userList;
+};
+
+export const addUser = (userName: string, userPassword: string) => {
+	const addUserSQLStmt = `INSERT into users(name, pw)
+													values (?, ?)`;
+	const statement = db.prepare(addUserSQLStmt);
+
+	let rowInfo;
+	try {
+		rowInfo = statement.run(userName, userPassword);
+		return rowInfo;
+	} catch (error) {
+		console.error('ERROR: ', error);
+	}
+};
+
+export const deleteUser = (userId: string) => {
+	// make sure to not delete the last entry
+	const deleteUserSQLStmt = `DELETE
+														 FROM users
+														 WHERE id = ?
+															 AND (SELECT COUNT(*) FROM users) > 1;`;
+
+	const statement = db.prepare(deleteUserSQLStmt);
+
+	let rowCount;
+	try {
+		const info = statement.run(userId);
+		rowCount = info.changes;
+	} catch (error) {
+		console.log(error);
+		rowCount = 0;
+	}
+
+	return rowCount;
+};

src/routes/(angemeldet)/+page.svelte

@@ -42,6 +42,18 @@
 				<p class="mt-1 text-gray-600">Fügen Sie einem Tatort Bilder hinzu.</p>
 			</div>
 		{/if}
+		<div class="group relative rounded-lg p-6 text-sm leading-6 hover:bg-gray-50 w-1/4">
+			<div
+				class="flex h-11 w-11 items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white"
+			>
+				<FileRect class=" group-hover:text-indigo-600" {outline} />
+			</div>
+			<a href="/user-management" class="mt-6 block font-semibold text-gray-900">
+				Benutzerverwaltung
+				<span class="absolute inset-0"></span>
+			</a>
+			<p class="mt-1 text-gray-600">Füge neue Benutzer hinzu oder entferne welche.</p>
+		</div>
 	</div>
 </div>
 

src/routes/(angemeldet)/user-management/+page.svelte

@@ -0,0 +1,212 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import Button from '$lib/components/Button.svelte';
+
+	import jsSHA from 'jssha';
+
+	const { data } = $props();
+
+	let userName = $state('');
+	let userPassword = $state('');
+	let userList: { userId: string; userName: string }[] = $state([]);
+	let addUserError = $state(false);
+	let addUserSuccess = $state(false);
+	const currentUser: string = data.user.id;
+
+	onMount(async () => {
+		try {
+			userList = await getUsers();
+		} catch (error) {
+			console.log(`An error occured while retrieving users: ${error}`);
+		}
+	});
+
+	async function getUsers() {
+		const URL = '/api/users';
+
+		try {
+			const response = await fetch(URL);
+			return await response.json();
+		} catch (error) {
+			console.log(`Error fetching users: ${error}`);
+			return null;
+		}
+	}
+
+	async function addUser() {
+		if (userName == '') {
+			alert('Der Benutzername darf nicht leer sein.');
+			return;
+		}
+
+		if (userPassword == '') {
+			alert('Das Passwort darf nicht leer sein.');
+			return;
+		}
+
+		const URL = '/api/users';
+		const userData = { userName: userName, userPassword: userPassword };
+
+		try {
+			const response = await fetch(URL, {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify(userData)
+			});
+
+			if (response.ok) {
+				const newUser = await response.json();
+				userList = [...userList, newUser];
+				addUserSuccess = true;
+				resetInput();
+			} else {
+				addUserError = true;
+			}
+		} catch (error) {
+			console.log(`Error creating user: ${error}`);
+			addUserError = true;
+		}
+	}
+
+	function resetInput() {
+		userName = '';
+		userPassword = '';
+		addUserError = false;
+		setInterval(() => {
+			addUserSuccess = false;
+		}, 5000);
+	}
+
+	async function deleteUser(userId: string) {
+		const URL = `/api/users/${userId}`;
+
+		try {
+			const response = await fetch(URL, {
+				method: 'DELETE',
+				headers: {
+					'Content-Type': 'application/json'
+				}
+			});
+
+			if (response.status == 204) {
+				userList = await getUsers();
+			} else {
+				alert('Nutzer konnte nicht gelöscht werden');
+			}
+
+		} catch (error) {
+			console.log(`Error deleting users: ${error}`);
+		}
+	}
+
+</script>
+
+<h1 class="flex justify-center text-3xl md:text-4xl font-bold text-gray-800 dark:text-white tracking-tight mb-4">
+	Benutzerverwaltung
+</h1>
+
+<h1 class="flex justify-center text-lg md:text-xl font-medium text-gray-800 dark:text-white tracking-tight mb-2">
+	Benutzerliste
+</h1>
+
+<div class="w-1/4 mx-auto">
+	<table class="min-w-full border border-gray-300 rounded overflow-hidden">
+		<thead class="bg-gray-100 dark:bg-gray-700">
+		<tr>
+			<th class="text-left px-4 py-2">Benutzername</th>
+			<th class="text-center px-4 py-2">Entfernen</th>
+		</tr>
+		</thead>
+		<tbody>
+		{#each userList as userItem}
+			<tr class="border-t border-gray-200 dark:border-gray-600">
+				<td class="px-4 py-2 text-gray-800 dark:text-white">{userItem.userName}</td>
+				<td class="px-4 py-2 text-center">
+					<button
+						class="text-red-600 hover:text-red-800 focus:outline-none focus:ring-2 focus:ring-red-500 rounded-full p-1 transition"
+						on:click={() => deleteUser(userItem.userId)}
+						aria-label="Delete user"
+					>
+						{#if (userItem.userName != currentUser)}
+							<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24"
+									 stroke="currentColor">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+											d="M6 18L18 6M6 6l12 12" />
+							</svg>
+						{/if}
+					</button>
+				</td>
+			</tr>
+		{/each}
+		</tbody>
+	</table>
+</div>
+
+<h1 style="margin-top: 50px;"
+		class="flex justify-center text-lg md:text-xl font-medium text-gray-800 dark:text-white tracking-tight mb-2">
+	Neuer Nutzer
+</h1>
+
+<div class="mx-auto flex justify-center">
+	<form>
+		<div class="form-group">
+			<label for="username">Benutzername</label>
+			<input bind:value={userName} type="text" id="username" placeholder="Namen eingeben" />
+		</div>
+
+		<div class="form-group">
+			<label for="password">Passwort</label>
+			<input bind:value={userPassword} type="password" id="password" placeholder="Passwort vergeben" />
+		</div>
+	</form>
+</div>
+
+<div class="mx-auto flex flex-col items-center space-y-4" style="margin-top: 20px;">
+	{#if addUserError}
+		<div class="flex items-center bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 rounded shadow-sm"
+				 role="alert">
+			<svg class="h-5 w-5 mr-3 text-yellow-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+					 stroke="currentColor">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+							d="M12 9v2m0 4h.01M12 5a7 7 0 100 14 7 7 0 000-14z" />
+			</svg>
+			<span class="text-sm font-medium">Der Benutzer konnte nicht hinzugefügt werden.</span>
+		</div>
+	{/if}
+	{#if addUserSuccess}
+		<div class="flex items-center bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 rounded shadow-sm"
+				 role="alert">
+			<svg class="h-5 w-5 mr-3 text-yellow-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+					 stroke="currentColor">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+							d="M12 9v2m0 4h.01M12 5a7 7 0 100 14 7 7 0 000-14z" />
+			</svg>
+			<span class="text-sm font-medium">Der Benutzer wurde hinzugefügt.</span>
+		</div>
+	{/if}
+
+	<Button on:click={addUser}>Benutzer hinzufügen</Button>
+</div>
+
+<style>
+    .form-group {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 15px;
+    }
+
+    label {
+        margin-bottom: 5px;
+        font-weight: bold;
+    }
+
+    input[type="text"],
+    input[type="password"] {
+        padding: 8px;
+        font-size: 16px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+    }
+</style>

src/routes/api/users/+server.ts

@@ -0,0 +1,38 @@
+import { json } from '@sveltejs/kit';
+import { addUser, getUsers } from '$lib/server/userService';
+import bcrypt from 'bcrypt';
+
+const saltRounds = 12;
+
+export function GET({ locals }) {
+	if (!locals.user) {
+		return json({ error: 'Unauthorized' }, { status: 401 });
+	}
+
+	const userList = getUsers();
+
+	return new Response(JSON.stringify(userList));
+}
+
+export async function POST({ request, locals }) {
+	if (!locals.user) {
+		return json({ error: 'Unauthorized' }, { status: 401 });
+	}
+
+	const data = await request.json();
+	const userName = data.userName;
+	const userPassword = data.userPassword;
+
+	if (!userName || !userPassword) {
+		return json({ error: 'Missing input' }, { status: 400 });
+	}
+
+	const hashedPassword = bcrypt.hashSync(userPassword, saltRounds);
+	const rowInfo = addUser(userName, hashedPassword);
+
+	if (rowInfo?.changes == 1) {
+		return json({ userId: rowInfo.lastInsertRowid, userName: userName }, { status: 201 });
+	} else {
+		return new Response(null, { status: 400 });
+	}
+}

src/routes/api/users/[user]/+server.ts

@@ -0,0 +1,13 @@
+import { json } from '@sveltejs/kit';
+import { deleteUser } from '$lib/server/userService';
+
+export async function DELETE({ params, locals }) {
+	if (!locals.user) {
+		return json({ error: 'Unauthorized' }, { status: 401 });
+	}
+
+	const userId = params.user;
+	const rowCount = deleteUser(userId);
+
+	return new Response(null, { status: rowCount == 1 ? 204 : 400 });
+}