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

show modal on rules popup when clicking on button in the first 30 seconds
All checks were successful
delpoy / build-and-deploy (push) Successful in 43s
Details

Browse Source
This commit is contained in:
bytedream 2023-11-30 21:01:20 +01:00
parent 9725cac44b
commit 5a31406a1c
1 changed files with 26 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,7 +38,7 @@
async function sendRegister() { async function sendRegister() {
// eslint-disable-next-line no-async-promise-executor // eslint-disable-next-line no-async-promise-executor
registerRequest = new Promise(async (resolve, reject) => { registerRequest = new Promise<void>(async (resolve, reject) => {
console.log(birthdayInput.valueAsDate); console.log(birthdayInput.valueAsDate);
if ( if (
(birthdayInput.valueAsDate || new Date()) > (birthdayInput.valueAsDate || new Date()) >
@ -64,6 +64,9 @@
} else { } else {
reject(Error(`${response.statusText} (${response.status})`)); reject(Error(`${response.statusText} (${response.status})`));
} }
}).catch((e) => {
errorMessage = (e as Error).message;
registerRequest = null;
}); });
} }
@ -74,6 +77,8 @@
let inputsInvalidMessage: string | null = 'Bitte fülle alle erforderlichen Felder aus'; let inputsInvalidMessage: string | null = 'Bitte fülle alle erforderlichen Felder aus';
let registerRequest: Promise<void> | null = null; let registerRequest: Promise<void> | null = null;
let errorMessage: string = '';
</script> </script>
<h1 class="text-center text-3xl lg:text-5xl">Anmeldung</h1> <h1 class="text-center text-3xl lg:text-5xl">Anmeldung</h1>
@ -218,21 +223,6 @@
<span <span
class="relative top-[calc(50%-12px)] left-[calc(50%-12px)] row-[1] col-[1] loading loading-ring" class="relative top-[calc(50%-12px)] left-[calc(50%-12px)] row-[1] col-[1] loading loading-ring"
/> />
{:catch error}
<dialog
class="modal"
on:close={() => setTimeout(() => (registerRequest = null), 200)}
open
>
<form method="dialog" class="modal-box">
<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
<h3 class="font-bold text-lg">Fehler</h3>
<p class="py-4">{error.message}</p>
</form>
<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.2)]">
<button>close</button>
</form>
</dialog>
{/await} {/await}
{/if} {/if}
{/key} {/key}
@ -275,6 +265,7 @@
<span class="block w-full h-[1px] mx-auto mb-1 bg-gray-600" /> <span class="block w-full h-[1px] mx-auto mb-1 bg-gray-600" />
{/each} {/each}
</div> </div>
<!-- svelte-ignore a11y-no-static-element-interactions a11y-click-events-have-key-events -->
<div <div
class="relative w-min" class="relative w-min"
title={rulesModalSecondsOpened < 30 title={rulesModalSecondsOpened < 30
@ -283,6 +274,12 @@
0 0
)} Sekunden akzeptiert werden` )} Sekunden akzeptiert werden`
: ''} : ''}
on:click={() => {
if (rulesModalSecondsOpened < 30) {
errorMessage =
'Bitte lies die Regeln aufmerksam durch. Du kannst erst in einigen Sekunden fortfahren.';
}
}}
> >
<div class="absolute top-0 left-0 h-full w-full overflow-hidden rounded-lg"> <div class="absolute top-0 left-0 h-full w-full overflow-hidden rounded-lg">
<div <div
@ -309,3 +306,16 @@
<button>close</button> <button>close</button>
</form> </form>
</dialog> </dialog>
{#if errorMessage}
<dialog class="modal" on:close={() => setTimeout(() => (errorMessage = ''), 200)} open>
<form method="dialog" class="modal-box z-50">
<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
<h3 class="font-bold text-lg">Achtung</h3>
<p class="py-4">{errorMessage}</p>
</form>
<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.2)]">
<button>close</button>
</form>
</dialog>
{/if}