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

feat: login error handling

Browse source
This commit is contained in:
Sebastian Pravda 2023-01-12 18:24:12 +01:00 committed by EETagent
parent c672780058
commit bceabebd8e
1 changed files with 21 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -12,6 +12,7 @@
let codeValueMobile: string = ''; let codeValueMobile: string = '';
let codeValueArray: Array<string> = []; let codeValueArray: Array<string> = [];
let codeElementArray: Array<HTMLInputElement> = []; let codeElementArray: Array<HTMLInputElement> = [];
let isError: boolean = false;
$: { $: {
codeValueMobile = codeValueMobile.toUpperCase(); codeValueMobile = codeValueMobile.toUpperCase();
@ -19,7 +20,7 @@
console.log(codeValueArray); console.log(codeValueArray);
} }
const inputDesktopOnKeyDown = (index: number, e: KeyboardEvent) => { const inputDesktopOnKeyDown = async (index: number, e: KeyboardEvent) => {
if (e.key === 'Backspace') { if (e.key === 'Backspace') {
codeValueArray[index] = ''; codeValueArray[index] = '';
if (codeElementArray[index - 1]) { if (codeElementArray[index - 1]) {
@ -36,13 +37,16 @@
} }
codeValueMobile = codeValueArray.join(''); codeValueMobile = codeValueArray.join('');
if (codeValueArray.length == 12) { if (codeValueArray.filter((item) => item !== '').length === 12) {
submit(); await submit();
} else {
isError = false;
} }
}; };
const submit = async () => { const submit = async () => {
console.log('submitting: ', codeValueArray);
try { try {
await apiLogin({ applicationId, password: codeValueMobile }); await apiLogin({ applicationId, password: codeValueMobile });
goto('/dashboard'); goto('/dashboard');
@ -55,19 +59,23 @@
'--toastBarBackground': '#7f1d1d' '--toastBarBackground': '#7f1d1d'
} }
}) })
isError = true;
} }
}; };
const onPaste = (e: ClipboardEvent) => { const onPaste = async (e: ClipboardEvent) => {
e.preventDefault(); e.preventDefault();
const text = e.clipboardData?.getData('text/plain'); 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();
} }
submit(); if (codeValueArray.filter((item) => item !== '').length === 12) {
await submit();
}
}; };
onMount(() => { onMount(() => {
@ -92,6 +100,7 @@
{#each [1, 2, 3, 4] as value} {#each [1, 2, 3, 4] as value}
<input <input
class="codeInputDesktop" class="codeInputDesktop"
class:error={isError}
bind:this={codeElementArray[value - 1]} bind:this={codeElementArray[value - 1]}
bind:value={codeValueArray[value - 1]} bind:value={codeValueArray[value - 1]}
on:keydown={(e) => inputDesktopOnKeyDown(value - 1, e)} on:keydown={(e) => inputDesktopOnKeyDown(value - 1, e)}
@ -103,6 +112,7 @@
{#each [5, 6, 7, 8] as value} {#each [5, 6, 7, 8] as value}
<input <input
class="codeInputDesktop" class="codeInputDesktop"
class:error={isError}
bind:this={codeElementArray[value - 1]} bind:this={codeElementArray[value - 1]}
bind:value={codeValueArray[value - 1]} bind:value={codeValueArray[value - 1]}
on:keydown={(e) => inputDesktopOnKeyDown(value - 1, e)} on:keydown={(e) => inputDesktopOnKeyDown(value - 1, e)}
@ -114,6 +124,7 @@
{#each [9, 10, 11, 12] as value} {#each [9, 10, 11, 12] as value}
<input <input
class="codeInputDesktop" class="codeInputDesktop"
class:error={isError}
bind:this={codeElementArray[value - 1]} bind:this={codeElementArray[value - 1]}
bind:value={codeValueArray[value - 1]} bind:value={codeValueArray[value - 1]}
on:keydown={(e) => inputDesktopOnKeyDown(value - 1, e)} on:keydown={(e) => inputDesktopOnKeyDown(value - 1, e)}
@ -130,6 +141,9 @@
</FullLayout> </FullLayout>
<style lang="postcss"> <style lang="postcss">
.error {
@apply border-red-700;
}
.modal { .modal {
@apply flex flex-col items-center justify-center; @apply flex flex-col items-center justify-center;
@apply mx-auto my-auto; @apply mx-auto my-auto;
@ -152,6 +166,6 @@
.codeInputDesktop { .codeInputDesktop {
@apply hidden; @apply hidden;
@apply mr-1 md:mr-2; @apply mr-1 md:mr-2;
@apply sm:h-15 2xl:w-18 2xl:h-22 sm:w-12 sm:text-xl md:block md:h-20 md:w-16 md:text-4xl xl:h-20 xl:w-16 xl:p-0; @apply sm:h-15 2xl:w-18 2xl:h-22 sm:w-12 sm:text-xl xl:text-2xl md:block md:h-20 md:w-16 md:text-4xl xl:h-20 xl:w-16 xl:p-0;
} }
</style> </style>