dan/Portfolio
1
0
Fork 0
mirror of https://github.com/danbulant/Portfolio synced 2026-05-27 14:02:14 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: error for gdpr checkbox

Browse source
This commit is contained in:
EETagent 2022-12-19 21:05:10 +01:00
parent a9ba36e3cc
commit d97dafaa09
2 changed files with 38 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
frontend/src/lib/components/checkbox/GdprCheckBox.svelte
View file

@ -1,21 +1,40 @@
<script lang="ts"> <script lang="ts">
export let value: boolean = false; export let value: boolean = false;
export let error: string = '';
</script> </script>
<input type="checkbox" id="gdpr-option" bind:checked={value} class="peer hidden" /> <input
class:error
on:change
type="checkbox"
id="gdpr-option"
bind:checked={value}
class="peer hidden"
/>
<label <label
for="gdpr-option" 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" class="peer-checked:border-sspsBlue peer-checked:text-gray-600"
class:error
> >
<div class="block"> <div class="block">
<span class="text-2xl">📜</span> <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-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">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 class="w-full text-sm"><a class="underline" href="/gdpr">Zde</a></div>
</div> </div>
</label> </label>
<style> <style>
label {
@apply inline-flex w-full items-center justify-between;
@apply cursor-pointer;
@apply bg-white p-5 text-gray-500;
@apply hover:bg-gray-50 hover:text-gray-600;
@apply rounded-lg border-2 border-gray-200;
}
.error {
@apply border-red-700;
}
</style> </style>

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

@ -24,6 +24,7 @@
let pagesFilled = 0; let pagesFilled = 0;
const formInitialValues = { const formInitialValues = {
gdpr: false,
candidate: { candidate: {
name: '', name: '',
surname: '', surname: '',
@ -54,6 +55,7 @@
}; };
const formValidationSchema = yup.object().shape({ const formValidationSchema = yup.object().shape({
gdpr: yup.boolean().oneOf([true]),
candidate: yup.object().shape({ candidate: yup.object().shape({
name: yup.string().required(), name: yup.string().required(),
surname: yup.string(), surname: yup.string(),
@ -156,6 +158,11 @@
const isPageInvalid = (): boolean => { const isPageInvalid = (): boolean => {
switch (pageIndex) { switch (pageIndex) {
case 0:
if ($typedErrors['gdpr']) {
return true;
}
break;
case 1: case 1:
if ( if (
$typedErrors['candidate']['name'] || $typedErrors['candidate']['name'] ||
@ -221,10 +228,15 @@
<form on:submit={handleSubmit}> <form on:submit={handleSubmit}>
<h1 class="text-sspsBlue mt-8 text-4xl font-semibold">Váš souhlas</h1> <h1 class="text-sspsBlue mt-8 text-4xl font-semibold">Váš souhlas</h1>
<p class="text-sspsGray mt-8 block text-center font-light"> <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. 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> </p>
<div class="mt-8 w-full"> <div class="mt-8 w-full">
<GdprCheckBox /> <GdprCheckBox
on:change={handleChange}
bind:value={$form.gdpr}
error={$typedErrors['gdpr']}
/>
</div> </div>
</form> </form>
{:else if pageIndex === 1} {:else if pageIndex === 1}