Registration feedback logic
This commit is contained in:
parent
7cecbfe80e
commit
d3d0d17b3a
|
@ -4,6 +4,7 @@
|
|||
|
||||
$: firstname = '';
|
||||
$: lastname = '';
|
||||
$: accepted = false;
|
||||
$: showResult = false;
|
||||
$: showError = false;
|
||||
|
||||
|
@ -24,6 +25,9 @@
|
|||
showError = true;
|
||||
showResult = false;
|
||||
}
|
||||
firstname = '';
|
||||
lastname = '';
|
||||
accepted = false;
|
||||
}
|
||||
|
||||
function textToBase64Barcode(text: string, is_qrcode: boolean) {
|
||||
|
@ -77,8 +81,9 @@
|
|||
bind:value={firstname}
|
||||
aria-describedby="firstname-error"
|
||||
/>
|
||||
<div
|
||||
class="hidden absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3"
|
||||
<!-- <div
|
||||
class:hidden={firstname || firstname.length != 0}
|
||||
class="absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3"
|
||||
>
|
||||
<svg
|
||||
class="h-5 w-5 text-red-500"
|
||||
|
@ -92,11 +97,15 @@
|
|||
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> -->
|
||||
</div>
|
||||
<p class="hidden text-xs text-red-600 mt-2" id="firstname-error">
|
||||
<!-- <p
|
||||
class:hidden={firstname || firstname.length != 0}
|
||||
class="text-xs text-red-600 mt-2"
|
||||
id="firstname-error"
|
||||
>
|
||||
Bitte gebe deinen Vornamen ein
|
||||
</p>
|
||||
</p> -->
|
||||
</div>
|
||||
<!-- End Form Group -->
|
||||
|
||||
|
@ -113,8 +122,9 @@
|
|||
aria-describedby="lastname-error"
|
||||
bind:value={lastname}
|
||||
/>
|
||||
<div
|
||||
class="hidden absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3"
|
||||
<!-- <div
|
||||
class:hidden={lastname || lastname.length != 0}
|
||||
class="absolute inset-y-0 right-0 flex items-center pointer-events-none pr-3"
|
||||
>
|
||||
<svg
|
||||
class="h-5 w-5 text-red-500"
|
||||
|
@ -128,21 +138,32 @@
|
|||
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> -->
|
||||
</div>
|
||||
<p class="hidden text-xs text-red-600 mt-2" id="lastname-error">
|
||||
<!-- <p
|
||||
class:hidden={lastname || lastname.length != 0}
|
||||
class="text-xs text-red-600 mt-2"
|
||||
id="lastname-error"
|
||||
>
|
||||
Bitte gebe deinen Nachnamen ein
|
||||
</p>
|
||||
</p> -->
|
||||
</div>
|
||||
<!-- End Form Group -->
|
||||
|
||||
<!-- Checkbox -->
|
||||
<div class="flex items-center">
|
||||
<div
|
||||
class="flex items-center"
|
||||
on:click={() => {
|
||||
accepted = !accepted;
|
||||
}}
|
||||
on:keydown={() => {}}
|
||||
>
|
||||
<div class="flex">
|
||||
<input
|
||||
id="remember-me"
|
||||
name="remember-me"
|
||||
type="checkbox"
|
||||
bind:checked={accepted}
|
||||
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>
|
||||
|
@ -159,7 +180,8 @@
|
|||
|
||||
<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"
|
||||
disabled={!firstname || !lastname || !accepted}
|
||||
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 text-sm dark:focus:ring-offset-gray-800"
|
||||
>Anmelden</button
|
||||
>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue