init

package-lock.json

@@ -10086,8 +10086,7 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz",
       "integrity": "sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "rx-lite-aggregates": {
       "version": "4.0.8",

src/components/Menu.vue

@@ -57,6 +57,9 @@
                     <v-list-tile @click="$router.push({'name': 'userMails'})">
                         <v-list-tile-title >Contact Information</v-list-tile-title>
                     </v-list-tile>
+                    <v-list-tile @click="$router.push({'name': 'userMails'})">
+                        <v-list-tile-title >Profil</v-list-tile-title>
+                    </v-list-tile>
                     <v-list-tile @click="clickLoogut()">
                         <v-list-tile-title >Logout</v-list-tile-title>
                     </v-list-tile>

src/components/Menu2.vue

@@ -65,7 +65,18 @@
 
             <v-list>
                 <v-list-item>
-                    <v-list-item-title @click="clickLoogut()">Logout</v-list-item-title>
+                    <router-link to="/user/profile">
+                        <v-list-item-title>
+                            <v-icon>person</v-icon> Profil
+                        </v-list-item-title>
+                    </router-link>
+                </v-list-item>
+                <v-list-item>
+                    <a href="#">
+                    <v-list-item-title @click="clickLoogut()">
+                        <v-icon>exit_to_app</v-icon> Logout
+                    </v-list-item-title>
+                    </a>
                 </v-list-item>
 
             </v-list>
@@ -145,5 +156,12 @@
         }
     }
 </script>
-
-
+<style>
+a{
+    text-decoration: none;
+    color: rgba(0, 0, 0, 0.87) !important
+}
+v-list-item-title{
+    cursor: pointer;
+}
+</style>

src/router/index.js

@@ -9,6 +9,7 @@ import ListApps from '../views/ListApps'
 import AppDetails from '../views/AppDetails'
 import NewApp from '../views/NewApp'
 import Mail from '../views/Mail'
+import UserProfile from '../views/UserProfile'
 
 Vue.use(Router)
 
@@ -67,6 +68,12 @@ export default new Router({
             path: '/user/mails',
             name: 'userMails',
             component: Mail
+        },
+        {
+            beforeEnter: guard,
+            path: '/user/profile',
+            name: 'userProfile',
+            component: UserProfile
         }
     ]
 })

src/views/Login.vue

@@ -69,15 +69,12 @@
       }
     },
     mounted: function() {
-      console.log("REDIRECT: "+this.$store.state.redirectIfLoggedIn)
       if(this.$store.state.loggedIn == true) {
         if(this.$store.state.redirectIfLoggedIn != null) {
           this.$router.push(this.$store.state.redirectIfLoggedIn);
         } else {
           this.$router.push({name: 'Dashboard'});
         }
-
-
       }
       this.nameBig = this.$store.getters.getSettingValue("name_big");
       this.nameSmall = this.$store.getters.getSettingValue("name_small");

src/views/UserProfile.vue

@@ -0,0 +1,100 @@
+<template>
+  <div style="margin-top:50px;">
+    <v-container grid-list-md pa-10 >
+      <v-layout row wrap>
+        <v-flex md12>
+          <h1>Profil von: {{$store.getters.getMe["username"]}}</h1>
+          <br>
+
+          <h4>
+            Benutzername
+            <v-tooltip top>
+              <template v-slot:activator="{ on }">
+                <span v-on="on">
+                  <v-icon>info</v-icon>  
+                </span>  
+              </template>
+              <span>
+                Den Benutzernamen kannst du nachträglich nicht verändern.
+              </span>
+            </v-tooltip>  
+          </h4>
+
+          <span>{{user.username}}</span>
+          <v-form
+              ref="form"
+              v-model="valid"
+              :lazy-validation="lazy"
+            >
+            <v-row>
+              <v-col
+                cols="12"
+                md="4"
+              >
+                <v-text-field
+                  v-model="user.primaryMail"
+                  :rules="emailRules"
+                  label="Primäre E-Mail Adresse"
+                  required
+                ></v-text-field>
+              </v-col>  
+            </v-row>
+          </v-form>
+        
+
+        <v-btn
+          :disabled="!valid"
+          color="success"
+          class="mr-4"
+          @click="validate()"
+         >
+          Speichern
+          </v-btn>
+          <hr/>
+
+          <pre>
+            {{user}}
+          </pre>
+        </v-flex>
+      </v-layout>
+    </v-container>
+  </div>
+</template>
+
+<script>
+  import ServerService from '../services/Server'
+  import UserService from '../services/User'
+  import AppService from '../services/Apps'
+
+  export default {
+    data () {
+      return {
+        nameBig: '',
+        nameSmall: '',
+        user: this.$store.getters.getMe,
+        emailRules: [
+          v => !!v || 'Primäre E-Mail muss Angegeben werden',
+          v => /.+@.+/.test(v) || 'E-Mail ist ungültig',
+        ],
+        valid: true,
+        lazy: true,
+      }
+    },
+    components: {
+    },
+    methods: {
+      validate () {
+        if (this.$refs.form.validate()) {
+          console.log('lets go and save this information')
+        }
+      },
+    },
+    mounted: function() {
+      this.nameBig = this.$store.getters.getSettingValue("name_big");
+      this.nameSmall = this.$store.getters.getSettingValue("name_small");
+    }
+}
+</script>
+
+<style>
+</style>