feat: bigger register views

frontend/src/lib/components/layout/SplitLayout.svelte

@@ -49,8 +49,8 @@
 	}
 	.view {
 		@apply z-10;
-		@apply absolute top-0 right-0 bottom-0 left-0 m-auto md:top-auto md:bottom-auto md:left-auto md:m-0;
+		@apply absolute top-0 right-0 bottom-0 m-auto md:top-auto md:bottom-auto md:left-auto md:m-0;
-		@apply md:h-screen md:w-[50vw];
+		@apply md:h-screen md:w-[75vw];
 		@apply md:my-auto;
 		@apply bg-white;
 	}

frontend/src/lib/stores/candidate.ts

@@ -5,9 +5,11 @@ export interface CandidateData {
 	candidate: {
 		name: string;
 		surname: string;
+		birthSurname: string;
 		birthplace: string;
 		birthdate: string;
 		address: string;
+		letterAddress: string;
 		telephone: string;
 		citizenship: string;
 		email: string;
@@ -16,6 +18,8 @@ export interface CandidateData {
 		schoolName: string;
 		healthInsurance: string;
 		grades: Array<GradeBackend>;
+		firstSchool: string;
+		secondSchool: string;
 		testLanguage: string;
 	};
 	parents: Array<{
@@ -66,9 +70,11 @@ export const candidateData = writable<CandidateData>({
 	candidate: {
 		name: '',
 		surname: '',
+		birthSurname: '',
 		birthplace: '',
 		birthdate: '',
 		address: '',
+		letterAddress: '',
 		telephone: '',
 		citizenship: '',
 		email: '',
@@ -77,6 +83,8 @@ export const candidateData = writable<CandidateData>({
 		schoolName: '',
 		healthInsurance: '',
 		grades: [],
+		firstSchool: '',
+		secondSchool: '',
 		testLanguage: ''
 	},
 	parents: []

frontend/src/routes/(admin)/admin/(authenticated)/candidate/[code=application]/+page.server.ts

@@ -10,9 +10,11 @@ export const load: PageServerLoad = async ({ fetch, params }) => {
 		candidate: {
 			name: '',
 			surname: '',
+			birthSurname: '',
 			birthplace: '',
 			birthdate: '',
 			address: '',
+			letterAddress: '',
 			telephone: '',
 			citizenship: '',
 			email: '',
@@ -21,6 +23,8 @@ export const load: PageServerLoad = async ({ fetch, params }) => {
 			schoolName: '',
 			healthInsurance: '',
 			grades: [],
+			firstSchool: '',
+			secondSchool: '',
 			testLanguage: ''
 		},
 		parents: []

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

@@ -23,9 +23,9 @@
 	import AccountLinkCheckBox from '$lib/components/checkbox/AccountLinkCheckBox.svelte';
 	import GradesTable from '$lib/components/grades/GradesTable.svelte';
 
-	const pageCount = 7;
 	let pageIndex = 0;
-	let pagesFilled = [false, false, false, false, false, false, false];
+	let pagesFilled = [false, false, false, false, false, false];
+	const pageCount = pagesFilled.length;
 	let pageTexts = [
 		'Zpracování osobních údajů',
 		'Registrace',
@@ -39,6 +39,7 @@
 	let details = data.candidate;
 	let baseCandidateDetails = data.whoami;
 
+	let personalIdBirthdateMatch = true;
 	const formInitialValues = {
 		gdpr: false,
 		linkOk: false,
@@ -46,12 +47,14 @@
 		candidate: {
 			name: '',
 			surname: '',
+			birthSurname: '',
 			email: '',
 			telephone: '',
 			birthplace: '',
 			birthdate: '',
 			sex: '',
 			address: '',
+			letterAddress: '',
 			street: '',
 			houseNumber: '',
 			city: '',
@@ -61,6 +64,8 @@
 			schoolName: '',
 			healthInsurance: '',
 			grades: [],
+			firstSchool: '',
+			secondSchool: '',
 			testLanguage: '',
 		},
 		parents: [
@@ -225,28 +230,31 @@
 	};
 
 	const onSubmit = async (values: CandidateData) => {
+		if (pageIndex === 3) {
+			if (values.candidate.citizenship === 'Česká republika') {
+				if (
+					!isPersonalIdNumberWithBirthdateValid(
+						values.candidate.personalIdNumber,
+						values.candidate.birthdate
+					)
+				) {
+					toast.push('Rodné číslo neodpovídá oficiální specifikaci či datumu narození', {
+						theme: {
+							'--toastColor': 'mintcream',
+							'--toastBackground': '#b91c1c',
+							'--toastBarBackground': '#7f1d1d'
+						}
+					});
+					personalIdBirthdateMatch = false;
+					throw new Error('Rodné číslo neodpovídá datumu narození');
+				}
+			}
+			personalIdBirthdateMatch = true;
+		}
 		if (pageIndex === pageCount) {
 			// clone values to oldValues
 			let oldValues = JSON.parse(JSON.stringify(values));
 			try {
-				if (values.candidate.citizenship === 'Česká republika') {
-					if (
-						!isPersonalIdNumberWithBirthdateValid(
-							values.candidate.personalIdNumber,
-							values.candidate.birthdate
-						)
-					) {
-						// 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í');
-					}
-				}
 				// @ts-ignore // love javascript
 				delete values.undefined;
 				// convert birthdate from dd.mm.yyyy to yyyy-mm-dd
@@ -314,7 +322,11 @@
 					$typedErrors['candidate']['name'] ||
 					$typedErrors['candidate']['surname'] ||
 					$typedErrors['candidate']['email'] ||
-					$typedErrors['candidate']['telephone']
+					$typedErrors['candidate']['telephone'] ||
+					$typedErrors['candidate']['city'] ||
+					$typedErrors['candidate']['street'] ||
+					$typedErrors['candidate']['houseNumber'] ||
+					$typedErrors['candidate']['zip']
 				) {
 					return true;
 				}
@@ -322,13 +334,15 @@
 
 			case 3:
 				if (
-					$typedErrors['candidate']['birthplace'] ||
+					$typedErrors['candidate']['citizenship'] ||
+					$typedErrors['candidate']['personalIdNumber'] ||
+					$typedErrors['candidate']['schoolName'] ||
+					$typedErrors['candidate']['healthInsurance'] ||
 					$typedErrors['candidate']['birthdate'] ||
-					$typedErrors['candidate']['street'] ||
+					$typedErrors['candidate']['birthplace'] ||
-					$typedErrors['candidate']['houseNumber'] ||
+					$typedErrors['candidate']['personalIdNumber'] ||
-					$typedErrors['candidate']['city'] ||
+					$typedErrors['candidate']['testLanguage'] ||
-					$typedErrors['candidate']['zip']
+					!personalIdBirthdateMatch
-					// $typedErrors['candidate']['address']
 				) {
 					return true;
 				}
@@ -354,16 +368,6 @@
 				}
 				break;
 			case 6:
-				if (
-					$typedErrors['candidate']['citizenship'] ||
-					$typedErrors['candidate']['personalIdNumber'] ||
-					$typedErrors['candidate']['schoolName'] ||
-					$typedErrors['candidate']['healthInsurance']
-				) {
-					return true;
-				}
-				break;
-			case 7:
 				if ($typedErrors["candidate"]["grades"].length > 0) return true;
 				break;
 			default:
@@ -417,11 +421,11 @@
 
 <SplitLayout>
 	<SvelteToast />
-	<div class="form relative">
+	<div class="form relative bg-center">
-		<div class="bottom-3/12 absolute flex w-full flex-col md:h-auto">
+		<div class="bottom-5/24 absolute flex w-full flex-col md:h-auto">
 			<!-- TODO: Find different way how to display SchoolBadge -->
 			{#if pageIndex !== 0 && pageIndex !== 7}
-				<div class="<md:h-24 <md:w-24 mb-4 h-32 w-32 self-center">
+				<div class="<md:h-24 <md:w-24 h-32 w-32 self-center">
 					<SchoolBadge />
 				</div>
 			{/if}
@@ -465,29 +469,72 @@
 						V rámci usnadnění přijímacího řízení jsme připravili online formulář, který Vám pomůže s
 						vyplněním potřebných údajů.
 					</p>
-					<div class="flex flex-col">
+					<div class="w-full">
-						<span class="field">
+						<div class="flex flex-col">
-							<NameField
+							<div class="field flex">
-								error={$typedErrors['candidate']['name'] || $typedErrors['candidate']['surname']}
+								<span class="w-[50%]">
-								bind:valueName={$form.candidate.name}
+									<NameField
-								bind:valueSurname={$form.candidate.surname}
+										error={$typedErrors['candidate']['name'] || $typedErrors['candidate']['surname']}
-								placeholder="Jméno a příjmení"
+										bind:valueName={$form.candidate.name}
-							/>
+										bind:valueSurname={$form.candidate.surname}
-						</span>
+										placeholder="Jméno a příjmení"
-						<span class="field">
+									/>
-							<EmailField
+								</span>
-								error={$typedErrors['candidate']['email']}
+								<span class="w-[50%] ml-2">
-								bind:value={$form.candidate.email}
+									<TextField
-								placeholder="E-mail"
+										error={$typedErrors['candidate']['birthSurname']}
-							/>
+										bind:value={$form.candidate.birthSurname}
-						</span>
+										placeholder="Rodné příjmení (pokud odlišné)"
-						<span class="field">
+									/>
-							<TelephoneField
+								</span>
-								error={$typedErrors['candidate']['telephone']}
+							</div>
-								bind:value={$form.candidate.telephone}
+							<div class="field flex">
-								placeholder="Telefon"
+								<span class="w-[50%]">
-							/>
+									<EmailField
-						</span>
+										error={$typedErrors['candidate']['email']}
+										bind:value={$form.candidate.email}
+										placeholder="E-mail"
+									/>
+								</span>
+								<span class="w-[50%] ml-2">
+									<TelephoneField
+										error={$typedErrors['candidate']['telephone']}
+										bind:value={$form.candidate.telephone}
+										placeholder="Telefon"
+									/>
+								</span>
+							</div>
+							<span class="field">
+								<TextField
+										error={$typedErrors['candidate']['city']}
+										bind:value={$form.candidate.city}
+										type="text"
+										placeholder="Město"
+										helperText="Uveďte poštovní směrovací číslo. (např. 602 00)"
+									/>
+							</span>
+						</div>
+						<div class="field flex">
+							<span class="w-[66%]">
+								<NameField
+									error={$typedErrors['candidate']['street'] ||
+										$typedErrors['candidate']['houseNumber']}
+									bind:valueName={$form.candidate.street}
+									bind:valueSurname={$form.candidate.houseNumber}
+									placeholder="Ulice a č. p."
+									helperText="Uveďte ulici a číslo popisné (např. Preslova 72)."
+								/>
+							</span>
+							<span class="ml-2 w-[33%]">
+								<TextField
+									error={$typedErrors['candidate']['zip']}
+									bind:value={$form.candidate.zip}
+									type="number"
+									placeholder="PSČ"
+									helperText="Uveďte poštovní směrovací číslo. (např. 602 00)"
+								/>
+							</span>
+						</div>
 					</div>
 				</form>
 			{:else if pageIndex === 3}
@@ -496,53 +543,24 @@
 					Pro registraci je potřeba vyplnit několik údajů o Vás. Tyto údaje budou použity pro
 					přijímací řízení. Všechny údaje jsou důležité.
 				</p>
-				<div class="field flex">
+				<div class="field flex w-full">
-					<span class="w-[66%]">
+					<span class="w-[50%]">
-						<NameField
+						<SelectField
-							error={$typedErrors['candidate']['street'] ||
+							error={$typedErrors['candidate']['citizenship']}
-								$typedErrors['candidate']['houseNumber']}
+							bind:value={$form.candidate.citizenship}
-							bind:valueName={$form.candidate.street}
+							placeholder="Občanství"
-							bind:valueSurname={$form.candidate.houseNumber}
+							options={['Česká republika', 'Slovenská republika', 'Ukrajina', 'Jiné']}
-							placeholder="Ulice a č. p."
-							helperText="Uveďte ulici a číslo popisné (např. Preslova 72)."
 						/>
 					</span>
-					<span class="ml-2 w-[33%]">
+					<span class="w-[50%] ml-2">
-						<TextField
+						<SelectField
-							error={$typedErrors['candidate']['zip']}
+							error={$typedErrors['candidate']['testLanguage']}
-							bind:value={$form.candidate.zip}
+							bind:value={$form.candidate.testLanguage}
-							type="number"
+							placeholder="Jazyk odborných testů"
-							placeholder="PSČ"
+							options={['Čeština', 'Angličtina']}
-							helperText="Uveďte poštovní směrovací číslo. (např. 602 00)"
 						/>
 					</span>
 				</div>
-				<div class="field flex">
-					<span>
-						<TextField
-							error={$typedErrors['candidate']['city']}
-							bind:value={$form.candidate.city}
-							type="text"
-							placeholder="Město"
-							helperText="Uveďte město"
-						/>
-					</span>
-					<span class="ml-2">
-						<TextField
-							error={$typedErrors['candidate']['birthplace']}
-							bind:value={$form.candidate.birthplace}
-							type="text"
-							placeholder="Místo narození"
-							helperText="Uveďte město"
-							icon
-						>
-							<div slot="icon" class="text-sspsBlue flex items-center justify-center">
-								<Home />
-							</div>
-						</TextField>
-					</span>
-				</div>
-
 				<div class="field flex items-center">
 					<TextField
 						error={$typedErrors['candidate']['birthdate']}
@@ -551,6 +569,28 @@
 						placeholder="Datum narození"
 						helperText="TODO: (Uveďte ve formátu DD.MM.RRRR)"
 					/>
+					<TextField
+						error={$typedErrors['candidate']['birthplace']}
+						bind:value={$form.candidate.birthplace}
+						type="text"
+						placeholder="Místo narození"
+						helperText="TODO: (Místo narození)"
+					/>
+				</div>
+				<div class="field flex items-center justify-center">
+					{#if $form.candidate.citizenship === 'Česká republika' || !$form.candidate.citizenship}
+						<IdField
+							error={$typedErrors['candidate']['personalIdNumber']}
+							bind:value={$form.candidate.personalIdNumber}
+							placeholder="Rodné číslo"
+						/>
+					{:else}
+						<TextField
+							error={$typedErrors['candidate']['personalIdNumber']}
+							bind:value={$form.candidate.personalIdNumber}
+							placeholder="Rodné číslo"
+						/>
+					{/if}
 					<div class="ml-2">
 						<SelectField
 							error={$typedErrors['candidate']['sex']}
@@ -560,6 +600,35 @@
 						/>
 					</div>
 				</div>
+				<div class="field flex flex-row">
+					<span>
+						{#if $form.candidate.citizenship === 'Česká republika' || !$form.candidate.citizenship}
+							<TextField
+								error={$typedErrors['candidate']['schoolName']}
+								type="number"
+								bind:value={$form.candidate.schoolName}
+								placeholder="IZO školy"
+							/>
+						{:else}
+							<TextField
+								error={$typedErrors['candidate']['schoolName']}
+								type="text"
+								bind:value={$form.candidate.schoolName}
+								placeholder="Název školy"
+							/>
+						{/if}
+					</span>
+
+					<span class="ml-2">
+						<TextField
+							error={$typedErrors['candidate']['healthInsurance']}
+							type="text"
+							bind:value={$form.candidate.healthInsurance}
+							placeholder="Číslo zdravotní pojišťovny"
+						/>
+					</span>
+				</div>
+
 			{:else if pageIndex === 4}
 				<h1 class="title mt-8">{pageTexts[3]}</h1>
 				<p class="description mt-8 block text-center">
@@ -619,75 +688,6 @@
 					</span>
 				</div>
 			{:else if pageIndex === 6}
-				<h1 class="title mt-8">{pageTexts[5]}</h1>
-				<p class="description mt-8 block text-center">
-					Zadejte prosím své občanství, rodné číslo, či jeho alternativu Vaší země a obor na který
-					se hlásíte.
-				</p>
-				<div class="flex w-full flex-col">
-					<div class="field flex w-full">
-						<span class="w-[50%]">
-							<SelectField
-								error={$typedErrors['candidate']['citizenship']}
-								bind:value={$form.candidate.citizenship}
-								placeholder="Občanství"
-								options={['Česká republika', 'Slovenská republika', 'Ukrajina', 'Jiné']}
-							/>
-						</span>
-						<span class="w-[50%] ml-2">
-							<SelectField
-								error={$typedErrors['candidate']['testLanguage']}
-								bind:value={$form.candidate.testLanguage}
-								placeholder="Jazyk odborných testů"
-								options={['Čeština', 'Angličtina']}
-							/>
-						</span>
-					</div>
-					<div class="field flex flex-row">
-						<span>
-							{#if $form.candidate.citizenship === 'Česká republika' || !$form.candidate.citizenship}
-								<TextField
-									error={$typedErrors['candidate']['schoolName']}
-									type="number"
-									bind:value={$form.candidate.schoolName}
-									placeholder="IZO školy"
-								/>
-							{:else}
-								<TextField
-									error={$typedErrors['candidate']['schoolName']}
-									type="text"
-									bind:value={$form.candidate.schoolName}
-									placeholder="Název školy"
-								/>
-							{/if}
-						</span>
-
-						<span class="ml-2">
-							<TextField
-								error={$typedErrors['candidate']['healthInsurance']}
-								type="text"
-								bind:value={$form.candidate.healthInsurance}
-								placeholder="Číslo zdravotní pojišťovny"
-							/>
-						</span>
-					</div>
-				</div>
-				<div class="field flex items-center justify-center">
-					{#if $form.candidate.citizenship === 'Česká republika' || !$form.candidate.citizenship}
-						<IdField
-							error={$typedErrors['candidate']['personalIdNumber']}
-							bind:value={$form.candidate.personalIdNumber}
-							placeholder="Rodné číslo"
-						/>
-					{:else}
-						<TextField
-							error={$typedErrors['candidate']['personalIdNumber']}
-							bind:value={$form.candidate.personalIdNumber}
-							placeholder="Rodné číslo"
-						/>
-					{/if}
-				</div>
-			{:else if pageIndex === 7}
 				<h1 class="title mt-8">{pageTexts[5]}</h1>
 				<p class="description mt-8 block text-center">
 					Přidejte prosím přepis Vaších známek z posledních dvou let studia
@@ -698,7 +698,7 @@
 				/>
 			{/if}
 		</div>
-		<div class="bottom-1/12 absolute w-full">
+		<div class="bottom-1/24 absolute w-full">
 			<div class="field">
 				<Submit
 					on:click={async (e) => {
@@ -716,7 +716,7 @@
 				/>
 			</div>
 
-			<div class="mt-4 flex flex-row justify-center md:mt-8">
+			<div class="mt-4 flex flex-row justify-center md:mt-6">
 				{#each Array(pageCount + 1) as _, i}
 					<button
 						class:dotActive={i === pageIndex}