make error toast global in admin routes

package-lock.json

@@ -29,7 +29,7 @@
 				"eslint-config-prettier": "^8.5.0",
 				"eslint-plugin-svelte": "^2.30.0",
 				"postcss": "^8.4.27",
-				"prettier": "^2.8.0",
+				"prettier": "^2.8.8",
 				"prettier-plugin-svelte": "^2.10.1",
 				"sass": "^1.66.1",
 				"svelte": "^4.0.5",

package.json

@@ -26,7 +26,7 @@
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte": "^2.30.0",
 		"postcss": "^8.4.27",
-		"prettier": "^2.8.0",
+		"prettier": "^2.8.8",
 		"prettier-plugin-svelte": "^2.10.1",
 		"sass": "^1.66.1",
 		"svelte": "^4.0.5",

src/lib/stores.ts

@@ -4,5 +4,16 @@ import { writable } from 'svelte/store';
 
 export const playAudio: Writable<boolean> = persisted('playAudio', false);
 
+export const errorMessage: Writable<string | null> = (() => {
+	const store: Writable<string | null> = writable(null);
+	return {
+		subscribe: store.subscribe,
+		set: (value) => {
+			if (value != null) store.set(null);
+			store.set(value);
+		},
+		update: store.update
+	};
+})();
 export const reportCount: Writable<number> = writable(0);
 export const adminCount: Writable<number> = writable(0);

src/routes/admin/+layout.svelte

@@ -5,7 +5,8 @@
 	import { buttonTriggeredRequest } from '$lib/components/utils';
 	import { goto } from '$app/navigation';
 	import type { LayoutData } from './$types';
-	import { adminCount, reportCount } from '$lib/stores';
+	import { adminCount, errorMessage, reportCount } from '$lib/stores';
+	import ErrorToast from '$lib/components/Toast/ErrorToast.svelte';
 
 	async function logout() {
 		const response = await fetch(`${env.PUBLIC_BASE_PATH}/admin/logout`, {
@@ -21,6 +22,8 @@
 	export let data: LayoutData;
 	if (data.reportCount) $reportCount = data.reportCount;
 	if (data.adminCount) $adminCount = data.adminCount;
+
+	errorMessage.subscribe(console.log);
 </script>
 
 {#if $page.url.pathname !== `${env.PUBLIC_BASE_PATH}/admin/login`}
@@ -71,3 +74,9 @@
 		<slot />
 	</div>
 {/if}
+
+{#if $errorMessage}
+	<ErrorToast timeout={2000} show={$errorMessage != null}>
+		<span>{$errorMessage}</span>
+	</ErrorToast>
+{/if}

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

@@ -1,13 +1,13 @@
 <script lang="ts">
 	import Input from '$lib/components/Input/Input.svelte';
 	import { env } from '$env/dynamic/public';
-	import ErrorToast from '$lib/components/Toast/ErrorToast.svelte';
 	import { goto } from '$app/navigation';
+	import { errorMessage } from '$lib/stores';
 
 	let passwordValue: string;
 	async function login() {
 		// eslint-disable-next-line no-async-promise-executor
-		loginRequest = new Promise(async (resolve, reject) => {
+		loginRequest = new Promise(async (resolve) => {
 			const response = await fetch(`${env.PUBLIC_BASE_PATH}/admin/login`, {
 				method: 'POST',
 				body: new FormData(document.forms[0])
@@ -15,21 +15,18 @@
 			if (response.ok) {
 				await goto(`${env.PUBLIC_BASE_PATH}/admin`, { invalidateAll: true });
 				resolve();
-			} else if (response.status == 403) {
+			} else if (response.status == 401) {
 				passwordValue = '';
-				showError = true;
-				errorToastElement.reset();
+				$errorMessage = 'Nutzername oder Passwort falsch';
 				resolve();
 			} else {
-				reject(Error(`${response.statusText} (${response.status})`));
+				$errorMessage = `${response.statusText} (${response.status})`;
 			}
 			loginRequest = null;
 		});
 	}
 
 	let loginRequest: Promise<void> | null = null;
-	let showError = false;
-	let errorToastElement: ErrorToast;
 </script>
 
 <div class="card px-14 py-6 shadow-lg">
@@ -82,7 +79,3 @@
 		</div>
 	</form>
 </div>
-
-<ErrorToast timeout={2000} bind:show={showError} bind:this={errorToastElement}>
-	<span>Nutzername oder Passwort falsch</span>
-</ErrorToast>