From 63649b2647076f4392a3237e75115ad7b52db9c2 Mon Sep 17 00:00:00 2001
From: Timo Volkmann <volkmann@stud.hs-heilbronn.de>
Date: Thu, 16 May 2019 20:45:34 +0200
Subject: [PATCH] implemented user menu, fixed bugs

---
 frontend/quasar.conf.js            |  4 +-
 frontend/src/layouts/MyLayout.vue  | 71 +++++++++++++++++++++++-------
 frontend/src/store/auth/getters.js |  4 ++
 3 files changed, 61 insertions(+), 18 deletions(-)

diff --git a/frontend/quasar.conf.js b/frontend/quasar.conf.js
index d4ff378..ab87a27 100644
--- a/frontend/quasar.conf.js
+++ b/frontend/quasar.conf.js
@@ -73,7 +73,9 @@ module.exports = function (ctx) {
         'QSlideTransition',
         'QToggle',
         'QLinearProgress',
-        'QBtnGroup'
+        'QBtnGroup',
+        'QTooltip',
+        'QMenu'
       ],
 
       directives: [
diff --git a/frontend/src/layouts/MyLayout.vue b/frontend/src/layouts/MyLayout.vue
index 58273a9..e1e20a1 100644
--- a/frontend/src/layouts/MyLayout.vue
+++ b/frontend/src/layouts/MyLayout.vue
@@ -2,13 +2,44 @@
   <q-layout view="hhh Lpr lFf" @click.native="counter()">
     <q-header id="qheader" class="bg-white text-grey-14" elevated>
       <q-toolbar class="q-pa-md">
-        <q-img src="statics/buga_logo.svg" style="max-width: 40px;" class="q-mr-sm"/>
-
+        <router-link to="/">
+          <q-img src="statics/buga_logo.svg" style="width: 40px;" class="q-mr-sm"/>
+        </router-link>
         <q-toolbar-title>
-          BuGa Geocaching
+          Geocaching
         </q-toolbar-title>
+<!--        <router-link v-if="getUser" to="/Profile" class="text-grey-14">-->
+          <a href="#" v-if="getUser" class="row q-mx-sm items-center q-gutter-x-sm text-grey-14">
+            <p class="q-ma-none gt-xs">{{ getUser.email }}</p>
+            <q-avatar size="33px" font-size="33px" color="white" icon="account_circle">
+            </q-avatar>
+            <q-menu
+              transition-show="jump-down"
+              transition-hide="jump-up"
+               anchor="bottom right" self="top right"
+              :offset="[0, 10]">
+              <q-item clickable v-close-popup to="/Profile" class="text-grey-14">
+                <q-item-section>
+                  Profil
+                </q-item-section>
+                <q-item-section avatar>
+                  <q-icon name="perm_identity"/>
+                </q-item-section>
+              </q-item>
+              <q-item clickable v-close-popup @click="logout" class="text-grey-14">
+                <q-item-section>
+                  Logout
+                </q-item-section>
+                <q-item-section avatar>
+                  <q-icon name="logout"/>
+                </q-item-section>
+              </q-item>
+            </q-menu>
+          </a>
+<!--        </router-link>-->
 
         <q-btn
+          class="q-pa-sm"
           flat
           dense
           ripple
@@ -57,7 +88,7 @@
           <q-item-section>
             <q-item-label>QR-Code Scanner</q-item-label>
           </q-item-section>
-          </q-item>
+        </q-item>
         <q-item
           clickable
           class="text-primary"
@@ -164,16 +195,16 @@
         </q-item>
 
 
-<!--        <q-item-->
-<!--          disable-->
-<!--          class="text-grey-5"-->
-<!--        >-->
-<!--          <q-item-section avatar>-->
-<!--          </q-item-section>-->
-<!--          <q-item-section>-->
-<!--            <q-item-label>dev: {{ clickCounter }} clicks</q-item-label>-->
-<!--          </q-item-section>-->
-<!--        </q-item>-->
+        <!--        <q-item-->
+        <!--          disable-->
+        <!--          class="text-grey-5"-->
+        <!--        >-->
+        <!--          <q-item-section avatar>-->
+        <!--          </q-item-section>-->
+        <!--          <q-item-section>-->
+        <!--            <q-item-label>dev: {{ clickCounter }} clicks</q-item-label>-->
+        <!--          </q-item-section>-->
+        <!--        </q-item>-->
 
 
       </q-list>
@@ -203,7 +234,6 @@
 </template>
 
 <script>
-  import {openURL} from "quasar";
 
   export default {
     name: "MyLayout",
@@ -247,6 +277,12 @@
           // console.log("get dialogColorBtn: "+this.$store.state.dialog.dialog.colorButton)
           return this.$store.state.dialog.dialog.colorButton;
         },
+      },
+      getUser: {
+        get() {
+          // console.log("get dialogColorBtn: "+this.$store.state.dialog.dialog.colorButton)
+          return this.$store.getters['auth/GET_USER'];
+        },
       }
     },
     created() {
@@ -261,15 +297,16 @@
         console.log("dialogClose(): ")
         this.$store.commit('dialog/RESET_MESSAGE_DIALOG');
       },
-      evalAuthentication: function () {
+      evalAuthentication() {
         this.$store.commit('auth/SET_AUTHENTICATED');
         this.$store.commit('auth/SET_USER');
       },
-      logout: function () {
+      logout() {
         console.log("logout()");
         console.log(JSON.parse(localStorage.getItem('userToken')));
         localStorage.removeItem('userToken');
         this.evalAuthentication();
+        this.$router.push({path: `/login`})
       },
 
     }
diff --git a/frontend/src/store/auth/getters.js b/frontend/src/store/auth/getters.js
index db5efb0..5b86cae 100644
--- a/frontend/src/store/auth/getters.js
+++ b/frontend/src/store/auth/getters.js
@@ -11,6 +11,10 @@ export function GET_ADMINSTATE(state)  {
     return false;
   }
 }
+export function GET_USER(state)  {
+  console.log("GET_USER");
+    return state.userAuthenticated;
+}
 
 // /**
 //  * @return {boolean}