poletani.cz/app
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Homepage, verejna cast, vetsi sada uprav a oprav

Browse Source
This commit is contained in:
Michal Kváček
2023-08-21 22:45:58 +02:00
parent 8bc477a611
commit 8c3b8d19dd
54 changed files with 550 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/profile/ProfilePage.vue
+1 -1
View File
@@ -38,7 +38,7 @@ const openedTab = ref("profile");
</q-tab-panel>
<q-tab-panel name="publicProfile">
<PublicProfileInfo :user="loggedUser" />
<PublicProfileInfo @save="handleSave" :user="loggedUser" />
</q-tab-panel>
</q-tab-panels>
src/pages/profile/details/AircraftDetailPage.vue → src/pages/profile/aircraft/AircraftDetailPage.vue
+3 -13
View File
@@ -42,14 +42,14 @@ watch(aircraft, (newVal) => {
<template v-else>
<q-card class="q-mx-md q-my-md flight-detail-card">
<q-img :src="aircraft.photoUrl"/>
<q-img :src="aircraft.photoUrl" v-if="aircraft.photoUrl" />
<q-card-section>
<q-list>
<q-item>
<q-item v-if="aircraft.manufacturer">
Výrobce: {{ aircraft.manufacturer }}
</q-item>
<q-item>
<q-item v-if="aircraft.model">
Model: {{ aircraft.model }}
</q-item>
</q-list>
@@ -66,16 +66,6 @@ watch(aircraft, (newVal) => {
</q-card-actions>
</q-card>
<!-- <h2>Limits</h2>-->
<!-- Wind: {{ aircraft.limits.wind.frontKt }}/{{ aircraft.limits.wind.sideKt }} kt-->
<!-- Neprekrocitelna rychlost: {{ aircraft.limits.speed.vmax }}-->
<!-- Cestovni rychlost:-->
<!-- Maximalni rychlost s klapkami:-->
<!-- Padova rychlost bez klapek:-->
<!-- Padova rychlost s klapkami (plne vysunute):-->
<FAB :router-link='{name: "aircraftEdit", params: {id: aircraft.id}}' mode="edit"/>
</template>
src/pages/profile/lists/AircraftsPage.vue → src/pages/profile/aircraft/AircraftsPage.vue
View File
src/pages/profile/forms/EditAircraftPage.vue → src/pages/profile/aircraft/EditAircraftPage.vue
+3 -2
View File
@@ -11,7 +11,8 @@ import {useAppStore} from "stores/App";
import {copilot} from "src/composables/objects/copilot";
let isRequestPending = ref(false);
const isRequestPending = ref(false);
const $router = useRouter();
const $q = useQuasar();
const aircraftId = parseInt(useRoute().params.id);
@@ -19,7 +20,7 @@ const handleSave = (formData) => {
isRequestPending.value = true;
useAircraftsStore().update(aircraftId, formData).then(() => {
$q.notify(successObject("Letadlo úspěšně upraveno"));
useRouter().push({name: "aircrafts"});
$router.push({name: "aircrafts"});
}).finally(() => {
isRequestPending.value = false;
})
src/pages/profile/forms/NewAircraftsPage.vue → src/pages/profile/aircraft/NewAircraftsPage.vue
+2 -1
View File
@@ -7,9 +7,10 @@ import {ref} from "vue";
import {useAppStore} from "stores/App";
import {successObject} from "src/composables/dialog";
let isRequestPending = ref(false);
const $q = useQuasar();
const router = useRouter();
let isRequestPending = ref(false);
const handleSave = (formData) => {
isRequestPending.value = true;
useAircraftsStore().create(formData).then(() => {
src/pages/profile/details/CopilotDetailPage.vue → src/pages/profile/copilot/CopilotDetailPage.vue
View File
src/pages/profile/lists/CopilotsPage.vue → src/pages/profile/copilot/CopilotsPage.vue
+4 -12
View File
@@ -4,8 +4,8 @@ import {fetchCopilots, loading, copilots} from "src/composables/objects/copilot"
import CopilotsList from "components/copilots/CopilotsList.vue";
import FAB from "components/FAB.vue";
import {useAppStore} from "stores/App";
import {aircrafts} from "src/composables/objects/aircraft";
import BasicListSkeleton from "components/BasicListSkeleton.vue";
import BasicInfoBanner from "components/BasicInfoBanner.vue";
onMounted(() => {
fetchCopilots();
@@ -16,17 +16,9 @@ onMounted(() => {
<template>
<BasicListSkeleton :items-count-min="5" :items-count-max="10" v-if="loading"/>
<div class="q-pa-md q-gutter-sm" v-else-if="!loading && copilots.length === 0">
<q-banner class="bg-light-blue text-white">
<template v-slot:avatar>
<q-icon name="info"/>
</template>
Zatím tu není nikdo. Přidej si let s někým nebo kopilota vytvoř ručně tu.
<template v-slot:action>
<q-btn flat color="white" :to="{name: 'addCopilot'}" label="Přidat"/>
</template>
</q-banner>
</div>
<BasicInfoBanner v-else-if="!loading && copilots.length === 0" :router-add="{name: 'addCopilot'}">
Zatím tu není nikdo. Přidej si let s někým nebo kopilota vytvoř ručně tu.
</BasicInfoBanner>
<CopilotsList :items="copilots" v-else/>
src/pages/profile/forms/EditCopilotPage.vue → src/pages/profile/copilot/EditCopilotPage.vue
View File
src/pages/profile/forms/NewCopilotPage.vue → src/pages/profile/copilot/NewCopilotPage.vue
+6 -8
View File
@@ -1,7 +1,7 @@
<script setup>
import {useRouter} from "vue-router";
import {useQuasar} from "quasar";
import {onMounted, ref} from "vue";
import {ref} from "vue";
import {successObject} from "src/composables/dialog";
import {useCopilotsStore} from "stores/Copilots";
import CopilotForm from "components/copilots/CopilotForm.vue";
@@ -20,13 +20,11 @@ const handleSave = (formData) => {
})
}
onMounted(() => {
useAppStore().setPageTitle("Nový spolucestující");
useAppStore().setBreadcrumbs([
{to: {name: "copilots"}, label: "Spolucestující"},
{label: "Nový"}
]);
});
useAppStore().setPageTitle("Nový spolucestující");
useAppStore().setBreadcrumbs([
{to: {name: "copilots"}, label: "Spolucestující"},
{label: "Nový"}
]);
</script>
<template>
src/pages/profile/forms/EditFlightPage.vue → src/pages/profile/flight/EditFlightPage.vue
+9 -5
View File
@@ -33,8 +33,6 @@ const locations = storeToRefs(usePointsOfInterestStore()).items;
const airports = storeToRefs(useAirportsStore()).items;
const copilots = storeToRefs(useCopilotsStore()).items;
const disabledSteps = computed(() => flight.value.solo ? ["copilot"] : [flight.value.solo]);
const formStep = ref("");
watch(() => route.params.step, (val) => formStep.value = val);
@@ -52,7 +50,8 @@ onMounted(() => {
const handleFlightEdit = (data) => {
useFlightsStore().update(flightId, data).then(() => {
$q.notify(successObject("Úspěšně upraveno"));
fetchFlight(flightId);
fetchFlight(flightId); // je tu potreba ten refetch? Ve storu se upravuje, mozna by stacilo jen getterem upravit
// hodnotu `flight`
})
}
@@ -106,7 +105,7 @@ const openPhotoEdit = (photo) => {
<q-breadcrumbs-el>Editace</q-breadcrumbs-el>
</q-breadcrumbs>
<FlightFormSteps :router-edit-mode="true" :flightId="flightId" :disabled="disabledSteps"/>
<FlightFormSteps :router-edit-mode="true" :flightId="flightId" />
<q-tab-panels v-model="formStep">
<q-tab-panel name="basic">
@@ -138,7 +137,12 @@ const openPhotoEdit = (photo) => {
@save="handlePhotosUpload"
/>
<PhotoForm v-model="openEdit" :locations="locations" :photo="editPhoto" @save="handlePhotoUpdate"/>
<PhotoForm
v-model="openEdit"
:locations="locations"
:photo="editPhoto"
@save="handlePhotoUpdate"
/>
<PhotosList
:photos="flight.photos"
src/pages/profile/details/FlightDetailPage.vue → src/pages/profile/flight/FlightDetailPage.vue
+33 -37
View File
@@ -12,7 +12,6 @@ import PhotoCarousel from "components/flights/PhotoCarousel.vue";
import FlightTrackMap from "components/flights/FlightTrackMap.vue";
import {useUserStore} from "stores/User";
const $q = useQuasar();
const $router = useRouter();
const flightId = parseInt(useRoute().params.id);
@@ -59,7 +58,6 @@ const copyLinkToClipboard = () => {
copyToClipboard(window.location.origin + url.href).then(() => {
$q.notify(successObject("Odkaz zkopírován"))
});
;
};
</script>
@@ -68,45 +66,43 @@ const copyLinkToClipboard = () => {
<template>
<FlightDetailSkeleton v-if="loading || !flight"/>
<template v-else>
<q-card class="q-mx-md q-my-md flight-detail-card">
<PhotoCarousel :cover-photo-url="flight.coverPhoto?.url" :photos="flight.photos"/>
<q-card class="flight-detail-card" v-else>
<PhotoCarousel :cover-photo-url="flight.coverPhoto?.url" :photos="flight.photos"/>
<q-card-actions class="q-my-md">
<div class="col-grow">
<q-btn
flat
:to="{name: 'flightEdit', params:{id: flight.id}}"
icon="edit"
text-color="primary"
label="Upravit"
/>
<q-card-actions class="q-my-md">
<div class="col-grow">
<q-btn
flat
:to="{name: 'flightEdit', params:{id: flight.id}}"
icon="edit"
text-color="primary"
label="Upravit"
/>
<q-btn
@click="togglePublicVisibility"
:icon="flight.isPublic ? 'visibility_off' : 'visibility'"
flat
:label="flight.isPublic ? 'Skrýt' : 'Zveřejnit'"
/>
<q-btn
@click="togglePublicVisibility"
:icon="flight.isPublic ? 'visibility_off' : 'visibility'"
flat
:label="flight.isPublic ? 'Skrýt' : 'Zveřejnit'"
/>
<q-btn
icon="link"
@click="copyLinkToClipboard()"
flat
v-if="flight.isPublic"
label="Získat odkaz"
/>
</div>
<q-btn @click="handleDeleteAndRedirect" icon="delete" flat text-color="red" label="Smazat"/>
</q-card-actions>
<q-btn
icon="link"
@click="copyLinkToClipboard()"
flat
v-if="flight.isPublic"
label="Získat odkaz"
/>
</div>
<q-btn @click="handleDeleteAndRedirect" icon="delete" flat text-color="red" label="Smazat"/>
</q-card-actions>
<q-card-section>
<FlightBasicInfo :flight="flight"/>
<q-card-section>
<FlightBasicInfo :flight="flight" :show-copilots="true"/>
<article class="q-my-lg" v-html="flight.description"/>
<article class="q-my-lg" v-html="flight.description"/>
<FlightTrackMap :flight="flight"/>
</q-card-section>
</q-card>
</template>
<FlightTrackMap :flight="flight"/>
</q-card-section>
</q-card>
</template>
src/pages/profile/lists/FlightsPage.vue → src/pages/profile/flight/FlightsPage.vue
View File
src/pages/profile/forms/NewFlightPage.vue → src/pages/profile/flight/NewFlightPage.vue
View File
src/pages/profile/forms/EditPointOfInterestPage.vue → src/pages/profile/poi/EditPointOfInterestPage.vue
View File
src/pages/profile/forms/NewPointOfInterestPage.vue → src/pages/profile/poi/NewPointOfInterestPage.vue
View File
src/pages/profile/details/PointOfInterestDetailPage.vue → src/pages/profile/poi/PointOfInterestDetailPage.vue
View File
src/pages/profile/lists/PointsOfInterestPage.vue → src/pages/profile/poi/PointsOfInterestPage.vue
View File
src/pages/public/FlightDetailPage.vue
+12 -8
View File
@@ -7,17 +7,21 @@ import FlightTrackMap from "components/flights/FlightTrackMap.vue";
import FlightBasicInfo from "components/flights/FlightBasicInfo.vue";
import {useAppStore} from "stores/App";
import FlightDetailSkeleton from "components/flights/FlightDetailSkeleton.vue";
import {fetchUser, loading as pilotLoading, user as pilot} from "src/composables/objects/user";
import PublicProfileSkeleton from "components/profile/PublicProfileSkeleton.vue";
import PilotProfileCard from "components/profile/PilotProfileCard.vue";
const routeParams = useRoute().params
const routeParams = useRoute().params;
onMounted(() => {
fetchFlight(routeParams.id, routeParams.username);
fetchUser(routeParams.username)
})
watch(flight, (newVal) => {
const flightNameFormatted = flightName(newVal);
useAppStore().setPageTitle(flightNameFormatted);
useAppStore().setBreadcrumbs([
{to: {name: 'homepage'}, label: "Polétání.cz"},
{to: {name: "publicProfileDetail", params: {username: routeParams.username}}, label: `@${routeParams.username}`},
{label: flightNameFormatted}
]);
@@ -26,7 +30,6 @@ watch(flight, (newVal) => {
</script>
<template>
<div>
<FlightDetailSkeleton v-if="loading || !flight"/>
@@ -35,21 +38,22 @@ watch(flight, (newVal) => {
Pozor! Tento let není publikován a nebude tak dostupný pro ostatní!
</q-banner>
<q-card class="q-mx-md q-my-md flight-detail-card">
<PhotoCarousel
v-if="flight.coverPhoto"
:cover-photo-url="flight.coverPhoto.url"
:cover-photo-url="flight.coverPhoto?.url"
:photos="flight.photos"
/>
<q-card-section>
<FlightBasicInfo :flight="flight"/>
<FlightBasicInfo :flight="flight" :show-copilots="false"/>
<article class="q-my-lg" v-html="flight.description"/>
<FlightTrackMap :flight="flight"/>
</q-card-section>
</q-card>
</template>
</template>
<PublicProfileSkeleton v-if="pilotLoading"/>
<PilotProfileCard :pilot="pilot" v-else />
</div>
</template>
src/pages/public/IndexPage.vue
+82 -5
View File
@@ -1,11 +1,88 @@
<script setup>
</script>
<template>
<div>
<h1>Pochlub se svým polétáním!</h1>
<q-layout view="lHh Lpr lFf" style="background: url('hp/bg.jpg'); background-size: cover;">
<p>Létáš? Kam si archivuješ fotky a trasy? Polétání.cz je aplikace pro sdílení informací o tvých výletech vzduchem.</p>
</div>
<q-header class="bg-semi-transparent text-black" elevated>
<q-toolbar>
<q-toolbar-title>
Polétání.cz
</q-toolbar-title>
<q-btn rounded class="q-mx-sm" :to="{name: 'login'}" flat>Přihlášení</q-btn>
<q-btn rounded class="q-mx-sm" :to="{name: 'registration'}" color="primary">Registrace</q-btn>
</q-toolbar>
</q-header>
<q-page-container class="q-py-none">
<q-page>
<div class="row q-mx-md">
<div class="xs-hide sm-hide col-md-6 text-center">
<q-img src="hp/app_screenshot.png" fit="contain" class="app-screen" alt="Nahled aplikace"/>
</div>
<div class="col col-md-6">
<div class="info-box bg-semi-transparent q-mx-lg q-py-lg q-px-lg rounded-borders">
<div class="text-h2 text-center">Pochlub se polétáním</div>
<q-timeline color="primary" class="q-my-lg">
<q-timeline-entry title="Zaznamenej si let">
<div>
Zapiš si odkud, kdy a čím jsi letěl. Aplikace sama stáhne informace o počasí při vzletu a přistání.
</div>
</q-timeline-entry>
<q-timeline-entry title="Vyber a nahraj fotky">
<div>
Máš nějaké fotky z letu? Nahraj je ke svému letu! A pokud mají v sobě uloženou informaci o poloze, polétání.cz ti zobrazí i místo kde fotka vznikla.
</div>
</q-timeline-entry>
<q-timeline-entry title="Ulož trasu">
<div>
Polétání.cz umí pracovat s trasou ve formátu GPX. Pokud ale tento záznam nemáš, můžeš si naklikat trasu ručně.
</div>
</q-timeline-entry>
<q-timeline-entry title="Popiš zážitek">
<div>
Určitě se po ceste stalo něco vzrušujícího. Proč o tom nenapsat pár vět?
</div>
</q-timeline-entry>
<q-timeline-entry title="Sdílej">
<div>
Létat v sóle je super, ale ještě lepší je se o zážitek podělit. Jedním kliknutím můžeš svůj let zveřejnit a sdílet odkaz kde chceš. Třeba s tvým kopilotem.
</div>
</q-timeline-entry>
</q-timeline>
<div class="text-center q-my-lg">
<q-btn size="xl" :to="{name: 'registration'}" rounded color="secondary">Založit profil</q-btn>
</div>
</div>
</div>
</div>
</q-page>
</q-page-container>
</q-layout>
</template>
<style lang="scss">
.bg-semi-transparent {
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(10px);
}
.info-box {
font-size: 150%;
}
.app-screen {
max-height: 85vh;
}
</style>
src/pages/public/LoginPage.vue
+32 -27
View File
@@ -15,33 +15,38 @@ const logUser = () => {
</script>
<template>
<q-page class="window-height window-width row justify-center">
<q-card square style="width:95%; max-width: 450px; height:400px;" class="q-mt-lg">
<q-card-section class="bg-primary">
<h4 class="text-h5 q-my-md text-white">Login</h4>
</q-card-section>
<q-card-section>
<q-form class="q-px-sm q-pt-xl" @submit.prevent="logUser()">
<q-input square clearable v-model="email" type="email" label="Email">
<template v-slot:prepend>
<q-icon name="email"/>
</template>
</q-input>
<q-input square clearable v-model="password" type="password" label="Password">
<template v-slot:prepend>
<q-icon name="lock"/>
</template>
</q-input>
</q-form>
</q-card-section>
<q-layout view="lHh Lpr lFf">
<q-page-container>
<q-card-actions class="q-px-lg">
<q-btn unelevated size="lg" class="full-width" label="Přihlásit se" @click.prevent="logUser()"/>
</q-card-actions>
<q-card-section class="text-center q-pa-sm">
<router-link :to="{name: 'forgottenPassword'}" class="text-grey-6">Zapomenuté heslo</router-link>
</q-card-section>
</q-card>
<q-page class="window-height window-width row justify-center">
<q-card square style="width:95%; max-width: 450px; height:400px;" class="q-mt-lg">
<q-card-section class="bg-primary">
<h4 class="text-h5 q-my-md text-white">Login</h4>
</q-card-section>
<q-card-section>
<q-form class="q-px-sm q-pt-xl" @submit.prevent="logUser()">
<q-input square clearable v-model="email" type="email" label="Email">
<template v-slot:prepend>
<q-icon name="email"/>
</template>
</q-input>
<q-input square clearable v-model="password" type="password" label="Password">
<template v-slot:prepend>
<q-icon name="lock"/>
</template>
</q-input>
</q-form>
</q-card-section>
</q-page>
<q-card-actions class="q-px-lg">
<q-btn unelevated size="lg" class="full-width" label="Přihlásit se" @click.prevent="logUser()"/>
</q-card-actions>
<q-card-section class="text-center q-pa-sm">
<router-link :to="{name: 'forgottenPassword'}" class="text-grey-6">Zapomenuté heslo</router-link>
</q-card-section>
</q-card>
</q-page>
</q-page-container>
</q-layout>
</template>
src/pages/public/PilotProfilePage.vue
+24 -47
View File
@@ -1,48 +1,38 @@
<script setup>
import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
import {useAppStore} from "stores/App";
import {onMounted, ref} from "vue";
import {useUserStore} from "stores/User";
import {onMounted} from "vue";
import {useRoute} from "vue-router";
import {useFlightsStore} from "stores/Flights";
import {storeToRefs} from "pinia";
import FlightsListSkeleton from "components/flights/FlightsListSkeleton.vue";
import FlightsList from "components/flights/FlightsList.vue";
import AvatarFromPhoto from "components/AvatarFromPhoto.vue";
import {fetchFlights, flights, loading as flightsLoading} from "src/composables/objects/flight";
import {fetchUser, user as pilot, loading as pilotLoading} from "src/composables/objects/user";
import PublicProfileSkeleton from "components/profile/PublicProfileSkeleton.vue";
import {storeToRefs} from "pinia";
import {useUserStore} from "stores/User";
import {useAppStore} from "stores/App";
import PilotProfileCard from "components/profile/PilotProfileCard.vue";
const props = defineProps({
loggedUser: {
type: Object,
required: false
}
})
const loggedUser = storeToRefs(useUserStore()).user;
const username = useRoute().params.username;
const pilot = ref(null)
const loading = ref(true);
onMounted(() => {
loading.value = true;
useUserStore().fetchDetail(username).then((user) => {
pilot.value = user;
useAppStore().setPageTitle(pilot.value.name);
}).finally(() => {
loading.value = false
});
useFlightsStore().fetch(username);
fetchUser(username).then(user => {
useAppStore().setPageTitle(user.publicUsername);
useAppStore().setBreadcrumbs([
{to: {name: 'homepage'}, label: "Polétání.cz"},
{label: `@${user.publicUsername}`},
])
})
fetchFlights(username);
})
const flights = storeToRefs(useFlightsStore()).items;
</script>
<template>
<FlightsListSkeleton v-if="loading || !pilot"/>
<div class="row">
<div class="col-12 col-md-8">
<FlightsListSkeleton v-if="flightsLoading"/>
<div class="row" v-else>
<div class="col">
<q-banner class="bg-primary text-white" v-if="flights.length === 0">
<q-banner class="bg-primary text-white" v-else-if="!flightsLoading && flights.length === 0">
Tento pilot zatím nepublikoval žádný let.
</q-banner>
@@ -54,23 +44,10 @@ const flights = storeToRefs(useFlightsStore()).items;
/>
</template>
</div>
<div class="col-4 sm-hide">
<q-card class="q-mr-md" flat>
<q-img :src="pilot.titleImageUrl" v-if="pilot.titleImageUrl"/>
<q-card-section>
<div class="text-center" :style="`margin-top: ${pilot.titleImageUrl ? '-100' : '0'}px`">
<AvatarFromPhoto :size="150" :src="pilot.avatarImageUrl" v-if="pilot.avatarImageUrl" class="q-mb-sm"/>
<div class="text-h3">{{ pilot.name }}</div>
<div class="text-subtitle1 text-weight-thin">
Registrován: {{ formatDatetime(pilot.createdAt, FORMAT_DATE) }}
</div>
</div>
<div class="col-12 col-md-4">
<PublicProfileSkeleton v-if="pilotLoading"/>
<div class="q-my-lg" v-html="pilot.description"/>
</q-card-section>
</q-card>
<PilotProfileCard v-else :pilot="pilot" />
</div>
</div>
src/pages/public/RegisterPage.vue
+47 -42
View File
@@ -46,47 +46,52 @@ const rules = {
</script>
<template>
<q-page class="row justify-center">
<q-card style="width:95%; max-width: 450px; height: 500px">
<q-card-section class="bg-primary">
<h4 class="text-h5 text-white q-my-md">Registrace</h4>
</q-card-section>
<q-card-section>
<q-form
ref="form"
class="q-px-sm q-pt-xl q-pb-lg"
@submit.prevent="registerUser"
>
<q-input square clearable v-model="formData.name" type="text" label="Jméno">
<template v-slot:prepend>
<q-icon name="person"/>
</template>
</q-input>
<q-layout view="lHh Lpr lFf">
<q-page-container>
<q-input square clearable v-model="formData.email" type="email" label="E-mail" :rules="rules.email">
<template v-slot:prepend>
<q-icon name="email"/>
</template>
</q-input>
<q-input square clearable v-model="formData.password" type="password" label="Heslo" :rules="rules.password">
<template v-slot:prepend>
<q-icon name="lock"/>
</template>
</q-input>
</q-form>
</q-card-section>
<q-card-actions class="q-px-lg">
<q-btn
@click="registerUser"
unelevated
size="lg"
class="full-width"
label="Registrovat"
/>
</q-card-actions>
<q-card-section class="text-center q-pa-sm">
<router-link :to="{name: 'login'}" class="text-grey-6">Zpět na login</router-link>
</q-card-section>
</q-card>
</q-page>
<q-page class="row justify-center">
<q-card style="width:95%; max-width: 450px; height: 500px">
<q-card-section class="bg-primary">
<h4 class="text-h5 text-white q-my-md">Registrace</h4>
</q-card-section>
<q-card-section>
<q-form
ref="form"
class="q-px-sm q-pt-xl q-pb-lg"
@submit.prevent="registerUser"
>
<q-input square clearable v-model="formData.name" type="text" label="Jméno">
<template v-slot:prepend>
<q-icon name="person"/>
</template>
</q-input>
<q-input square clearable v-model="formData.email" type="email" label="E-mail" :rules="rules.email">
<template v-slot:prepend>
<q-icon name="email"/>
</template>
</q-input>
<q-input square clearable v-model="formData.password" type="password" label="Heslo" :rules="rules.password">
<template v-slot:prepend>
<q-icon name="lock"/>
</template>
</q-input>
</q-form>
</q-card-section>
<q-card-actions class="q-px-lg">
<q-btn
@click="registerUser"
unelevated
size="lg"
class="full-width"
label="Registrovat"
/>
</q-card-actions>
<q-card-section class="text-center q-pa-sm">
<router-link :to="{name: 'login'}" class="text-grey-6">Zpět na login</router-link>
</q-card-section>
</q-card>
</q-page>
</q-page-container>
</q-layout>
</template>