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
Signed by: philipp
GPG Key ID: 3BB9ADD52DCA4314
1 changed files with 36 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/routes/Register.svelte
View File

@ -84,7 +84,7 @@
> >
<div class="w-full max-w-md mx-auto p-6"> <div class="w-full max-w-md mx-auto p-6">
<!-- <div <!-- <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="p-4 sm:p-7">
<div class="mt-5"> <div class="mt-5">
@ -106,12 +106,15 @@
if (e.keyCode === 13) { if (e.keyCode === 13) {
document.getElementById('lastname')?.focus(); document.getElementById('lastname')?.focus();
} }
if (e.keyCode === 40) {
document.getElementById('lastname')?.focus();
}
}} }}
type="text" type="text"
autocomplete="one-time-code" autocomplete="one-time-code"
id="firstname" id="firstname"
name="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 required
placeholder="Vorname" placeholder="Vorname"
bind:value={firstname} bind:value={firstname}
@ -150,11 +153,23 @@
<label for="lastname" class="block text-lg font-bold mb-2 sr-only">Nachname</label> <label for="lastname" class="block text-lg font-bold mb-2 sr-only">Nachname</label>
<div class="relative"> <div class="relative">
<input <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" autocomplete="one-time-code"
type="lastname" type="lastname"
id="lastname" id="lastname"
name="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 required
placeholder="Nachname" placeholder="Nachname"
aria-describedby="lastname-error" aria-describedby="lastname-error"
@ -190,15 +205,28 @@
<!-- Form Group --> <!-- Form Group -->
<div> <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"> <div class="relative">
<input <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" autocomplete="one-time-code"
type="email" type="email"
id="email" id="email"
name="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" 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="E-Mail (optional)" placeholder="E-Mail (optional)"
aria-describedby="lastname-error" aria-describedby="lastname-error"
bind:value={email} bind:value={email}
@ -232,6 +260,7 @@
<!-- End Form Group --> <!-- End Form Group -->
<button <button
id="submit"
type="submit" type="submit"
disabled={!firstname || !lastname} 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" 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"