dan/Portfolio
1
0
Fork 0
mirror of https://github.com/danbulant/Portfolio synced 2026-05-27 14:02:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: improve code input experience

Browse source
This commit is contained in:
EETagent 2022-11-20 14:10:08 +01:00
parent b066ddb5b4
commit ecc51dc4d0
1 changed files with 42 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
frontend/src/routes/login/[code=application]/+page.svelte
View file

@ -2,6 +2,25 @@
import FullLayout from '$lib/components/layout/FullLayout.svelte'; import FullLayout from '$lib/components/layout/FullLayout.svelte';
import woman from '$lib/assets/woman.png'; import woman from '$lib/assets/woman.png';
import { onMount } from 'svelte';
let codeValueArray: Array<string> = [];
let codeElementArray: Array<HTMLInputElement> = [];
const inputOnKeyDown = (index: number, e: KeyboardEvent) => {
if (e.key === 'Backspace') {
codeValueArray[index] = '';
} else {
codeValueArray[index] = e.key;
if (codeElementArray[index + 1]) {
codeElementArray[index + 1].focus();
}
}
};
onMount(() => {
codeElementArray[0].focus();
});
</script> </script>
<FullLayout> <FullLayout>
@ -10,19 +29,33 @@
<div class="flex justify-center items-center"> <div class="flex justify-center items-center">
{#each [1, 2, 3, 4] as value} {#each [1, 2, 3, 4] as value}
<input <input
class="mr-2 text-center text-4xl font-semibold text-sspsBlue bg-[#f8fafb] w-16 h-20 shadow-lg p-3 rounded-xl outline-none border transition-colors duration-300 hover:border-sspsBlue border-2" bind:this={codeElementArray[value - 1]}
bind:value={codeValueArray[value - 1]}
on:focus={() => {
const val = codeValueArray[value - 1];
codeValueArray[value - 1] = '';
codeValueArray[value - 1] = val;
}}
on:keydown|preventDefault={(e) => inputOnKeyDown(value - 1, e)}
class="caret-transparent mr-2 text-center text-4xl font-semibold text-sspsBlue bg-[#f8fafb] w-16 h-20 shadow-lg p-3 rounded-xl outline-none border transition-colors duration-300 focus:border-sspsBlue hover:border-sspsBlue border-2"
type="text" type="text"
{value}
/> />
{/each} {/each}
<span class="mr-2 w-8 h-2 bg-sspsBlue"></span> <span class="mr-2 w-8 h-2 bg-sspsBlue" />
{#each [5, 6, 7, 8] as value} {#each [5, 6, 7, 8] as value}
<input <input
class="mr-2 text-center text-4xl font-semibold text-sspsBlue bg-[#f8fafb] w-16 h-20 shadow-lg p-3 rounded-xl outline-none border transition-colors duration-300 hover:border-sspsBlue border-2" bind:this={codeElementArray[value - 1]}
type="text" bind:value={codeValueArray[value - 1]}
{value} on:focus={() => {
/> const val = codeValueArray[value - 1];
{/each} codeValueArray[value - 1] = '';
codeValueArray[value - 1] = val;
}}
on:keydown|preventDefault={(e) => inputOnKeyDown(value - 1, e)}
class="caret-transparent mr-2 text-center text-4xl font-semibold text-sspsBlue bg-[#f8fafb] w-16 h-20 shadow-lg p-3 rounded-xl outline-none border transition-colors duration-300 focus:border-sspsBlue hover:border-sspsBlue border-2"
type="text"
/>
{/each}
</div> </div>
<h3 class="mt-6 text-sspsBlue font-semibold text-xl text-center"> <h3 class="mt-6 text-sspsBlue font-semibold text-xl text-center">
Zadejte 8místný kód pro aktivaci účtu Zadejte 8místný kód pro aktivaci účtu