refactor: clean up template and style formatting

This commit is contained in:
2025-10-20 18:20:48 +02:00
parent 8d68300c3d
commit 7351c69ce0
7 changed files with 342 additions and 466 deletions

View File

@@ -1,122 +1,110 @@
<template> <template>
<h2 class="page-container page-title">Detaily a pravidlá odbornej praxe pre firmy</h2> <h2 class="page-container page-title">Detaily a pravidlá odbornej praxe pre firmy</h2>
<p class="page-container page-lead"> <p class="page-container page-lead">
Kompletné informácie o odbornej praxi pre firmy Kompletné informácie o odbornej praxi pre firmy
</p> </p>
<br /> <br />
<h3 class="page-container section-title">Zmluvné podmienky</h3> <h3 class="page-container section-title">Zmluvné podmienky</h3>
<v-row class="pc" align="stretch" justify="start"> <v-row class="pc" align="stretch" justify="start">
<PageCard <PageCard title="Zmluva o odbornej praxi" description="Medzi firmou a študentom sa uzatvára Zmluva o odbornej praxi, ktorá definuje práva a povinnosti oboch strán.
title="Zmluva o odbornej praxi" Zmluva musí byť v súlade s legislatívou a internými predpismi školy." link="/"
description="Medzi firmou a študentom sa uzatvára Zmluva o odbornej praxi, ktorá definuje práva a povinnosti oboch strán. icon="mdi mdi-file-document-edit-outline" />
Zmluva musí byť v súlade s legislatívou a internými predpismi školy." </v-row>
link="/"
icon="mdi mdi-file-document-edit-outline"
/>
</v-row>
<h3 class="page-container section-title">Pravidlá a povinnost počas praxe</h3> <h3 class="page-container section-title">Pravidlá a povinnost počas praxe</h3>
<v-row class="pc" align="stretch" justify="start"> <v-row class="pc" align="stretch" justify="start">
<PageCard <PageCard title="Pridelenie mentora"
title="Pridelenie mentora" description="Každému študentovi musí byť pridelený zodpovedný zamestnanec (mentor), ktorý ho bude viesť, zadávať mu úlohy a poskytovať spätnú väzbu."
description="Každému študentovi musí byť pridelený zodpovedný zamestnanec (mentor), ktorý ho bude viesť, zadávať mu úlohy a poskytovať spätnú väzbu." link="/" icon="mdi mdi-account-multiple-outline" />
link="/" <PageCard title="Relevantné úlohy"
icon="mdi mdi-account-multiple-outline" description="Náplň práce študenta musí zodpovedať jeho študijnému odboru a umožniť mu získať praktické zručnosti a vedomosti."
/> link="/" icon="mdi mdi-notebook-check-outline" />
<PageCard <PageCard title="Bezpečnosť pri práci"
title="Relevantné úlohy" description="Firma je povinná zabezpečiť preškolenie o bezpečnosti a ochrane zdravia pri práci (BOZP) a poskytnúť potrebné ochranné pomôcky."
description="Náplň práce študenta musí zodpovedať jeho študijnému odboru a umožniť mu získať praktické zručnosti a vedomosti." link="/" icon="mdi mdi-shield-outline" />
link="/" </v-row>
icon="mdi mdi-notebook-check-outline"
/>
<PageCard
title="Bezpečnosť pri práci"
description="Firma je povinná zabezpečiť preškolenie o bezpečnosti a ochrane zdravia pri práci (BOZP) a poskytnúť potrebné ochranné pomôcky."
link="/"
icon="mdi mdi-shield-outline"
/>
</v-row>
<h3 class="page-container section-title">Hodnotenie a ukončenie praxe</h3> <h3 class="page-container section-title">Hodnotenie a ukončenie praxe</h3>
<div class="ac"> <div class="ac">
<v-expansion-panels <v-expansion-panels variant="accordion" class="faq" elevation="0" rounded="lg">
variant="accordion" <v-expansion-panel>
class="faq" <v-expansion-panel-title>
elevation="0" Ako prebieha hodnotenie študenta?
rounded="lg" </v-expansion-panel-title>
> <v-expansion-panel-text>
<v-expansion-panel> Študenta hodnotí mentor vo firme a zodpovedná osoba na škole podľa
<v-expansion-panel-title> stanovených kritérií (účasť, splnené úlohy, kvalita výstupov a pod.).
Ako prebieha hodnotenie študenta? </v-expansion-panel-text>
</v-expansion-panel-title> </v-expansion-panel>
<v-expansion-panel-text>
Študenta hodnotí mentor vo firme a zodpovedná osoba na škole podľa
stanovených kritérií (účasť, splnené úlohy, kvalita výstupov a pod.).
</v-expansion-panel-text>
</v-expansion-panel>
<v-expansion-panel> <v-expansion-panel>
<v-expansion-panel-title> <v-expansion-panel-title>
Aké dokumenty je potrebné vystaviť po ukončení praxe? Aké dokumenty je potrebné vystaviť po ukončení praxe?
</v-expansion-panel-title> </v-expansion-panel-title>
<v-expansion-panel-text> <v-expansion-panel-text>
Typicky potvrdenie o absolvovaní praxe a hodnotiaci formulár Typicky potvrdenie o absolvovaní praxe a hodnotiaci formulár
podpísaný mentorom. Presný zoznam dodá škola. podpísaný mentorom. Presný zoznam dodá škola.
</v-expansion-panel-text> </v-expansion-panel-text>
</v-expansion-panel> </v-expansion-panel>
</v-expansion-panels> </v-expansion-panels>
</div> </div>
</template> </template>
<style scoped> <style scoped>
.page-container { .page-container {
max-width: 1120px; max-width: 1120px;
margin: 0 auto; margin: 0 auto;
padding-left: 24px; padding-left: 24px;
padding-right: 24px; padding-right: 24px;
} }
.page-title { .page-title {
font-size: 32px; font-size: 32px;
line-height: 1.2; line-height: 1.2;
font-weight: 700; font-weight: 700;
margin: 16px 0 8px; margin: 16px 0 8px;
color: #1f1f1f; color: #1f1f1f;
} }
.page-lead { .page-lead {
margin: 0 0 24px 0; margin: 0 0 24px 0;
color: #6b6b6b; color: #6b6b6b;
} }
.pc { .pc {
margin: 0 0 24px 0; margin: 0 0 24px 0;
} }
.section-title { .section-title {
font-size: 22px; font-size: 22px;
font-weight: 700; font-weight: 700;
margin: 16px 0 12px; margin: 16px 0 12px;
color: #1f1f1f; color: #1f1f1f;
}
.ac {
margin-left: 24px;
margin-bottom: 50px;
max-width: 700px;
}
.faq :deep(.v-expansion-panel) {
border: 1px solid #e0e0e0;
border-radius: 10px;
}
.faq :deep(.v-expansion-panel:not(:first-child)) {
margin-top: 12px;
}
.faq :deep(.v-expansion-panel-title) {
font-weight: 600;
} }
.ac {
margin-left: 24px;
margin-bottom: 50px;
max-width: 700px;
}
.faq :deep(.v-expansion-panel) {
border: 1px solid #e0e0e0;
border-radius: 10px;
}
.faq :deep(.v-expansion-panel:not(:first-child)) {
margin-top: 12px;
}
.faq :deep(.v-expansion-panel-title) {
font-weight: 600;
}
</style> </style>

View File

@@ -1,74 +1,60 @@
<template> <template>
<h2 class="page-container page-title">Informácie o odbornej praxi pre študentov</h2> <h2 class="page-container page-title">Informácie o odbornej praxi pre študentov</h2>
<p class="page-container page-lead"> <p class="page-container page-lead">
Kompletné informácie o odbornej praxi priebeh, hodnotenie, zmluvy a pokyny pre študentov. Kompletné informácie o odbornej praxi priebeh, hodnotenie, zmluvy a pokyny pre študentov.
</p> </p>
<br /> <br />
<h3 class="page-container section-title">Podmienky absolvovania predmetu</h3> <h3 class="page-container section-title">Podmienky absolvovania predmetu</h3>
<v-row class="pc" align="stretch" justify="start"> <v-row class="pc" align="stretch" justify="start">
<PageCard <PageCard title="Rozsah a účasť"
title="Rozsah a účasť" description="Absolvovanie praxe v minimálnom rozsahu 130 hodín a povinná účasť na úvodnom stretnutí"
description="Absolvovanie praxe v minimálnom rozsahu 130 hodín a povinná účasť na úvodnom stretnutí" link="/" icon="mdi-clock-time-five-outline" />
link="/" <PageCard title="Denník praxe"
icon="mdi-clock-time-five-outline" description="Priebežné vedenie denníka praxe podľa predpísanej štruktúry a jeho odovzdanie na konci obdobia."
/> link="/" icon="mdi-notebook-edit-outline" />
<PageCard <PageCard title="Poster a prezentácia"
title="Denník praxe" description="Príprava a prezentácia posteru. Hodnotí sa obsah, vizuálna stránka a kvalita prezentácie."
description="Priebežné vedenie denníka praxe podľa predpísanej štruktúry a jeho odovzdanie na konci obdobia." link="/" icon="mdi-presentation" />
link="/" <PageCard title="Bodové hodnotenie"
icon="mdi-notebook-edit-outline" description="Max. 100 bodov (50b firma, 50b poster a prezentácia). Minimum pre absolvovanie je 51 bodov."
/> link="/" icon="mdi-checkbox-marked-outline" />
<PageCard <PageCard title="Kredity" description="Po úspešnom absolvovaní predmetu študent získa 5 kreditov" link="/"
title="Poster a prezentácia" icon="mdi-school-outline" />
description="Príprava a prezentácia posteru. Hodnotí sa obsah, vizuálna stránka a kvalita prezentácie." </v-row>
link="/"
icon="mdi-presentation"
/>
<PageCard
title="Bodové hodnotenie"
description="Max. 100 bodov (50b firma, 50b poster a prezentácia). Minimum pre absolvovanie je 51 bodov."
link="/"
icon="mdi-checkbox-marked-outline"
/>
<PageCard
title="Kredity"
description="Po úspešnom absolvovaní predmetu študent získa 5 kreditov"
link="/"
icon="mdi-school-outline"
/>
</v-row>
</template> </template>
<style scoped> <style scoped>
.page-container { .page-container {
max-width: 1120px; max-width: 1120px;
margin: 0 auto; margin: 0 auto;
padding-left: 24px; padding-left: 24px;
padding-right: 24px; padding-right: 24px;
} }
.page-title { .page-title {
font-size: 32px; font-size: 32px;
line-height: 1.2; line-height: 1.2;
font-weight: 700; font-weight: 700;
margin: 16px 0 8px; margin: 16px 0 8px;
color: #1f1f1f; color: #1f1f1f;
} }
.page-lead { .page-lead {
margin: 0 0 24px 0; margin: 0 0 24px 0;
color: #6b6b6b; color: #6b6b6b;
} }
.pc { .pc {
margin: 0 0 24px 0; margin: 0 0 24px 0;
} }
.section-title {
font-size: 22px;
font-weight: 700;
margin: 16px 0 12px;
color: #1f1f1f;
}
.section-title {
font-size: 22px;
font-weight: 700;
margin: 16px 0 12px;
color: #1f1f1f;
}
</style> </style>

View File

@@ -1,52 +1,29 @@
<template> <template>
<div class="page-container form-wrap"> <div class="page-container form-wrap">
<h2 class="page-title">Prihlásenie</h2> <h2 class="page-title">Prihlásenie</h2>
<v-form v-model="isValid" @submit.prevent="onSubmit"> <v-form v-model="isValid" @submit.prevent="onSubmit">
<v-text-field <v-text-field v-model="form.email" :rules="[rules.required, rules.email]" label="Email:" variant="outlined"
v-model="form.email" density="comfortable" />
:rules="[rules.required, rules.email]"
label="Email:"
variant="outlined"
density="comfortable"
/>
<v-text-field <v-text-field v-model="form.password" :rules="[rules.required]" :type="showPassword ? 'text' : 'password'"
v-model="form.password" label="Heslo:" variant="outlined" density="comfortable"
:rules="[rules.required]" :append-inner-icon="showPassword ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
:type="showPassword ? 'text' : 'password'" @click:append-inner="showPassword = !showPassword" />
label="Heslo:"
variant="outlined"
density="comfortable"
:append-inner-icon="showPassword ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
@click:append-inner="showPassword = !showPassword"
/>
<div class="actions-row"> <div class="actions-row">
<v-spacer /> <v-spacer />
<v-btn <v-btn type="button" variant="tonal" color="success" size="small" class="forgot-btn" dense
type="button" to="/reset_psw">
variant="tonal" Zabudnuté heslo...
color="success" </v-btn>
size="small" </div>
class="forgot-btn"
dense to="/reset_psw"
>
Zabudnuté heslo...
</v-btn>
</div>
<v-btn <v-btn type="submit" color="success" size="large" block :disabled="!isValid">
type="submit" Prihlásiť
color="success" </v-btn>
size="large" </v-form>
block </div>
:disabled="!isValid"
>
Prihlásiť
</v-btn>
</v-form>
</div>
</template> </template>
<script setup> <script setup>
@@ -56,13 +33,13 @@ const isValid = ref(false)
const showPassword = ref(false) const showPassword = ref(false)
const form = reactive({ const form = reactive({
email: '', email: '',
password: '', password: '',
}) })
const rules = { const rules = {
required: v => (!!v && String(v).trim().length > 0) || 'Povinné pole', required: v => (!!v && String(v).trim().length > 0) || 'Povinné pole',
email: v => /.+@.+\..+/.test(v) || 'Zadajte platný email', email: v => /.+@.+\..+/.test(v) || 'Zadajte platný email',
} }
function onSubmit() { function onSubmit() {
@@ -76,34 +53,41 @@ function onForgot() {
<style scoped> <style scoped>
.page-container { .page-container {
max-width: 1120px; max-width: 1120px;
margin: 0 auto; margin: 0 auto;
padding-left: 24px; padding-left: 24px;
padding-right: 24px; padding-right: 24px;
} }
.form-wrap { .form-wrap {
max-width: 640px; max-width: 640px;
} }
.page-title { .page-title {
font-size: 24px; font-size: 24px;
line-height: 1.2; line-height: 1.2;
font-weight: 700; font-weight: 700;
margin: 24px 0 16px; margin: 24px 0 16px;
color: #1f1f1f; color: #1f1f1f;
} }
.actions-row { .actions-row {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 20px; margin-bottom: 20px;
} }
.forgot-btn { .forgot-btn {
text-transform: none; text-transform: none;
font-weight: 600; font-weight: 600;
border-radius: 999px; border-radius: 999px;
} }
.mb-1 { margin-bottom: 6px; } .mb-1 {
.mb-2 { margin-bottom: 10px; } margin-bottom: 6px;
</style> }
.mb-2 {
margin-bottom: 10px;
}
</style>

View File

@@ -1,65 +1,30 @@
<template> <template>
<div class="page-container form-wrap"> <div class="page-container form-wrap">
<h4 class="page-title">Registrácia firmy</h4> <h4 class="page-title">Registrácia firmy</h4>
<v-form v-model="isValid" @submit.prevent="onSubmit"> <v-form v-model="isValid" @submit.prevent="onSubmit">
<v-text-field <v-text-field v-model="form.companyName" :rules="[rules.required]" label="Názov firmy:" variant="outlined"
v-model="form.companyName" density="comfortable" />
:rules="[rules.required]" <v-text-field v-model="form.companyAddress" :rules="[rules.required]" label="Adresa:" variant="outlined"
label="Názov firmy:" density="comfortable" />
variant="outlined"
density="comfortable"
/>
<v-text-field
v-model="form.companyAddress"
:rules="[rules.required]"
label="Adresa:"
variant="outlined"
density="comfortable"
/>
<h4 class="section-heading mt-4">Kontaktná osoba</h4> <h4 class="section-heading mt-4">Kontaktná osoba</h4>
<v-text-field <v-text-field v-model="form.contactName" :rules="[rules.required]" label="Meno:" variant="outlined"
v-model="form.contactName" density="comfortable" />
:rules="[rules.required]" <v-text-field v-model="form.contactEmail" :rules="[rules.required, rules.email]" label="Email:"
label="Meno:" variant="outlined" density="comfortable" />
variant="outlined" <v-text-field v-model="form.contactPhone" :rules="[rules.phone]" label="Telefón:" variant="outlined"
density="comfortable" density="comfortable" />
/>
<v-text-field
v-model="form.contactEmail"
:rules="[rules.required, rules.email]"
label="Email:"
variant="outlined"
density="comfortable"
/>
<v-text-field
v-model="form.contactPhone"
:rules="[rules.phone]"
label="Telefón:"
variant="outlined"
density="comfortable"
/>
<v-checkbox <v-checkbox v-model="form.consent" :rules="[rules.mustAgree]"
v-model="form.consent" label="Súhlasím s podmienkami spracúvania osobných údajov" density="comfortable" />
:rules="[rules.mustAgree]"
label="Súhlasím s podmienkami spracúvania osobných údajov"
density="comfortable"
/>
<v-btn <v-btn type="submit" color="success" size="large" block :disabled="!isValid || !form.consent">
type="submit" Registrovať
color="success" </v-btn>
size="large" </v-form>
block </div>
:disabled="!isValid || !form.consent"
>
Registrovať
</v-btn>
</v-form>
</div>
</template> </template>
<script setup> <script setup>
@@ -68,19 +33,19 @@ import { reactive, ref } from 'vue'
const isValid = ref(false) const isValid = ref(false)
const form = reactive({ const form = reactive({
companyName: '', companyName: '',
companyAddress: '', companyAddress: '',
contactName: '', contactName: '',
contactEmail: '', contactEmail: '',
contactPhone: '', contactPhone: '',
consent: false, consent: false,
}) })
const rules = { const rules = {
required: v => (!!v && String(v).trim().length > 0) || 'Povinné pole', required: v => (!!v && String(v).trim().length > 0) || 'Povinné pole',
email: v => /.+@.+\..+/.test(v) || 'Zadajte platný email', email: v => /.+@.+\..+/.test(v) || 'Zadajte platný email',
phone: v => (!v || /^[0-9 +()-]{6,}$/.test(v)) || 'Zadajte platné telefónne číslo', phone: v => (!v || /^[0-9 +()-]{6,}$/.test(v)) || 'Zadajte platné telefónne číslo',
mustAgree: v => v === true || 'Je potrebné súhlasiť', mustAgree: v => v === true || 'Je potrebné súhlasiť',
} }
function onSubmit() { function onSubmit() {
@@ -90,30 +55,40 @@ function onSubmit() {
<style scoped> <style scoped>
.page-container { .page-container {
max-width: 1120px; max-width: 1120px;
margin: 0 auto; margin: 0 auto;
padding-left: 24px; padding-left: 24px;
padding-right: 24px; padding-right: 24px;
} }
.form-wrap { .form-wrap {
max-width: 640px; max-width: 640px;
} }
.page-title { .page-title {
font-size: 24px; font-size: 24px;
line-height: 1.2; line-height: 1.2;
font-weight: 700; font-weight: 700;
margin: 24px 0 16px; margin: 24px 0 16px;
color: #1f1f1f; color: #1f1f1f;
} }
.section-heading { .section-heading {
font-size: 18px; font-size: 18px;
font-weight: 700; font-weight: 700;
margin: 8px 0 8px; margin: 8px 0 8px;
color: #1f1f1f; color: #1f1f1f;
} }
.mb-2 { margin-bottom: 8px; } .mb-2 {
.mb-3 { margin-bottom: 12px; } margin-bottom: 8px;
.mt-4 { margin-top: 16px; } }
</style>
.mb-3 {
margin-bottom: 12px;
}
.mt-4 {
margin-top: 16px;
}
</style>

View File

@@ -1,19 +1,11 @@
<template> <template>
<v-row class="pc" align="stretch" justify="start">
<v-row class="pc" align="stretch" justify="start"> <PageCard title="Registrácia študenta" description="Zaregistruj sa a začni svoju odbornú prax."
<PageCard link="/register/student" icon="mdi mdi-account" />
title="Registrácia študenta" <PageCard title="Registrácia firmy"
description="Zaregistruj sa a začni svoju odbornú prax." description="Staň sa partnerskou firmou a pomôž študentom získať prax vo svojom odbore."
link="/register/student" link="/register/company" icon="mdi mdi-office-building" />
icon="mdi mdi-account" </v-row>
/>
<PageCard
title="Registrácia firmy"
description="Staň sa partnerskou firmou a pomôž študentom získať prax vo svojom odbore."
link="/register/company"
icon="mdi mdi-office-building"
/>
</v-row>
</template> </template>
<style scoped> <style scoped>

View File

@@ -1,88 +1,37 @@
<template> <template>
<div class="page-container form-wrap"> <div class="page-container form-wrap">
<h4 class="page-title">Registrácia študenta</h4> <h4 class="page-title">Registrácia študenta</h4>
<v-form v-model="isValid" @submit.prevent="onSubmit"> <v-form v-model="isValid" @submit.prevent="onSubmit">
<v-text-field <v-text-field v-model="form.title" label="Tituly pred:" variant="outlined" density="comfortable" />
v-model="form.title"
label="Tituly pred:"
variant="outlined"
density="comfortable"
/>
<v-text-field <v-text-field v-model="form.firstName" :rules="[rules.required]" label="Meno:" variant="outlined"
v-model="form.firstName" density="comfortable" />
:rules="[rules.required]"
label="Meno:"
variant="outlined"
density="comfortable"
/>
<v-text-field <v-text-field v-model="form.lastName" :rules="[rules.required]" label="Priezvisko:" variant="outlined"
v-model="form.lastName" density="comfortable" />
:rules="[rules.required]"
label="Priezvisko:"
variant="outlined"
density="comfortable"
/>
<v-text-field <v-text-field v-model="form.address" label="Adresa:" variant="outlined" density="comfortable" />
v-model="form.address"
label="Adresa:"
variant="outlined"
density="comfortable"
/>
<v-text-field <v-text-field v-model="form.studentEmail" :rules="[rules.required, rules.email]" label="Študentský email:"
v-model="form.studentEmail" variant="outlined" density="comfortable" />
:rules="[rules.required, rules.email]"
label="Študentský email:"
variant="outlined"
density="comfortable"
/>
<v-text-field <v-text-field v-model="form.altEmail" :rules="[rules.optionalEmail]" label="Alternatívny email:"
v-model="form.altEmail" variant="outlined" density="comfortable" />
:rules="[rules.optionalEmail]"
label="Alternatívny email:"
variant="outlined"
density="comfortable"
/>
<v-text-field <v-text-field v-model="form.phone" :rules="[rules.phone]" label="Telefón:" variant="outlined"
v-model="form.phone" density="comfortable" />
:rules="[rules.phone]"
label="Telefón:"
variant="outlined"
density="comfortable"
/>
<v-select <v-select v-model="form.studyProgram" :items="programs" :rules="[rules.required]" label="Študijný odbor:"
v-model="form.studyProgram" variant="outlined" density="comfortable" />
:items="programs"
:rules="[rules.required]"
label="Študijný odbor:"
variant="outlined"
density="comfortable"
/>
<v-checkbox <v-checkbox v-model="form.consent" :rules="[rules.mustAgree]"
v-model="form.consent" label="Súhlasím s podmienkami spracúvania osobných údajov" density="comfortable" />
:rules="[rules.mustAgree]"
label="Súhlasím s podmienkami spracúvania osobných údajov"
density="comfortable"
/>
<v-btn <v-btn type="submit" color="success" size="large" block :disabled="!isValid || !form.consent">
type="submit" Registrovať
color="success" </v-btn>
size="large" </v-form>
block </div>
:disabled="!isValid || !form.consent"
>
Registrovať
</v-btn>
</v-form>
</div>
</template> </template>
<script setup> <script setup>
@@ -91,30 +40,30 @@ import { reactive, ref } from 'vue'
const isValid = ref(false) const isValid = ref(false)
const form = reactive({ const form = reactive({
title: '', title: '',
firstName: '', firstName: '',
lastName: '', lastName: '',
address: '', address: '',
studentEmail: '', studentEmail: '',
altEmail: '', altEmail: '',
phone: '', phone: '',
studyProgram: null, studyProgram: null,
consent: false, consent: false,
}) })
const programs = [ const programs = [
'Aplikovaná informatika', 'Aplikovaná informatika',
] ]
const rules = { const rules = {
required: v => (!!v && String(v).trim().length > 0) || 'Povinné pole', required: v => (!!v && String(v).trim().length > 0) || 'Povinné pole',
email: v => email: v =>
/.+@.+\..+/.test(v) || 'Zadajte platný email', /.+@.+\..+/.test(v) || 'Zadajte platný email',
optionalEmail: v => optionalEmail: v =>
(!v || /.+@.+\..+/.test(v)) || 'Zadajte platný email', (!v || /.+@.+\..+/.test(v)) || 'Zadajte platný email',
phone: v => phone: v =>
(!v || /^[0-9 +()-]{6,}$/.test(v)) || 'Zadajte platné telefónne číslo', (!v || /^[0-9 +()-]{6,}$/.test(v)) || 'Zadajte platné telefónne číslo',
mustAgree: v => v === true || 'Je potrebné súhlasiť', mustAgree: v => v === true || 'Je potrebné súhlasiť',
} }
function onSubmit() { function onSubmit() {
@@ -124,23 +73,33 @@ function onSubmit() {
<style scoped> <style scoped>
.page-container { .page-container {
max-width: 1120px; max-width: 1120px;
margin: 0 auto; margin: 0 auto;
padding-left: 24px; padding-left: 24px;
padding-right: 24px; padding-right: 24px;
} }
.page-title {
font-size: 24px;
line-height: 1.2;
font-weight: 700;
margin: 24px 0 16px;
color: #1f1f1f;
}
.form-wrap {
max-width: 640px;
}
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
</style>
.page-title {
font-size: 24px;
line-height: 1.2;
font-weight: 700;
margin: 24px 0 16px;
color: #1f1f1f;
}
.form-wrap {
max-width: 640px;
}
.mb-2 {
margin-bottom: 8px;
}
.mb-3 {
margin-bottom: 12px;
}
.mb-4 {
margin-bottom: 16px;
}
</style>

View File

@@ -1,31 +1,20 @@
<template> <template>
<div class="page-container form-wrap"> <div class="page-container form-wrap">
<h2 class="page-title">Reset hesla</h2> <h2 class="page-title">Reset hesla</h2>
<v-form v-model="isValid" @submit.prevent="onSubmit"> <v-form v-model="isValid" @submit.prevent="onSubmit">
<v-text-field <v-text-field v-model="email" :rules="[rules.required, rules.email]" label="Email:" variant="outlined"
v-model="email" density="comfortable" />
:rules="[rules.required, rules.email]"
label="Email:"
variant="outlined"
density="comfortable"
/>
<v-btn <v-btn type="submit" color="success" size="large" block :disabled="!isValid">
type="submit" Odoslať Email
color="success" </v-btn>
size="large" </v-form>
block
:disabled="!isValid"
>
Odoslať Email
</v-btn>
</v-form>
<v-snackbar v-model="snackbar" timeout="2500"> <v-snackbar v-model="snackbar" timeout="2500">
Odoslané na mail Odoslané na mail
</v-snackbar> </v-snackbar>
</div> </div>
</template> </template>
<script setup> <script setup>
@@ -36,33 +25,36 @@ const email = ref('')
const snackbar = ref(false) const snackbar = ref(false)
const rules = { const rules = {
required: v => (!!v && String(v).trim().length > 0) || 'Povinné pole', required: v => (!!v && String(v).trim().length > 0) || 'Povinné pole',
email: v => /.+@.+\..+/.test(v) || 'Zadajte platný email', email: v => /.+@.+\..+/.test(v) || 'Zadajte platný email',
} }
function onSubmit() { function onSubmit() {
snackbar.value = true snackbar.value = true
} }
</script> </script>
<style scoped> <style scoped>
.page-container { .page-container {
max-width: 1120px; max-width: 1120px;
margin: 0 auto; margin: 0 auto;
padding-left: 24px; padding-left: 24px;
padding-right: 24px; padding-right: 24px;
} }
.form-wrap { .form-wrap {
max-width: 560px; max-width: 560px;
} }
.page-title { .page-title {
font-size: 24px; font-size: 24px;
line-height: 1.2; line-height: 1.2;
font-weight: 700; font-weight: 700;
margin: 24px 0 16px; margin: 24px 0 16px;
color: #1f1f1f; color: #1f1f1f;
}
.mb-3 {
margin-bottom: 12px;
} }
.mb-3 { margin-bottom: 12px; }
</style> </style>