started logical implementation of profile and team

frontend/src/pages/Login.vue

@@ -6,7 +6,7 @@
           <div class="col">
             <div class="">
               <div class="" style="max-width: 440px">
-                <q-input outlined filled stack-label v-model="user.email" type="text" label="Benutzername"
+                <q-input outlined filled stack-label v-model="user.email" type="text" label="Email"
                          autocomplete="username"/>
               </div>
             </div>
@@ -103,6 +103,7 @@
             console.log("TOKEN");
             console.log(response.data.token);
             localStorage.setItem('userToken', JSON.stringify(response.data));
+            localStorage.setItem('userMail', JSON.stringify(data.email));
             this.evalAuthentication();
           })
           .catch((error) => {

frontend/src/pages/Profile.vue

@@ -30,8 +30,8 @@
                 Mein Nutzername
               </b>
             </div>
-            <div class="col" align="center">
+            <div id="username" class="col" align="center">
-              BuGaCacher2019
+              <span v-html="userNameContent"></span>
             </div>
           </div>
           <hr/>
@@ -42,7 +42,7 @@
               </b>
             </div>
             <div class="col" align="center">
-              muster.mail@muster.de
+              <span v-html="emailContent"></span>
             </div>
           </div>
           <hr/>
@@ -53,7 +53,7 @@
               </b>
             </div>
             <div class="col" align="center">
-              1234
+              <span v-html="userRanking"></span>
             </div>
           </div>
           <hr/>
@@ -64,7 +64,7 @@
               </b>
             </div>
             <div class="col" align="center">
-              BuGa19Community
+              <span v-html="teamName"></span>
             </div>
           </div>
           <hr/>
@@ -75,22 +75,22 @@
               </b>
             </div>
             <div class="col" align="center">
-              2019
+              <span v-html="teamRanking"></span>
             </div>
           </div>
           <hr/>
         </q-tab-panel>
         <q-tab-panel name="teams">
           <div class="q-pa-md" align="center">
-            <q-btn-dropdown color="primary" label="BuGa19Community" size="20px">
+            <q-btn-dropdown color="primary" :label="dropDownSelectedItem" size="20px">
               <q-list>
-                <q-item clickable v-close-popup>
+                <q-item clickable v-close-popup @click="dropDownSelectItem('team')">
                   <q-item-section>
-                    <q-item-label>BuGa19Community</q-item-label>
+                    <q-item-label v-html="teamName"></q-item-label>
                   </q-item-section>
                 </q-item>
 
-                <q-item clickable v-close-popup>
+                <q-item clickable v-close-popup @click="dropDownSelectItem('Offene Teameinladungen')">
                   <q-item-section avatar>
                     <q-avatar icon="group_add" color="primary" text-color="white"/>
                   </q-item-section>
@@ -99,7 +99,7 @@
                   </q-item-section>
                 </q-item>
 
-                <q-item clickable v-close-popup>
+                <q-item clickable v-close-popup @click="dropDownSelectItem('Neues Team erstellen')">
                   <q-item-section avatar>
                     <q-avatar icon="add" color="primary" text-color="white"/>
                   </q-item-section>
@@ -251,6 +251,12 @@
         startedCaches: [],
         inviteMail: "",
         teamStatus: "",
+        userNameContent: null,
+        emailContent: null,
+        userRanking: null,
+        teamName: null,
+        teamRanking: null,
+        dropDownSelectedItem: null,
       }
     },
     mounted: function () {
@@ -258,12 +264,18 @@
     computed: {
       hasAdminState() {
         return this.$store.getters['auth/GET_ADMINSTATE'];
-      }
+      },
     },
     created: function () {
       this.fetchUserCaches();
       this.$store.commit('auth/SET_AUTHENTICATED');
       this.$store.commit('auth/SET_USER');
+      this.userNameContent = JSON.parse(localStorage.getItem('userToken')).name;
+      this.emailContent = JSON.parse(localStorage.getItem('userMail'));
+      this.userRanking = "1234";
+      this.teamName = "BuGa19Community";
+      this.dropDownSelectedItem = this.teamName;
+      this.teamRanking = "2019";
     },
     methods: {
       fetchUserCaches: function () {
@@ -300,6 +312,47 @@
         var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
         return re.test(String(email).toLowerCase());
       },
+      getPersonalRanking() {
+        const name = JSON.parse(localStorage.getItem('userToken')).name;
+        JSON.stringify(name);
+        this.$axios.get('/api/hello', {params: {name}})
+          .then((response) => {
+            this.userRanking = response.data;
+            console.log(response.data);
+          }).catch((error) => {
+          // 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;
+          } else if (error.request) {
+            // The request was made but no response was received
+            title = "Problem with request!";
+            msg = "Error occured due to wrong server request!"
+            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);
+          }
+          console.log(error.config);
+          this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,});
+        })
+      },
+      getTeamData() {
+
+      },
+
+      dropDownSelectItem(item){
+        if(item === 'team'){
+          this.dropDownSelectedItem = this.teamName;
+        } else {
+          this.dropDownSelectedItem = item;
+        }
+      },
     }
   }
 </script>

src/main/java/hhn/labsw/bugageocaching/controller/Controller.java

@@ -626,7 +626,9 @@ public class Controller {
     return ResponseEntity.status(200).body("Ok");
   }
 
+  @CrossOrigin(origins = "http://localhost:8081") // only for dev purpose
   @RequestMapping("/api/hello")
+  @ResponseBody
   public ResponseEntity hello(@RequestParam String name) {
     return ResponseEntity.status(200).body(userRepository.getRankingPlaceFromUser(name));
   }