Registrieren zum Speichern

src/modules/EmbeddedRegisterModule.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import { addNotification } from "@ibcornelsen/ui";
+	import { client } from "src/trpc";
+
+	let passwort: string;
+	let email: string;
+	let vorname: string;
+	let name: string;
+
+	async function login() {
+		try {
+			const response = await client.v1.benutzer.erstellen.mutate({
+				email,
+				passwort,
+				vorname,
+				name,
+			});
+
+			window.location.href = "/auth/embedded-login";
+		} catch (e) {
+			addNotification({
+				message: "Ups...",
+				subtext:
+					"Da ist wohl etwas schiefgelaufen... Diese Email Adresse ist bereits in Benutzung, haben sie vielleicht bereits ein Konto bei uns?",
+				type: "error",
+				timeout: 0,
+				dismissable: true,
+			});
+		}
+	}
+</script>
+
+<div style="width:50%;margin: 0 auto">
+	<h1>Registrieren:</h1>
+	<div class="flex flex-col gap-4">
+		<div class="flex flex-row gap-4 w-full">
+			<div class="w-1/2">
+				<h4>Vorname</h4>
+				<input
+					type="text"
+					placeholder="Vorname"
+					class="px-2.5 py-1.5 rounded-lg border bg-gray-50"
+					bind:value={vorname}
+					required
+				/>
+			</div>
+			<div class="w-1/2">
+				<h4>Nachname</h4>
+				<input
+					type="text"
+					placeholder="Nachname"
+					class="px-2.5 py-1.5 rounded-lg border bg-gray-50"
+					bind:value={name}
+					required
+				/>
+			</div>
+		</div>
+		<div>
+			<h4>Email</h4>
+			<input
+				type="text"
+				placeholder="Email"
+				class="px-2.5 py-1.5 rounded-lg border bg-gray-50"
+				bind:value={email}
+				required
+			/>
+		</div>
+		<div>
+			<h4>Passwort</h4>
+			<input
+				type="password"
+				placeholder="********"
+				class="px-2.5 py-1.5 rounded-lg border bg-gray-50"
+				bind:value={passwort}
+				required
+			/>
+		</div>
+		<button class="button" on:click={login}>Registrieren</button>
+		<div class="flex-row justify-between" style="margin-top: 10px">
+			<a href="/auth/embedded-login">Einloggen</a>
+			<a href="/user/passwort_vergessen">Passwort Vergessen?</a>
+		</div>
+	</div>
+</div>