From 6454a84586d26632be16cc657f6e16b0665a56b1 Mon Sep 17 00:00:00 2001
From: EETagent <vojta.jungmann@gmail.com>
Date: Mon, 21 Nov 2022 12:37:06 +0100
Subject: [PATCH] refactor: Use TextField component

---
 .../lib/components/textfield/TextField.svelte |  22 ++++
 frontend/src/routes/login/+page.svelte        |  10 +-
 frontend/src/routes/register/+page.svelte     | 101 +++++-------------
 3 files changed, 54 insertions(+), 79 deletions(-)
 create mode 100644 frontend/src/lib/components/textfield/TextField.svelte

diff --git a/frontend/src/lib/components/textfield/TextField.svelte b/frontend/src/lib/components/textfield/TextField.svelte
new file mode 100644
index 0000000..3daa00e
--- /dev/null
+++ b/frontend/src/lib/components/textfield/TextField.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	export let type: 'text' | 'number' | 'tel' | 'e-mail' = 'text';
+	const typeAction = (node: HTMLInputElement) => {
+		node.type = type;
+	}
+	export let placeholder: string = '';
+	export let value: string = '';
+</script>
+
+<input
+	bind:value
+	on:click
+	on:keydown
+	on:keyup
+	class="bg-[#f8fafb] mt-8 w-full shadow-lg p-3 rounded-lg text-xl outline-none border transition-colors duration-300 hover:border-sspsBlue  border-2"
+	use:typeAction
+	{placeholder}
+/>
+
+<style>
+    
+</style>
\ No newline at end of file
diff --git a/frontend/src/routes/login/+page.svelte b/frontend/src/routes/login/+page.svelte
index a9c08b9..f4bf3e7 100644
--- a/frontend/src/routes/login/+page.svelte
+++ b/frontend/src/routes/login/+page.svelte
@@ -3,6 +3,7 @@
 
 	import lev from '$lib/assets/logo/lev.png';
 	import SplitLayout from '$lib/components/layout/SplitLayout.svelte';
+	import TextField from '$lib/components/textfield/TextField.svelte';
 
 	let applicationValue = '';
 
@@ -25,12 +26,9 @@
 		<p class="mt-8 font-light text-sspsGray text-center">
 			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="number"
-			placeholder="Ev. číslo"
-		/>
+		<div class="w-3/5">
+			<TextField bind:value={applicationValue} placeholder="Ev. číslo" type="number" />
+		</div>
 		<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"
diff --git a/frontend/src/routes/register/+page.svelte b/frontend/src/routes/register/+page.svelte
index 26d2704..81eb3a9 100644
--- a/frontend/src/routes/register/+page.svelte
+++ b/frontend/src/routes/register/+page.svelte
@@ -3,6 +3,7 @@
 
 	import lev from '$lib/assets/logo/lev.png';
 	import SplitLayout from '$lib/components/layout/SplitLayout.svelte';
+	import TextField from '$lib/components/textfield/TextField.svelte';
 
 	let applicationValue = '';
 
@@ -13,7 +14,7 @@
 		}
 	};
 
-	let pageIndex = 1;
+	let pageIndex = 3;
 </script>
 
 <SplitLayout>
@@ -29,23 +30,13 @@
 				Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit.
 			</p>
 			<div class="flex md:flex-col items-center justify-center w-full md:w-3/5">
-				<input
-					class="bg-[#f8fafb] mt-8 w-full shadow-lg p-3 rounded-lg text-xl outline-none border transition-colors duration-300 hover:border-sspsBlue  border-2"
-					type="text"
-					placeholder="Jméno a příjmení"
-				/>
-				<input
-					class="ml-2 md:ml-0 bg-[#f8fafb] mt-8 w-full shadow-lg p-3 rounded-lg text-xl outline-none border transition-colors duration-300 hover:border-sspsBlue  border-2"
-					type="email"
-					placeholder="E-mail"
-				/>
+				<TextField type="text" placeholder="Jméno a příjmení" />
+				<TextField type="e-mail" placeholder="Email" />
+			</div>
+			<div class="w-full md:w-3/5">
+				<TextField type="tel" placeholder="Telefon" />
 			</div>
 
-			<input
-				class="w-full bg-[#f8fafb] mt-8 md:w-3/5 shadow-lg p-3 rounded-lg text-xl outline-none border transition-colors duration-300 hover:border-sspsBlue  border-2"
-				type="tel"
-				placeholder="Telefon"
-			/>
 			<input
 				on:click={redirectToCode}
 				class="w-full mt-8 md:w-3/5 p-3 rounded-lg font-semibold text-xl transition-colors duration-300 bg-sspsBlue hover:bg-sspsBlueDark text-white"
@@ -58,27 +49,14 @@
 			<p class="block mt-8 font-light text-sspsGray text-center">
 				Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit.
 			</p>
-			<input
-				class="w-full bg-[#f8fafb] mt-8 md:w-3/5 shadow-lg p-3 rounded-lg text-xl outline-none border transition-colors duration-300 hover:border-sspsBlue  border-2"
-				type="text"
-				placeholder="Rodné přijmení"
-			/>
-			<input
-				class="w-full bg-[#f8fafb] mt-8 md:w-3/5 shadow-lg p-3 rounded-lg text-xl outline-none border transition-colors duration-300 hover:border-sspsBlue  border-2"
-				type="text"
-				placeholder="Místo narození"
-			/>
+			<div class="flex flex-col w-full md:w-3/5">
+				<TextField type="text" placeholder="Rodné příjmení" />
+				<TextField type="text" placeholder="Místo narození" />
+			</div>
+
 			<div class="flex items-center justify-center w-full md:w-3/5">
-				<input
-					class="bg-[#f8fafb] mt-8 w-full shadow-lg p-3 rounded-lg text-xl outline-none border transition-colors duration-300 hover:border-sspsBlue  border-2"
-					type="text"
-					placeholder="Datum narození"
-				/>
-				<input
-					class="ml-2 bg-[#f8fafb] mt-8 w-full shadow-lg p-3 rounded-lg text-xl outline-none border transition-colors duration-300 hover:border-sspsBlue  border-2"
-					type="text"
-					placeholder="Polaví"
-				/>
+				<TextField type="text" placeholder="Datum narození" />
+				<TextField type="text" placeholder="Pohlaví" />
 			</div>
 			<input
 				on:click={redirectToCode}
@@ -92,23 +70,12 @@
 			<p class="block mt-8 font-light text-sspsGray text-center">
 				Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit.
 			</p>
-			<input
-				class="w-full bg-[#f8fafb] mt-8 md:w-3/5 shadow-lg p-3 rounded-lg text-xl outline-none border transition-colors duration-300 hover:border-sspsBlue  border-2"
-				type="text"
-				placeholder="Adresa trvalého bydliště"
-			/>
+			<div class="flex flex-col w-full md:w-3/5">
+				<TextField type="text" placeholder="Adresa trvalého bydliště" />
+				<TextField type="e-mail" placeholder="E-mail zákonného zástupce" />
+				<TextField type="tel" placeholder="Telefon zákonného zástupce" />
+			</div>
 
-			<input
-				class="w-full bg-[#f8fafb] mt-8 md:w-3/5 shadow-lg p-3 rounded-lg text-xl outline-none border transition-colors duration-300 hover:border-sspsBlue  border-2"
-				type="email"
-				placeholder="E-mail zákonného zástupce"
-			/>
-
-			<input
-				class="w-full bg-[#f8fafb] mt-8 md:w-3/5 shadow-lg p-3 rounded-lg text-xl outline-none border transition-colors duration-300 hover:border-sspsBlue  border-2"
-				type="tel"
-				placeholder="Telefon zákonného zástupce"
-			/>
 			<input
 				on:click={redirectToCode}
 				class="w-full mt-8 md:w-3/5 p-3 rounded-lg font-semibold text-xl transition-colors duration-300 bg-sspsBlue hover:bg-sspsBlueDark text-white"
@@ -121,28 +88,16 @@
 			<p class="block mt-8 font-light text-sspsGray text-center">
 				Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit.
 			</p>
-			<input
-				class="w-full bg-[#f8fafb] mt-8 md:w-3/5 shadow-lg p-3 rounded-lg text-xl outline-none border transition-colors duration-300 hover:border-sspsBlue  border-2"
-				type="text"
-				placeholder="Občanství"
-			/>
-			<div class="flex items-center justify-center w-full md:w-3/5">
-				<input
-					class="bg-[#f8fafb] mt-8 w-full shadow-lg p-3 rounded-lg text-xl outline-none border transition-colors duration-300 hover:border-sspsBlue  border-2"
-					type="text"
-					placeholder="Rodné číslo"
-				/>
-				<input
-					class="ml-2 bg-[#f8fafb] mt-8 w-full shadow-lg p-3 rounded-lg text-xl outline-none border transition-colors duration-300 hover:border-sspsBlue  border-2"
-					type="text"
-					placeholder="Obor"
-				/>
+			<div class="flex flex-col w-full md:w-3/5">
+				<TextField type="text" placeholder="Občanství" />
+			</div>
+			<div class="flex items-center justify-center w-full md:w-3/5">
+				<TextField type="text" placeholder="Rodné číslo" />
+				<TextField type="text" placeholder="Obor" />
+			</div>
+			<div class="flex flex-col w-full md:w-3/5">
+				<TextField type="text" placeholder="Evidenční číslo přihlášky" />
 			</div>
-			<input
-				class="w-full bg-[#f8fafb] mt-8 md:w-3/5 shadow-lg p-3 rounded-lg text-xl outline-none border transition-colors duration-300 hover:border-sspsBlue  border-2"
-				type="text"
-				placeholder="Evidenční číslo přihlášky"
-			/>
 			<input
 				on:click={redirectToCode}
 				class="w-full mt-8 md:w-3/5 p-3 rounded-lg font-semibold text-xl transition-colors duration-300 bg-sspsBlue hover:bg-sspsBlueDark text-white"