mirror of
https://github.com/phishingclub/phishingclub.git
synced 2026-08-18 08:27:14 +02:00
40 lines
1.2 KiB
Svelte
40 lines
1.2 KiB
Svelte
<script>
|
|
// TODO consider renaming component this to ? as it is more than just an input
|
|
|
|
// props
|
|
export let fieldName = '';
|
|
export let type = 'text';
|
|
export let value = '';
|
|
export let element = {};
|
|
export let submitOnEnter = false; // new prop to control Enter behavior
|
|
</script>
|
|
|
|
<div class="flex flex-col w-full p-4 h-24">
|
|
<label
|
|
for={fieldName}
|
|
class="text-md font-semibold font-titilium text-pc-darkblue dark:text-gray-300"
|
|
>{fieldName}</label
|
|
>
|
|
<input
|
|
bind:this={element}
|
|
on:keyup={(event) => {
|
|
const t = /** @type {HTMLInputElement} */ (event.target);
|
|
value = t.value;
|
|
// If submitOnEnter is true and Enter was pressed, submit the closest form
|
|
if (submitOnEnter && event.key === 'Enter') {
|
|
const form = /** @type {HTMLElement} */ (event.target).closest('form');
|
|
if (form) {
|
|
form.requestSubmit();
|
|
}
|
|
}
|
|
}}
|
|
{value}
|
|
required
|
|
autocomplete="off"
|
|
{type}
|
|
id={fieldName}
|
|
name={fieldName}
|
|
class="w-full p-2 rounded bg-pc-lightblue dark:bg-gray-900/60 dark:border-gray-700/60 dark:text-gray-300 focus:outline-none focus:ring-0 focus:border-cta-blue dark:focus:border-highlight-blue/80 focus:border-2 transition-colors duration-200"
|
|
/>
|
|
</div>
|