CraftAttack/website
4
0
Fork 0
Code Issues 3 Pull Requests Actions Wiki Activity

show rules popup when accepting them on register
All checks were successful
delpoy / build-and-deploy (push) Successful in 43s
Details

Browse Source
This commit is contained in:
bytedream
2023-09-26 22:42:11 +02:00
parent ccc022f5f0
commit c57e514613
4 changed files with 211 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/routes/register/Register.svelte
View File

@ -3,6 +3,7 @@
import Input from '$lib/components/Input/Input.svelte';
import { createEventDispatcher, onMount } from 'svelte';
import { env } from '$env/dynamic/public';
import { rules } from '$lib/rules';
const dispatch = createEventDispatcher();
@ -53,6 +54,9 @@
});
}
let rulesAccepted = false;
let rulesModal: HTMLDialogElement | null = null;
let inputsInvalidMessage: string | null = 'Bitte fülle alle erforderlichen Felder aus';
let registerRequest: Promise<void> | null = null;
</script>
@ -169,11 +173,19 @@
name="rules"
type="checkbox"
required={true}
on:input={(e) => {
if (!rulesAccepted) {
e.detail.target.checked = false;
rulesModal.show();
}
}}
bind:inputElement={rulesInput}
/>
<label for="rules">
Ich bin mit den <a class="link" href="{env.PUBLIC_BASE_PATH}/rules">Regeln</a> einverstanden
und achte sie
Ich bin mit den <a target="_blank" class="link" href="{env.PUBLIC_BASE_PATH}/rules"
>Regeln</a
>
einverstanden und achte sie
<span class="text-red-700">*</span>
<br />
<p class="text-[.75rem]">
@ -221,3 +233,50 @@
{/key}
</div>
</form>
<dialog class="modal" bind:this={rulesModal}>
<form method="dialog" class="modal-box flex max-w-[95%] md:max-w-[90%] lg:max-w-[75%]">
<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
<div class="overflow-auto">
<div class="mb-4">
<div class="collapse collapse-arrow">
<input type="checkbox" autocomplete="off" checked />
<div class="collapse-title">
<p>0. Vorwort</p>
</div>
<div class="collapse-content">
<p>{rules.header}</p>
<p class="mt-1 text-[.75rem]">{rules.footer}</p>
</div>
<span class="block w-full h-[1px] mx-auto mb-1 bg-gray-600" />
</div>
{#each rules.sections as section, i}
<div class="collapse collapse-arrow">
<input type="checkbox" autocomplete="off" />
<div class="collapse-title">
<p>{i + 1}. {section.title}</p>
</div>
<div class="collapse-content">
<p>{section.content}</p>
</div>
</div>
<span class="block w-full h-[1px] mx-auto mb-1 bg-gray-600" />
{/each}
</div>
<div>
<Input
id="rules-accept"
type="submit"
value="Akzeptieren"
on:click={() => {
rulesAccepted = true;
rulesInput.checked = true;
}}
/>
</div>
</div>
</form>
<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]">
<button>close</button>
</form>
</dialog>