Merge pull request #131 from EETagent/frontend_ui_fixes

Frontend UI fixes

frontend/package.json

@@ -35,6 +35,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@zerodevx/svelte-toast": "^1.0.0-rc.1",
 		"axios": "^1.2.2",
 		"dotenv": "^16.0.3",
 		"filedrop-svelte": "^0.1.2",

frontend/pnpm-lock.yaml

@@ -1,6 +1,9 @@
 lockfileVersion: '6.0'
 
 dependencies:
+  '@zerodevx/svelte-toast':
+    specifier: ^1.0.0-rc.1
+    version: 1.0.0-rc.1
   axios:
     specifier: ^1.2.2
     version: 1.2.2
@@ -711,6 +714,10 @@ packages:
       eslint-visitor-keys: 3.3.0
     dev: true
 
+  /@zerodevx/svelte-toast@1.0.0-rc.1:
+    resolution: {integrity: sha512-KEZUWeFg1MLlHVssx94ZWWKDBOlQUznTH7xsfZ3uPSYbD5NMO8jDEUGiDNiJ3aKpwiabGvZgG7NKJLFK0q/KYg==}
+    dev: false
+
   /abab@2.0.6:
     resolution: {integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==}
     dev: false

frontend/src/lib/components/button/Submit.svelte

@@ -18,6 +18,7 @@
 
 <style lang="postcss">
 	input {
+		@apply hover:cursor-pointer;
 		@apply bg-sspsBlue hover:bg-sspsBlueDark 
         @apply @apply rounded-lg p-3 text-xl font-semibold 
         text-white transition-colors duration-300;

frontend/src/routes/(candidate)/(authenticated)/register/+page.svelte

@@ -14,6 +14,7 @@
 	import TelephoneField from '$lib/components/textfield/TelephoneField.svelte';
 	import TextField from '$lib/components/textfield/TextField.svelte';
 	import type { PageData } from './$types';
+	import { SvelteToast, toast } from '@zerodevx/svelte-toast';
 
 	import { createForm } from 'svelte-forms-lib';
 	import type { Writable } from 'svelte/store';
@@ -199,7 +200,14 @@
 							values.candidate.birthdate
 						)
 					) {
-						alert('Rodné číslo neodpovídá oficiální specifikaci či datumu narození'); // TODO: alerts
+						// alert('Rodné číslo neodpovídá oficiální specifikaci či datumu narození'); // TODO: alerts
+						toast.push('Rodné číslo neodpovídá oficiální specifikaci či datumu narození', {
+							theme: {
+								'--toastColor': 'mintcream',
+								'--toastBackground': '#b91c1c',
+								'--toastBarBackground': '#7f1d1d'
+							}	
+						})
 						throw new Error('Rodné číslo neodpovídá datumu narození');
 					}
 				}
@@ -332,6 +340,7 @@
 </script>
 
 <SplitLayout>
+	<SvelteToast></SvelteToast>
 	<div class="form relative">
 		<div class="bottom-3/12 absolute flex w-full flex-col md:h-auto">
 			<div class="<md:h-24 <md:w-24 mb-4 h-32 w-32 self-center">

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

@@ -6,11 +6,13 @@
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
 	import { apiLogin } from '$lib/@api/candidate';
+	import { SvelteToast, toast } from '@zerodevx/svelte-toast';
 
 	let applicationId = Number($page.params.code);
 	let codeValueMobile: string = '';
 	let codeValueArray: Array<string> = [];
 	let codeElementArray: Array<HTMLInputElement> = [];
+	let isError: boolean = false;
 
 	$: {
 		codeValueMobile = codeValueMobile.toUpperCase();
@@ -18,7 +20,7 @@
 		console.log(codeValueArray);
 	}
 
-	const inputDesktopOnKeyDown = (index: number, e: KeyboardEvent) => {
+	const inputDesktopOnKeyDown = async (index: number, e: KeyboardEvent) => {
 		if (e.key === 'Backspace') {
 			codeValueArray[index] = '';
 			if (codeElementArray[index - 1]) {
@@ -34,31 +36,45 @@
 			}
 		}
 		codeValueMobile = codeValueArray.join('');
+
+		if (codeValueArray.filter((item) => item !== '').length === 12) {
+			await submit();
+		} else {
+			isError = false;
+		}
 	};
 
-	$: if (codeValueArray.length === 12) {
-		submit();
-	}
-
 	const submit = async () => {
+		console.log('submitting: ', codeValueArray);
 		try {
 			await apiLogin({ applicationId, password: codeValueMobile });
 			goto('/dashboard');
 		} catch (e) {
 			console.error(e);
+			toast.push('Neplatné heslo!', {
+				theme: {
+					'--toastColor': 'mintcream',
+					'--toastBackground': '#b91c1c',
+					'--toastBarBackground': '#7f1d1d'
+				}
+			});
+			isError = true;
 		}
-		// alert('ApplicationId: ' + applicationId + '; Password: ' + codeValueMobile);
 	};
 
-	const onPaste = (e: ClipboardEvent) => {
+	const onPaste = async (e: ClipboardEvent) => {
 		e.preventDefault();
-		const text = e.clipboardData?.getData('text/plain');
+		const text = e.clipboardData?.getData('text/plain').slice(0, 12);
 		if (text) {
 			codeValueMobile = text;
+			codeValueArray = text.split('');
 		}
 		for (const el of codeElementArray) {
 			el.blur();
 		}
+		if (codeValueArray.filter((item) => item !== '').length === 12) {
+			await submit();
+		}
 	};
 
 	onMount(() => {
@@ -77,11 +93,18 @@
 <FullLayout>
 	<div class="modal">
 		<img class="mx-auto" src={woman} alt="" />
+		<SvelteToast />
 		<div class="flex items-center justify-center">
-			<input bind:value={codeValueMobile} type="text" class="codeInputMobile" />
+			<input
+				class:error={isError}
+				bind:value={codeValueMobile}
+				type="text"
+				class="codeInputMobile"
+			/>
 			{#each [1, 2, 3, 4] as value}
 				<input
 					class="codeInputDesktop"
+					class:error={isError}
 					bind:this={codeElementArray[value - 1]}
 					bind:value={codeValueArray[value - 1]}
 					on:keydown={(e) => inputDesktopOnKeyDown(value - 1, e)}
@@ -93,6 +116,7 @@
 			{#each [5, 6, 7, 8] as value}
 				<input
 					class="codeInputDesktop"
+					class:error={isError}
 					bind:this={codeElementArray[value - 1]}
 					bind:value={codeValueArray[value - 1]}
 					on:keydown={(e) => inputDesktopOnKeyDown(value - 1, e)}
@@ -104,6 +128,7 @@
 			{#each [9, 10, 11, 12] as value}
 				<input
 					class="codeInputDesktop"
+					class:error={isError}
 					bind:this={codeElementArray[value - 1]}
 					bind:value={codeValueArray[value - 1]}
 					on:keydown={(e) => inputDesktopOnKeyDown(value - 1, e)}
@@ -120,6 +145,9 @@
 </FullLayout>
 
 <style lang="postcss">
+	.error {
+		@apply border-red-700;
+	}
 	.modal {
 		@apply flex flex-col items-center justify-center;
 		@apply mx-auto my-auto;
@@ -142,6 +170,6 @@
 	.codeInputDesktop {
 		@apply hidden;
 		@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 md:block md:h-20 md:w-16 md:text-4xl xl:h-20 xl:w-16 xl:p-0 xl:text-2xl;
 	}
 </style>