118 lines
3.0 KiB
Svelte
118 lines
3.0 KiB
Svelte
<script lang="ts">
|
|
import { addNotification } from "#components/Notifications/shared.js";
|
|
import { CrossCircled } from "radix-svelte-icons";
|
|
import { fade } from "svelte/transition";
|
|
import { api } from "astro-typesafe-api/client";
|
|
import NotificationWrapper from "#components/Notifications/NotificationWrapper.svelte";
|
|
|
|
let passwort: string;
|
|
let email: string;
|
|
let vorname: string;
|
|
let name: string;
|
|
|
|
export let redirect: string | null = null;
|
|
|
|
async function login(e: SubmitEvent) {
|
|
e.preventDefault()
|
|
if (passwort.length < 8) {
|
|
addNotification({
|
|
message: "Passwort muss mindestens 6 Zeichen enthalten.",
|
|
dismissable: true,
|
|
timeout: 3000,
|
|
type: "error"
|
|
})
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const { id } = await api.user.PUT.fetch({
|
|
email,
|
|
passwort,
|
|
vorname,
|
|
name
|
|
})
|
|
|
|
if (redirect) {
|
|
window.location.href = redirect
|
|
return
|
|
}
|
|
|
|
window.location.href = "/auth/login";
|
|
} catch (e) {
|
|
errorHidden = false;
|
|
}
|
|
}
|
|
|
|
|
|
let errorHidden = 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">Registrieren</h1>
|
|
<form class="flex flex-col gap-4" 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-col gap-2">
|
|
<h4>Email</h4>
|
|
<input
|
|
type="text"
|
|
placeholder="Email"
|
|
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>Passwort</h4>
|
|
<input
|
|
type="password"
|
|
placeholder="********"
|
|
minlength="8"
|
|
name="passwort"
|
|
class="input input-bordered text-base text-base-content font-medium"
|
|
bind:value={passwort}
|
|
required
|
|
/>
|
|
</div>
|
|
{#if !errorHidden}
|
|
<div role="alert" class="alert alert-error" in:fade out:fade={{delay: 400}}>
|
|
<CrossCircled size={24} />
|
|
<span class="font-semibold">Da ist wohl etwas schiefgelaufen. Diese Email Adresse ist bereits in Benutzung, haben sie vielleicht bereits ein Konto bei uns?</span>
|
|
</div>
|
|
{/if}
|
|
<button type="submit" class="button"
|
|
>Registrieren</button
|
|
>
|
|
<div class="flex-row justify-between" style="margin-top: 10px">
|
|
<a class="link link-hover"
|
|
href="/auth/login{redirect ? `?redirect=${redirect}` : ""}">Einloggen</a
|
|
>
|
|
<a class="link link-hover" href="/auth/passwort-vergessen{redirect ? `?redirect=${redirect}` : ""}">Passwort Vergessen?</a>
|
|
</div>
|
|
</form>
|
|
<NotificationWrapper></NotificationWrapper>
|
|
</div> |