From 63e6c64f4b6c3f65612635beff7a6b96b0427f72 Mon Sep 17 00:00:00 2001
From: EETagent <vojta.jungmann@gmail.com>
Date: Sun, 20 Nov 2022 14:48:53 +0100
Subject: [PATCH] feat: code & login form improvements

---
 .../lib/components/layout/SplitLayout.svelte  |  2 +-
 frontend/src/routes/login/+page.svelte        | 16 ++++-
 .../login/[code=application]/+page.svelte     | 64 +++++++++++++------
 3 files changed, 59 insertions(+), 23 deletions(-)

diff --git a/frontend/src/lib/components/layout/SplitLayout.svelte b/frontend/src/lib/components/layout/SplitLayout.svelte
index 3669c24..953bfaa 100644
--- a/frontend/src/lib/components/layout/SplitLayout.svelte
+++ b/frontend/src/lib/components/layout/SplitLayout.svelte
@@ -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;
diff --git a/frontend/src/routes/login/+page.svelte b/frontend/src/routes/login/+page.svelte
index ed07626..a9c08b9 100644
--- a/frontend/src/routes/login/+page.svelte
+++ b/frontend/src/routes/login/+page.svelte
@@ -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;
diff --git a/frontend/src/routes/login/[code=application]/+page.svelte b/frontend/src/routes/login/[code=application]/+page.svelte
index 673ecf7..a5837a1 100644
--- a/frontend/src/routes/login/[code=application]/+page.svelte
+++ b/frontend/src/routes/login/[code=application]/+page.svelte
@@ -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>