cologne-furmeet-reg/src/lib/components/EventRegisterButton.svelte
2025-02-11 00:59:46 +01:00

39 lines
No EOL
1.4 KiB
Svelte

<script>
import {useTelegram} from "$lib/telegram.svelte.js";
const { eventId = null } = $props();
const telegram = useTelegram();
let dataPrivacyConsent = $state(false);
let ageConsent = $state(false)
let buttonEnabled = $derived(() => dataPrivacyConsent && ageConsent && telegram?.initData);
</script>
{#if eventId}
{#if telegram?.initData}
<form method="POST" action="?/register">
<input name="init-data" type="hidden" value={telegram?.initData} />
<input name="event-id" type="hidden" value={eventId} />
<div class="form-row">
<label><input type="checkbox" bind:checked={dataPrivacyConsent}> Ich stimme zu das meine Daten bis zu 14 Tagen nach der Veranstaltung beibehalten werden</label>
</div>
<div class="form-row">
<label><input type="checkbox" bind:checked={ageConsent}> Ich bin mindestens 16 Jahre alt oder komme in Begleitung eines Erwachsenen</label>
</div>
<div class="form-row">
<button disabled={!buttonEnabled()}>Anmelden</button>
</div>
</form>
{:else}
<p>Bitte öffne diese Mini App im Telegram Bot um dich anzumelden! <a target="_blank" href="https://t.me/doggoatbot?startapp">Öffnen</a></p>
{/if}
{:else}
<p>Invalide Event-ID</p>
{/if}
<style>
form {
display: flex;
flex-flow: column wrap;
gap: 1rem;
}
</style>