60 lines
1.6 KiB
Svelte
60 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import { addNotification } from "@ibcornelsen/ui";
|
|
import { loginClient } from "#lib/login.js";
|
|
|
|
export let navigate: (target: string) => void;
|
|
export let data: { email: string; passwort: string };
|
|
|
|
export let onLogin: (response: Awaited<ReturnType<typeof loginClient>>) => any;
|
|
|
|
async function login(e: SubmitEvent) {
|
|
e.preventDefault()
|
|
const response = await loginClient(data.email, data.passwort)
|
|
|
|
if (response === null) {
|
|
addNotification({
|
|
message: "Ups...",
|
|
subtext: "Das hat leider nicht geklappt, haben sie ihr Passwort und ihre Email Adresse richtig eingegeben?",
|
|
type: "error",
|
|
timeout: 6000,
|
|
dismissable: true
|
|
})
|
|
} else {
|
|
onLogin(response);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<form style="width:50%;margin: 0 auto" on:submit={login} name="login">
|
|
<h1 class="text-2xl font-semibold mb-6">Einloggen</h1>
|
|
<div class="flex flex-col gap-4">
|
|
<div>
|
|
<h4>Email</h4>
|
|
<input
|
|
class="px-2.5 py-1.5 rounded-lg border bg-gray-50"
|
|
type="email"
|
|
placeholder="Email"
|
|
name="email"
|
|
bind:value={data.email}
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h4>Passwort</h4>
|
|
<input
|
|
class="px-2.5 py-1.5 rounded-lg border bg-gray-50"
|
|
type="password"
|
|
placeholder="********"
|
|
name="passwort"
|
|
bind:value={data.passwort}
|
|
required
|
|
/>
|
|
</div>
|
|
<button class="button" type="submit">Einloggen</button>
|
|
<div class="flex flex-row justify-between" style="margin-top: 10px">
|
|
<a on:click={() => navigate("signup")} class="cursor-pointer" name="registrieren">Registrieren</a>
|
|
<a href="/user/passwort_vergessen">Passwort Vergessen?</a>
|
|
</div>
|
|
</div>
|
|
</form>
|