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