From c0845f835f4a77eb65a9bee4127099e026c6950d Mon Sep 17 00:00:00 2001
From: Timo Volkmann <volkmann@stud.hs-heilbronn.de>
Date: Tue, 7 May 2019 12:56:04 +0200
Subject: [PATCH 1/5] bugfixes

---
 frontend/quasar.conf.js                |   4 +-
 frontend/src/layouts/MyLayout.vue      |  43 ++++++---
 frontend/src/pages/Login.vue           |  20 ++---
 frontend/src/pages/Register.vue        |  21 ++---
 frontend/src/router/index.js           |  67 +++++++++++++-
 frontend/src/router/routes.js          | 119 +++++++++++++++++++++----
 frontend/src/store/dialog/mutations.js |   3 +
 7 files changed, 222 insertions(+), 55 deletions(-)

diff --git a/frontend/quasar.conf.js b/frontend/quasar.conf.js
index 28e7ec3..dc84e20 100644
--- a/frontend/quasar.conf.js
+++ b/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('https://seserver.se.hs-heilbronn.de:8443/buga19geocaching'),
+          API: JSON.stringify('http://localhost:8080'),
+          // 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)
diff --git a/frontend/src/layouts/MyLayout.vue b/frontend/src/layouts/MyLayout.vue
index 943c3f7..7d7815d 100644
--- a/frontend/src/layouts/MyLayout.vue
+++ b/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();
+      },
+
 
     }
   };
diff --git a/frontend/src/pages/Login.vue b/frontend/src/pages/Login.vue
index 56efa31..2159d3c 100644
--- a/frontend/src/pages/Login.vue
+++ b/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();
       },
diff --git a/frontend/src/pages/Register.vue b/frontend/src/pages/Register.vue
index a1d5b2c..33b487f 100644
--- a/frontend/src/pages/Register.vue
+++ b/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"
-                         label="Nutzername eingeben" :rules="[val=>val.length>=2||'Name muss mindestens 2 Zeichen lang sein!']"/>
+                <q-input lazy-rules outlined filled stack-label v-model="user.name" type="text"
+                         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"
-                           label="Email erneut eingeben" placeholer="Email" :rules="[val=>val===user.email||'Email stimmt nicht überein']"/>
+                  <q-input lazy-rules outlined filled stack-label v-model="user.checkemail" type="text"
+                           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"
-                           label="Passwort eingeben" :rules="[val=>val.length>=8||'Passwort muss mindestens 8 Zeichen lang sein!']"/>
+                  <q-input lazy-rules outlined filled stack-label v-model="user.password" type="password"
+                           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) => {
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 8c7a194..713eb99 100644
--- a/frontend/src/router/index.js
+++ b/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;
 }
diff --git a/frontend/src/router/routes.js b/frontend/src/router/routes.js
index 6a39f45..5036bab 100644
--- a/frontend/src/router/routes.js
+++ b/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,
+    }
   }
 ];
 
diff --git a/frontend/src/store/dialog/mutations.js b/frontend/src/store/dialog/mutations.js
index 4a14ffa..c9c7306 100644
--- a/frontend/src/store/dialog/mutations.js
+++ b/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;
       }
     }
   }

From 3c884dcd90ee217c2d4f77cab8a564bfcce6a9af Mon Sep 17 00:00:00 2001
From: Timo Volkmann <volkmann@stud.hs-heilbronn.de>
Date: Tue, 7 May 2019 13:19:11 +0200
Subject: [PATCH 2/5] bugfixes

---
 frontend/src/pages/Login.vue    |   8 ---
 frontend/src/pages/Register.vue | 114 ++++++++++++++++----------------
 2 files changed, 56 insertions(+), 66 deletions(-)

diff --git a/frontend/src/pages/Login.vue b/frontend/src/pages/Login.vue
index 2159d3c..814f108 100644
--- a/frontend/src/pages/Login.vue
+++ b/frontend/src/pages/Login.vue
@@ -73,17 +73,9 @@
         user: {
           email: "",
           password: "",
-          //token: "",
-          // evalAuthentication: false
         },
       };
     },
-    // beforeMount: {
-    //   init: function () {
-    //     this.evalAuthentication();
-    //     console.log("initiated");
-    //   }
-    // },
     created() {
       this.evalAuthentication();
       console.log("created: initiated");
diff --git a/frontend/src/pages/Register.vue b/frontend/src/pages/Register.vue
index 33b487f..cab6e5c 100644
--- a/frontend/src/pages/Register.vue
+++ b/frontend/src/pages/Register.vue
@@ -6,58 +6,54 @@
           <div class="col">
             <div class="">
               <div class="" style="max-width: 440px">
-                <q-input lazy-rules outlined filled stack-label v-model="user.name" type="text"
-                         label="Nutzername" :rules="[val=>val.length>=2||'Name muss mindestens 2 Zeichen lang 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 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 class="col">
+            <div class="">
+              <div class="" style="max-width: 440px">
+                <q-input lazy-rules outlined filled stack-label v-model="user.checkemail" type="text"
+                         label="E-Mail erneut eingeben" placeholer="Email"
+                         :rules="[val=>val===user.email||'E-Mail stimmt nicht überein!']"/>
               </div>
             </div>
-            <div class="col">
-              <div class="">
-                <div class="" style="max-width: 440px">
-                  <q-input lazy-rules outlined filled stack-label v-model="user.checkemail" type="text"
-                           label="E-Mail erneut eingeben" placeholer="Email" :rules="[val=>val===user.email||'E-Mail stimmt nicht überein!']"/>
-                </div>
+          </div>
+          <div class="col">
+            <div class="">
+              <div class="" style="max-width: 440px">
+                <q-input lazy-rules outlined filled stack-label v-model="user.password" type="password"
+                         label="Passwort"
+                         :rules="[val=>val.length>=8||'Passwort muss mindestens 8 Zeichen lang sein!']"/>
               </div>
             </div>
-            <div class="col">
-              <div class="">
-                <div class="" style="max-width: 440px">
-                  <q-input lazy-rules outlined filled stack-label v-model="user.password" type="password"
-                           label="Passwort" :rules="[val=>val.length>=8||'Passwort muss mindestens 8 Zeichen lang sein!']"/>
-                </div>
+          </div>
+          <div class="col">
+            <div class="">
+              <div class="" style="max-width: 440px">
+                <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>
-            <div class="col">
-              <div class="">
-                <div class="" style="max-width: 440px">
-                  <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>
-            </div>
-            <div class="col">
-              <div class="">
-                <div class="" style="max-width: 440px">
-                  <q-btn
-                    :disabled="!validationSuccesful"
-                    label="Registrieren"
-                    color="primary"
-                    class="full-width"
-                    @click="register()"
-                    unelevated
-                  />
-                </div>
+          </div>
+          <div class="col">
+            <div class="">
+              <div class="" style="max-width: 440px">
+                <q-btn
+                  :disabled="!validationSuccesful"
+                  label="Registrieren"
+                  color="primary"
+                  class="full-width"
+                  @click="register()"
+                  unelevated
+                />
               </div>
             </div>
           </div>
         </div>
+      </div>
     </form>
   </div>
 </template>
@@ -65,23 +61,21 @@
 <script>
   export default {
     data() {
-      return{
+      return {
         user: {
-          name:"",
-          email:"",
-          checkemail:"",
+          email: "",
+          checkemail: "",
           password: "",
           checkpassword: "",
         },
       }
     },
     computed: {
-      validationSuccesful(){
-        if(this.user.name.length>=2
-          &&this.validateEmail(this.user.email)
-          &&this.user.email===this.user.checkemail
-          &&this.user.password.length>=8
-          &&this.user.password===this.user.checkpassword){
+      validationSuccesful() {
+        if (this.validateEmail(this.user.email)
+          && this.user.email === this.user.checkemail
+          && this.user.password.length >= 8
+          && this.user.password === this.user.checkpassword) {
           return true;
         }
         return false;
@@ -97,9 +91,9 @@
       },
       register: function () {
 
-        if(this.user.email===this.user.checkemail&&this.user.password===this.user.checkpassword){
+        if (this.user.email === this.user.checkemail && this.user.password === this.user.checkpassword) {
           const data = {
-            name: this.user.name,
+            name: this.user.email,
             password: this.user.password,
             email: this.user.email,
             roles: [
@@ -112,15 +106,19 @@
 
           console.log("POST /api/register/ - json: " + JSON.stringify(data));
           const token = JSON.parse(localStorage.getItem('registerToken')).token;
-          this.$axios.post(process.env.USER_API+'/account/register', data,{
+          this.$axios.post(process.env.USER_API + '/account/register', data, {
             headers: {
               'Authorization': 'Bearer ' + token,
             }
           })
             .then((response) => {
               console.log(response.data);
-              if(response.status === 201){
-                this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: "Deine Registrierung war erfolgreich! Du kannst dich jetzt einloggen.", title: "Registrierungsprozess", color: "blue"});
+              if (response.status === 201) {
+                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")
               }
             })
@@ -148,12 +146,12 @@
             })
         } else {
 
-          if(this.user.email!=this.user.checkemail) {
+          if (this.user.email != this.user.checkemail) {
             this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {
               message: "Email stimmt nicht überein",
               title: "Fehler",
             });
-          } else if (this.user.password!=this.user.checkpassword){
+          } else if (this.user.password != this.user.checkpassword) {
             this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {
               message: "Passwort stimmt nicht überein",
               title: "Fehler",
@@ -170,7 +168,7 @@
 
         console.log("GET /api/login/ - json: " + JSON.stringify(logindata));
 
-        this.$axios.post(process.env.USER_API+'/account/login', logindata)
+        this.$axios.post(process.env.USER_API + '/account/login', logindata)
           .then((response) => {
             localStorage.setItem('registerToken', JSON.stringify(response.data));
           })
@@ -194,7 +192,7 @@
               message = error.message;
             }
             console.log(error.config);
-            this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: message, title: header, });
+            this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: message, title: header,});
           })
       },
     },

From 41d0cb028a174920325e79417d8a1368c21a0b8a Mon Sep 17 00:00:00 2001
From: Timo Volkmann <volkmann@stud.hs-heilbronn.de>
Date: Tue, 7 May 2019 14:19:50 +0200
Subject: [PATCH 3/5] improve qr-code-scanner

---
 frontend/src/components/qrscanner.vue | 158 ++++++++++++++++++++++++++
 frontend/src/pages/Login.vue          |   1 +
 frontend/src/pages/qr-scanner.vue     |  82 ++++++-------
 3 files changed, 203 insertions(+), 38 deletions(-)
 create mode 100644 frontend/src/components/qrscanner.vue

diff --git a/frontend/src/components/qrscanner.vue b/frontend/src/components/qrscanner.vue
new file mode 100644
index 0000000..07bced0
--- /dev/null
+++ b/frontend/src/components/qrscanner.vue
@@ -0,0 +1,158 @@
+<template>
+  <div>
+    <div class="q-ma-md" v-if="askForPermission">
+      <p>Um den QR-Code scannen zu können, müssen Sie den Zugriff auf Ihre Kamera erlauben.</p>
+
+      <q-btn @click="toggleCamera(!activateCamera)" :loading="loading" unelevated color="positive" stack
+             icon="photo_camera"
+             label="QR-Code scannen" class="full-width"/>
+    </div>
+    <div v-if="activateCamera">
+      <qrcode-drop-zone @decode="onDecode" @init="logErrors">
+        <qrcode-stream :paused="paused" @decode="onDecode" @init="onInit">
+          <div v-if="validating" >
+            <div class="light-dimmed fit">
+            </div>
+            <q-spinner-oval
+              class="absolute-center"
+              color="primary"
+              size="10em"
+            />
+          </div>
+        </qrcode-stream>
+      </qrcode-drop-zone>
+    </div>
+    <qrcode-capture v-if="noStreamApiSupport" @decode="onDecode"/>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'qrscanner',
+    data() {
+      return {
+        askForPermission: true,
+        activateCamera: false,
+        isValid: false,
+        validating: false,
+        loading: false,
+        paused: false,
+        result: null,
+        params: null,
+        noStreamApiSupport: false
+      }
+    },
+
+    methods: {
+      async onDecode(content) {
+        this.result = content;
+
+        this.pauseCamera();
+
+        this.validating = true;
+        this.isValid = await this.validate();
+        this.validating = false;
+
+        this.unPauseCamera();
+        // window.setTimeout(() => {
+        //   this.unPauseCamera();
+        // }, 2000)
+      },
+
+      validate() {
+        return new Promise(resolve => {
+          let params = this.setParams();
+          if (!params.cacheID || !params.stationID || !params.durchgefuehrterCacheID) {
+            console.log(params);
+            console.log("Parameter konnten nicht erkannt werden.");
+            resolve(false)
+          } else {
+            this.$axios.get('/api/checkStation', {params})
+              .then((response) => {
+                console.log("resolve(true)");
+                console.log("cache access definition");
+                console.log(response.data.cacheAccesDefinition);
+                resolve(true);
+                if (Number(response.data.cacheAccesDefinition.id) === 0) {
+                  this.$router.push({path: `/station/${params.cacheID}/${params.stationID}`});
+                } else if (Number(response.data.cacheAccesDefinition.id) === 1) {
+                  this.$router.push({path: `/CacheEnd/${params.cacheID}`});
+                }
+              }).catch((error) => {
+              console.log("resolve(false)");
+              // Error
+              let msg;
+              let title;
+              if (error.response) {
+                // The request was made and the server responded with a status code
+                title = "Problem with response!";
+                msg = error.response.data.message
+                  ? error.response.data.message
+                  : error.response.data;
+              } else if (error.request) {
+                // The request was made but no response was received
+                title = "Problem with request!";
+                msg = "Der Server antwortet nicht."
+                console.log(error.request);
+              } else {
+                // Something happened in setting up the request that triggered an Error
+                title = "Error";
+                msg = error.message;
+                console.log('Error', error.message.data);
+              }
+              console.log(error.config);
+              this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,});
+              resolve(false);
+            });
+          }
+        })
+      },
+
+      setParams() {
+        console.log("setParams: ");
+        let params = {};
+        params.cacheID = this.result.split('/')[0];
+        params.stationID = this.result.split('/')[1];
+        params.durchgefuehrterCacheID = params.cacheID;
+        console.log(params.cacheID + " und " + params.stationID);
+        if (localStorage.getItem('userToken')) {
+          params.token = JSON.parse(localStorage.getItem('userToken')).token;
+        }
+        return params;
+      },
+
+      pauseCamera() {
+        this.paused = true
+      },
+
+      unPauseCamera() {
+        this.paused = false
+      },
+
+      toggleCamera(bool) {
+        this.activateCamera = bool
+      },
+
+      logErrors(promise) {
+        promise.catch(console.error)
+      },
+
+      async onInit(promise) {
+        this.loading = true;
+        try {
+          await promise
+        } catch (error) {
+          if (error.name === 'StreamApiNotSupportedError') {
+            this.noStreamApiSupport = true
+          }
+        } finally {
+          this.loading = false;
+          this.askForPermission = false;
+        }
+      }
+    },
+  }
+</script>
+
+<style>
+</style>
diff --git a/frontend/src/pages/Login.vue b/frontend/src/pages/Login.vue
index 814f108..ec2a41d 100644
--- a/frontend/src/pages/Login.vue
+++ b/frontend/src/pages/Login.vue
@@ -30,6 +30,7 @@
                   color="primary"
                   class="full-width"
                   @click="login"
+                  @keyup.enter="login"
                   unelevated
                 >
                   <template v-slot:loading>
diff --git a/frontend/src/pages/qr-scanner.vue b/frontend/src/pages/qr-scanner.vue
index e111c73..07bced0 100644
--- a/frontend/src/pages/qr-scanner.vue
+++ b/frontend/src/pages/qr-scanner.vue
@@ -1,5 +1,5 @@
 <template>
-  <div >
+  <div>
     <div class="q-ma-md" v-if="askForPermission">
       <p>Um den QR-Code scannen zu können, müssen Sie den Zugriff auf Ihre Kamera erlauben.</p>
 
@@ -28,7 +28,7 @@
 
 <script>
   export default {
-    //name: 'qrscanner',
+    name: 'qrscanner',
     data() {
       return {
         askForPermission: true,
@@ -62,43 +62,49 @@
       validate() {
         return new Promise(resolve => {
           let params = this.setParams();
-          this.$axios.get('/api/checkStation', {params})
-            .then((response) => {
-              console.log("resolve(true)");
-              console.log("cache access definition");
-              console.log(response.data.cacheAccesDefinition);
-              resolve(true);
-              if (Number(response.data.cacheAccesDefinition.id) === 0) {
-                this.$router.push({path: `/station/${params.cacheID}/${params.stationID}`});
-              } else if (Number(response.data.cacheAccesDefinition.id) === 1) {
-                this.$router.push({path: `/CacheEnd/${params.cacheID}`});
+          if (!params.cacheID || !params.stationID || !params.durchgefuehrterCacheID) {
+            console.log(params);
+            console.log("Parameter konnten nicht erkannt werden.");
+            resolve(false)
+          } else {
+            this.$axios.get('/api/checkStation', {params})
+              .then((response) => {
+                console.log("resolve(true)");
+                console.log("cache access definition");
+                console.log(response.data.cacheAccesDefinition);
+                resolve(true);
+                if (Number(response.data.cacheAccesDefinition.id) === 0) {
+                  this.$router.push({path: `/station/${params.cacheID}/${params.stationID}`});
+                } else if (Number(response.data.cacheAccesDefinition.id) === 1) {
+                  this.$router.push({path: `/CacheEnd/${params.cacheID}`});
+                }
+              }).catch((error) => {
+              console.log("resolve(false)");
+              // Error
+              let msg;
+              let title;
+              if (error.response) {
+                // The request was made and the server responded with a status code
+                title = "Problem with response!";
+                msg = error.response.data.message
+                  ? error.response.data.message
+                  : error.response.data;
+              } else if (error.request) {
+                // The request was made but no response was received
+                title = "Problem with request!";
+                msg = "Der Server antwortet nicht."
+                console.log(error.request);
+              } else {
+                // Something happened in setting up the request that triggered an Error
+                title = "Error";
+                msg = error.message;
+                console.log('Error', error.message.data);
               }
-            }).catch((error) => {
-            console.log("resolve(false)");
-            // Error
-            let msg;
-            let title;
-            if (error.response) {
-              // The request was made and the server responded with a status code
-              title = "Problem with response!";
-              msg = error.response.data.message
-                ? error.response.data.message
-                : error.response.data;
-            } else if (error.request) {
-              // The request was made but no response was received
-              title = "Problem with request!";
-              msg = "Der Server antwortet nicht."
-              console.log(error.request);
-            } else {
-              // Something happened in setting up the request that triggered an Error
-              title = "Error";
-              msg = error.message;
-              console.log('Error', error.message.data);
-            }
-            console.log(error.config);
-            this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,});
-            resolve(false);
-          });
+              console.log(error.config);
+              this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,});
+              resolve(false);
+            });
+          }
         })
       },
 

From 14fe441e80ac3388a57ecf6745ff7255fbfbf40e Mon Sep 17 00:00:00 2001
From: Timo Volkmann <volkmann@stud.hs-heilbronn.de>
Date: Tue, 7 May 2019 15:07:57 +0200
Subject: [PATCH 4/5] moved QR-Scanner to Component

---
 frontend/src/components/qrscanner.vue |  31 ++++-
 frontend/src/pages/StationView.vue    | 169 +++-----------------------
 2 files changed, 48 insertions(+), 152 deletions(-)

diff --git a/frontend/src/components/qrscanner.vue b/frontend/src/components/qrscanner.vue
index 07bced0..048a997 100644
--- a/frontend/src/components/qrscanner.vue
+++ b/frontend/src/components/qrscanner.vue
@@ -21,6 +21,10 @@
           </div>
         </qrcode-stream>
       </qrcode-drop-zone>
+      <div class="q-ma-md">
+        <q-btn v-if="!askForPermission" @click="toggleCamera(!activateCamera)" :loading="loading" unelevated color="primary" stack
+               label="Schließen" class="full-width"/>
+      </div>
     </div>
     <qrcode-capture v-if="noStreamApiSupport" @decode="onDecode"/>
   </div>
@@ -118,9 +122,18 @@
         if (localStorage.getItem('userToken')) {
           params.token = JSON.parse(localStorage.getItem('userToken')).token;
         }
+        this.updateProps()
+        console.log("emitted params!")
         return params;
       },
 
+      updateProps() {
+        this.$emit('result', this.params)
+      },
+      updateCameraState() {
+        this.$emit('camera', this.activateCamera)
+      },
+
       pauseCamera() {
         this.paused = true
       },
@@ -130,7 +143,11 @@
       },
 
       toggleCamera(bool) {
-        this.activateCamera = bool
+        this.activateCamera = bool;
+        if (this.askForPermission === false) {
+          this.askForPermission = true;
+        }
+        this.updateCameraState();
       },
 
       logErrors(promise) {
@@ -151,6 +168,18 @@
         }
       }
     },
+    beforeRouteUpdate(to, from, next) {
+      this.askForPermission = true;
+      this.activateCamera = false;
+      this.isValid = false;
+      this.validating = false;
+      this.loading = false;
+      this.paused = false;
+      this.result = null;
+      this.params = null;
+      this.noStreamApiSupport = false;
+      next()
+    },
   }
 </script>
 
diff --git a/frontend/src/pages/StationView.vue b/frontend/src/pages/StationView.vue
index 1a0ee7a..5c36651 100644
--- a/frontend/src/pages/StationView.vue
+++ b/frontend/src/pages/StationView.vue
@@ -4,11 +4,12 @@
            class="q-mb-md "
            :ratio="16/9"
            src="https://www.buga2019.de/we-bilder/3.Gartenausstellung/Gelaendeplan/190320_Gelaendeplan-quadratisch.jpg"
+           v-if="!cameraActive"
     ></q-img>
-    <div class="q-ma-md">
+    <div class="q-ma-md" v-if="!cameraActive">
       <p class="text-h4">{{ cache.name }}</p>
       <p class="text-h5">Station {{ showCacheProgress }}</p>
-<!--      <p class="text-h5">Station {{ data.station.position }}</p>-->
+      <!--      <p class="text-h5">Station {{ data.station.position }}</p>-->
       <p>{{ station.description }}</p>
       <!--<q-input-->
       <!--v-model="description"-->
@@ -17,64 +18,31 @@
       <!--/>-->
       <!--<p class="text-h5 q-mt-md">Location</p>-->
       <div class="column q-gutter-y-md">
-        <div v-if="askForPermission">
-          <p>Um den QR-Code scannen zu können, müssen Sie den Zugriff auf Ihre Kamera erlauben.</p>
-
-          <q-btn @click="toggleCamera(!activateCamera)" :loading="loading" unelevated color="positive" stack
-                 icon="photo_camera"
-                 label="QR-Code scannen" class="full-width"/>
-        </div>
-        <div v-if="activateCamera">
-          <qrcode-drop-zone @decode="onDecode" @init="logErrors">
-            <qrcode-stream :paused="paused" @decode="onDecode" @init="onInit">
-              <div v-if="validating">
-                <div class="light-dimmed fit">
-                </div>
-                <q-spinner-oval
-                  class="absolute-center"
-                  color="primary"
-                  size="10em"
-                />
-              </div>
-            </qrcode-stream>
-          </qrcode-drop-zone>
-        </div>
-        <qrcode-capture v-if="noStreamApiSupport" @decode="onDecode"/>
       </div>
     </div>
+    <qrscanner @result="updateResult($event)" @camera="updateCamera($event)" />
   </div>
 </template>
 
 <script>
+  import qrscanner from "../components/qrscanner";
   export default {
     name: "Station",
-
+    components: {qrscanner},
     data() {
       return {
-        //code: "",
         cacheID: "",
         cacheName: "",
-        //cache: null,
         cache: {
           name: "",
           stationen: [],
         },
         station: {},
-
-        // Following Params belong to QR-Code Scanner
-        askForPermission: true,
-        activateCamera: false,
-        isValid: false,
-        validating: false,
-        loading: false,
-        paused: false,
+        cameraActive: false,
         result: null,
-        params: null,
-        noStreamApiSupport: false
-
       }
     },
-    beforeRouteUpdate (to, from, next) {
+    beforeRouteUpdate(to, from, next) {
       console.log("beforeRouteUpdate: reset data and fetch");
       this.cacheID = "";
       this.cacheName = "";
@@ -83,16 +51,6 @@
         stationen: [],
       };
       this.station = {};
-      this.askForPermission = true;
-      this.activateCamera = false;
-      this.isValid = false;
-      this.validating = false;
-      this.loading = false;
-      this.paused = false;
-      this.result = null;
-      this.params = null;
-      this.noStreamApiSupport = false;
-
       this.fetchData();
       next()
     },
@@ -136,109 +94,18 @@
           })
       },
 
+      updateResult(event) {
+        console.log("updateResult()");
+        this.result = event;
+      },
+
+      updateCamera(event) {
+        console.log("updateCamera()");
+        this.cameraActive = event;
+      },
+
       setParams() {
-        console.log("setParams: ");
-        let params = {};
-        params.cacheID = this.result.split('/')[0];
-        params.stationID = this.result.split('/')[1];
-        params.durchgefuehrterCacheID = params.cacheID;
-        console.log(params.durchgefuehrterCacheID);
-        console.log(params.cacheID + " und " + params.stationID);
-        if (localStorage.getItem('userToken')) {
-          params.token = JSON.parse(localStorage.getItem('userToken')).token;
-        }
-        return params;
       },
-
-      async onDecode(content) {
-        this.result = content;
-
-        this.pauseCamera();
-
-        this.validating = true;
-        this.isValid = await this.validate();
-        this.validating = false;
-
-        this.unPauseCamera();
-        // window.setTimeout(() => {
-        //   this.unPauseCamera();
-        // }, 2000)
-      },
-
-      validate() {
-        return new Promise(resolve => {
-
-          let params = this.setParams();
-          this.$axios.get('/api/checkStation', {params})
-            .then((response) => {
-              console.log("resolve(true)");
-              console.log("cache access definition");
-              console.log(response.data.cacheAccesDefinition);
-              resolve(true);
-              if (Number(response.data.cacheAccesDefinition.id) === 0) {
-                this.$router.push({path: `/station/${params.cacheID}/${params.stationID}`});
-              } else if (Number(response.data.cacheAccesDefinition.id) === 1) {
-                this.$router.push({path: `/CacheEnd/${params.cacheID}`});
-              }
-            }).catch((error) => {
-            console.log("resolve(false)");
-            // Error
-            let msg;
-            let title;
-            if (error.response) {
-              // The request was made and the server responded with a status code
-              title = "Problem with response!";
-              msg = error.response.data.message
-                ? error.response.data.message
-                : error.response.data;
-            } else if (error.request) {
-              // The request was made but no response was received
-              title = "Problem with request!";
-              msg = "Der Server antwortet nicht."
-              console.log(error.request);
-            } else {
-              // Something happened in setting up the request that triggered an Error
-              title = "Error";
-              msg = error.message;
-              console.log('Error', error.message.data);
-            }
-            console.log(error.config);
-            this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,});
-            resolve(false);
-          });
-        })
-      },
-
-      pauseCamera() {
-        this.paused = true
-      },
-
-      unPauseCamera() {
-        this.paused = false
-      },
-
-      toggleCamera(bool) {
-        this.activateCamera = bool
-      },
-
-      logErrors(promise) {
-        promise.catch(console.error)
-      },
-
-      async onInit(promise) {
-        this.loading = true;
-        try {
-          await promise
-        } catch (error) {
-          if (error.name === 'StreamApiNotSupportedError') {
-            this.noStreamApiSupport = true
-          }
-        } finally {
-          this.loading = false;
-          this.askForPermission = false;
-        }
-      }
-
     }
   }
 </script>

From 21fc559a4b3e8fc312f1fc5b09cbd25428624637 Mon Sep 17 00:00:00 2001
From: Timo Volkmann <volkmann@stud.hs-heilbronn.de>
Date: Tue, 7 May 2019 22:57:30 +0200
Subject: [PATCH 5/5] bugfixes

---
 frontend/src/boot/qr-scanner.js       |   2 +-
 frontend/src/components/qrscanner.vue |  87 +++++++++-------
 frontend/src/layouts/MyLayout.vue     |   6 +-
 frontend/src/pages/Register.vue       |  83 +++++++--------
 frontend/src/pages/StationView.vue    |   1 +
 frontend/src/pages/qr-scanner.vue     | 142 +-------------------------
 6 files changed, 96 insertions(+), 225 deletions(-)

diff --git a/frontend/src/boot/qr-scanner.js b/frontend/src/boot/qr-scanner.js
index 9660d77..193e1ff 100644
--- a/frontend/src/boot/qr-scanner.js
+++ b/frontend/src/boot/qr-scanner.js
@@ -1,5 +1,5 @@
 import VueQrcodeReader from "vue-qrcode-reader";
-// import qrscanner from "../components/qr-scanner";
+// import qrscanner from "../components/qrscanner";
 
 // "async" is optional
 export default async ({ Vue }) => {
diff --git a/frontend/src/components/qrscanner.vue b/frontend/src/components/qrscanner.vue
index 048a997..f17a6d0 100644
--- a/frontend/src/components/qrscanner.vue
+++ b/frontend/src/components/qrscanner.vue
@@ -1,11 +1,11 @@
 <template>
   <div>
     <div class="q-ma-md" v-if="askForPermission">
-      <p>Um den QR-Code scannen zu können, müssen Sie den Zugriff auf Ihre Kamera erlauben.</p>
 
       <q-btn @click="toggleCamera(!activateCamera)" :loading="loading" unelevated color="positive" stack
              icon="photo_camera"
-             label="QR-Code scannen" class="full-width"/>
+      label="QR-Code scannen" class="full-width q-mt-sm"/>
+      <p class="q-mt-sm"><b>Hinweis:</b> Um den QR-Code scannen zu können, müssen Sie den Zugriff auf Ihre Kamera erlauben.</p>
     </div>
     <div v-if="activateCamera">
       <qrcode-drop-zone @decode="onDecode" @init="logErrors">
@@ -43,11 +43,20 @@
         paused: false,
         result: null,
         params: null,
-        noStreamApiSupport: false
+        noStreamApiSupport: false,
+
+        cacheID: null,
       }
     },
-
+    created() {
+      this.setCacheId();
+    },
     methods: {
+      setCacheId() {
+        console.log("qr-code: 'cache' from url: " + this.$route.params.cache);
+        this.cacheID = this.$route.params.cache ? this.$route.params.cache : null;
+      },
+
       async onDecode(content) {
         this.result = content;
 
@@ -55,23 +64,24 @@
 
         this.validating = true;
         this.isValid = await this.validate();
-        this.validating = false;
 
-        this.unPauseCamera();
-        // window.setTimeout(() => {
-        //   this.unPauseCamera();
-        // }, 2000)
+        window.setTimeout(() => {
+          this.validating = false;
+          this.unPauseCamera();
+        }, 2000)
+        //this.unPauseCamera();
       },
 
       validate() {
         return new Promise(resolve => {
           let params = this.setParams();
-          if (!params.cacheID || !params.stationID || !params.durchgefuehrterCacheID) {
-            console.log(params);
+          console.log(params);
+          if (!params.cacheID || !params.stationID || !params.durchgefuehrterCacheID || !params.token) {
+            console.log("Parameter konnten nicht erkannt werden.");
+            resolve(false);
             console.log("Parameter konnten nicht erkannt werden.");
-            resolve(false)
           } else {
-            this.$axios.get('/api/checkStation', {params})
+            this.$axios.put('/api/checkStation', null, { params })
               .then((response) => {
                 console.log("resolve(true)");
                 console.log("cache access definition");
@@ -84,28 +94,24 @@
                 }
               }).catch((error) => {
               console.log("resolve(false)");
-              // Error
-              let msg;
-              let title;
+              let header = "";
+              let message = "";
               if (error.response) {
-                // The request was made and the server responded with a status code
-                title = "Problem with response!";
-                msg = error.response.data.message
-                  ? error.response.data.message
-                  : error.response.data;
+                console.log(error.response);
+                header = "Falsche Station!";
+                message = "Diese Station wurde schon gescannt, ist noch nicht an der Reihe oder gehört nicht zum Cache. ";
+                message += "Bitte das Rätsel nochmal lesen und die richtige Station scannen.";
               } else if (error.request) {
-                // The request was made but no response was received
-                title = "Problem with request!";
-                msg = "Der Server antwortet nicht."
                 console.log(error.request);
+                header = "Anfrage fehlgeschlagen!";
+                message = "Die Verbindung zum Server ist gestört. Versuchen Sie es später noch einmal.";
               } else {
-                // Something happened in setting up the request that triggered an Error
-                title = "Error";
-                msg = error.message;
-                console.log('Error', error.message.data);
+                console.log(error);
+                console.log('Error', error.message);
+                header = "Fehler!";
+                message = error.message;
               }
-              console.log(error.config);
-              this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,});
+              this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: message, title: header, });
               resolve(false);
             });
           }
@@ -115,23 +121,25 @@
       setParams() {
         console.log("setParams: ");
         let params = {};
-        params.cacheID = this.result.split('/')[0];
-        params.stationID = this.result.split('/')[1];
-        params.durchgefuehrterCacheID = params.cacheID;
-        console.log(params.cacheID + " und " + params.stationID);
         if (localStorage.getItem('userToken')) {
           params.token = JSON.parse(localStorage.getItem('userToken')).token;
         }
-        this.updateProps()
-        console.log("emitted params!")
+        params.cacheID = this.result.split('/')[0];
+        params.stationID = this.result.split('/')[1];
+        params.durchgefuehrterCacheID = this.CacheID ? this.cacheID : params.cacheID;
+        console.log(params.cacheID + " und " + params.stationID);
+        this.updateProps();
         return params;
       },
 
       updateProps() {
+        console.log("emit result!")
         this.$emit('result', this.params)
       },
       updateCameraState() {
-        this.$emit('camera', this.activateCamera)
+        console.log("Camera State:")
+        console.log(!this.askForPermission)
+        this.$emit('camera', !this.askForPermission)
       },
 
       pauseCamera() {
@@ -146,8 +154,8 @@
         this.activateCamera = bool;
         if (this.askForPermission === false) {
           this.askForPermission = true;
+          this.updateCameraState();
         }
-        this.updateCameraState();
       },
 
       logErrors(promise) {
@@ -165,6 +173,8 @@
         } finally {
           this.loading = false;
           this.askForPermission = false;
+          this.updateCameraState();
+
         }
       }
     },
@@ -178,6 +188,7 @@
       this.result = null;
       this.params = null;
       this.noStreamApiSupport = false;
+      this.setCacheId();
       next()
     },
   }
diff --git a/frontend/src/layouts/MyLayout.vue b/frontend/src/layouts/MyLayout.vue
index 7d7815d..f879799 100644
--- a/frontend/src/layouts/MyLayout.vue
+++ b/frontend/src/layouts/MyLayout.vue
@@ -234,6 +234,9 @@
         },
       }
     },
+    created() {
+      this.evalAuthentication();
+    },
     methods: {
       //openURL
       dialogClose() {
@@ -242,7 +245,7 @@
       },
       evalAuthentication: function () {
         this.$store.commit('auth/SET_AUTHENTICATED');
-        this.$store.commit('auth/SET_USER');
+        // this.$store.commit('auth/SET_USER');
       },
       logout: function () {
         console.log("logout()");
@@ -251,7 +254,6 @@
         this.evalAuthentication();
       },
 
-
     }
   };
 </script>
diff --git a/frontend/src/pages/Register.vue b/frontend/src/pages/Register.vue
index cab6e5c..48b3b0c 100644
--- a/frontend/src/pages/Register.vue
+++ b/frontend/src/pages/Register.vue
@@ -111,39 +111,33 @@
               'Authorization': 'Bearer ' + token,
             }
           })
-            .then((response) => {
+          .then((response) => {
               console.log(response.data);
               if (response.status === 201) {
                 this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {
-                  message: "Deine Registrierung war erfolgreich! Du kannst dich jetzt einloggen.",
+                  message: "Deine Registrierung war erfolgreich!",
                   title: "Registrierungsprozess",
                   color: "blue"
                 });
-                this.$router.push("/login")
+                this.autoLogin();
               }
-            })
-            .catch((error) => {
+          })
+          .catch((error) => {
               let message;
-              let header = "Fehler: ";
+              let header = "Unbekannter Fehler...";
               if (error.response) {
-                console.log("ERROR RESPONSE")
-                // The request was made and the server responded with a status code
-                // that falls out of the range of 2xx
-                message = error.response.data.error;
-                header += error.response.status;
+                console.log(error.response)
+                if (error.response.status === 409) {
+                    message= "Die E-Mail-Adresse wird bereits verwendet!";
+                    header= "Anmeldedaten überprüfen!";
+                  }
               } else if (error.request) {
-                // The request was made but no response was received
-                // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
-                // http.ClientRequest in node.js
-                message = error.request;
-              } else {
-                // Something happened in setting up the request that triggered an Error
-                console.log('Error', error.message);
-                message = error.message;
+                  console.log(error.request);
+                  header = "Anfrage fehlgeschlagen!";
+                  message = "Die Verbindung zum Server ist gestört. Versuchen Sie es später noch einmal.";
               }
-              console.log(error.config);
-              this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: message, title: header,});
-            })
+              this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: message, title: header});
+            });
         } else {
 
           if (this.user.email != this.user.checkemail) {
@@ -160,40 +154,37 @@
         }
       },
       login() {
-
+        console.log("MasterUser()")
         const logindata = {
           email: "register@bugageocaching.de",
           password: "reguser2019"
         };
-
-        console.log("GET /api/login/ - json: " + JSON.stringify(logindata));
-
         this.$axios.post(process.env.USER_API + '/account/login', logindata)
           .then((response) => {
             localStorage.setItem('registerToken', JSON.stringify(response.data));
+          });
+      },
+      autoLogin() {
+        console.log("autoLogin()");
+        const data = {
+          email: this.user.email,
+          password: this.user.password,
+        };
+        console.log(data);
+        this.$axios.post(process.env.USER_API + '/account/login', data)
+          .then((response) => {
+            localStorage.setItem('userToken', JSON.stringify(response.data));
+            localStorage.setItem('userMail', JSON.stringify(data.email));
+            this.$store.commit('auth/SET_AUTHENTICATED');
+            this.$store.commit('auth/SET_USER');
+            this.$router.push({path: `/overview`});
           })
           .catch((error) => {
-            let message;
-            let header = "Fehler: ";
-            if (error.response) {
-              console.log("ERROR RESPONSE")
-              // The request was made and the server responded with a status code
-              // that falls out of the range of 2xx
-              message = error.response.data.error;
-              header += error.response.status;
-            } else if (error.request) {
-              // The request was made but no response was received
-              // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
-              // http.ClientRequest in node.js
-              message = error.request;
-            } else {
-              // Something happened in setting up the request that triggered an Error
-              console.log('Error', error.message);
-              message = error.message;
-            }
-            console.log(error.config);
-            this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: message, title: header,});
+            this.$router.push("/login");
           })
+          .finally(() => {
+          });
+
       },
     },
   };
diff --git a/frontend/src/pages/StationView.vue b/frontend/src/pages/StationView.vue
index 5c36651..37b59ac 100644
--- a/frontend/src/pages/StationView.vue
+++ b/frontend/src/pages/StationView.vue
@@ -96,6 +96,7 @@
 
       updateResult(event) {
         console.log("updateResult()");
+        console.log(event);
         this.result = event;
       },
 
diff --git a/frontend/src/pages/qr-scanner.vue b/frontend/src/pages/qr-scanner.vue
index 07bced0..ef5efa2 100644
--- a/frontend/src/pages/qr-scanner.vue
+++ b/frontend/src/pages/qr-scanner.vue
@@ -1,155 +1,21 @@
 <template>
   <div>
-    <div class="q-ma-md" v-if="askForPermission">
-      <p>Um den QR-Code scannen zu können, müssen Sie den Zugriff auf Ihre Kamera erlauben.</p>
-
-      <q-btn @click="toggleCamera(!activateCamera)" :loading="loading" unelevated color="positive" stack
-             icon="photo_camera"
-             label="QR-Code scannen" class="full-width"/>
-    </div>
-    <div v-if="activateCamera">
-      <qrcode-drop-zone @decode="onDecode" @init="logErrors">
-        <qrcode-stream :paused="paused" @decode="onDecode" @init="onInit">
-          <div v-if="validating" >
-            <div class="light-dimmed fit">
-            </div>
-            <q-spinner-oval
-              class="absolute-center"
-              color="primary"
-              size="10em"
-            />
-          </div>
-        </qrcode-stream>
-      </qrcode-drop-zone>
-    </div>
-    <qrcode-capture v-if="noStreamApiSupport" @decode="onDecode"/>
+    <qrscanner />
   </div>
 </template>
 
 <script>
+  import qrscanner from "../components/qrscanner";
   export default {
-    name: 'qrscanner',
+    name: 'Scanner',
+    components: {qrscanner},
     data() {
       return {
-        askForPermission: true,
-        activateCamera: false,
-        isValid: false,
-        validating: false,
-        loading: false,
-        paused: false,
-        result: null,
-        params: null,
-        noStreamApiSupport: false
       }
     },
 
     methods: {
-      async onDecode(content) {
-        this.result = content;
 
-        this.pauseCamera();
-
-        this.validating = true;
-        this.isValid = await this.validate();
-        this.validating = false;
-
-        this.unPauseCamera();
-        // window.setTimeout(() => {
-        //   this.unPauseCamera();
-        // }, 2000)
-      },
-
-      validate() {
-        return new Promise(resolve => {
-          let params = this.setParams();
-          if (!params.cacheID || !params.stationID || !params.durchgefuehrterCacheID) {
-            console.log(params);
-            console.log("Parameter konnten nicht erkannt werden.");
-            resolve(false)
-          } else {
-            this.$axios.get('/api/checkStation', {params})
-              .then((response) => {
-                console.log("resolve(true)");
-                console.log("cache access definition");
-                console.log(response.data.cacheAccesDefinition);
-                resolve(true);
-                if (Number(response.data.cacheAccesDefinition.id) === 0) {
-                  this.$router.push({path: `/station/${params.cacheID}/${params.stationID}`});
-                } else if (Number(response.data.cacheAccesDefinition.id) === 1) {
-                  this.$router.push({path: `/CacheEnd/${params.cacheID}`});
-                }
-              }).catch((error) => {
-              console.log("resolve(false)");
-              // Error
-              let msg;
-              let title;
-              if (error.response) {
-                // The request was made and the server responded with a status code
-                title = "Problem with response!";
-                msg = error.response.data.message
-                  ? error.response.data.message
-                  : error.response.data;
-              } else if (error.request) {
-                // The request was made but no response was received
-                title = "Problem with request!";
-                msg = "Der Server antwortet nicht."
-                console.log(error.request);
-              } else {
-                // Something happened in setting up the request that triggered an Error
-                title = "Error";
-                msg = error.message;
-                console.log('Error', error.message.data);
-              }
-              console.log(error.config);
-              this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,});
-              resolve(false);
-            });
-          }
-        })
-      },
-
-      setParams() {
-        console.log("setParams: ");
-        let params = {};
-        params.cacheID = this.result.split('/')[0];
-        params.stationID = this.result.split('/')[1];
-        params.durchgefuehrterCacheID = params.cacheID;
-        console.log(params.cacheID + " und " + params.stationID);
-        if (localStorage.getItem('userToken')) {
-          params.token = JSON.parse(localStorage.getItem('userToken')).token;
-        }
-        return params;
-      },
-
-      pauseCamera() {
-        this.paused = true
-      },
-
-      unPauseCamera() {
-        this.paused = false
-      },
-
-      toggleCamera(bool) {
-        this.activateCamera = bool
-      },
-
-      logErrors(promise) {
-        promise.catch(console.error)
-      },
-
-      async onInit(promise) {
-        this.loading = true;
-        try {
-          await promise
-        } catch (error) {
-          if (error.name === 'StreamApiNotSupportedError') {
-            this.noStreamApiSupport = true
-          }
-        } finally {
-          this.loading = false;
-          this.askForPermission = false;
-        }
-      }
     },
   }
 </script>