Uprava setovani 404 (asi porad nefunguje), ruzne podminky, priprava na zapomenute heslo, sjednoceni nacitani letu v profilu

docker-compose.yml

@@ -24,7 +24,7 @@ services:
 ##    command: ls -l /app
 
   app:
-#    network_mode: host
+    network_mode: host
     build:
       context: .
       target: "develop-stage"
@@ -36,7 +36,7 @@ services:
       - ./src-ssr:/app/src-ssr
       - ./public:/app/public
 #      - ./node_modules:/app/node_modules:delegated
-    command: quasar dev # -m ssr
+    command: quasar dev -m ssr
     environment:
       API_URL: "http://127.0.0.1:8000"
 

quasar.config.js

@@ -119,7 +119,9 @@ module.exports = configure(function (ctx) {
 
     // animations: 'all', // --- includes all animations
     // https://v2.quasar.dev/options/animations
-    animations: [],
+    animations: [
+      "fadeIn", "fadeOut"
+    ],
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#property-sourcefiles
     sourceFiles: {

src-ssr/middlewares/render.js

@@ -28,6 +28,8 @@ export default ssrMiddleware(({ app, resolve, render, serve }) => {
         } else if (err.code === 404) {
           // hmm, Vue Router could not find the requested route
 
+          console.log("404 v renderu")
+
           // Should reach here only if no "catch-all" route
           // is defined in /src/routes
           // res.status(404).send('404 | Page Not Found')

src/boot/apollo.js

@@ -5,6 +5,7 @@ import {Notify} from "quasar";
 import {errorObject, warningObject} from "src/composables/dialog";
 import {createUploadLink} from "apollo-upload-client";
 import {useAuthStore} from "stores/Auth";
+import {useRouter} from "vue-router";
 // import createUploadLink from "apollo-upload-client/createUploadLink.mjs";
 
 const handleRefreshToken = (store, router, forward, operation) => {
@@ -57,6 +58,9 @@ export default (({store, router}) => {
       for (const error of graphQLErrors) {
         if (error.message.includes("401") || error.message.includes("Not authorized")) {
           return handleRefreshToken(store, router, forward, operation);
+        } else if (error.message.includes("404") || error.message.includes("Not found")) {
+          useAppStore(store).appStatus = 404;
+          console.log("not found");
         } else {
           Notify.create(errorObject("API error: " + error.message));
         }

src/components/AppFooter.vue

@@ -1,30 +1,49 @@
-<script setup></script>
+<script setup>
+import {ref} from "vue";
+
+const date = new Date();
+const year = ref(date.getFullYear());
+</script>
 
 <template>
-  <q-footer class="q-pa-lg">
+  <q-footer class="q-pa-lg q-mt-xl">
     <div class="row justify-center">
-      <div class="col-4">
+
+      <div class="col-4 text-center">
+        <q-img fit="contain" width="32px" src="/icons/favicon-32x32.png" />
+
+        <div class="text-h5">Polétání.cz</div>
+        Vytvořeno s &hearts; nejen pro létání.
+      </div>
+      <div class="col-2">
         <q-list>
           <q-item><router-link :to="{name: 'about'}">O projektu</router-link></q-item>
           <q-item><router-link :to="{name: 'contact'}">Kontakt</router-link></q-item>
+          <q-item><router-link :to="{name: 'features'}">Funkce</router-link></q-item>
+        </q-list>
+      </div>
+      <div class="col-2">
+        <q-list>
           <q-item><router-link :to="{name: 'login'}">Login</router-link></q-item>
           <q-item><router-link :to="{name: 'registration'}">Registrace</router-link></q-item>
+          <q-item><router-link :to="{name: 'forgottenPassword'}">Zapomenuté heslo</router-link></q-item>
         </q-list>
       </div>
-      <div class="col-4">
+      <div class="col-2">
         <q-list>
-          <q-item><router-link :to="{name: 'about'}">Podmínky použití</router-link></q-item>
-          <q-item><router-link :to="{name: 'about'}">Správa osobních údajů</router-link></q-item>
+          <q-item><router-link :to="{name: 'termsAndConditions'}">Podmínky použití</router-link></q-item>
+          <q-item><router-link :to="{name: 'personalInformation'}">Správa osobních údajů</router-link></q-item>
         </q-list>
       </div>
-      <div class="col-4 text-right">
-        <div class="text-h6">Polétání.cz</div>
-        Vytvořeno s &hearts; nejen pro létání.
-      </div>
 <!--      <div class="col">-->
 <!--        &copy; 2023 Polétání.cz-->
 <!--      </div>-->
     </div>
+    <div class="row q-mt-lg">
+      <div class="col text-center">
+      &copy; {{ year }} Polétání.cz
+        </div>
+    </div>
   </q-footer>
 </template>
 

src/components/flights/FlightsList.vue

@@ -63,6 +63,7 @@ const loadMoreCount = computed(() => {
         >
           <q-item-section avatar>
             <AvatarFromPhoto :size="120" v-if="flight.titlePhoto" :src="flight.titlePhoto.thumbnailUrl"/>
+            <q-avatar v-else size="120px" icon="flight" text-color="grey-7" color="grey-4"></q-avatar>
           </q-item-section>
           <q-item-section>
             <div class="text-h5 q-mb-md">{{ flightName(flight) }}</div>
@@ -93,9 +94,15 @@ const loadMoreCount = computed(() => {
             </div>
           </q-item-section>
 
-          <q-item-section side top v-if="flight.isPublic && !props.public">
+          <q-item-section side top v-if="!props.public">
             <!-- Zobraz jen v adminu -->
-            <q-icon name="visibility"></q-icon>
+            <q-icon name="visibility" v-if="flight.isPublic"/>
+
+            <q-icon name="warning" color="orange" v-if="flight.isPublic && flight.urlSlug === ''">
+              <q-tooltip>
+                Let je sice publikovaný, nemá ale nastavenou URL adresu!
+              </q-tooltip>
+            </q-icon>
           </q-item-section>
         </q-item>
       </q-list>

src/layouts/PublicLayout.vue

@@ -29,7 +29,7 @@
 
       <router-view class="q-my-lg q-mx-lg"/>
     </q-page-container>
-<!--    <AppFooter />-->
+    <AppFooter />
   </q-layout>
 </template>
 

src/pages/profile/ProfileRefreshPage.vue

@@ -1,14 +1,16 @@
 <script setup>
 
 import {useRoute, useRouter} from "vue-router";
-import {computed, onMounted} from "vue";
+import {computed, onMounted, ref} from "vue";
 import {useLoggedUserStore} from "stores/LoggedUser";
 import {useAuthStore} from "stores/Auth";
 
 const $route = useRoute();
 const $router = useRouter();
 
-const url = computed(() => $route.query.url);
+const url = computed(() => $route.query.url || '/moje');
+
+const showLoginInfo = ref(false);
 
 onMounted(() => {
   console.log(useAuthStore().getAccessToken());
@@ -17,10 +19,39 @@ onMounted(() => {
   }).catch(e => {
     $router.push({name: "login"})
   });
+
+  setTimeout(() => showLoginInfo.value = true, 1000);
+  setTimeout(() => $router.push(url), 10000);
 });
 
 </script>
 
 <template>
-  <q-spinner />
+
+  <div class="row justify-center">
+    <div class="col-4">
+      <transition
+        v-if="showLoginInfo"
+        appear
+        enter-active-class="animated fadeIn"
+        leave-active-class="animated fadeOut"
+      >
+        <q-card style="max-width: 100%" class="q-my-lg">
+          <q-card-section class="text-center">
+            <q-spinner size="80px" color="primary"/>
+            <br>
+            <p class="q-my-lg">
+              Probíhá přihlašování. Za okamžik dojde k přesměrování. Pokud se tak nestane, klikni na tlačítko
+
+            </p>
+          </q-card-section>
+          <q-card-actions>
+            <q-btn class="full-width" color="primary" size="lg" :to="url">Návrat do rozhraní</q-btn>
+          </q-card-actions>
+        </q-card>
+      </transition>
+
+    </div>
+  </div>
+
 </template>

src/pages/profile/flight/FlightsPage.vue

@@ -6,29 +6,19 @@ 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";
+import {loadPage, paginationLimit} from "src/composables/pagination";
 
 useAppStore().setPageTitle("Moje lety");
 
-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;
-  })
-}
-
+const loadNextPage = (appendItems) => loadPage({
+  fetchFunc: useFlightsStore().fetch, appendItems
+});
 loadNextPage(false);
 const {flights, totalItemsCount, isQueryRunning} = storeToRefs(useFlightsStore());
 </script>
 
 <template>
-  <FlightsListSkeleton v-if="isQueryRunning"/>
+  <FlightsListSkeleton v-if="isQueryRunning && flights.length === 0"/>
 
   <BasicInfoBanner
     v-else-if="!isQueryRunning && totalItemsCount === 0"

src/pages/public/ContactPage.vue

@@ -1,5 +1,41 @@
-<script setup></script>
+<script setup>
+import {useAppStore} from "stores/App";
+import ContentCard from "components/ContentCard.vue";
+import {ref} from "vue";
+import {commonProps} from "src/composables/inputs";
+import {useQuasar} from "quasar";
+import {successObject} from "src/composables/dialog";
+
+useAppStore().setPageTitle("Kontakt");
+useAppStore().setBreadcrumbs([
+  {to: {name: 'homepage'}, label: "Polétání.cz"},
+  {label: "Kontakt"}
+]);
+
+const formData = ref({
+  email: "",
+  content: "",
+});
+
+const $q = useQuasar();
+const sendMessage = () => {
+  console.log(formData.value);
+  $q.notify(successObject("Zpráva byla jakoby odeslána"));
+}
+</script>
 
 <template>
-  contact form
+  <ContentCard>
+    <template #content>
+      <q-card-section>
+
+        <q-form @submit="sendMessage">
+          <q-input v-bind="commonProps" v-model="formData.email" label="Tvůj e-mail pro odpověď"/>
+          <q-input v-bind="commonProps" v-model="formData.content" type="textarea" label="Tvoje zpráva" />
+          <q-btn type="submit" color="primary" class="full-width q-my-md">Odeslat</q-btn>
+        </q-form>
+      </q-card-section>
+    </template>
+
+  </ContentCard>
 </template>

src/pages/public/FeaturesPage.vue

@@ -0,0 +1,26 @@
+<script setup>
+import {useAppStore} from "stores/App";
+import ContentCard from "components/ContentCard.vue";
+
+useAppStore().setPageTitle("Co Polétání.cz umí?");
+useAppStore().setBreadcrumbs([
+  {to: {name: 'homepage'}, label: "Polétání.cz"},
+  {label: "Funkce"}
+]);
+
+</script>
+
+<template>
+  <ContentCard title="Co Polétání.cz umí?">
+    <template #content>
+      <q-card-section>
+        Sdílet zážitky s kamarády
+        Upravovat fotky
+        Zobrazovat je v kontextu polohy
+        Debriefing letu: https://www.easa.europa.eu/community/topics/post-flight-debrief
+
+      </q-card-section>
+    </template>
+  </ContentCard>
+
+</template>

src/pages/public/PersonalInformationPage.vue

@@ -0,0 +1,59 @@
+<script setup>
+import ContentCard from "components/ContentCard.vue";
+import {useAppStore} from "stores/App";
+
+useAppStore().setPageTitle("Správa osobních údajů");
+useAppStore().setBreadcrumbs([
+  {to: {name: 'homepage'}, label: "Polétání.cz"},
+  {label: "Správa osobních údajů"}
+]);
+</script>
+
+<template>
+  <ContentCard title="Informace o správě osobních údajů">
+    <template #content>
+      <q-card-section>
+        <section>
+          <h4>1. ochrana osobních údajů:</h4>
+          <p>Aplikace Poletani.cz respektuje vaše soukromí a ochranu osobních údajů. Veškeré osobní údaje, které nám poskytnete, budou zpracovány v souladu s naší Zásadou Ochrany Osobních Údajů a v souladu s nařízením GDPR.</p>
+        </section>
+
+        <section>
+          <h4>2. shromažďované údaje:</h4>
+          <p>Aplikace může shromažďovat a zpracovávat různé kategorie osobních údajů, včetně, ale neomezujíc se na, jméno, e-mailovou adresu, geografická data a informace o zařízení, které používáte.</p>
+        </section>
+
+        <section>
+          <h4>3. účely zpracování:</h4>
+          <p>Osobní údaje budou zpracovány pro specifické účely, které budou uvedeny při shromažďování těchto údajů. To může zahrnovat poskytování služeb, personalizaci obsahu, analytiku a marketingové účely.</p>
+        </section>
+
+        <section>
+          <h4>4. práva uživatelů podle GDPR:</h4>
+          <p>Podle nařízení GDPR máte právo na přístup k vašim osobním údajům, opravu, výmaz, omezení zpracování, přenositelnost údajů a vznést námitku proti zpracování.</p>
+        </section>
+
+        <section>
+          <h4>5. bezpečnost osobních údajů:</h4>
+          <p>Aplikace přijímá veškerá opatření k zajištění bezpečnosti osobních údajů uživatelů. To zahrnuje šifrování dat, pravidelné bezpečnostní auditování a opatření k zabránění neoprávněného přístupu k údajům.</p>
+        </section>
+
+        <section>
+          <h4>6. sdílení osobních údajů:</h4>
+          <p>Osobní údaje nebudou sdíleny s třetími stranami bez vašeho souhlasu, s výjimkou případů stanovených zákonnou povinností.</p>
+        </section>
+
+        <section>
+          <h4>7. cookies:</h4>
+          <p>Pro lepší funkčnost a personalizaci obsahu může aplikace využívat soubory cookies.</p>
+        </section>
+
+        <section>
+          <h4>8. změny v podmínkách:</h4>
+          <p>Podmínky používání a Zásady Ochrany Osobních Údajů mohou být aktualizovány. Aktualizované verze budou zveřejněny na našem webu.</p>
+        </section>
+      </q-card-section>
+    </template>
+  </ContentCard>
+
+</template>

src/pages/public/PilotProfileWrapper.vue

@@ -4,7 +4,9 @@ import {useAppStore} from "stores/App";
 
 export default {
   preFetch({store, currentRoute}) {
-    return usePilotsStore(store).fetchPublicPilotDetail(currentRoute.params.username).catch(e => {});
+    return usePilotsStore(store).fetchPublicPilotDetail(currentRoute.params.username).catch(e => {
+      useAppStore().appStatus = 404;
+    });
   },
 }
 </script>
@@ -14,6 +16,8 @@ import {storeToRefs} from "pinia";
 import PilotProfileCard from "components/profile/PilotProfileCard.vue";
 import PublicProfileSkeleton from "components/profile/skeletons/PublicProfileSkeleton.vue";
 
+console.log("pilot profile wrapper");
+
 const {pilot, isQueryRunning: pilotLoading} = storeToRefs(usePilotsStore());
 </script>
 

src/pages/public/TermsAndConditionsPage.vue

@@ -0,0 +1,71 @@
+<script setup>
+import ContentCard from "components/ContentCard.vue";
+import {useAppStore} from "stores/App";
+
+useAppStore().setPageTitle("Podmínky používání");
+useAppStore().setBreadcrumbs([
+  {to: {name: 'homepage'}, label: "Polétání.cz"},
+  {label: "Podmínky používání"}
+]);
+</script>
+
+<template>
+  <ContentCard title="Podmínky používání aplikace Polétání.cz">
+    <template #content>
+      <q-card-section>
+        <section>
+          <h4>1. registrace a přístup:</h4>
+          <p>Pro získání přístupu k plnému rozsahu služeb, které tato webová aplikace nabízí, je vyžadována registrace. Během tohoto procesu musíte poskytnout přesný a platný e-mail, který bude sloužit k vašemu účtu, a vytvořit bezpečné heslo. Zároveň jste odpovědni za udržování důvěrnosti svého přihlašovacího účtu.</p>
+        </section>
+
+        <section>
+          <h4>2. poskytované služby:</h4>
+          <p>Tato aplikace je nabízena zdarma a bez jakékoli explicitní nebo implicitní záruky. Poskytované služby mohou být kdykoli změněny, aktualizovány nebo ukončeny bez předchozího oznámení.</p>
+        </section>
+
+        <section>
+          <h4>3. nahrávání dat:</h4>
+          <p>Uživatelé mají právo nahrávat fotografie a vytvářet texty ve webové aplikaci. Je důležité zdůraznit, že veškerá data, která do aplikace nahráváte, zůstávají vaším duševním vlastnictvím.</p>
+        </section>
+
+        <section>
+          <h4>4. odpovědnost za obsah:</h4>
+          <p>Všichni uživatelé jsou plně odpovědni za obsah, který do aplikace přidávají. Aplikace nenese žádnou odpovědnost za obsah, který uživatelé vytvářejí nebo sdílejí.</p>
+        </section>
+
+        <section>
+          <h4>5. ochrana soukromí:</h4>
+          <p>Osobní údaje poskytnuté během registrace, zejména e-mailové adresy, budou pečlivě chráněny v souladu s platnými zákony o ochraně osobních údajů.</p>
+        </section>
+
+        <section>
+          <h4>6. bezpečnost:</h4>
+          <p>Uživatelé jsou povinni dodržovat bezpečnostní opatření při používání aplikace a zakázáno je jakékoli chování, které by mohlo ohrozit bezpečnost samotné aplikace nebo ostatních uživatelů.</p>
+        </section>
+
+        <section>
+          <h4>7. změny podmínek:</h4>
+          <p>Provozovatel si vyhrazuje právo kdykoli změnit podmínky používání. O změnách budou uživatelé informováni prostřednictvím e-mailu nebo při přihlášení do aplikace.</p>
+        </section>
+
+        <section>
+          <h4>8. ukončení služeb:</h4>
+          <p>Provozovatel má právo kdykoli ukončit poskytování služeb aplikace bez udání důvodu.</p>
+        </section>
+
+        <section>
+          <h4>9. stížnosti a podněty:</h4>
+          <p>Uživatelé mají možnost předkládat stížnosti a podněty prostřednictvím
+            <router-link :to="{name: 'contact'}">kontaktních informací</router-link>
+            poskytnutých na webové stránce aplikace.
+          </p>
+        </section>
+
+        <section>
+          <h4>10. důležitá ustanovení:</h4>
+          <p>Tyto podmínky tvoří právně závaznou dohodu mezi uživatelem a provozovatelem aplikace. Používáním aplikace vyjadřujete svůj souhlas s těmito podmínkami. Přečtěte si je prosím pečlivě.</p>
+        </section>
+      </q-card-section>
+    </template>
+  </ContentCard>
+</template>

src/pages/public/user/ForgottenPasswordPage.vue

@@ -0,0 +1,93 @@
+<script setup>
+import {reactive, ref} from "vue";
+import {useRouter} from "vue-router";
+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();
+
+useAppStore().setPageTitle("Zapomenuté heslo");
+useMeta(() => metaData({
+  title: "Zapomenuté heslo",
+}));
+
+const registerUser = () => {
+  if (!form.value.validate()) return;
+
+  return api.post('/forgotten-password', formData).then(response => {
+    useAuthStore().login({email: formData.email, password: formData.password}).then(() => {
+      $q.notify(successObject("Registrace úspěšná, vítej!"));
+      router.push({name: "myFlights"});
+    })
+
+  }).catch(({response}) => {
+    if (response.detail === 'User already exists') {
+      $q.notify(errorObject("Uživatel s tímto e-mailem je již registrovaný. Zkus se přihlásit."));
+    } else {
+      $q.notify(errorObject("Registrace se nepovedla, zkus to prosím znovu za chvíli"));
+    }
+  })
+}
+
+const form = ref(null);
+const formData = reactive({
+  name: "",
+  email: "",
+  password: ""
+});
+
+
+const rules = {
+  email: [isRequired, isValidEmail],
+  password: [isRequired, minLength(4)]
+}
+</script>
+
+<template>
+  <q-layout view="lHh Lpr lFf">
+    <q-page-container>
+
+      <q-page class="row justify-center">
+        <q-card flat square style="width:95%; max-width: 450px; height: 500px">
+          <q-card-section class="bg-primary">
+            <h4 class="text-h5 text-white q-my-md">Zapomenuté heslo</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.email" type="email" label="E-mail" :rules="rules.email">
+                <template v-slot:prepend>
+                  <q-icon name="email"/>
+                </template>
+              </q-input>
+
+            </q-form>
+          </q-card-section>
+          <q-card-actions class="q-px-lg">
+            <q-btn
+              @click="registerUser"
+              unelevated
+              size="lg"
+              color="primary"
+              class="full-width"
+              label="Resetovat heslo"
+            />
+          </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>

src/pages/public/user/LoginPage.vue

@@ -1,19 +1,26 @@
 <script setup>
-import {reactive} from "vue";
+import {reactive, ref} from "vue";
 import {useRouter} from "vue-router";
 import {isRequired, isValidEmail, minLength} from "src/composables/form/rules";
-import {useQuasar} from "quasar";
+import {useMeta, useQuasar} from "quasar";
 import {errorObject} from "src/composables/dialog";
 import {useAuthStore} from "stores/Auth";
+import {useAppStore} from "stores/App";
+import {metaData} from "src/composables/meta";
 
 const $router = useRouter();
 const $q = useQuasar();
 
+useAppStore().setPageTitle("Přihlášení");
+useMeta(() => metaData({
+  title: "Přihlášení",
+}));
+
 const logUser = () => {
   useAuthStore().login(formData).then(() => {
     $router.push({name: "myFlights"});
   }).catch((err) => {
-    $q.notify(errorObject(`Přihlášení se nezdařilo. ${err}`))
+    $q.notify(errorObject(`Přihlášení se nezdařilo.`))
   })
 };
 
@@ -32,7 +39,7 @@ const formData = reactive({
     <q-page-container>
 
       <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 square flat style="width:95%; max-width: 450px;" class="q-mt-lg">
           <q-card-section class="bg-primary">
             <h4 class="text-h5 q-my-md text-white">Login</h4>
           </q-card-section>
@@ -52,11 +59,11 @@ const formData = reactive({
           </q-card-section>
 
           <q-card-actions class="q-px-lg">
-            <q-btn unelevated size="lg" class="full-width" label="Přihlásit se" @click.prevent="logUser()"/>
+          <q-btn unelevated size="lg" color="primary" 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-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>

src/pages/public/user/RegisterPage.vue

@@ -52,49 +52,49 @@ const rules = {
 <template>
   <q-layout view="lHh Lpr lFf">
     <q-page-container>
-
       <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-card flat style="width: 100%; max-width: 450px">
+            <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-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
+                color="primary"
+                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>

src/router/routes.js

@@ -3,7 +3,7 @@ import PlainLayout from "layouts/PlainLayout.vue";
 const routes = [
   {path: '/login', name: "login", component: () => import('pages/public/user/LoginPage.vue'), meta: {layout: PlainLayout}},
   {path: '/registrace', name: "registration", component: () => import('pages/public/user/RegisterPage.vue'), meta: {layout: PlainLayout}},
-  {path: '/zapomenute-heslo', name: "forgottenPassword", component: () => import('pages/public/user/RegisterPage.vue'), meta: {layout: PlainLayout}},
+  {path: '/zapomenute-heslo', name: "forgottenPassword", component: () => import('pages/public/user/ForgottenPasswordPage.vue'), meta: {layout: PlainLayout}},
 
   {path: '', name: "homepage", component: () => import('pages/public/IndexPage.vue'), meta: {layout: PlainLayout}},
 
@@ -13,6 +13,12 @@ const routes = [
     children: [
       {path: 'o-projektu', name: "about", component: () => import('pages/public/AboutPage.vue')},
       {path: 'kontakt', name: "contact", component: () => import('pages/public/ContactPage.vue')},
+      {path: 'podminky', name: "termsAndConditions", component: () => import('pages/public/TermsAndConditionsPage.vue')},
+      {path: 'osobni-udaje', name: "personalInformation", component: () => import('pages/public/PersonalInformationPage.vue')},
+      {path: 'funkce', name: "features", component: () => import('pages/public/FeaturesPage.vue')},
+      {path: 'letadlo/:callSign', name: "publicAircraftDetail", component: () => import('pages/public/aircraft/AircraftDetailPage.vue')},
+      {path: 'mista', name: "publicPOIs", component: () => import('pages/public/poi/PointsOfInterestPage.vue')},
+      {path: 'mista/:slug', name: "publicPOIDetail", component: () => import('pages/public/poi/PointOfInterestDetailPage.vue')},
       {
         path: ':username',
         component: () => import('pages/public/PilotProfileWrapper.vue'),
@@ -24,9 +30,6 @@ const routes = [
           {path: 'udalosti/:eventSlug', name: "publicEventDetail", component: () => import('pages/public/pilotProfile/EventDetailPage.vue')},
         ]
       },
-      {path: 'letadlo/:callSign', name: "publicAircraftDetail", component: () => import('pages/public/aircraft/AircraftDetailPage.vue')},
-      {path: 'mista', name: "publicPOIs", component: () => import('pages/public/poi/PointsOfInterestPage.vue')},
-      {path: 'mista/:slug', name: "publicPOIDetail", component: () => import('pages/public/poi/PointOfInterestDetailPage.vue')},
     ]
   },
   {
@@ -79,13 +82,6 @@ const routes = [
 
   {path: '/refresh', name: "profileRefresh", component: () => import('pages/profile/ProfileRefreshPage.vue')},
 
-
-  // Always leave this as last one,
-  // but you can also remove it
-  // {
-  //   path: '/:catchAll(.*)*',
-  //   component: () => import('pages/ErrorNotFound.vue')
-  // }
 ]
 
 export default routes