94 lines
2.4 KiB
Svelte
94 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import { loginClient } from "#lib/login";
|
|
import CrossCircled from "radix-svelte-icons/src/lib/icons/CrossCircled.svelte";
|
|
import { fade } from "svelte/transition";
|
|
|
|
let email: string;
|
|
let passwort: string;
|
|
|
|
async function login(e: SubmitEvent) {
|
|
console.log(e);
|
|
|
|
e.preventDefault();
|
|
const response = await loginClient(email, passwort);
|
|
|
|
if (response === null) {
|
|
errorHidden = false;
|
|
} else {
|
|
window.location.href = "/dashboard";
|
|
}
|
|
}
|
|
|
|
let errorHidden = true;
|
|
</script>
|
|
|
|
<div
|
|
class="box card"
|
|
>
|
|
<div class="grid">
|
|
<div class="grid grid-cols-[2rem,1fr,1fr]">
|
|
<img
|
|
class="w-6 align-middle"
|
|
src="/images/right-sidebar/UMBE_user-icon.svg"
|
|
alt="user-icon"
|
|
/>
|
|
<h2 class="text-secondary">Kunden Login</h2>
|
|
<div class="justify-self-end text-secondary">
|
|
<a
|
|
class="text-lg font-bold text-box-heading leading-6 no-underline hover:text-primary"
|
|
href="./kontakt">Kontakt</a
|
|
>
|
|
/
|
|
<a
|
|
class="text-lg font-bold text-box-heading leading-6 no-underline hover:text-primary"
|
|
href="./agb">AGB</a
|
|
>
|
|
</div>
|
|
</div>
|
|
<hr class="mb-4" />
|
|
<form on:submit={login}>
|
|
<input
|
|
class="my-1 rounded-md px-2 py-1 ring-1 w-full"
|
|
type="text"
|
|
placeholder="nutzer@email.com"
|
|
name="email"
|
|
bind:value={email}
|
|
on:focus={() => (errorHidden = true)}
|
|
required
|
|
/>
|
|
<input
|
|
class="my-1 rounded-md px-2 py-1 ring-1 w-full"
|
|
type="password"
|
|
minlength="8"
|
|
placeholder="********"
|
|
name="passwort"
|
|
bind:value={passwort}
|
|
on:focus={() => (errorHidden = true)}
|
|
required
|
|
/>
|
|
{#if !errorHidden}
|
|
<div role="alert" class="alert alert-error" in:fade out:fade={{delay: 400}}>
|
|
<CrossCircled size={24} />
|
|
<span class="font-semibold">Das hat leider nicht geklappt, haben sie ihr Passwort und ihre Email Adresse richtig eingegeben?</span>
|
|
</div>
|
|
{/if}
|
|
<button class="my-1 rounded-md px-2 py-1 ring-1 w-full bg-secondary text-white font-bold hover:bg-primary" type="submit">Einloggen</button>
|
|
</form>
|
|
|
|
<div class="grid grid-cols-[1fr,1fr]">
|
|
<a
|
|
class="justify-self-start text-sm font-bold no-underline hover:text-primary"
|
|
href="/auth/signup">Registrieren</a
|
|
>
|
|
<a
|
|
class="justify-self-end text-sm font-bold no-underline hover:text-primary"
|
|
href="/auth/passwort-vergessen">Passwort vergessen</a
|
|
>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
</style> |