<script lang="ts">
	import { addNotification } from "#components/Notifications/index.js";
	import NotificationWrapper from "#components/Notifications/NotificationWrapper.svelte";
	import { api } from "astro-typesafe-api/client";
	
	let passwort: string;
	let passwortWiederholen: string;

	export let token: string;

	let disabled = false;

	async function confirmResetPassword(e: SubmitEvent) {
		e.preventDefault()
		try {
			disabled = true
			await api.auth["passwort-vergessen"].POST.fetch({
				passwort,
				token
			})

			addNotification({
				message: "Passwort zurückgesetzt.",
				subtext: "Ihr Passwort wurde erfolgreich zurückgesetzt, sie werden in kürze zum Login weitergeleitet.",
				type: "success",
				timeout: 0,
				dismissable: true
			})

			setTimeout(() => {
				window.location.href = "/auth/login"
			}, 5000)
		} catch (e) {
			disabled = false
			addNotification({
				message: "Ups...",
				subtext: "Beim zurücksetzen ihres Passworts ist etwas schiefgelaufen, bitte versuchen sie es erneut.",
				type: "error",
				timeout: 0,
				dismissable: true
			})
		}
	}
</script>

<div class="mx-auto w-1/3 bg-base-200 p-8 border border-base-300 rounded-lg">
	<h1 class="text-3xl mb-4">Passwort Zurücksetzen</h1>
	<form class="flex flex-col gap-4" on:submit={confirmResetPassword}>
		<div class="flex flex-col gap-2">
			<h4>Passwort</h4>
			<input
				type="password"
				placeholder="********"
				name="passwort"
				data-test="passwort"
				class="input input-bordered text-base text-base-content font-medium"
				bind:value={passwort}
				{disabled}
				required
			/>
			<h4>Passwort wiederholen</h4>
			<input
				type="password"
				placeholder="********"
				name="passwort_wiederholen"
				data-test="passwort_wiederholen"
				class="input input-bordered text-base text-base-content font-medium"
				bind:value={passwortWiederholen}
				{disabled}
				required
			/>
		</div>
		<button type="submit" class="button" 
				>Passwort zurückzusetzen</button
			>
	</form>
</div>

<NotificationWrapper></NotificationWrapper>