feat: add gdpr checkbox

This commit is contained in:
EETagent 2022-12-19 20:44:32 +01:00
parent 65bc2e404f
commit a9ba36e3cc
2 changed files with 46 additions and 16 deletions

View file

@ -0,0 +1,21 @@
<script lang="ts">
export let value: boolean = false;
</script>
<input type="checkbox" id="gdpr-option" bind:checked={value} class="peer hidden" />
<label
for="gdpr-option"
class="inline-flex w-full cursor-pointer items-center justify-between rounded-lg border-2 border-gray-200 bg-white p-5 text-gray-500 hover:bg-gray-50 hover:text-gray-600 peer-checked:border-sspsBlue peer-checked:text-gray-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-300 dark:peer-checked:text-gray-300"
>
<div class="block">
<span class="text-2xl">📜</span>
<div class="w-full text-lg font-semibold">Souhlas se zpracováním osobních údajů</div>
<div class="w-full text-sm">Kliknutím vyjaďřujete souhlas se zpracováním osobních údajů</div>
<div class="w-full text-sm"><a class="underline" href="/gdpr">Zde</a></div>
</div>
</label>
<style>
</style>

View file

@ -2,6 +2,7 @@
import { goto } from '$app/navigation';
import { apiFillDetails } from '$lib/@api/candidate';
import Submit from '$lib/components/button/Submit.svelte';
import GdprCheckBox from '$lib/components/checkbox/GdprCheckBox.svelte';
import Home from '$lib/components/icons/Home.svelte';
import SchoolBadge from '$lib/components/icons/SchoolBadge.svelte';
@ -18,7 +19,7 @@
import type { Writable } from 'svelte/store';
import * as yup from 'yup';
const pageCount = 4;
const pageCount = 5;
let pageIndex = 0;
let pagesFilled = 0;
@ -155,7 +156,7 @@
const isPageInvalid = (): boolean => {
switch (pageIndex) {
case 0:
case 1:
if (
$typedErrors['candidate']['name'] ||
$typedErrors['candidate']['email'] ||
@ -165,7 +166,7 @@
}
break;
case 1:
case 2:
if (
/* $typedErrors.birthdurname || */ $typedErrors['candidate']['birthplace'] ||
$typedErrors['candidate']['birthdate'] ||
@ -174,7 +175,7 @@
return true;
}
break;
case 2:
case 3:
if (
$typedErrors['parents'][0]['name'] ||
$typedErrors['parents'][0]['surname'] ||
@ -184,7 +185,7 @@
return true;
}
break;
case 3:
case 4:
if (
$typedErrors['parents'][1]['name'] ||
$typedErrors['parents'][1]['surname'] ||
@ -194,7 +195,7 @@
return true;
}
break;
case 4:
case 5:
if (
$typedErrors['candidate']['citizenship'] ||
$typedErrors['candidate']['personalIdNumber'] ||
@ -217,10 +218,21 @@
<SchoolBadge />
</div>
{#if pageIndex === 0}
<form on:submit={handleSubmit}>
<h1 class="text-sspsBlue mt-8 text-4xl font-semibold">Váš souhlas</h1>
<p class="text-sspsGray mt-8 block text-center font-light">
V rámci portálu pro přijímací řízení zpracováváme mnoho osobních údajů. Proto je nutný Váš souhlas s jejich zpracováním.
</p>
<div class="mt-8 w-full">
<GdprCheckBox />
</div>
</form>
{:else if pageIndex === 1}
<form on:submit={handleSubmit}>
<h1 class="text-sspsBlue mt-8 text-4xl font-semibold">Registrace</h1>
<p class="text-sspsGray mt-8 block text-center font-light">
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ů.
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 w-full items-center justify-center md:flex-col">
<span class="mt-8 w-full">
@ -250,11 +262,11 @@
/>
</div>
</form>
{/if}
{#if pageIndex === 1}
{:else if pageIndex === 2}
<h1 class="text-sspsBlue mt-8 text-4xl font-semibold">Něco o tobě</h1>
<p class="text-sspsGray mt-8 block text-center font-light">
Pro registraci je potřeba vyplnit několik údajů o tobě. Tyto údaje budou použity pro přijímací řízení. Všechny údaje jsou důležité a bez nich se registrace nezdaří.
Pro registraci je potřeba vyplnit několik údajů o tobě. Tyto údaje budou použity pro
přijímací řízení. Všechny údaje jsou důležité a bez nich se registrace nezdaří.
</p>
<div class="flex w-full flex-row md:flex-col">
<span class="mt-8 w-full">
@ -300,8 +312,7 @@
/>
</div>
</div>
{/if}
{#if pageIndex === 2}
{:else if pageIndex === 3}
<h1 class="text-sspsBlue mt-8 text-4xl font-semibold">Už jen kousek!</h1>
<p class="text-sspsGray mt-8 block text-center font-light">
Sběr dat o zákonném zástupci je klíčový pro získání důležitých kontaktů a informací.
@ -335,8 +346,7 @@
</span>
</div>
</div>
{/if}
{#if pageIndex === 3}
{:else if pageIndex === 4}
<h1 class="text-sspsBlue mt-8 text-4xl font-semibold">Dobrovolné!</h1>
<p class="text-sspsGray mt-8 block text-center font-light">
V případě, že máte druhého zákonného zástupce (např. otec a matka), můžete jej zde zadat.
@ -370,8 +380,7 @@
</span>
</div>
</div>
{/if}
{#if pageIndex === 4}
{:else if pageIndex === 5}
<h1 class="text-sspsBlue mt-8 text-4xl font-semibold">Poslední krok</h1>
<p class="text-sspsGray mt-8 block text-center font-light">
Zadejte prosím své občanství, rodné číslo a obor na který se hlásíte.