<script lang="ts">
	import { addNotification } from "@ibcornelsen/ui";
	import {client} from "src/trpc";
	
	let passwort: string;
	let passwortWiederholen: string;

	export let token: string;

	async function confirmResetPassword(e: SubmitEvent) {
		e.preventDefault()
		try {
			await client.v1.benutzer.passwortZuruecksetzen.mutate({
				passwort,
				token
			})

			addNotification({
				message: "Passwort zurückgesetzt.",
				subtext: "Ihr Passwort wurde erfolgreich zurückgesetzt, sie können diese Seite nun schließen.",
				type: "success",
				timeout: 0,
				dismissable: true
			})
		} catch (e) {
			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}
				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}
				required
			/>
		</div>
		<button type="submit" class="btn btn-primary" 
				>Passwort zurückzusetzen</button
			>
		<div class="flex-row justify-between" style="margin-top: 10px">
			<a class="link link-hover"
				href="/auth/login">Einloggen</a
			>
		</div>
	</form>
</div>