feat: improved registration
This commit is contained in:
parent
525c096f7a
commit
6dcdba6568
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user