add confirmation popups to admin interface

src/routes/admin/admin/+page.svelte

@@ -8,9 +8,12 @@
 	import { goto } from '$app/navigation';
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	import { adminCount } from '$lib/stores';
+	import { getPopupModalShowFn } from '$lib/context';
 
 	let { data } = $props();
 
+	let showPopupModal = getPopupModalShowFn();
+
 	let admins = $state(data.admins);
 
 	let allPermissionBadges = {
@@ -136,6 +139,13 @@
 								<button
 									class="btn btn-sm btn-square"
 									onclick={async (e) => {
+										showPopupModal({
+											title: 'Speichern',
+											text: `Sollen die Änderungen für den Admin '${admin.username}' gespeichert werden?`,
+											actions: [
+												{
+													text: 'Speichern',
+													action: async () => {
 														await buttonTriggeredRequest(
 															e,
 															updateAdmin(
@@ -147,6 +157,11 @@
 														);
 														admin.password = '';
 														admin.edit = false;
+													}
+												},
+												{ text: 'Abbrechen' }
+											]
+										});
 									}}
 								>
 									<Check size="18" />
@@ -156,8 +171,29 @@
 								<button
 									class="btn btn-sm btn-square"
 									onclick={() => {
+										if (
+											admin.username === admin.before.username &&
+											admin.password === admin.before.password &&
+											JSON.stringify(admin.permissions) === JSON.stringify(admin.before.permissions)
+										) {
+											admin.edit = false;
+											return;
+										}
+
+										showPopupModal({
+											title: 'Abbrechen',
+											text: 'Soll die Adminbearbeitung abgebrochen werden?',
+											actions: [
+												{
+													text: 'Abbrechen',
+													action: () => {
 														admin.edit = false;
 														admins[i] = admin.before;
+													}
+												},
+												{ text: 'Schließen' }
+											]
+										});
 									}}
 								>
 									<NoSymbol size="18" />
@@ -178,7 +214,19 @@
 							<span class="w-min" class:cursor-not-allowed={!permissions.admin()}>
 								<button
 									class="btn btn-sm btn-square"
-									onclick={(e) => buttonTriggeredRequest(e, deleteAdmin(admin.id))}
+									onclick={(e) => {
+										showPopupModal({
+											title: 'Admin löschen',
+											text: `Soll der Admin ${admin.username} wirklich gelöscht werden?`,
+											actions: [
+												{
+													text: 'Löschen',
+													action: () => buttonTriggeredRequest(e, deleteAdmin(admin.id))
+												},
+												{ text: 'Abbrechen' }
+											]
+										});
+									}}
 								>
 									<Trash size="18" />
 								</button>
@@ -199,13 +247,29 @@
 						class="btn btn-sm btn-square"
 						disabled={!newAdminUsername || !newAdminPassword}
 						onclick={async (e) => {
+							showPopupModal({
+								title: 'Admin hinzugügen',
+								text: `Soll der neue Admin ${newAdminUsername} hinzugefügt werden?`,
+								actions: [
+									{
+										text: 'Hinzufügen',
+										action: async () => {
 											await buttonTriggeredRequest(
 												e,
-								addAdmin(newAdminUsername, newAdminPassword, new Permissions(newAdminPermissions))
+												addAdmin(
+													newAdminUsername,
+													newAdminPassword,
+													new Permissions(newAdminPermissions)
+												)
 											);
 											newAdminUsername = '';
 											newAdminPassword = '';
 											newAdminPermissions = [];
+										}
+									},
+									{ text: 'Abbrechen' }
+								]
+							});
 						}}
 					>
 						<UserPlus size="18" />

src/routes/admin/users/+page.svelte

@@ -11,6 +11,9 @@
 	import SortableTh from '$lib/components/Table/SortableTh.svelte';
 	import NewUserModal from './NewUserModal.svelte';
 	import PaginationTableBody from '$lib/components/PaginationTable/PaginationTableBody.svelte';
+	import { getPopupModalShowFn } from '$lib/context';
+
+	let showPopupModal = getPopupModalShowFn();
 
 	let users: (typeof User.prototype.dataValues)[] = $state([]);
 	let usersPerRequest = 25;
@@ -154,8 +157,20 @@
 									<button
 										class="btn btn-sm btn-square"
 										onclick={async (e) => {
+											showPopupModal({
+												title: 'Speichern',
+												text: `Sollen die Änderungen für den Nutzer '${user.username}' gespeichert werden?`,
+												actions: [
+													{
+														text: 'Speichern',
+														action: async () => {
 															await buttonTriggeredRequest(e, updateUser(user));
 															user.edit = false;
+														}
+													},
+													{ text: 'Abbrechen' }
+												]
+											});
 										}}
 									>
 										<Check size="18" />
@@ -163,8 +178,34 @@
 									<button
 										class="btn btn-sm btn-square"
 										onclick={() => {
+											if (
+												user.firstname === user.before.firstname &&
+												user.lastname === user.before.lastname &&
+												user.birthday === user.before.birthday &&
+												user.telephone === user.before.telephone &&
+												user.username === user.before.username &&
+												user.playertype === user.before.playertype &&
+												user.password === user.before.password &&
+												user.uuid === user.before.uuid
+											) {
+												user.edit = false;
+												return;
+											}
+
+											showPopupModal({
+												title: 'Abbrechen',
+												text: 'Soll die Nutzerbearbeitung abgebrochen werden?',
+												actions: [
+													{
+														text: 'Abbrechen',
+														action: () => {
 															user.edit = false;
 															users[i] = user.before;
+														}
+													},
+													{ text: 'Schließen' }
+												]
+											});
 										}}
 									>
 										<NoSymbol size="18" />
@@ -181,7 +222,19 @@
 									</button>
 									<button
 										class="btn btn-sm btn-square"
-										onclick={(e) => buttonTriggeredRequest(e, deleteUser(user.id))}
+										onclick={(e) => {
+											showPopupModal({
+												title: 'Nutzer löschen',
+												text: `Soll der Nutzer '${user.username}' wirklich gelöscht werden?`,
+												actions: [
+													{
+														text: 'Löschen',
+														action: () => buttonTriggeredRequest(e, deleteUser(user.id))
+													},
+													{ text: 'Abbrechen' }
+												]
+											});
+										}}
 									>
 										<Trash size="18" />
 									</button>