add information and verbose back button when registered successfully (#7)
This commit is contained in:
parent
a024dfb626
commit
b932d88990
@ -1,3 +1,3 @@
|
||||
<div class="flex justify-center w-full min-h-full bg-base-200">
|
||||
<div class="flex justify-center w-full min-h-screen bg-base-200">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
@ -5,7 +5,12 @@
|
||||
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>
|
||||
@ -31,13 +36,27 @@
|
||||
<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 {username} on:close={() => (registered = false)} />
|
||||
<RegistrationComplete
|
||||
{firstname}
|
||||
{lastname}
|
||||
{birthday}
|
||||
{phone}
|
||||
{username}
|
||||
{edition}
|
||||
on:close={() => (registered = false)}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@ -49,9 +49,11 @@ export const POST = (async ({ request }) => {
|
||||
if (e instanceof UserNotFoundError) {
|
||||
throw error(
|
||||
400,
|
||||
`Der Spielername '${username}' existiert nicht. Hast Du Deinen Spielernamen korrekt geschrieben und
|
||||
besitzt Du einen Minecraft-Account?\n\nKontaktiere bitte einen Admin, falls Du Dich trotz korrekter
|
||||
Angabe nicht registrieren kannst.`
|
||||
"Der Spielername '" +
|
||||
username +
|
||||
"' existiert nicht. Hast Du Deinen Spielernamen korrekt geschrieben " +
|
||||
'und besitzt Du einen Minecraft-Account?\n\nKontaktiere bitte einen Admin, falls Du Dich trotz korrekter ' +
|
||||
'Angabe nicht registrieren kannst.'
|
||||
);
|
||||
} else if (e instanceof ApiError) {
|
||||
console.error((e as Error).message);
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
import { env } from '$env/dynamic/public';
|
||||
import { rulesShort } from '$lib/rules';
|
||||
import type { HTMLInputAttributes } from 'svelte/elements';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
@ -13,6 +14,7 @@
|
||||
let firstnameInput: HTMLInputElement;
|
||||
let lastnameInput: HTMLInputElement;
|
||||
let birthdayInput: HTMLInputElement;
|
||||
let phoneInput: HTMLInputElement;
|
||||
let usernameInput: HTMLInputElement;
|
||||
let privacyInput: HTMLInputElement;
|
||||
let logsInput: HTMLInputElement;
|
||||
@ -39,7 +41,6 @@
|
||||
async function sendRegister() {
|
||||
// eslint-disable-next-line no-async-promise-executor
|
||||
registerRequest = new Promise<void>(async (resolve, reject) => {
|
||||
console.log(birthdayInput.valueAsDate);
|
||||
if (
|
||||
(birthdayInput.valueAsDate || new Date()) >
|
||||
new Date(Date.now() - 1000 * 60 * 60 * 24 * 365 * 6)
|
||||
@ -57,7 +58,14 @@
|
||||
body: new FormData(document.forms[0])
|
||||
});
|
||||
if (response.ok) {
|
||||
dispatch('submit', { username: usernameInput.value });
|
||||
dispatch('submit', {
|
||||
firstname: firstnameInput.value,
|
||||
lastname: lastnameInput.value,
|
||||
birthday: birthdayInput.valueAsDate,
|
||||
phone: phoneInput.value,
|
||||
username: usernameInput.value,
|
||||
edition: playertype == 'java' ? 'Java (PC)' : 'Bedrock (Konsolen und Handys)'
|
||||
});
|
||||
resolve();
|
||||
} else if (response.status < 500) {
|
||||
reject(Error((await response.json()).message));
|
||||
@ -113,7 +121,13 @@
|
||||
<span slot="label">Geburtstag</span>
|
||||
<span slot="notice">Die Angabe hat keine Auswirkungen auf das Spielgeschehen</span>
|
||||
</Input>
|
||||
<Input id="telephone" name="telephone" type="tel" pattern={new RegExp(/^[+()\s/\d]+$/)}>
|
||||
<Input
|
||||
id="telephone"
|
||||
name="telephone"
|
||||
type="tel"
|
||||
bind:inputElement={phoneInput}
|
||||
pattern={new RegExp(/^[+()\s/\d]+$/)}
|
||||
>
|
||||
<span slot="label">Telefonnummer</span>
|
||||
<p slot="notice">
|
||||
Diese nutzen wir, um Dich in der Whatsapp-Gruppe zuzuordnen und kontaktieren zu können.
|
||||
@ -157,7 +171,9 @@
|
||||
<label for="privacy">
|
||||
<span>
|
||||
Ich bin mit der Speicherung meiner in der Anmeldung angegebenen, persönlichen Daten
|
||||
einverstanden. Siehe <a class="link" href="https://mhsl.eu/id.html">Datenschutz</a>
|
||||
einverstanden. Siehe <a class="link" href="https://mhsl.eu/id.html" target="_blank"
|
||||
>Datenschutz</a
|
||||
>
|
||||
</span>
|
||||
<span class="text-red-700">*</span>
|
||||
</label>
|
||||
|
||||
@ -1,9 +1,15 @@
|
||||
<script lang="ts">
|
||||
import { ChevronLeft } from 'svelte-heros-v2';
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
import { env } from '$env/dynamic/public';
|
||||
import Input from '$lib/components/Input/Input.svelte';
|
||||
import Select from '$lib/components/Input/Select.svelte';
|
||||
|
||||
export let firstname: string;
|
||||
export let lastname: string;
|
||||
export let birthday: Date;
|
||||
export let phone: string | null;
|
||||
export let username: string;
|
||||
export let edition: string;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
@ -41,12 +47,7 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="flex items-center h-12 mb-2">
|
||||
<button class="sm:absolute btn btn-sm btn-square" on:click={() => dispatch('close')}>
|
||||
<ChevronLeft variation="outline" />
|
||||
</button>
|
||||
<h1 class="text-center text-xl sm:text-3xl m-auto">Registrierung erfolgreich</h1>
|
||||
</div>
|
||||
<h1 class="text-center text-xl sm:text-3xl mb-8">Registrierung erfolgreich</h1>
|
||||
<p>
|
||||
<b>Du hast Dich erfolgreich für Craftattack 6 registriert</b>. Spielstart ist am
|
||||
<span class="underline"
|
||||
@ -58,10 +59,29 @@
|
||||
>.
|
||||
</p>
|
||||
<p>Alle weiteren Informationen werden in der Whatsapp-Gruppe bekannt gegeben.</p>
|
||||
<div class="relative flex justify-center w-full h-[200px] my-4">
|
||||
{#if skin}
|
||||
<img class="absolute" src={skin} alt="" />
|
||||
{:else}
|
||||
<span class="loading loading-spinner loading-lg"></span>
|
||||
{/if}
|
||||
<div class="divider" />
|
||||
<div class="flex justify-around mt-2 mb-4">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 w-full sm:w-fit gap-x-4 gap-y-2">
|
||||
<Input value={firstname} size="sm" readonly><span slot="label">Vorname</span></Input>
|
||||
<Input value={lastname} size="sm" readonly><span slot="label">Nachname</span></Input>
|
||||
<Input value={birthday.toISOString().substring(0, 10)} type="date" size="sm" readonly
|
||||
><span slot="label">Geburtstag</span></Input
|
||||
>
|
||||
<Input value={phone} size="sm" readonly><span slot="label">Telefonnummer</span></Input>
|
||||
<Input value={username} size="sm" readonly><span slot="label">Spielername</span></Input>
|
||||
<Select value="edition" size="sm" disabled label="Edition">
|
||||
<option value="edition">{edition}</option>
|
||||
</Select>
|
||||
</div>
|
||||
<div class="relative hidden md:flex justify-center w-[200px] my-4">
|
||||
{#if skin}
|
||||
<img class="absolute" src={skin} alt="" />
|
||||
{:else}
|
||||
<span class="loading loading-spinner loading-lg"></span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider" />
|
||||
<div class="flex justify-center gap-8">
|
||||
<button class="btn" on:click={() => dispatch('close')}>Weitere Person anmelden</button>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user