From 332089228e3fab97c6c339f5885132da3368141d Mon Sep 17 00:00:00 2001
From: bytedream <bytedream@protonmail.com>
Date: Mon, 2 Dec 2024 21:27:13 +0100
Subject: [PATCH] add confirmation popups to admin interface

---
 src/routes/admin/admin/+page.svelte | 106 ++++++++++++++++++++++------
 src/routes/admin/users/+page.svelte |  63 +++++++++++++++--
 2 files changed, 143 insertions(+), 26 deletions(-)

diff --git a/src/routes/admin/admin/+page.svelte b/src/routes/admin/admin/+page.svelte
index 7134221..4797198 100644
--- a/src/routes/admin/admin/+page.svelte
+++ b/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,17 +139,29 @@
 								<button
 									class="btn btn-sm btn-square"
 									onclick={async (e) => {
-										await buttonTriggeredRequest(
-											e,
-											updateAdmin(
-												admin.id,
-												admin.username,
-												admin.password,
-												new Permissions(admin.permissions)
-											)
-										);
-										admin.password = '';
-										admin.edit = false;
+										showPopupModal({
+											title: 'Speichern',
+											text: `Sollen die Änderungen für den Admin '${admin.username}' gespeichert werden?`,
+											actions: [
+												{
+													text: 'Speichern',
+													action: async () => {
+														await buttonTriggeredRequest(
+															e,
+															updateAdmin(
+																admin.id,
+																admin.username,
+																admin.password,
+																new Permissions(admin.permissions)
+															)
+														);
+														admin.password = '';
+														admin.edit = false;
+													}
+												},
+												{ text: 'Abbrechen' }
+											]
+										});
 									}}
 								>
 									<Check size="18" />
@@ -156,8 +171,29 @@
 								<button
 									class="btn btn-sm btn-square"
 									onclick={() => {
-										admin.edit = false;
-										admins[i] = admin.before;
+										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) => {
-							await buttonTriggeredRequest(
-								e,
-								addAdmin(newAdminUsername, newAdminPassword, new Permissions(newAdminPermissions))
-							);
-							newAdminUsername = '';
-							newAdminPassword = '';
-							newAdminPermissions = [];
+							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)
+												)
+											);
+											newAdminUsername = '';
+											newAdminPassword = '';
+											newAdminPermissions = [];
+										}
+									},
+									{ text: 'Abbrechen' }
+								]
+							});
 						}}
 					>
 						<UserPlus size="18" />
diff --git a/src/routes/admin/users/+page.svelte b/src/routes/admin/users/+page.svelte
index 346b68c..f9ca1d5 100644
--- a/src/routes/admin/users/+page.svelte
+++ b/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) => {
-											await buttonTriggeredRequest(e, updateUser(user));
-											user.edit = false;
+											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={() => {
-											user.edit = false;
-											users[i] = user.before;
+											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>