lfk/kiosk
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Basic registration page

Browse Source
This commit is contained in:
Nicolai Ort 2023-04-19 11:35:39 +02:00
parent f98a4fc2b1
commit 09aee15f60
Signed by: niggl
GPG Key ID: 13AFA55AF62F269F
1 changed files with 153 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
src/routes/registration/+page.svelte Normal file
View File

@ -0,0 +1,153 @@
<script lang="ts">
import { RunnerService, type ResponseRunner } from '@odit/lfk-client-js';
$: firstname = '';
$: lastname = '';
$: showResult = true;
$: showError = false;
let response: ResponseRunner;
const group = 1; //Default to Bürgerlauf
async function register() {
try {
response = (await RunnerService.runnerControllerPost({
firstname,
lastname,
group
})) as ResponseRunner;
showError = false;
} catch (error) {
console.log(error);
showError = true;
}
}
</script>
<div class="dark:bg-slate-900 bg-gray-100 flex h-full items-center py-16">
<div class="w-full max-w-md mx-auto p-6">
<div
class="mt-7 bg-white border border-gray-200 rounded-xl shadow-sm dark:bg-gray-800 dark:border-gray-700"
>
<div class="p-4 sm:p-7">
<div class="text-center">
<h1 class="block text-2xl font-bold text-gray-800 dark:text-white">Registrierung</h1>
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Melde dich für den LfK an</p>
</div>
<div class="mt-5">
<!-- Form -->
{#if !showResult}
<form on:submit|preventDefault={register}>
<div class="grid gap-y-4">
<!-- Form Group -->
<div>
<label for="firstname" class="block text-sm mb-2 dark:text-white">Vorname</label>
<div class="relative">
<input
type="text"
id="firstname"
name="firstname"
class="py-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400"
required
bind:value={firstname}
aria-describedby="firstname-error"
/>
<div
class="hidden absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3"
>
<svg
class="h-5 w-5 text-red-500"
width="16"
height="16"
fill="currentColor"
viewBox="0 0 16 16"
aria-hidden="true"
>
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"
/>
</svg>
</div>
</div>
<p class="hidden text-xs text-red-600 mt-2" id="firstname-error">
Bitte gebe deinen Vornamen ein
</p>
</div>
<!-- End Form Group -->
<!-- Form Group -->
<div>
<label for="lastname" class="block text-sm mb-2 dark:text-white">Nachname</label>
<div class="relative">
<input
type="lastname"
id="lastname"
name="lastname"
class="py-3 px-4 block w-full border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400"
required
aria-describedby="lastname-error"
bind:value={lastname}
/>
<div
class="hidden absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3"
>
<svg
class="h-5 w-5 text-red-500"
width="16"
height="16"
fill="currentColor"
viewBox="0 0 16 16"
aria-hidden="true"
>
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"
/>
</svg>
</div>
</div>
<p class="hidden text-xs text-red-600 mt-2" id="lastname-error">
Bitte gebe deinen Nachnamen ein
</p>
</div>
<!-- End Form Group -->
<!-- Checkbox -->
<div class="flex items-center">
<div class="flex">
<input
id="remember-me"
name="remember-me"
type="checkbox"
class="shrink-0 mt-0.5 border-gray-200 rounded text-blue-600 pointer-events-none focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800"
/>
</div>
<div class="ml-3">
<label for="remember-me" class="text-sm dark:text-white"
>Ich habe die <a
class="text-blue-600 decoration-2 hover:underline font-medium"
href="https://lauf-fuer-kaya.de/datenschutz">Datenschutzerklärung</a
> gelesen und aktzeptiert</label
>
</div>
</div>
<!-- End Checkbox -->
<button
type="submit"
class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800"
>Anmelden</button
>
</div>
</form>
<!-- End Form -->
{:else}
<p class="block text-lg mb-2 dark:text-white">ID: {response.id}</p>
<p class="block text-lg mb-2 dark:text-white">Vorname: {response.firstname}</p>
<p class="block text-lg mb-2 dark:text-white">Nachname: {response.lastname}</p>
{/if}
</div>
</div>
</div>
</div>
</div>