Aktualizace balicku, strnakovani, uprava hlavni stranky

src/pages/ContactPage.vue

@@ -0,0 +1,5 @@
+<script setup></script>
+
+<template>
+  contact form
+</template>

src/pages/profile/ProfilePage.vue

@@ -1,5 +1,5 @@
 <script setup>
-import {useUserStore} from "stores/User";
+import {useLoggedUserStore} from "stores/LoggedUser";
 import ProfileImagesForm from "components/profile/ProfileForm.vue";
 import {useAppStore} from "stores/App";
 import {storeToRefs} from "pinia";
@@ -10,14 +10,14 @@ import ChangePasswordForm from "components/profile/ChangePasswordForm.vue";
 import PublicProfileInfo from "components/profile/PublicProfileInfo.vue";
 
 useAppStore().setPageTitle("Profil");
-const loggedUser = storeToRefs(useUserStore()).user;
+const loggedUser = storeToRefs(useLoggedUserStore()).user;
 
 const $q = useQuasar();
 const handleSave = async (formData) => {
-  await useUserStore().update(formData);
+  await useLoggedUserStore().update(formData);
   $q.notify(successObject("Úspěšně uloženo"));
 };
-const isRequestPending = storeToRefs(useUserStore()).isMutationRunning;
+const isRequestPending = storeToRefs(useLoggedUserStore()).isMutationRunning;
 const openedTab = ref("profile");
 </script>
 

src/pages/profile/ProfileRefreshPage.vue

@@ -0,0 +1,24 @@
+<script setup>
+
+import {useRoute, useRouter} from "vue-router";
+import {computed, onMounted} from "vue";
+import {useLoggedUserStore} from "stores/LoggedUser";
+import {useAuthStore} from "stores/Auth";
+
+const $route = useRoute();
+const $router = useRouter();
+
+const url = computed(() => $route.query.url);
+
+onMounted(() => {
+  useAuthStore().refreshAccessToken().then(() => {
+    console.log("refreshnuto", $route.query.url);
+    $router.push($route.query.url)
+  });
+});
+
+</script>
+
+<template>
+  {{ url }}
+</template>

src/pages/profile/aircraft/AircraftDetailPage.vue

@@ -14,7 +14,7 @@ import PhotoGallery from "components/photos/PhotoGallery.vue";
 import TitlePhotoWithGallery from "components/photos/TitlePhotoWithGallery.vue";
 import ContentCard from "components/ContentCard.vue";
 import AircraftInfo from "components/aircrafts/AircraftInfo.vue";
-import {useUserStore} from "stores/User";
+import {useLoggedUserStore} from "stores/LoggedUser";
 import {useFlightsStore} from "stores/Flights";
 import {toggleVisibility} from "src/composables/form/formHandling";
 import ContentCardEditButton from "components/ContentCardEditButton.vue";
@@ -24,7 +24,7 @@ const $router = useRouter();
 
 const aircraftId = parseInt(useRoute().params.id);
 useAircraftsStore().fetchDetail(aircraftId);
-const loggedUser = storeToRefs(useUserStore()).user;
+const loggedUser = storeToRefs(useLoggedUserStore()).user;
 const {aircraft, isQueryRunning} = storeToRefs(useAircraftsStore());
 watch(() => aircraft.value, (newVal) => {
   if (!newVal) return;

src/pages/profile/aircraft/AircraftsPage.vue

@@ -6,18 +6,27 @@ import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import {useAircraftsStore} from "stores/Aircrafts";
 import {storeToRefs} from "pinia";
 import {useAppStore} from "stores/App";
+import FlightsList from "components/flights/FlightsList.vue";
+import {ref} from "vue";
+import {useFlightsStore} from "stores/Flights";
+import {loadPage, paginationLimit} from "src/composables/pagination";
 
-useAircraftsStore().fetch();
-const {aircrafts, isQueryRunning} = storeToRefs(useAircraftsStore());
 useAppStore().setPageTitle("Letadla");
 
+const loadNextAircraftsPage = (appendItems) => loadPage({
+  fetchFunc: useAircraftsStore().fetch,
+  appendItems
+});
+loadNextAircraftsPage(false);
+
+const {aircrafts, totalItemsCount, isQueryRunning} = storeToRefs(useAircraftsStore());
 </script>
 
 <template>
-  <BasicListSkeleton v-if="isQueryRunning || !aircrafts.length"/>
+  <BasicListSkeleton :items="paginationLimit" v-if="isQueryRunning && !totalItemsCount"/>
 
   <BasicInfoBanner
-    v-if="!isQueryRunning && aircrafts.length === 0"
+    v-if="!isQueryRunning && totalItemsCount === 0"
     :route-add="{name: 'addAircraft'}"
     label-add="Vytvořit letadlo"
   >
@@ -29,6 +38,12 @@ useAppStore().setPageTitle("Letadla");
   <AircraftsList
     v-else
     :items="aircrafts"
+    :total-items-count="totalItemsCount"
+    :is-query-running="isQueryRunning"
+    :items-per-page="paginationLimit"
+    :public="true"
+    class="q-mb-xl"
+    @load-more="loadNextAircraftsPage(true)"
   />
 
   <FAB mode="add" :router-link="{name: 'addAircraft'}"/>

src/pages/profile/aircraft/EditAircraftPage.vue

@@ -9,7 +9,7 @@ import {successObject} from "src/composables/dialog";
 import {useAppStore} from "stores/App";
 import AccessDeniedBanner from "components/banners/AccessDeniedBanner.vue";
 import {storeToRefs} from "pinia";
-import {useUserStore} from "stores/User";
+import {useLoggedUserStore} from "stores/LoggedUser";
 import PhotosEditorList from "components/photos/PhotosEditorList.vue";
 import CommonEditSwitcher from "components/navigation/CommonEditSwitcher.vue";
 import PhotoGallerySkeleton from "components/photos/skeletons/PhotoGallerySkeleton.vue";
@@ -17,7 +17,7 @@ import PhotoGallerySkeleton from "components/photos/skeletons/PhotoGallerySkelet
 const $router = useRouter();
 const $q = useQuasar();
 const aircraftId = parseInt(useRoute().params.id);
-const loggedUser = storeToRefs(useUserStore()).user;
+const loggedUser = storeToRefs(useLoggedUserStore()).user;
 
 const {aircraft, isMutationRunning, isQueryRunning} = storeToRefs(useAircraftsStore());
 

src/pages/profile/flight/EditFlightPage.vue

@@ -42,11 +42,11 @@ watch(() => $route.params.step, (val) => formStep.value = val);
 onMounted(() => {
   formStep.value = $route.params.step || "basic";
 
-  useAircraftsStore().fetch();
-  usePointsOfInterestStore().fetch();
+  useAircraftsStore().fetch({});
+  usePointsOfInterestStore().fetch({});
   useAirportsStore().fetch();
   useCopilotsStore().fetch();
-  useEventsStore().fetch();
+  useEventsStore().fetch({});
 
   useFlightsStore().fetchDetail(flightId).then((f) => {
     const flightNameFormatted = flightName(f);
@@ -133,7 +133,7 @@ const updateSinglePhoto = (id, formData) => {
   return usePhotosStore().update(id, formData).then((data) => {
     const idx = _findPhotoIndex(data.id);
     flight.value.photos[idx] = data;
-    usePointsOfInterestStore().fetch();
+    usePointsOfInterestStore().fetch({});
   });
 }
 

src/pages/profile/flight/FlightDetailPage.vue

@@ -9,7 +9,7 @@ import {copyToClipboard, useQuasar} from "quasar";
 import {confirmObject, successObject} from "src/composables/dialog";
 import {useFlightsStore} from "stores/Flights";
 import FlightTrackMap from "components/flights/FlightTrackMap.vue";
-import {useUserStore} from "stores/User";
+import {useLoggedUserStore} from "stores/LoggedUser";
 import {storeToRefs} from "pinia";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import PhotoGallery from "components/photos/PhotoGallery.vue";
@@ -21,7 +21,7 @@ import {toggleVisibility} from "src/composables/form/formHandling";
 const $q = useQuasar();
 const $router = useRouter();
 const flightId = parseInt(useRoute().params.id);
-const loggedUser = storeToRefs(useUserStore()).user;
+const loggedUser = storeToRefs(useLoggedUserStore()).user;
 
 useFlightsStore().fetchDetail(flightId);
 const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
@@ -52,7 +52,7 @@ const togglePublicVisibility = () => toggleVisibility({
 });
 
 const copyLinkToClipboard = () => {
-  const loggedUser = useUserStore().user;
+  const loggedUser = useLoggedUserStore().user;
   const url = $router.resolve({
     name: "publicFlightDetail",
     params: {id: flightId, username: loggedUser.publicUsername}

src/pages/profile/flight/FlightsPage.vue

@@ -6,24 +6,48 @@ import {useAppStore} from "stores/App";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import {useFlightsStore} from "stores/Flights";
 import {storeToRefs} from "pinia";
+import {ref} from "vue";
 
 useAppStore().setPageTitle("Moje lety");
-useFlightsStore().fetch({});
-const {flights, isQueryRunning} = storeToRefs(useFlightsStore());
+
+const paginationLimit = ref(10);
+const paginationOffset = ref(0);
+
+const loadNextPage = (appendItems) => {
+  return useFlightsStore().fetch({
+    limit: paginationLimit.value,
+    offset: paginationOffset.value,
+    appendItems
+  }).then(() => {
+    paginationOffset.value += paginationLimit.value;
+  })
+}
+
+loadNextPage(false);
+const {flights, totalItemsCount, isQueryRunning} = storeToRefs(useFlightsStore());
 </script>
 
 <template>
   <FlightsListSkeleton v-if="isQueryRunning"/>
 
   <BasicInfoBanner
-    v-else-if="!isQueryRunning && flights.length === 0"
+    v-else-if="!isQueryRunning && totalItemsCount === 0"
     :route-add="{name: 'addFlight'}"
     label-add="Přidat let"
   >
     Nemáš zaznamenaný žádný let.
   </BasicInfoBanner>
 
-  <FlightsList v-else :items="flights" :public="false" />
+  <FlightsList
+    v-else
+    :items="flights"
+    :public="false"
+    :is-query-running="isQueryRunning"
+    :items-per-page="paginationLimit"
+    :total-items-count="totalItemsCount"
+    @load-more="loadNextPage(true)"
+
+  />
 
   <FAB mode="add" :router-link="{name: 'addFlight'}"/>
 </template>

src/pages/profile/flight/NewFlightPage.vue

@@ -12,9 +12,9 @@ import FlightFormBasic from "components/flights/form/FlightFormBasic.vue";
 import FlightEditSkeleton from "components/flights/skeletons/FlightEditSkeleton.vue";
 
 onMounted(() => {
-  useAircraftsStore().fetch()
-  usePointsOfInterestStore().fetch()
-  useFlightsStore().fetch()
+  useAircraftsStore().fetch({})
+  usePointsOfInterestStore().fetch({})
+  useFlightsStore().fetch({})
   useAirportsStore().fetch()
 
   useAppStore().setPageTitle("Nový let");

src/pages/profile/organization/OrganizationDetailPage.vue

@@ -4,7 +4,7 @@ import {computed, onMounted} from "vue";
 import {useAppStore} from "stores/App";
 import FAB from "components/FAB.vue";
 import {storeToRefs} from "pinia";
-import {useUserStore} from "stores/User";
+import {useLoggedUserStore} from "stores/LoggedUser";
 import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
 import AircraftsList from "components/aircrafts/AircraftsList.vue";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
@@ -13,7 +13,7 @@ import AvatarFromPhoto from "components/avatars/AvatarFromPhoto.vue";
 import {useOrganizationsStore} from "stores/Organizations";
 
 const organizationId = parseInt(useRoute().params.id);
-const loggedUser = storeToRefs(useUserStore()).user;
+const loggedUser = storeToRefs(useLoggedUserStore()).user;
 const $q = useQuasar();
 
 onMounted(() => {

src/pages/profile/organization/OrganizationsPage.vue

@@ -7,12 +7,12 @@ import OrganizationsList from "components/organizations/OrganizationsList.vue";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import {useOrganizationsStore} from "stores/Organizations";
 import {storeToRefs} from "pinia";
-import {useUserStore} from "stores/User";
+import {useLoggedUserStore} from "stores/LoggedUser";
 
 useOrganizationsStore().fetch();
 useAppStore().setPageTitle("Organizace");
 
-const loggedUser = storeToRefs(useUserStore()).user;
+const loggedUser = storeToRefs(useLoggedUserStore()).user;
 const myOrganizationIds = computed(() => (loggedUser.value && loggedUser.value.organizations?.map(o => o.id)) || []);
 
 const {isQueryRunning, organizations} = storeToRefs(useOrganizationsStore());

src/pages/profile/poi/EditPointOfInterestPage.vue

@@ -9,7 +9,7 @@ import {successObject} from "src/composables/dialog";
 import {usePointsOfInterestTypeStore} from "stores/PointOfInterestType";
 import {storeToRefs} from "pinia";
 import POIForm from "components/poi/POIForm.vue";
-import {useUserStore} from "stores/User";
+import {useLoggedUserStore} from "stores/LoggedUser";
 import AccessDeniedBanner from "components/banners/AccessDeniedBanner.vue";
 import PhotoEditorSkeleton from "components/photos/skeletons/PhotoEditorSkeleton.vue";
 import PhotosEditorList from "components/photos/PhotosEditorList.vue";
@@ -32,7 +32,7 @@ usePointsOfInterestStore().fetchDetail(poiId).then((p) => {
 usePointsOfInterestTypeStore().fetch();
 
 const poiTypes = storeToRefs(usePointsOfInterestTypeStore()).types;
-const loggedUser = storeToRefs(useUserStore()).user;
+const loggedUser = storeToRefs(useLoggedUserStore()).user;
 const {isQueryRunning, pointOfInterest, isMutationRunning} = storeToRefs(usePointsOfInterestStore());
 
 const $q = useQuasar();

src/pages/profile/poi/PointOfInterestDetailPage.vue

@@ -3,7 +3,7 @@ import {useRoute, useRouter} from "vue-router";
 import POIDetailSkeleton from "components/poi/skeletons/POIDetailSkeleton.vue";
 import {useAppStore} from "stores/App";
 import EmbeddedMap from "components/map/EmbeddedMap.vue";
-import {useUserStore} from "stores/User";
+import {useLoggedUserStore} from "stores/LoggedUser";
 import {storeToRefs} from "pinia";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import FlightsList from "components/flights/FlightsList.vue";
@@ -17,7 +17,7 @@ import ContentCardEditButton from "components/ContentCardEditButton.vue";
 import {useFlightsStore} from "stores/Flights";
 import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
 
-const loggedUser = storeToRefs(useUserStore()).user;
+const loggedUser = storeToRefs(useLoggedUserStore()).user;
 const poiId = parseInt(useRoute().params.id);
 
 usePointsOfInterestStore().fetchDetail(poiId).then((p) => {

src/pages/profile/poi/PointsOfInterestPage.vue

@@ -6,28 +6,38 @@ import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import {usePointsOfInterestStore} from "stores/PointsOfInterest";
 import {storeToRefs} from "pinia";
+import {loadPage, paginationLimit} from "src/composables/pagination";
 
-usePointsOfInterestStore().fetch();
 useAppStore().setPageTitle("Zajímavá místa");
 
-const {isQueryRunning, pointsOfInterest} = storeToRefs(usePointsOfInterestStore());
+const loadNextPage = (appendItems) => loadPage({
+  fetchFunc: usePointsOfInterestStore().fetch,
+  appendItems
+});
+loadNextPage(false);
+
+const {isQueryRunning, totalItemsCount, pointsOfInterest} = storeToRefs(usePointsOfInterestStore());
 </script>
 
 <template>
   <BasicListSkeleton :items="10" v-if="isQueryRunning && !pointsOfInterest.length"/>
   <BasicInfoBanner
-      v-else-if="!isQueryRunning && pointsOfInterest.length === 0"
-      :route-add="{name: 'addPoi'}"
-      label-add="Přidat"
+    v-else-if="!isQueryRunning && pointsOfInterest.length === 0"
+    :route-add="{name: 'addPoi'}"
+    label-add="Přidat"
   >
     Nemáš tu uložené žádné zajímavé místo. Přidej si let, nastav si tam ručně trasu a jednotlivé body se zobrazí
     i v tomto seznamu.
   </BasicInfoBanner>
 
   <POIList
-      v-else
-      :public="false"
-      :items="pointsOfInterest"
+    v-else
+    :public="false"
+    :items="pointsOfInterest"
+    :total-items-count="totalItemsCount"
+    :is-query-running="isQueryRunning"
+    :items-per-page="paginationLimit"
+    @load-more="loadNextPage(true)"
   />
 
   <FAB :router-link="{name: 'addPOI'}" mode="add"/>

src/pages/public/AboutPage.vue

@@ -1,5 +1,48 @@
-<script setup></script>
+<script setup>
+import {useAppStore} from "stores/App";
+import {useMeta} from "quasar";
+import {metaData} from "src/composables/meta";
+import ContentCard from "components/ContentCard.vue";
+
+useAppStore().setPageTitle("O projektu");
+useAppStore().setBreadcrumbs([
+  {to: {name: 'homepage'}, label: "Polétání.cz"},
+  {label: "O projektu"}
+]);
+useMeta(() => metaData({
+  title: "O projektu",
+}));
+</script>
 
 <template>
-  about
+  <ContentCard title="Polétání.cz">
+    <template #content>
+      <q-card-section>
+
+        <p>
+          Polétání.cz je fotogalerie určená pilotům malých letadel. Nesnaží se být leteckým zápisníkem, nabízí ale
+          možnosti uložení fotografií pořízených během letu. Posláním aplikace je vytvořit vizuálně příjemnou prezentaci
+          tvých zážitků ze vzduchu a umožnit sdílet detaily o letu se svým kamarádem (kopilotem).
+        </p>
+
+        <h3>Externí data</h3>
+
+        Pro obohacení informací používá Polétání.cz data z následujících zdrojů:
+
+        <ul>
+          <li>Open Meteo API - pro stahování informací o počasí při vzletu a přistání</li>
+          <li>Elevation API - pro stažení informací o výšce terénu. Tato informace se používá u fotografií a trasy letu</li>
+          <li>VFR příručka - pro aktualizaci informací o letištích</li>
+        </ul>
+
+        <h3>O autorovi</h3>
+
+        <p>
+          Jmenuji se Michal a posledních pár let trávím čas nejradši pár stovek metrů nad zemí. Kromě létání mě baví i
+          fotografie. A zároveň se živím jako programátor. Původně Polétání.cz mělo být jen malý proof-of-concept projekt,
+          abych si vyzkoušel nové technologie. Po pár týdnech práce jsem ale zjistil, že se úplně o malý projekt nejedná :).
+        </p>
+      </q-card-section>
+    </template>
+  </ContentCard>
 </template>

src/pages/public/IndexPage.vue

@@ -1,15 +1,25 @@
 <script setup>
 import {useMeta} from "quasar";
-import {commonKeywords, metaData} from "src/composables/meta";
+import {metaData} from "src/composables/meta";
+import AppFooter from "components/AppFooter.vue";
+import LatestFlightsSlider from "components/flights/slider/LatestFlightsSlider.vue";
+import {onMounted} from "vue";
+import {useFlightsStore} from "stores/Flights";
+import {storeToRefs} from "pinia";
+import TimelineDescription from "components/indexPage/TimelineDescription.vue";
 
 useMeta(() => metaData({
-  title: "",
+  title: "Polétání.cz",
   description: "Polétání.cz je aplikace na ukládání a sdílení fotografií a tras z vyhlídkových letů.",
-  keywords: [...commonKeywords]
 }));
+
+onMounted(() => {
+  useFlightsStore().fetchPublic({limit: 5});
+});
+const {flights, isQueryRunning} = storeToRefs(useFlightsStore());
 </script>
 <template>
-  <q-layout view="lHh Lpr lFf" data-style="background: url('hp/bg.jpg'); background-size: cover;">
+  <q-layout view="lHh Lpr fff">
 
     <q-header class="bg-semi-transparent text-black" elevated>
       <q-toolbar>
@@ -25,56 +35,35 @@ useMeta(() => metaData({
     <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-h3 text-center">Fotogalerie ze vzduchu</div>
+              <div class="text-h3 text-center q-my-lg">Fotogalerie ze vzduchu</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>
+              <p>Polétání.cz je aplikace pro piloty, kteří si chtějí spravovat fotografie ze svých výletů, zobrazovat je na mapě a ukládat si trasy svých výletů.</p>
 
               <div class="text-center q-my-lg">
                 <q-btn size="xl" :to="{name: 'registration'}" rounded color="secondary">Založit účet</q-btn>
               </div>
             </div>
           </div>
+          <div class="col-md-6 text-center">
+            <q-img src="hp/app_screenshot.png" fit="contain" class="app-screen" alt="Nahled aplikace"/>
+          </div>
         </div>
 
+        <h3 class="text-center">Poslední lety</h3>
+        <LatestFlightsSlider :items="flights"/>
+
+        <div class="row justify-center">
+          <div class="col-md-6 q-px-lg">
+            <TimelineDescription/>
+          </div>
+        </div>
+
+
       </q-page>
     </q-page-container>
+        <AppFooter />
   </q-layout>
 </template>
 

src/pages/public/PilotProfileWrapper.vue

@@ -1,9 +1,9 @@
 <script>
-import {useUserStore} from "stores/User";
+import {usePilotsStore} from "stores/Pilots";
 
 export default {
   preFetch({store, currentRoute}) {
-    return useUserStore(store).fetchPublicUserDetail(currentRoute.params.username);
+    return usePilotsStore(store).fetchPublicPilotDetail(currentRoute.params.username);
   },
 }
 </script>
@@ -13,13 +13,13 @@ import {storeToRefs} from "pinia";
 import PilotProfileCard from "components/profile/PilotProfileCard.vue";
 import PublicProfileSkeleton from "components/profile/skeletons/PublicProfileSkeleton.vue";
 
-const {publicUser: pilot, isQueryRunning: pilotLoading} = storeToRefs(useUserStore());
+const {pilot, isQueryRunning: pilotLoading} = storeToRefs(usePilotsStore());
 </script>
 
 <template>
   <div class="row">
     <div class="col-12 col-md-8">
-      <router-view :pilot="pilot"/>
+      <router-view :pilot="pilot" />
     </div>
     <div class="col-12 col-md-4">
       <PublicProfileSkeleton v-if="pilotLoading && !pilot"/>

src/pages/public/PointsOfInterestPage.vue

@@ -1,31 +0,0 @@
-<script setup>
-import {usePointsOfInterestStore} from "stores/PointsOfInterest";
-import {storeToRefs} from "pinia";
-import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
-import POIList from "components/poi/POIList.vue";
-import {useAppStore} from "stores/App";
-import {useMeta} from "quasar";
-import {metaData} from "src/composables/meta";
-
-usePointsOfInterestStore().fetchPublic();
-
-useAppStore().setPageTitle("Místa");
-useAppStore().setBreadcrumbs([
-  {to: {name: 'homepage'}, label: "Polétání.cz"},
-  {label: "Místa"},
-]);
-useMeta(() => metaData({
-  title: "Místa"
-}))
-
-const {pointsOfInterest, isQueryRunning} = storeToRefs(usePointsOfInterestStore());
-</script>
-
-<template>
-  <BasicListSkeleton :items="10" v-if="isQueryRunning && !pointsOfInterest.length"/>
-  <POIList
-      v-else
-      :public="true"
-      :items="pointsOfInterest"
-  />
-</template>

src/pages/public/aircraft/AircraftDetailPage.vue

@@ -19,20 +19,19 @@ import {metaData} from "src/composables/meta";
 import PhotoGallery from "components/photos/PhotoGallery.vue";
 import ContentCard from "components/ContentCard.vue";
 import AircraftInfo from "components/aircrafts/AircraftInfo.vue";
-import {useUserStore} from "stores/User";
 import {usePhotosStore} from "stores/Photos";
 import {useFlightsStore} from "stores/Flights";
 import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import PhotoGallerySkeleton from "components/photos/skeletons/PhotoGallerySkeleton.vue";
+import {loadPage, paginationLimit} from "src/composables/pagination";
 
 const $q = useQuasar();
 const $router = useRouter();
 
-const loggedUser = storeToRefs(useUserStore()).user;
 const {aircraft, isQueryRunning} = storeToRefs(useAircraftsStore());
 const {photos, isQueryRunning: arePhotosLoading} = storeToRefs(usePhotosStore());
-const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
+const {flights, totalItemsCount, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
 
 useAppStore().setPageTitle(aircraft.value.callSign);
 useMeta(() => metaData({
@@ -52,9 +51,16 @@ useAppStore().setBreadcrumbs([
   {label: aircraft.value.callSign}
 ]);
 
+
+const loadNextFlightsPage = (appendItems) => loadPage({
+  fetchFunc: useFlightsStore().fetchPublic,
+  filters: {aircraftId: aircraft.value.id},
+  appendItems
+});
+
 onMounted(() => {
+  loadNextFlightsPage(false);
   usePhotosStore().fetchPublic({aircraftId: aircraft.value.id});
-  useFlightsStore().fetchPublic({aircraftId: aircraft.value.id})
 });
 </script>
 
@@ -76,12 +82,17 @@ onMounted(() => {
           <BasicInfoBanner v-else-if="!areFlightsLoading && flights.length === 0">
             U tohoto letadla nejsou publikované žádné lety.
           </BasicInfoBanner>
-          <FlightsList v-else :items="flights" :public="true"/>
+          <FlightsList
+            v-else
+            :items="flights"
+            :total-items-count="totalItemsCount"
+            :is-query-running="areFlightsLoading"
+            :items-per-page="paginationLimit"
+            :public="true"
+            @load-more="loadNextFlightsPage(true)"
+          />
         </q-card-section>
       </template>
     </ContentCard>
-
   </template>
-
-
 </template>

src/pages/public/pilotProfile/CopilotDetailPage.vue

@@ -10,9 +10,8 @@ export default {
 <script setup>
 import FlightsList from "components/flights/FlightsList.vue";
 import {useAppStore} from "stores/App";
-import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
 import {storeToRefs} from "pinia";
-import {onMounted, onServerPrefetch} from "vue";
+import {onMounted} from "vue";
 import {useFlightsStore} from "stores/Flights";
 import {usePhotosStore} from "stores/Photos";
 import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
@@ -20,8 +19,8 @@ import ContentCard from "components/ContentCard.vue";
 import PhotoGallery from "components/photos/PhotoGallery.vue";
 import {useMeta} from "quasar";
 import {metaData} from "src/composables/meta";
-// import {useCopilotsStore} from "stores/Copilots";
-// import {useRoute} from "vue-router";
+import PhotoGallerySkeleton from "components/photos/skeletons/PhotoGallerySkeleton.vue";
+import {loadPage, paginationLimit} from "src/composables/pagination";
 
 const props = defineProps({
   pilot: {
@@ -30,14 +29,8 @@ const props = defineProps({
   },
 })
 
-// const currentRoute = useRoute();
-//
-// onServerPrefetch(() => {
-//
-// })
-
 const {copilot, isQueryRunning} = storeToRefs(useCopilotsStore());
-const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
+const {flights, totalItemsCount, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
 const {photos, isQueryRunning: arePhotosLoading} = storeToRefs(usePhotosStore());
 
 useAppStore().setPageTitle(`${props.pilot.name} + ${copilot.value.name}`);
@@ -54,32 +47,39 @@ useMeta(() => metaData({
   image: copilot.value.titleImage?.url
 }));
 
+
+const loadNextFlightsPage = (appendItems) => loadPage({
+  fetchFunc: useFlightsStore().fetchPublic,
+  filters: {copilotId: copilot.value.id},
+  appendItems
+});
+
 onMounted(() => {
-  useFlightsStore().fetchPublic({copilotId: copilot.value.id});
+  loadNextFlightsPage(false);
+
   usePhotosStore().fetchPublic({copilotId: copilot.value.id})
 })
 </script>
 
 <template>
-
   <ContentCard v-if="!isQueryRunning" :title-photo="copilot.titlePhoto" :title="copilot.name">
     <template #content>
       <q-card-section>
-
-        <q-spinner v-if="arePhotosLoading"/>
+        <PhotoGallerySkeleton v-if="arePhotosLoading"/>
         <PhotoGallery :photos="photos" v-else/>
 
         <h3>Společné lety</h3>
         <FlightsListSkeleton v-if="areFlightsLoading && flights.length === 0"/>
         <FlightsList
-            v-else
-            :items="flights"
-            :public="true"
-            class="q-mb-md"
+          v-else
+          :items="flights"
+          :total-items-count="totalItemsCount"
+          :is-query-running="areFlightsLoading"
+          :items-per-page="paginationLimit"
+          :public="true"
+          @load-more="loadNextFlightsPage(true)"
         />
       </q-card-section>
     </template>
   </ContentCard>
-
-
 </template>

src/pages/public/pilotProfile/EventDetailPage.vue

@@ -3,33 +3,53 @@ import {useEventsStore} from "stores/Events";
 
 export default {
   preFetch({currentRoute}) {
-    return useEventsStore().fetchDetail(currentRoute.params.id, currentRoute.params.username);
+    return useEventsStore().fetchPublicDetail(currentRoute.params.id, currentRoute.params.username);
   }
 }
 </script>
 
 <script setup>
-import {watch} from "vue";
-import {useRoute} from "vue-router";
 import {useAppStore} from "stores/App";
 import EventDetailSkeleton from "components/event/skeletons/EventDetailSkeleton.vue";
 import {FORMAT_DATE, formatDatetime} from "src/composables/datetimeUtils";
 import FlightsList from "components/flights/FlightsList.vue";
 import {storeToRefs} from "pinia";
+import {loadPage, paginationLimit} from "src/composables/pagination";
+import {useFlightsStore} from "stores/Flights";
+import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleton.vue";
+import {useMeta} from "quasar";
+import {metaData} from "src/composables/meta";
 
-const routeParams = useRoute().params;
+const props = defineProps({
+  pilot: {
+    type: Object,
+    required: false
+  },
+})
 
 const {isQueryRunning, event} = storeToRefs(useEventsStore());
 
-watch(() => event.value, (newVal) => {
-  useAppStore().setPageTitle(newVal.name);
-  useAppStore().setBreadcrumbs([
-    {to: {name: 'homepage'}, label: "Polétání.cz"},
-    {to: {name: "publicProfileDetail", params: {username: routeParams.username}}, label: `@${routeParams.username}`},
-    {to: {name: "publicEventsList", params: {username: routeParams.username}}, label: "Události"},
-    {label: newVal.name}
-  ]);
+useAppStore().setPageTitle(event.value.name);
+useAppStore().setBreadcrumbs([
+  {to: {name: 'homepage'}, label: "Polétání.cz"},
+  {to: {name: "publicProfileDetail", params: {username: props.pilot.publicUsername}}, label: `@${props.pilot.publicUsername}`},
+  {to: {name: "publicEventsList", params: {username: props.pilot.publicUsername}}, label: "Události"},
+  {label: event.value.name}
+]);
+useMeta(() => metaData({
+  title: event.value.name,
+  description: event.value.description
+}))
+
+const loadNextFlightsPage = (appendItems) => loadPage({
+  fetchFunc: useFlightsStore().fetchPublic,
+  filters: {username: props.pilot.publicUsername},
+  appendItems
 });
+loadNextFlightsPage(false);
+
+const {flights, totalItemsCount, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
+
 </script>
 
 <template>
@@ -37,11 +57,6 @@ watch(() => event.value, (newVal) => {
     <EventDetailSkeleton v-if="isQueryRunning || !event"/>
 
     <template v-else>
-      <q-banner class="bg-warning text-white q-mx-md q-my-md" v-if="!event.isPublic">
-        Pozor! Tento event není publikován a nebude tak dostupný pro ostatní!
-      </q-banner>
-
-
       <q-list bordered separator class="q-my-lg" v-if="event.dateFrom && event.dateTo">
         <q-item>
           <q-item-section>
@@ -63,11 +78,16 @@ watch(() => event.value, (newVal) => {
         Zatím tu nemáš uložené žádné lety.
       </q-banner>
 
+      <FlightsListSkeleton :items="paginationLimit" v-if="areFlightsLoading && flights?.length === 0"/>
+
       <FlightsList
         v-else
-        :items="event.flights"
+        :items="flights"
+        :total-items-count="totalItemsCount"
+        :is-query-running="areFlightsLoading"
+        :items-per-page="paginationLimit"
         :public="true"
-        class="q-my-lg"
+        @load-more="loadNextFlightsPage(true)"
       />
 
     </template>

src/pages/public/pilotProfile/EventsListPage.vue

@@ -17,7 +17,7 @@ const props = defineProps({
 
 useMeta(() => metaData({
   title: `${props.pilot.publicUsername} - Události`,
-  keywords: [...commonKeywords, "pilot"],
+  keywords: [...commonKeywords, "události", "letecký den",],
   description: "Detail pilota na poletani.cz",
 }));
 
@@ -28,24 +28,24 @@ useAppStore().setBreadcrumbs([
   {label: "Události"}
 ]);
 
-useEventsStore().fetch(props.pilot.publicUsername);
+useEventsStore().fetchPublic(props.pilot.publicUsername);
 const {isQueryRunning, events} = storeToRefs(useEventsStore());
 </script>
 
 <template>
   <PublicFlightEventSwitcher :username="pilot.publicUsername"/>
 
-  <FlightsListSkeleton v-if="isQueryRunning"/>
+  <div class="q-mb-md">
+    <FlightsListSkeleton v-if="isQueryRunning"/>
 
-  <q-banner class="bg-primary text-white" v-else-if="!isQueryRunning && events.length === 0">
-    Tento pilot zatím nepublikoval žádnou udalost.
-  </q-banner>
+    <q-banner class="bg-primary text-white" v-else-if="!isQueryRunning && events.length === 0">
+      Tento pilot zatím nepublikoval žádnou udalost.
+    </q-banner>
 
-  <template v-else>
     <EventsList
       :items="events"
       :route-detail="{name: 'publicEventDetail', params: {username: pilot.publicUsername}}"
-      class="q-mb-md"
+      v-else
     />
-  </template>
+  </div>
 </template>

src/pages/public/pilotProfile/FlightDetailPage.vue

@@ -15,16 +15,19 @@ import FlightDetailSkeleton from "components/flights/skeletons/FlightDetailSkele
 import PhotoGallery from "components/photos/PhotoGallery.vue";
 import {storeToRefs} from "pinia";
 import {flightName} from "src/composables/flight";
-import {useRoute} from "vue-router";
-import {useUserStore} from "stores/User";
 import {useMeta} from "quasar";
 import {metaData} from "src/composables/meta";
 import ContentCard from "components/ContentCard.vue";
 import {usePhotosStore} from "stores/Photos";
 
 const {isQueryRunning, flight} = storeToRefs(useFlightsStore());
-const routeParams = useRoute().params;
-const pilot = storeToRefs(useUserStore()).publicUser;
+
+const props = defineProps({
+  pilot: {
+    type: Object,
+    required: true
+  }
+});
 
 usePhotosStore().fetchPublic({flightId: flight.value.id});
 const {isQueryRunning: arePhotosLoading, photos: flightPhotos} = storeToRefs(usePhotosStore());
@@ -33,13 +36,13 @@ const flightNameFormatted = flightName(flight.value);
 useAppStore().setPageTitle(flightNameFormatted);
 useAppStore().setBreadcrumbs([
   {to: {name: 'homepage'}, label: "Polétání.cz"},
-  {to: {name: "publicProfileDetail", params: {username: routeParams.username}}, label: `@${routeParams.username}`},
+  {to: {name: "publicProfileDetail", params: {username: props.pilot.publicUsername}}, label: `@${props.pilot.publicUsername}`},
   {label: flightNameFormatted}
 ]);
 
 useMeta(() => metaData({
-    title: `${flightNameFormatted} - ${pilot.value.name}`,
-    keywords: ["let", "výlet", "letadlo", pilot.value.name, flight.value.aircraft.callSign],
+    title: `${flightNameFormatted} - ${props.pilot.name}`,
+    keywords: ["let", "výlet", "letadlo", props.pilot.name, flight.value.aircraft.callSign],
     description: flight.description,
     image: flight.titlePhoto?.url
   }
@@ -57,7 +60,7 @@ useMeta(() => metaData({
             :flight="flight"
             :poi-detail-route="{name: 'publicPOIDetail'}"
             :aircraft-detail-route="flight.aircraft.isPublic ? {name: 'publicAircraftDetail'} : null"
-            :copilot-detail-route="{name: 'publicCopilotDetail', params: {username: routeParams.username}}"
+            :copilot-detail-route="{name: 'publicCopilotDetail', params: {username: pilot.publicUsername}}"
           />
 
           <article class="q-my-lg" v-html="flight.description"/>

src/pages/public/pilotProfile/FlightsListPage.vue

@@ -7,12 +7,12 @@ import {useFlightsStore} from "stores/Flights";
 import {storeToRefs} from "pinia";
 import {commonKeywords, metaData} from "src/composables/meta";
 import {useMeta} from "quasar";
-import {useUserStore} from "stores/User";
+import {loadPage, paginationLimit} from "src/composables/pagination";
 
 const props = defineProps({
   pilot: {
     type: Object,
-    required: true,
+    required: true
   }
 });
 
@@ -29,24 +29,32 @@ useAppStore().setBreadcrumbs([
   {label: `@${props.pilot.publicUsername}`},
 ])
 
-useFlightsStore().fetchPublic({username: props.pilot.publicUsername});
-const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
-const loggedUser = storeToRefs(useUserStore()).user;
+const loadNextFlightsPage = (appendItems) => loadPage({
+  fetchFunc: useFlightsStore().fetchPublic,
+  filters: {username: props.pilot.publicUsername},
+  appendItems
+});
+loadNextFlightsPage(false);
+
+const {flights, totalItemsCount, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
 </script>
 
 <template>
   <PublicFlightEventSwitcher :username="pilot?.publicUsername"/>
 
-  <FlightsListSkeleton v-if="areFlightsLoading && flights?.length === 0"/>
+  <FlightsListSkeleton :items="paginationLimit" v-if="areFlightsLoading && flights?.length === 0"/>
 
   <q-banner class="bg-primary text-white" v-else-if="!areFlightsLoading && flights.length === 0">
     Tento pilot zatím nepublikoval žádný let.
   </q-banner>
 
   <FlightsList
-      v-else
-      :items="flights"
-      :public="true"
-      class="q-mb-md"
+    v-else
+    :items="flights"
+    :total-items-count="totalItemsCount"
+    :is-query-running="areFlightsLoading"
+    :items-per-page="paginationLimit"
+    :public="true"
+    @load-more="loadNextFlightsPage(true)"
   />
 </template>

src/pages/public/poi/PointOfInterestDetailPage.vue

@@ -23,10 +23,11 @@ import FlightsListSkeleton from "components/flights/skeletons/FlightsListSkeleto
 import BasicInfoBanner from "components/banners/BasicInfoBanner.vue";
 import {onMounted} from "vue";
 import PhotoGallerySkeleton from "components/photos/skeletons/PhotoGallerySkeleton.vue";
+import {loadPage, paginationLimit} from "src/composables/pagination";
 
 const {pointOfInterest, isQueryRunning} = storeToRefs(usePointsOfInterestStore());
 const {photos, isQueryRunning: arePhotosLoading} = storeToRefs(usePhotosStore());
-const {flights, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
+const {flights, totalItemsCount, isQueryRunning: areFlightsLoading} = storeToRefs(useFlightsStore());
 
 useAppStore().setPageTitle(pointOfInterest.value.name);
 useMeta(() => metaData({
@@ -40,9 +41,16 @@ useAppStore().setBreadcrumbs([
   {label: pointOfInterest.value.name}
 ]);
 
+
+const loadNextFlightsPage = (appendItems) => loadPage({
+  fetchFunc: useFlightsStore().fetchPublic,
+  filters: {pointOfInterestId: pointOfInterest.value.id},
+  appendItems
+});
+
 onMounted(() => {
   usePhotosStore().fetchPublic({pointOfInterestId: pointOfInterest.value.id});
-  useFlightsStore().fetchPublic({pointOfInterestId: pointOfInterest.value.id});
+  loadNextFlightsPage(false);
 });
 
 </script>
@@ -55,14 +63,14 @@ onMounted(() => {
         <article v-html="pointOfInterest.description" class="q-my-lg"/>
 
         <EmbeddedMap
-            v-if="pointOfInterest.gpsLatitude && pointOfInterest.gpsLongitude"
-            :gps-latitude="pointOfInterest.gpsLatitude"
-            :gps-longitude="pointOfInterest.gpsLongitude"
-            :zoom="13"
+          v-if="pointOfInterest.gpsLatitude && pointOfInterest.gpsLongitude"
+          :gps-latitude="pointOfInterest.gpsLatitude"
+          :gps-longitude="pointOfInterest.gpsLongitude"
+          :zoom="13"
         />
 
-        <PhotoGallerySkeleton v-if="arePhotosLoading && !pointOfInterest" />
-        <PhotoGallery :photos="photos" class="q-my-lg" v-else />
+        <PhotoGallerySkeleton v-if="arePhotosLoading && !pointOfInterest"/>
+        <PhotoGallery :photos="photos" class="q-my-lg" v-else/>
 
         <h3>Lety na místo {{ pointOfInterest.name }}</h3>
 
@@ -70,7 +78,15 @@ onMounted(() => {
         <BasicInfoBanner v-else-if="!areFlightsLoading && flights.length === 0">
           Zdá se, že na toto místo ještě nikdo neletěl. Zatím tu nejsou ještě žádné lety.
         </BasicInfoBanner>
-        <FlightsList v-else :items="flights" :public="true"/>
+        <FlightsList
+          v-else
+          :items="flights"
+          :total-items-count="totalItemsCount"
+          :is-query-running="areFlightsLoading"
+          :items-per-page="paginationLimit"
+          :public="true"
+          @load-more="loadNextFlightsPage(true)"
+        />
       </q-card-section>
     </template>
   </ContentCard>

src/pages/public/poi/PointsOfInterestPage.vue

@@ -0,0 +1,41 @@
+<script setup>
+import {usePointsOfInterestStore} from "stores/PointsOfInterest";
+import {storeToRefs} from "pinia";
+import BasicListSkeleton from "components/basicSkeletons/BasicListSkeleton.vue";
+import POIList from "components/poi/POIList.vue";
+import {useAppStore} from "stores/App";
+import {useMeta} from "quasar";
+import {metaData} from "src/composables/meta";
+import {loadPage, paginationLimit} from "src/composables/pagination";
+
+
+useAppStore().setPageTitle("Místa");
+useAppStore().setBreadcrumbs([
+  {to: {name: 'homepage'}, label: "Polétání.cz"},
+  {label: "Místa"},
+]);
+useMeta(() => metaData({
+  title: "Místa"
+}))
+
+const loadNextPage = (appendItems) => loadPage({
+  fetchFunc: usePointsOfInterestStore().fetchPublic,
+  appendItems
+});
+loadNextPage(false);
+
+const {pointsOfInterest, totalItemsCount, isQueryRunning} = storeToRefs(usePointsOfInterestStore());
+</script>
+
+<template>
+  <BasicListSkeleton :items="paginationLimit" v-if="isQueryRunning && !pointsOfInterest.length"/>
+  <POIList
+    v-else
+    :public="true"
+    :items="pointsOfInterest"
+    :total-items-count="totalItemsCount"
+    :is-query-running="isQueryRunning"
+    :items-per-page="paginationLimit"
+    @load-more="loadNextPage(true)"
+  />
+</template>

src/pages/public/user/LoginPage.vue

@@ -1,18 +1,16 @@
 <script setup>
-import {ref} from "vue";
-import {useUserStore} from "stores/User";
+import {reactive} from "vue";
 import {useRouter} from "vue-router";
 import {isRequired, isValidEmail, minLength} from "src/composables/form/rules";
 import {useQuasar} from "quasar";
 import {errorObject} from "src/composables/dialog";
+import {useAuthStore} from "stores/Auth";
 
-const email = ref("");
-const password = ref("");
 const $router = useRouter();
 const $q = useQuasar();
 
 const logUser = () => {
-  useUserStore().login({email: email.value, password: password.value}).then(() => {
+  useAuthStore().login(formData).then(() => {
     $router.push({name: "myFlights"});
   }).catch((err) => {
     $q.notify(errorObject("Přihlášení se nezdařilo."))
@@ -23,6 +21,10 @@ const rules = {
   email: [isRequired, isValidEmail],
   password: [isRequired, minLength(4)]
 }
+const formData = reactive({
+  email: "",
+  password: ""
+})
 </script>
 
 <template>
@@ -36,12 +38,12 @@ const rules = {
           </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" :rules="rules.email" type="email" label="E-mail">
+              <q-input square clearable v-model="formData.email" :rules="rules.email" type="email" label="E-mail">
                 <template v-slot:prepend>
                   <q-icon name="email"/>
                 </template>
               </q-input>
-              <q-input square clearable v-model="password" :rules="rules.password" type="password" label="Password">
+              <q-input square clearable v-model="formData.password" :rules="rules.password" type="password" label="Password">
                 <template v-slot:prepend>
                   <q-icon name="lock"/>
                 </template>

src/pages/public/user/RegisterPage.vue

@@ -1,23 +1,27 @@
 <script setup>
 import {reactive, ref} from "vue";
-import {useUserStore} from "stores/User";
 import {useRouter} from "vue-router";
-import {useQuasar} from "quasar";
+import {useMeta, useQuasar} from "quasar";
 import {errorObject, successObject} from "src/composables/dialog";
 import {useAppStore} from "stores/App";
 import {isRequired, isValidEmail, minLength} from "src/composables/form/rules";
+import {api} from "boot/axios";
+import {useAuthStore} from "stores/Auth";
+import {metaData} from "src/composables/meta";
 
 const router = useRouter();
 const $q = useQuasar();
-const form = ref(null);
 
 useAppStore().setPageTitle("Registrace");
+useMeta(() => metaData({
+  title: "Registrace",
+}));
 
 const registerUser = () => {
   if (!form.value.validate()) return;
 
-  useUserStore().register(formData).then(() => {
-    useUserStore().login({email: formData.email, password: formData.password}).then(() => {
+  return api.post('/registration', formData).then(response => {
+    useAuthStore().login({email: formData.email, password: formData.password}).then(() => {
       $q.notify(successObject("Registrace úspěšná, vítej!"));
       router.push({name: "myFlights"});
     })
@@ -31,6 +35,7 @@ const registerUser = () => {
   })
 }
 
+const form = ref(null);
 const formData = reactive({
   name: "",
   email: "",