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] 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>