63 lines
1.7 KiB
Svelte
63 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import { fly } from 'svelte/transition';
|
|
import RegistrationComplete from './RegistrationComplete.svelte';
|
|
import Register from './Register.svelte';
|
|
import type { PageData } from './$types';
|
|
|
|
let registered = false;
|
|
let firstname: string | null = null;
|
|
let lastname: string | null = null;
|
|
let birthday: Date | null = null;
|
|
let phone: string | null = null;
|
|
let username: string | null = null;
|
|
let edition: string | null = null;
|
|
|
|
export let data: PageData;
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Craftattack - Anmeldung</title>
|
|
</svelte:head>
|
|
|
|
<!--the tooltip when not all fields are correctly filled won't completely show if the overflow is hidden-->
|
|
<div
|
|
class="relative grid card w-11/12 xl:w-2/3 2xl:w-1/2 p-6 my-12 bg-base-100 shadow-lg h-min"
|
|
class:overflow-hidden={registered}
|
|
>
|
|
{#if !data.enabled}
|
|
<div
|
|
class="absolute top-0 left-0 w-full h-full bg-black bg-opacity-50 backdrop-blur-sm z-50 rounded-xl flex justify-center md:items-center pt-20 md:pt-0"
|
|
>
|
|
<h1 class="text-2xl sm:text-3xl md:text-5xl text-white">Anmeldung geschlossen</h1>
|
|
</div>
|
|
{/if}
|
|
{#if !registered}
|
|
<div class="col-[1] row-[1]" transition:fly={{ x: -200, duration: 300 }}>
|
|
<Register
|
|
on:submit={(e) => {
|
|
registered = true;
|
|
firstname = e.detail.firstname;
|
|
lastname = e.detail.lastname;
|
|
birthday = e.detail.birthday;
|
|
phone = e.detail.phone;
|
|
phone = e.detail.phone;
|
|
username = e.detail.username;
|
|
edition = e.detail.edition;
|
|
}}
|
|
/>
|
|
</div>
|
|
{:else}
|
|
<div class="col-[1] row-[1]" transition:fly={{ x: 200, duration: 300 }}>
|
|
<RegistrationComplete
|
|
{firstname}
|
|
{lastname}
|
|
{birthday}
|
|
{phone}
|
|
{username}
|
|
{edition}
|
|
on:close={() => (registered = false)}
|
|
/>
|
|
</div>
|
|
{/if}
|
|
</div>
|