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: code & login form improvements

Browse source
This commit is contained in:
EETagent 2022-11-20 14:48:53 +01:00
parent ee9baf0a03
commit 63e6c64f4b
3 changed files with 59 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/lib/components/layout/SplitLayout.svelte
View file

@ -44,7 +44,7 @@
}
.view {
@apply z-10 overflow-scroll;
@apply rounded-lg md:rounded-none;
@apply rounded-3xl md:rounded-none;
@apply absolute w-[90vw] h-[85vh] top-0 md:top-auto right-0 bottom-0 md:bottom-auto left-0 md:left-auto m-auto md:m-0;
@apply md:w-[50vw] md:h-screen;
@apply md:my-auto;

16
frontend/src/routes/login/+page.svelte
View file

@ -1,6 +1,17 @@
<script lang="ts">
import { goto } from '$app/navigation';
import lev from '$lib/assets/logo/lev.png';
import SplitLayout from '$lib/components/layout/SplitLayout.svelte';
let applicationValue = '';
const redirectToCode = () => {
// TODO: Validation
if (applicationValue) {
goto(`/login/${applicationValue}`);
}
};
</script>
<SplitLayout>
@ -15,11 +26,13 @@
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit.
</p>
<input
bind:value={applicationValue}
class="bg-[#f8fafb] mt-8 w-3/5 shadow-lg p-3 rounded-lg text-xl outline-none border transition-colors duration-300 hover:border-sspsBlue border-2"
type="password"
type="number"
placeholder="Ev. číslo"
/>
<input
on:click={redirectToCode}
class="mt-8 w-3/5 p-3 rounded-lg font-semibold text-xl transition-colors duration-300 bg-sspsBlue hover:bg-sspsBlueDark text-white"
type="submit"
value="Odeslat"
@ -29,7 +42,6 @@
<style>
.form {
@apply flex flex-col;
@apply mx-auto w-[90%] h-full;
@apply items-center justify-center;

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

@ -4,18 +4,37 @@
import woman from '$lib/assets/woman.png';
import { onMount } from 'svelte';
let codeValueMobile: string = '';
let codeValueArray: Array<string> = [];
let codeElementArray: Array<HTMLInputElement> = [];
const inputOnKeyDown = (index: number, e: KeyboardEvent) => {
const inputMobileOnKeyDown = (event: KeyboardEvent) => {
let input = event.target as HTMLInputElement;
if (input.value.length > 8) {
input.value = input.value.slice(0, 8);
}
let splittedInput = input.value.split('');
codeValueArray = splittedInput;
};
const inputDesktopOnKeyDown = (index: number, e: KeyboardEvent) => {
if (e.key === 'Backspace') {
codeValueArray[index] = '';
if (codeElementArray[index - 1]) {
codeElementArray[index - 1].focus();
}
} else {
if (e.key.length > 1) {
return;
}
codeValueArray[index] = e.key;
if (codeElementArray[index + 1]) {
codeElementArray[index + 1].focus();
}
}
codeValueMobile = codeValueArray.join('');
};
onMount(() => {
@ -26,39 +45,37 @@
<FullLayout>
<div class="modal">
<img class="mx-auto" src={woman} alt="" />
<div class="flex justify-center items-center">
<div class="flex justify-center items-center">
<input
bind:value={codeValueMobile}
type="text"
class="codeInputMobile"
on:keydown={inputMobileOnKeyDown}
/>
{#each [1, 2, 3, 4] as value}
<input
class="codeInputDesktop"
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)}
on:keydown|preventDefault={(e) => inputDesktopOnKeyDown(value - 1, e)}
type="text"
/>
{/each}
<span class="mr-2 w-8 h-2 bg-sspsBlue" />
<span class="hidden sm:block mr-2 w-8 h-2 bg-sspsBlue" />
{#each [5, 6, 7, 8] as value}
<input
class="codeInputDesktop"
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)}
on:keydown|preventDefault={(e) => inputDesktopOnKeyDown(value - 1, e)}
type="text"
/>
{/each}
</div>
<h3 class="mt-6 text-sspsBlue font-semibold text-xl text-center">
<h3 class="mt-8 mx-8 text-sspsBlue font-semibold text-xl text-center">
Zadejte 8místný kód pro aktivaci účtu
</h3>
<p class="text-sspsGray text-center">Nevíte si rady? Klikněte <u>zde</u></p>
<p class="mt-8 mx-8 text-sspsGray text-center">Nevíte si rady? Klikněte <u>zde</u></p>
</div>
</FullLayout>
@ -66,14 +83,21 @@
.modal {
@apply flex flex-col items-center justify-center;
@apply mx-auto my-auto;
@apply w-4/5 md:w-3/5 h-3/5;
@apply w-[90vw] h-[85vh] md:w-4/5 md:h-4/5;
@apply rounded-3xl;
@apply bg-white;
}
input {
@apply text-center;
@apply mr-1 md:mr-2;
@apply text-xl w-12 h-15 md:text-4xl md:w-16 md:h-20
@apply caret-transparent text-centerfont-semibold text-sspsBlue bg-[#f8fafb] shadow-lg p-3 rounded-xl outline-none border transition-colors duration-300 focus:border-sspsBlue hover:border-sspsBlue border-2;
}
.codeInputMobile {
@apply sm:hidden;
@apply w-full mx-5;
}
.codeInputDesktop {
@apply hidden;
@apply mr-1 md:mr-2;
@apply sm:block sm:text-xl sm:w-12 sm:h-15 md:text-4xl md:w-16 md:h-20;
}
</style>