added login, first preparation for menu

frontend/src/components/AppNavigation.vue

@@ -1,7 +1,7 @@
 <template>
   <nav>
     <ul>
-      <li v-for="item in menuItems" :key="item.text">
+      <li v-for="item in menu" :key="item.text">
         <a href="#">{{ $t(`navigation.${item.text}`) }}</a>
         <ul v-if="item.submenu">
           <li v-for="subitem in item.submenu" :key="subitem.text">
@@ -18,16 +18,17 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
+
 export default {
   name: 'AppNavigation',
-  data() {
-    return {
-      menuItems: [
-        { text: 'home' },
-        { text: 'about', submenu: [{ text: 'team' }, { text: 'company' }] },
-        { text: 'services', submenu: [{ text: 'consulting' }, { text: 'development' }] }
-      ]
-    };
+  computed: {
+    ...mapGetters('menu'),
+  },
+  created() {
+    if(this.$store.getters.hashedId) {
+      this.$store.dispatch('loadMenu');
+    }
   },
   methods: {
     accessMailbox() {
@@ -43,11 +44,12 @@ export default {
 <style lang="scss" scoped>
 @import '../assets/styles.scss';
 
+nav,
 nav > ul{
   display: flex;
   justify-content: space-between;
-  background-color: #343a40;
-  color: white;
+  background-color: #F9A22C;
+  color: #000000;
   padding: 10px;
   flex-direction: row;
 }
@@ -59,7 +61,7 @@ li {
   margin: 5px 0;
 }
 a {
-  color: white;
+  color: #000000;
   text-decoration: none;
 }
 .right-block {

frontend/src/store/index.js

@@ -1,11 +1,13 @@
 import { createStore } from 'vuex';
 import dialogs from './modules/dialogs';
+import loadMenu from '../utils/menuLoader.js';
 
 const store = createStore({
   state: {
     isLoggedIn: false,
     user: null,
     language: navigator.language.startsWith('de') ? 'de' : 'en',
+    menu: [],
   },
   mutations: {
     dologin(state, user) {
@@ -13,6 +15,7 @@ const store = createStore({
       state.user = user;
       localStorage.setItem('isLoggedIn', 'true');
       localStorage.setItem('user', JSON.stringify(user));
+      console.log(state.user);
     },
     dologout(state) {
       state.isLoggedIn = false;
@@ -23,9 +26,9 @@ const store = createStore({
     loadLoginState(state) {
       const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
       let userData = {};
-      try  {
+      try {
         userData = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {};
-      } catch(e) {
+      } catch (e) {
 
       }
       const user = userData;
@@ -34,11 +37,16 @@ const store = createStore({
     },
     setLanguage(state, language) {
       state.language = language;
+    },
+    setMenu(state, menu) {
+      state.menu = menu;
     }
   },
   actions: {
-    login({ commit }, user) {
+    async login({ commit, dispatch }, user) { // Dispatch hinzufügen
       commit('dologin', user);
+      await dispatch('loadMenu'); // Korrekte Verwendung von dispatch
+      dispatch('startMenuReload');
     },
     logout({ commit }) {
       commit('dologout');
@@ -49,11 +57,26 @@ const store = createStore({
     setLanguage({ commit }, language) {
       commit('setLanguage', language);
     },
+    async loadMenu({ commit }) {
+      try {
+        const menu = await loadMenu();
+        commit('setMenu', menu);
+      } catch (err) {
+        console.error(err);
+        commit('setMenu', []);
+      }
+    },
+    startMenuReload({ dispatch }) {
+      setInterval(() => {
+        dispatch('loadMenu');
+      }, 5000);
+    },
   },
   getters: {
     isLoggedIn: state => state.isLoggedIn,
     user: state => state.user,
     language: state => state.language,
+    menu: state => state.menu,
   },
   modules: {
     dialogs,

frontend/src/utils/menuLoader.js

@@ -0,0 +1,19 @@
+import axios from 'axios';
+import store from '../store'; 
+
+const loadMenu = async () => {
+    try {
+        console.log(store.getters.user);
+        const userId = store.getters.user ? store.getters.user.id : null;
+        if (!userId) {
+            throw new Error('User ID not found');
+        }
+        const response = await axios.get('/api/navigation/' + userId);
+        return response.data;
+    } catch (err) {
+        console.error(err); 
+        return [];
+    }
+};
+
+export default loadMenu;

frontend/src/views/home/NoLoginView.vue

@@ -11,30 +11,24 @@
             <div>
                 <div>
                     <div>
-                        <input data-object-name="user-name" size="20" type="text"
+                        <input v-model="username" size="20" type="text"
                             :placeholder="$t('home.nologin.login.name')"
                             :title="$t('home.nologin.login.namedescription')">
                     </div>
                     <div>
-                        <input data-object-name="password" size="20" type="password"
+                        <input v-model="password" size="20" type="password"
                             :placeholder="$t('home.nologin.login.password')"
                             :title="$t('home.nologin.login.passworddescription')">
                     </div>
                     <div>
-                        <label id="o1p5irxv" name="o1p5irxv" class="Wt-valid" title=""><input id="ino1p5irxv"
-                                data-object-name="remember-me" name="ino1p5irxv" type="checkbox"
-                                onchange="var e=event||window.event,o=this;Wt._p_.update(o,'s53',e,true);"><span
-                                id="to1p5irxv" name="to1p5irxv" style="white-space:normal;">Eingeloggt bleiben</span></label>
+                        <label><input type="checkbox"><span>Eingeloggt bleiben</span></label>
                     </div>
                 </div>
-                <div class="Wt-buttons">
-                    <button id="o1p5irxz" data-object-name="login" type="button"
-                        onclick="var e=event||window.event,o=this;if(o.classList.contains('Wt-disabled')){Wt4_9_1.cancelEvent(e);return;}Wt._p_.update(o,'s56',e,true);"
-                        class="Wt-btn with-label">Einloggen</button>
+                <div>
+                    <button type="button" @click="doLogin">Einloggen</button>
                 </div>
-                <div class="Wt-buttons">
-                    <span id="o1p5iry0" data-object-name="lost-password" @click="openPasswordResetDialog"
-                        class="link">{{
+                <div>
+                    <span @click="openPasswordResetDialog" class="link">{{
                         $t('home.nologin.login.lostpassword') }}</span> | <span id="o1p5iry1"
                         @click="openRegisterDialog" class="link">{{ $t('home.nologin.login.register') }}</span>
                 </div>
@@ -51,15 +45,24 @@
 import RandomChatDialog from '@/dialogues/chat/RandomChatDialog.vue';
 import RegisterDialog from '@/dialogues/auth/RegisterDialog.vue';
 import PasswordResetDialog from '@/dialogues/auth/PasswordResetDialog.vue';
+import apiClient from '@/utils/axios.js';
+import { mapActions } from 'vuex';
 
 export default {
     name: 'HomeNoLoginView',
+    data() {
+        return {
+            username: '',
+            password: '',
+        };
+    },
     components: {
         RandomChatDialog,
         RegisterDialog,
         PasswordResetDialog,
     },
     methods: {
+        ...mapActions(['login']),
         openRandomChat() {
             this.$refs.randomChatDialog.open();
         },
@@ -68,6 +71,10 @@ export default {
         },
         openPasswordResetDialog() {
             this.$refs.passwordResetDialog.open();
+        },
+        async doLogin() {
+            const response = await apiClient.post('/api/auth/login', { username: this.username, password: this.password });
+            this.login(response.data);
         }
     }
 };