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

feat: add paste support for code input

Browse source
This commit is contained in:
EETagent 2022-12-03 22:36:09 +01:00
parent 8950f133bf
commit 490258998f
1 changed files with 28 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6,14 +6,12 @@
import { page } from '$app/stores'; import { page } from '$app/stores';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { apiLogin } from '$lib/@api/candidate'; import { apiLogin } from '$lib/@api/candidate';
let applicationId = Number($page.params.code); let applicationId = Number($page.params.code);
let codeValueMobile: string = ''; let codeValueMobile: string = '';
let codeValueArray: Array<string> = []; let codeValueArray: Array<string> = [];
let codeElementArray: Array<HTMLInputElement> = []; let codeElementArray: Array<HTMLInputElement> = [];
$: { $: {
codeValueMobile = codeValueMobile.toUpperCase(); codeValueMobile = codeValueMobile.toUpperCase();
codeValueArray = codeValueMobile.split(''); codeValueArray = codeValueMobile.split('');
@ -35,25 +33,41 @@
codeElementArray[index + 1].focus(); codeElementArray[index + 1].focus();
} }
} }
codeValueMobile = codeValueArray.join('') codeValueMobile = codeValueArray.join('');
}; };
$: if (codeValueArray.length === 8) { $: if (codeValueArray.length === 8) {
submit(); submit();
}; }
async function submit() { async function submit() {
try { try {
await apiLogin({applicationId, password: codeValueMobile}); await apiLogin({ applicationId, password: codeValueMobile });
goto("/dashboard"); goto('/dashboard');
} catch (e) { } catch (e) {
console.error(e); console.error(e);
} }
// alert('ApplicationId: ' + applicationId + '; Password: ' + codeValueMobile); // alert('ApplicationId: ' + applicationId + '; Password: ' + codeValueMobile);
} }
const onPaste = (e: ClipboardEvent) => {
e.preventDefault();
const text = e.clipboardData?.getData('text/plain');
if (text) {
codeValueMobile = text;
}
for (const el of codeElementArray) {
el.blur();
}
};
onMount(() => { onMount(() => {
codeElementArray[0].focus(); codeElementArray[0].focus();
// Document on:paste
document.onpaste = (e: ClipboardEvent) => {
onPaste(e);
};
}); });
</script> </script>
@ -61,18 +75,14 @@
<div class="modal"> <div class="modal">
<img class="mx-auto" src={woman} alt="" /> <img class="mx-auto" src={woman} alt="" />
<div class="flex justify-center items-center"> <div class="flex justify-center items-center">
<input <input bind:value={codeValueMobile} type="text" class="codeInputMobile" />
bind:value={codeValueMobile}
type="text"
class="codeInputMobile"
/>
{#each [1, 2, 3, 4] as value} {#each [1, 2, 3, 4] as value}
<input <input
class="codeInputDesktop" class="codeInputDesktop"
bind:this={codeElementArray[value - 1]} bind:this={codeElementArray[value - 1]}
bind:value={codeValueArray[value - 1]} bind:value={codeValueArray[value - 1]}
on:keydown|preventDefault={(e) => inputDesktopOnKeyDown(value - 1, e)} on:keydown={(e) => inputDesktopOnKeyDown(value - 1, e)}
on:paste|preventDefault={(e) => onPaste(e)}
type="text" type="text"
/> />
{/each} {/each}
@ -82,7 +92,8 @@
class="codeInputDesktop" class="codeInputDesktop"
bind:this={codeElementArray[value - 1]} bind:this={codeElementArray[value - 1]}
bind:value={codeValueArray[value - 1]} bind:value={codeValueArray[value - 1]}
on:keydown|preventDefault={(e) => inputDesktopOnKeyDown(value - 1, e)} on:keydown={(e) => inputDesktopOnKeyDown(value - 1, e)}
on:paste|preventDefault={(e) => onPaste(e)}
type="text" type="text"
/> />
{/each} {/each}