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

Merge pull request #140 from EETagent/refactor_fix_candidate_password

Browse source 
(frontend) fix candidate password input
This commit is contained in:
Sebastian Pravda 2023-01-13 12:07:55 +01:00 committed by GitHub
commit 5a56fbe352
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 29 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
frontend/src/routes/(candidate)/auth/login/[code=application]/+page.svelte
View file

@ -15,34 +15,34 @@
let isError: boolean = false; let isError: boolean = false;
$: { $: {
codeValueMobile = codeValueMobile.slice(0, 12);
codeValueMobile = codeValueMobile.toUpperCase(); codeValueMobile = codeValueMobile.toUpperCase();
codeValueArray = codeValueMobile.split(''); codeValueArray = codeValueMobile.split('');
console.log(codeValueArray);
} }
const inputDesktopOnKeyDown = async (index: number, e: KeyboardEvent) => { const inputDesktopOnKeyDown = async (index: number, e: KeyboardEvent) => {
if (e.key === 'Backspace') { if (e.key === 'Backspace') {
e.preventDefault();
codeValueArray[index] = ''; codeValueArray[index] = '';
if (codeElementArray[index - 1]) { const prevElement = codeElementArray[index - 1];
codeElementArray[index - 1].focus(); if (prevElement) codeElementArray[index - 1].focus();
}
} else { } else {
if (e.key.length > 1) { if (e.key.length > 1 || e.metaKey || e.ctrlKey) return;
return; e.preventDefault();
}
codeValueArray[index] = e.key.toUpperCase(); codeValueArray[index] = e.key.toUpperCase();
if (codeElementArray[index + 1]) { const nextElement = codeElementArray[index + 1];
codeElementArray[index + 1].focus(); if (nextElement) codeElementArray[index + 1].focus();
}
} }
codeValueMobile = codeValueArray.join(''); codeValueMobile = codeValueArray.join('');
};
if (codeValueArray.filter((item) => item !== '').length === 12) { $: {
await submit(); if (codeValueMobile.length === 12) {
submit();
} else { } else {
isError = false; isError = false;
} }
}; }
const submit = async () => { const submit = async () => {
console.log('submitting: ', codeValueArray); console.log('submitting: ', codeValueArray);
@ -65,16 +65,10 @@
const onPaste = async (e: ClipboardEvent) => { const onPaste = async (e: ClipboardEvent) => {
e.preventDefault(); e.preventDefault();
const text = e.clipboardData?.getData('text/plain').slice(0, 12); const text = e.clipboardData?.getData('text/plain').slice(0, 12);
if (text) { if (text) codeValueMobile = text;
codeValueMobile = text;
codeValueArray = text.split('');
}
for (const el of codeElementArray) { for (const el of codeElementArray) {
el.blur(); el.blur();
} }
if (codeValueArray.filter((item) => item !== '').length === 12) {
await submit();
}
}; };
onMount(() => { onMount(() => {
@ -92,7 +86,7 @@
<FullLayout> <FullLayout>
<div class="modal"> <div class="modal">
<img class="mx-auto" src={woman} alt="" /> <img class="mx-auto" src={woman} alt="Woman Avatar" />
<SvelteToast /> <SvelteToast />
<div class="flex items-center justify-center"> <div class="flex items-center justify-center">
<input <input
@ -101,37 +95,37 @@
type="text" type="text"
class="codeInputMobile" class="codeInputMobile"
/> />
{#each [1, 2, 3, 4] as value} {#each [0, 1, 2, 3] as value}
<input <input
class="codeInputDesktop" class="codeInputDesktop"
class:error={isError} class:error={isError}
bind:this={codeElementArray[value - 1]} bind:this={codeElementArray[value]}
bind:value={codeValueArray[value - 1]} bind:value={codeValueArray[value]}
on:keydown={(e) => inputDesktopOnKeyDown(value - 1, e)} on:keydown={(e) => inputDesktopOnKeyDown(value, e)}
on:paste|preventDefault={(e) => onPaste(e)} on:paste|preventDefault={(e) => onPaste(e)}
type="text" type="text"
/> />
{/each} {/each}
<span class="separater" /> <span class="separater" />
{#each [5, 6, 7, 8] as value} {#each [4, 5, 6, 7] as value}
<input <input
class="codeInputDesktop" class="codeInputDesktop"
class:error={isError} class:error={isError}
bind:this={codeElementArray[value - 1]} bind:this={codeElementArray[value]}
bind:value={codeValueArray[value - 1]} bind:value={codeValueArray[value]}
on:keydown={(e) => inputDesktopOnKeyDown(value - 1, e)} on:keydown={(e) => inputDesktopOnKeyDown(value, e)}
on:paste|preventDefault={(e) => onPaste(e)} on:paste|preventDefault={(e) => onPaste(e)}
type="text" type="text"
/> />
{/each} {/each}
<span class="separater" /> <span class="separater" />
{#each [9, 10, 11, 12] as value} {#each [8, 9, 10, 11] as value}
<input <input
class="codeInputDesktop" class="codeInputDesktop"
class:error={isError} class:error={isError}
bind:this={codeElementArray[value - 1]} bind:this={codeElementArray[value]}
bind:value={codeValueArray[value - 1]} bind:value={codeValueArray[value]}
on:keydown={(e) => inputDesktopOnKeyDown(value - 1, e)} on:keydown={(e) => inputDesktopOnKeyDown(value, e)}
on:paste|preventDefault={(e) => onPaste(e)} on:paste|preventDefault={(e) => onPaste(e)}
type="text" type="text"
/> />
@ -146,7 +140,7 @@
<style lang="postcss"> <style lang="postcss">
.error { .error {
@apply border-red-700; @apply border-red-700 !important;
} }
.modal { .modal {
@apply flex flex-col items-center justify-center; @apply flex flex-col items-center justify-center;
@ -158,7 +152,7 @@
input { input {
@apply text-sspsBlue text-center font-semibold; @apply text-sspsBlue text-center font-semibold;
@apply transition-colors duration-300; @apply transition-colors duration-300;
@apply focus:border-sspsBlue hover:border-sspsBlue rounded-xl border border-2 bg-[#f8fafb] p-3 shadow-lg outline-none md:caret-transparent; @apply focus:border-sspsBlue hover:border-sspsBlue rounded-xl border border-2 bg-[#f8fafb] p-3 shadow-lg outline-none caret-sspsBlueDark
} }
.separater { .separater {
@apply bg-sspsBlue mr-2 hidden h-2 w-8 md:block; @apply bg-sspsBlue mr-2 hidden h-2 w-8 md:block;