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

feat: improved registration

Browse Source
This commit is contained in:
Philipp Dormann
2025-04-02 22:19:34 +02:00
parent 525c096f7a
commit 6dcdba6568
1 changed files with 36 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
src/routes/Register.svelte
View File

@@ -84,7 +84,7 @@
>
<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"
class="mt-7 bg-white border border-gray-200 rounded-xl shadow-sm dark:bg-gray-800 dark:border-gray-200"
> -->
<div class="p-4 sm:p-7">
<div class="mt-5">
@@ -106,12 +106,15 @@
if (e.keyCode === 13) {
document.getElementById('lastname')?.focus();
}
if (e.keyCode === 40) {
document.getElementById('lastname')?.focus();
}
}}
type="text"
autocomplete="one-time-code"
id="firstname"
name="firstname"
class="py-3 px-4 block w-full border-gray-200 rounded-md focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 border"
class="placeholder:text-black dark:placeholder:text-white py-3 px-4 block w-full border-gray-500 rounded-md focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-200 dark:text-gray-400 border"
required
placeholder="Vorname"
bind:value={firstname}
@@ -150,11 +153,23 @@
<label for="lastname" class="block text-lg font-bold mb-2 sr-only">Nachname</label>
<div class="relative">
<input
on:keydown={(e) => {
console.log(e.keyCode);
if (e.keyCode === 13) {
document.getElementById('email')?.focus();
}
if (e.keyCode === 38) {
document.getElementById('firstname')?.focus();
}
if (e.keyCode === 40) {
document.getElementById('email')?.focus();
}
}}
autocomplete="one-time-code"
type="lastname"
id="lastname"
name="lastname"
class="py-3 px-4 block w-full border-gray-200 rounded-md focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 border"
class="placeholder:text-black dark:placeholder:text-white py-3 px-4 block w-full border-gray-500 rounded-md focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-200 dark:text-gray-400 border"
required
placeholder="Nachname"
aria-describedby="lastname-error"
@@ -190,15 +205,28 @@
<!-- Form Group -->
<div>
<label for="email" class="block text-lg font-bold mb-2 sr-only">E-Mail (optional)</label>
<label for="email" class="block text-lg font-bold mb-2 sr-only"
>E-Mail (optional)</label
>
<div class="relative">
<input
on:keydown={(e) => {
console.log(e.keyCode);
if (e.keyCode === 13) {
document.getElementById('submit')?.focus();
}
if (e.keyCode === 38) {
document.getElementById('lastname')?.focus();
}
if (e.keyCode === 40) {
document.getElementById('submit')?.focus();
}
}}
autocomplete="one-time-code"
type="email"
id="email"
name="email"
class="py-3 px-4 block w-full border-gray-200 rounded-md focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 border"
required
class="placeholder:text-black dark:placeholder:text-white py-3 px-4 block w-full border-gray-500 rounded-md focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-200 dark:text-gray-400 border"
placeholder="E-Mail (optional)"
aria-describedby="lastname-error"
bind:value={email}
@@ -232,6 +260,7 @@
<!-- End Form Group -->
<button
id="submit"
type="submit"
disabled={!firstname || !lastname}
class="py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold disabled:opacity-70 bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all dark:focus:ring-offset-gray-800"
@@ -275,4 +304,4 @@
<!-- </div> -->
</div>
</div>
</div>
</div>