online-energieausweis/src/modules/RegisterModule.svelte

<script lang="ts">
	import { api } from "astro-typesafe-api/client";
	import NotificationWrapper from "#components/Notifications/NotificationWrapper.svelte";
	import { loginClient } from "#lib/login.js";
	import PlzSuche from "#components/PlzSuche.svelte";

	let email: string;
	let vorname: string;
	let name: string;
	let repeatEmail: string;
	let adresse: string;
	let plz: string;
	let ort: string;
	let empfaenger: string;

	export let redirect: string | null = null;

	async function login(e: SubmitEvent) {
		e.preventDefault()

		if (email !== repeatEmail) {
			error = true;
			errorMessage = "Die eingegebenen Email Adressen stimmen nicht überein.";
			return;
		}

		try {
			const { id, passwort } = await api.user.PUT.fetch({
				vorname,
				name, email,
				adresse, plz, ort, empfaenger
			})

			await loginClient(email, passwort)

			if (redirect) {
				window.location.href = redirect
				return
			}

			window.location.href = "/dashboard";
		} catch (e) {
			error = true
			errorMessage = "Sie besitzen bereits ein Konto bei IBC. Bitte loggen Sie sich mit Ihrem Passwort ein oder vergeben sich über “Passwort vergessen” ein neues."
		}
	}

	let error = false;
	let errorMessage = "";
</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">Registrieren</h1>
	<p>Bitte geben sie Email, Ansprechpartner und Adressdaten ein, um einen Account beim IBC zu erstellen, ein Passwort wird ihnen per Email zugesendet, dieses können sie im Nachhinein jederzeit ändern.</p>
	<form class="flex flex-col gap-4 mt-8" on:submit={login}>
		<div class="flex flex-row gap-4 w-full">
			<div class="w-1/2 flex flex-col gap-2">
				<h4>Vorname</h4>
				<input
					type="text"
					placeholder="Vorname"
					name="vorname"
					class="input input-bordered text-base text-base-content font-medium"
					bind:value={vorname}
					required
				/>
			</div>
			<div class="w-1/2 flex flex-col gap-2">
				<h4>Nachname</h4>
				<input
					type="text"
					placeholder="Nachname"
					name="name"
					class="input input-bordered text-base text-base-content font-medium"
					bind:value={name}
					required
				/>
			</div>
		</div>
		<div class="flex flex-row gap-4 w-full">
			<div class="w-1/2 flex flex-col gap-2">
				<h4>Straße</h4>
				<input
					type="text"
					placeholder="Straße"
					name="strasse"
					class="input input-bordered text-base text-base-content font-medium"
					bind:value={adresse}
					required
				/>
			</div>
			<div class="w-1/2 flex flex-col gap-2">
				<h4>PLZ</h4>
				<PlzSuche bind:zip={plz} bind:city={ort} name="plz" readonly={false} />
			</div>
			<div class="w-1/2 flex flex-col gap-2">
				<h4>Ort</h4>
				<input
					type="text"
					placeholder="Ort"
					name="ort"
					class="input input-bordered text-base text-base-content font-medium"
					bind:value={ort}
					required
				/>
			</div>
			
		</div>
		<div class="flex flex-col gap-2">
			<h4>Empfänger</h4>
			<input
				type="text"
				placeholder="Max Mustermann"
				name="empfaenger"
				class="input input-bordered text-base text-base-content font-medium"
				bind:value={empfaenger}
				required
			/>
		</div>
		<div class="flex flex-col gap-2">
			<h4>Email</h4>
			<input
				type="text"
				placeholder="max.mustermann@email.de"
				name="email"
				class="input input-bordered text-base text-base-content font-medium"
				bind:value={email}
				on:keyup={() => (email = email.toLowerCase())}
				required
			/>
		</div>
		<div class="flex flex-col gap-2">
			<h4>Email erneut eingeben</h4>
			<input
				type="text"
				placeholder="max.mustermann@email.de"
				name="email"
				class="input input-bordered text-base text-base-content font-medium"
				bind:value={repeatEmail}
				on:keyup={() => (repeatEmail = repeatEmail.toLowerCase())}
				required
			/>
		</div>
		{#if error}
			<div class="bg-red-200 p-4 rounded-lg w-full">
				<p class="text-red-800">{errorMessage}</p>
			</div>
		{/if}
		<button type="submit" class="button"
		>Registrieren</button>
		<div class="flex flex-row justify-between" style="margin-top: 10px">
			<a class="link link-hover"
				href="/auth/login{redirect ? `?r=${redirect}` : ""}">Einloggen</a
			>
			<a class="link link-hover" href="/auth/passwort-vergessen{redirect ? `?r=${redirect}` : ""}">Passwort Vergessen?</a>
		</div>
	</form>
	<NotificationWrapper></NotificationWrapper>
</div>