bugfixes

frontend/quasar.conf.js

@@ -109,8 +109,8 @@ module.exports = function (ctx) {
       },
       env: ctx.dev
         ? { // Base URL for API-Calls: DEV
-          //API: JSON.stringify('http://localhost:8080')
+          API: JSON.stringify('http://localhost:8080'),
-          API: JSON.stringify('https://seserver.se.hs-heilbronn.de:8443/buga19geocaching'),
+          // API: JSON.stringify('https://seserver.se.hs-heilbronn.de:8443/buga19geocaching'),
           USER_API: JSON.stringify('https://seserver.se.hs-heilbronn.de:8443/buga19usermanagement')
         }
         : { // Base URL for API-Calls: PRODUCTION (build)

frontend/src/layouts/MyLayout.vue

@@ -73,6 +73,7 @@
           </q-item-section>
         </q-item>
         <q-item
+          v-if="this.$store.state.auth.isAuthenticated"
           clickable
           class="text-primary"
           v-ripple
@@ -131,6 +132,23 @@
           </q-item-section>
         </q-item>
         <q-item
+          v-if="this.$store.state.auth.isAuthenticated"
+          clickable
+          class="text-primary"
+          v-ripple
+          tag="a"
+          @click="logout()"
+          to="/"
+        >
+          <q-item-section avatar>
+            <q-icon name="logout"/>
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>Logout</q-item-label>
+          </q-item-section>
+        </q-item>
+        <q-item
+          v-if="!this.$store.state.auth.isAuthenticated"
           clickable
           class="text-primary"
           v-ripple
@@ -141,7 +159,7 @@
             <q-icon name="logout"/>
           </q-item-section>
           <q-item-section>
-            <q-item-label>{{ loginText }}</q-item-label>
+            <q-item-label>Login</q-item-label>
           </q-item-section>
         </q-item>
       </q-list>
@@ -177,22 +195,10 @@
     name: "MyLayout",
     data() {
       return {
-        // dialog: {
-        //   color: this,
-        //   show: true,
-        //   message: "Hallo Fehler! Dies ist ein Beispiel Fehler."
-        // },
         leftDrawerOpen: this.$q.platform.is.desktop,
-        //menuButtonVisible: !this.$q.platform.is.desktop,
-        //leftDrawerOpen: true,
-        //miniState: true
       };
     },
     computed: {
-      loginText() {
-        let text = this.$store.state.auth.isAuthenticated ? "Logout" : "Login";
-        return text;
-      },
       dialogShow: {
         get() {
           // console.log("get dialogShow: "+this.$store.state.dialog.dialog.show)
@@ -234,6 +240,17 @@
         console.log("dialogClose(): ")
         this.$store.commit('dialog/RESET_MESSAGE_DIALOG');
       },
+      evalAuthentication: function () {
+        this.$store.commit('auth/SET_AUTHENTICATED');
+        this.$store.commit('auth/SET_USER');
+      },
+      logout: function () {
+        console.log("logout()");
+        console.log(JSON.parse(localStorage.getItem('userToken')));
+        localStorage.removeItem('userToken');
+        this.evalAuthentication();
+      },
+
 
     }
   };

frontend/src/pages/Login.vue

@@ -46,6 +46,16 @@
                   unelevated
                   @click="logout"
                 />
+                <div class="q-pt-md">
+                  <q-btn
+                    :disabled="userAuthenticated"
+                    label="Registrieren"
+                    color="primary"
+                    class="full-width q-mt-md"
+                    unelevated
+                    to="/register"
+                  />
+                </div>
               </div>
             </div>
           </div>
@@ -140,16 +150,6 @@
       logout: function () {
         console.log("logout()");
         console.log(JSON.parse(localStorage.getItem('userToken')));
-        // this.$axios.get('/api/logout', {
-        //     params: {
-        //       token: JSON.parse(localStorage.getItem('userToken'))
-        //     }
-        //   })
-        //   .then((response) => {
-        //     console.log("GET/POST /api/logout/ - response: " + response.data);
-        //   })
-        //   .catch((error) => {
-        //   });
         localStorage.removeItem('userToken');
         this.evalAuthentication();
       },

frontend/src/pages/Register.vue

@@ -1,43 +1,43 @@
 <template>
   <div class="q-pa-md">
-    <form class="register">
+    <form class="register" autocomplete="off">
       <div class="q-pa-md">
         <div class="column q-gutter-lg" style="">
           <div class="col">
             <div class="">
               <div class="" style="max-width: 440px">
-                <q-input outlined filled stack-label v-model="user.name" type="text"
+                <q-input lazy-rules outlined filled stack-label v-model="user.name" type="text"
-                         label="Nutzername eingeben" :rules="[val=>val.length>=2||'Name muss mindestens 2 Zeichen lang sein!']"/>
+                         label="Nutzername" :rules="[val=>val.length>=2||'Name muss mindestens 2 Zeichen lang sein!']"/>
               </div>
             </div>
           </div>
             <div class="col">
               <div class="">
                 <div class="" style="max-width: 440px">
-                  <q-input outlined filled stack-label v-model="user.email" type="text" label="Email eingeben" :rules="[val=>validateEmail(val)||'Email muss valide sein']"/>
+                  <q-input lazy-rules outlined filled stack-label v-model="user.email" type="text" label="E-Mail" :rules="[val=>validateEmail(val)||'Bitte gültige E-Mail angeben!']"/>
                 </div>
               </div>
             </div>
             <div class="col">
               <div class="">
                 <div class="" style="max-width: 440px">
-                  <q-input outlined filled stack-label v-model="user.checkemail" type="text"
+                  <q-input lazy-rules outlined filled stack-label v-model="user.checkemail" type="text"
-                           label="Email erneut eingeben" placeholer="Email" :rules="[val=>val===user.email||'Email stimmt nicht überein']"/>
+                           label="E-Mail erneut eingeben" placeholer="Email" :rules="[val=>val===user.email||'E-Mail stimmt nicht überein!']"/>
                 </div>
               </div>
             </div>
             <div class="col">
               <div class="">
                 <div class="" style="max-width: 440px">
-                  <q-input outlined filled stack-label v-model="user.password" type="password"
+                  <q-input lazy-rules outlined filled stack-label v-model="user.password" type="password"
-                           label="Passwort eingeben" :rules="[val=>val.length>=8||'Passwort muss mindestens 8 Zeichen lang sein!']"/>
+                           label="Passwort" :rules="[val=>val.length>=8||'Passwort muss mindestens 8 Zeichen lang sein!']"/>
                 </div>
               </div>
             </div>
             <div class="col">
               <div class="">
                 <div class="" style="max-width: 440px">
-                  <q-input outlined filled stack-label v-model="user.checkpassword" type="password"
+                  <q-input lazy-rules outlined filled stack-label v-model="user.checkpassword" type="password"
                            label="Passwort erneut eingeben" :rules="[val=>val===user.password||'Passwort stimmt nicht überein']"/>
                 </div>
               </div>
@@ -120,7 +120,8 @@
             .then((response) => {
               console.log(response.data);
               if(response.status === 201){
-                this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: "Deine Registrierung war erfolgreich!", title: "Registrierungsprozess", color: "blue"});
+                this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: "Deine Registrierung war erfolgreich! Du kannst dich jetzt einloggen.", title: "Registrierungsprozess", color: "blue"});
+                this.$router.push("/login")
               }
             })
             .catch((error) => {

frontend/src/router/index.js

@@ -2,25 +2,86 @@ import Vue from "vue";
 import VueRouter from "vue-router";
 
 import routes from "./routes";
-
+import {axiosInstance} from "../boot/axios";
 Vue.use(VueRouter);
 
+//import store from "../store/index";
+
 /*
  * If not building with SSR mode, you can
  * directly export the Router instantiation
  */
 
-export default function(/* { store, ssrContext } */) {
+export default function({ store }/* { store, ssrContext } */) {
   const Router = new VueRouter({
     scrollBehavior: () => ({ x: 0, y: 0 }),
     routes,
-
+    store,
     // Leave these as is and change from quasar.conf.js instead!
     // quasar.conf.js -> build -> vueRouterMode
     // quasar.conf.js -> build -> publicPath
     mode: process.env.VUE_ROUTER_MODE,
     base: process.env.VUE_ROUTER_BASE
   });
+  Router.beforeEach((to, from, next) => {
+    console.log("before Routing...");
+    const isPublic = to.matched.some(record => record.meta.public);
+    const onlyWhenLoggedOut = to.matched.some(record => record.meta.onlyWhenLoggedOut);
+    const onlyAdmin = to.matched.some(record => record.meta.onlyAdmin);
+    const loggedIn = localStorage.getItem('userToken')
+      ? JSON.parse(localStorage.getItem('userToken'))
+      : false;
+    console.log(`isPublic: ${isPublic} \nonlyWhenLoggedOut: ${onlyWhenLoggedOut} \nonlyAdmin: ${onlyAdmin}`);
+    console.log("loggedIn");
+    console.log(loggedIn);
+    const isAdmin = loggedIn ? loggedIn.roles.find(x => x.role === "ADMIN" && x.domain === "geocaching.de") : false;
+    //const isAdmin = true;
 
+    if (!isPublic && !loggedIn) {
+      return next({
+        path:'/login',
+        query: {redirect: to.fullPath}  // Store the full path to redirect the user to after login
+      });
+    }
+    if ((loggedIn && onlyWhenLoggedOut) || (loggedIn && onlyAdmin && !isAdmin)) {
+      return next('/')
+    }
+    if (isPublic) {
+      return next()
+    }
+    if (!isPublic && loggedIn) {
+      axiosInstance.get('/api/getUser', {
+        params: {
+          token: loggedIn.token
+        }
+      })
+        .then((response) => {
+          console.log("Token valid!");
+          return next();
+        })
+        .catch((error) => {
+          console.log("Catch Block: ");
+          console.log("Token invalid!");
+          if (error.response) {
+            console.log(error.response.data);
+            console.log(error.response.status);
+            console.log(error.response.headers);
+            //store.commit('auth/SET_LOGOUT');
+            store.commit('dialog/NEW_MESSAGE_DIALOG', {
+              message: "Ihr Token ist nicht mehr gültig. Bitte loggen Sie sich erneut ein.",
+              title: "Bitte erneut anmelden.",
+              color: "blue", });
+            localStorage.removeItem('userToken');
+            return next('/Login');
+          } else {
+            console.log("unexpected behaviour");
+            console.log(error);
+            return next();
+          }
+        });
+    }
+    console.log(`isPublic: ${isPublic} \nonlyWhenLoggedOut: ${onlyWhenLoggedOut} \nonlyAdmin: ${onlyAdmin}`);
+    //return next();
+  });
   return Router;
 }

frontend/src/router/routes.js

@@ -2,88 +2,173 @@ const routes = [
   {
     path: "/",
     component: () => import("layouts/MyLayout.vue"),
-    children: [{ path: "", component: () => import("pages/Index.vue") }]
+    children: [{ path: "", component: () => import("pages/Index.vue") }],
+    meta: {
+      public: true,  // Allow access to even if not logged in
+      onlyWhenLoggedOut: false,
+      onlyAdmin: false,
+    }
   },
   {
 
     path: "/overview/",
     component: () => import("layouts/MyLayout.vue"),
-    children: [{ path: "", component: () => import("pages/Overview.vue") }]
+    children: [{ path: "", component: () => import("pages/Overview.vue") }],
+    meta: {
+      public: true,  // Allow access to even if not logged in
+      onlyWhenLoggedOut: false,
+      onlyAdmin: false,
+    }
   },
   {
     path: "/cache/",
     component: () => import("layouts/MyLayout.vue"),
-    children: [{ path: "", component: () => import("pages/Cache.vue") }]
+    children: [{ path: "", component: () => import("pages/Cache.vue") }],
+    meta: {
+      public: false,  // Allow access to even if not logged in
+      onlyWhenLoggedOut: false,
+      onlyAdmin: true,
+    }
   },
   {
     path: "/qr-scanner/",
     component: () => import("layouts/MyLayout.vue"),
-    children: [{ path: "", component: () => import("pages/qr-scanner.vue") }]
+    children: [{ path: "", component: () => import("pages/qr-scanner.vue") }],
+    meta: {
+      public: false,  // Allow access to even if not logged in
+      onlyWhenLoggedOut: false,
+      onlyAdmin: false,
+    }
   },
   {
     path: "/cache/:id",
     component: () => import("layouts/MyLayout.vue"),
-    children: [{ path: "", component: () => import("pages/Cache.vue") }]
+    children: [{ path: "", component: () => import("pages/Cache.vue") }],
+    meta: {
+      public: false,  // Allow access to even if not logged in
+      onlyWhenLoggedOut: false,
+      onlyAdmin: true,
+    }
   },
   {
     path: "/station/",
     component: () => import("layouts/MyLayout.vue"),
-    children: [{ path: "", component: () => import("pages/StationEdit.vue") }]
+    children: [{ path: "", component: () => import("pages/StationEdit.vue") }],
+    meta: {
+      public: false,  // Allow access to even if not logged in
+      onlyWhenLoggedOut: false,
+      onlyAdmin: true,
+    }
   },
   {
     path: "/endstation/",
     component: () => import("layouts/MyLayout.vue"),
-    children: [{ path: "", component: () => import("pages/StationEndEdit.vue") }]
+    children: [{ path: "", component: () => import("pages/StationEndEdit.vue") }],
+    meta: {
+      public: false,  // Allow access to even if not logged in
+      onlyWhenLoggedOut: false,
+      onlyAdmin: true,
+    }
   },
   {
     path: "/tempstation/:pos",
     component: () => import("layouts/MyLayout.vue"),
-    children: [{path: "", component: () => import("pages/StationEdit.vue")}]
+    children: [{path: "", component: () => import("pages/StationEdit.vue")}],
+    meta: {
+      public: false,  // Allow access to even if not logged in
+      onlyWhenLoggedOut: false,
+      onlyAdmin: true,
+    }
   },
   {
     path: "/tempendstation/",
     component: () => import("layouts/MyLayout.vue"),
-    children: [{path: "", component: () => import("pages/StationEndEdit.vue")}]
+    children: [{path: "", component: () => import("pages/StationEndEdit.vue")}],
+    meta: {
+      public: false,  // Allow access to even if not logged in
+      onlyWhenLoggedOut: false,
+      onlyAdmin: true,
+    }
   },
   {
     path: "/station/:cache/:id",
     component: () => import("layouts/MyLayout.vue"),
-    children: [{ path: "", component: () => import("pages/StationView.vue") }]
+    children: [{ path: "", component: () => import("pages/StationView.vue") }],
+    meta: {
+      public: false,  // Allow access to even if not logged in
+      onlyWhenLoggedOut: false,
+      onlyAdmin: false,
+    }
   },
   {
     path: "/ranking/",
       component: () => import("layouts/MyLayout.vue"),
-    children: [{path: "", component: () => import("pages/ranking.vue")}]
+    children: [{path: "", component: () => import("pages/ranking.vue")}],
+    meta: {
+      public: true,  // Allow access to even if not logged in
+      onlyWhenLoggedOut: false,
+      onlyAdmin: false,
+    }
   },
   {
     path: "/login/",
     component: () => import("layouts/MyLayout.vue"),
-    children: [{ path: "", component: () => import("pages/Login.vue") }]
+    children: [{ path: "", component: () => import("pages/Login.vue") }],
+    meta: {
+      public: true,  // Allow access to even if not logged in
+      onlyWhenLoggedOut: false,
+      onlyAdmin: false,
+    }
   },
   {
     path: "/CacheStart/:cache/",
     component: () => import("layouts/MyLayout.vue"),
-    children: [{ path: "", component: () => import("pages/CacheStart.vue") }]
+    children: [{ path: "", component: () => import("pages/CacheStart.vue") }],
+    meta: {
+      public: false,  // Allow access to even if not logged in
+      onlyWhenLoggedOut: false,
+      onlyAdmin: false,
+    }
   },
   {
     path: "/CacheEnd/:cache/",
     component: () => import("layouts/MyLayout.vue"),
-    children: [{ path: "", component: () => import("pages/CacheEnd.vue") }]
+    children: [{ path: "", component: () => import("pages/CacheEnd.vue") }],
+    meta: {
+      public: false,  // Allow access to even if not logged in
+      onlyWhenLoggedOut: false,
+      onlyAdmin: false,
+    }
   },
   {
    path: "/profile/",
       component: () => import("layouts/MyLayout.vue"),
-    children: [{ path: "", component: () => import("pages/Profile.vue") }]
+    children: [{ path: "", component: () => import("pages/Profile.vue") }],
+    meta: {
+      public: false,  // Allow access to even if not logged in
+      onlyWhenLoggedOut: false,
+      onlyAdmin: false,
+    }
   },
   {
    path: "/mycaches/",
       component: () => import("layouts/MyLayout.vue"),
-    children: [{ path: "", component: () => import("pages/MyCaches.vue") }]
+    children: [{ path: "", component: () => import("pages/MyCaches.vue") }],
+    meta: {
+      public: false,  // Allow access to even if not logged in
+      onlyWhenLoggedOut: false,
+      onlyAdmin: false,
+    }
   },
   {
     path: "/register/",
     component: () => import("layouts/MyLayout.vue"),
-    children: [{ path: "", component: () => import("pages/Register.vue") }]
+    children: [{ path: "", component: () => import("pages/Register.vue") }],
+    meta: {
+      public: true,  // Allow access to even if not logged in
+      onlyWhenLoggedOut: true,
+      onlyAdmin: false,
+    }
   }
 ];
 

frontend/src/store/dialog/mutations.js

@@ -14,16 +14,19 @@ export function NEW_MESSAGE_DIALOG (state, messageObject) {
         let color = "red-9";
         state.dialog.colorBackground = "bg-"+color+" text-white";
         state.dialog.colorButton = color;
+        break;
       }
       case "amber": {
         let color = "amber";
         state.dialog.colorBackground = "bg-"+color+" text-white";
         state.dialog.colorButton = color;
+        break;
       }
       case "blue": {
         let color = "primary";
         state.dialog.colorBackground = "bg-"+color+" text-white";
         state.dialog.colorButton = color;
+        break;
       }
     }
   }