routing improved, settings initialized

frontend/src/assets/images

@@ -0,0 +1 @@
+../../public/images

frontend/src/components/AppNavigation.vue

@@ -1,42 +1,42 @@
 <template>
   <nav>
     <ul>
-      <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">
-            <a href="#">{{ $t(`navigation.${subitem.text}`) }}</a>
+      <li v-for="(item, key) in menu" :key="key" class="mainmenuitem">
+        <a :href="item.path" v-if="item.path" class="menuitem">{{ $t(`navigation.${key}`) }}</a>
+        <span v-if="!item.path" class="menuitem">{{ $t(`navigation.${key}`) }}</span>
+        <ul v-if="item.children" class="submenu1">
+          <li v-for="(subitem, subkey) in item.children" :key="subitem.text">
+            <a :href="subitem.path" v-if="subitem.path">{{ $t(`navigation.m-${key}.${subkey}`) }}</a>
+            <span v-if="!subitem.path">{{ $t(`navigation.m-${key}.${subkey}`) }}</span>
           </li>
         </ul>
       </li>
     </ul>
     <div class="right-block">
-      <button @click="accessMailbox">{{ $t('navigation.mailbox') }}</button>
-      <button @click="logout">{{ $t('navigation.logout') }}</button>
+      <span @click="accessMailbox" class="mailbox"></span>
+      <span class="logoutblock">
+        <span class="username">{{ user.username }} </span>
+        <span @click="logout" class="menuitem">{{ $t('navigation.logout') }}</span>
+      </span>
     </div>
   </nav>
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapGetters, mapActions } from 'vuex';
 
 export default {
   name: 'AppNavigation',
   computed: {
-    ...mapGetters('menu'),
+    ...mapGetters(['menu', 'user']),
   },
   created() {
-    if(this.$store.getters.hashedId) {
-      this.$store.dispatch('loadMenu');
+    if (this.user && this.user.hashedId) {
+      this.loadMenu();
     }
   },
   methods: {
-    accessMailbox() {
-      alert('Accessing Mailbox...');
-    },
-    logout() {
-      this.$store.dispatch('logout');
-    }
+    ...mapActions(['loadMenu', 'logout']),
   }
 };
 </script>
@@ -45,37 +45,87 @@ export default {
 @import '../assets/styles.scss';
 
 nav,
-nav > ul{
+nav>ul {
   display: flex;
   justify-content: space-between;
   background-color: #F9A22C;
   color: #000000;
-  padding: 10px;
+  padding: 0;
   flex-direction: row;
+  margin: 0;
 }
+
 ul {
   list-style-type: none;
   padding: 0;
+  margin: 0;
 }
-li {
-  margin: 5px 0;
+
+nav>ul>li {
+  padding: 0 1em;
+  line-height: 2.5em;
+  transition: background-color 0.25s;
 }
-a {
+
+nav>ul>li:hover {
+  background-color: #D37C06;
+  white-space: nowrap;
+}
+nav>ul>li:hover > span {
   color: #000000;
+}
+
+nav>ul>li:hover > ul{
+  display: inline-block;
+}
+
+a {
   text-decoration: none;
 }
+
 .right-block {
   display: flex;
   gap: 10px;
 }
-button {
-  background-color: #495057;
-  color: white;
-  border: none;
-  padding: 5px 10px;
-  cursor: pointer;
+
+.logoutblock {
+  display: flex;
+  flex-direction: column;
 }
-button:hover {
-  background-color: #6c757d;
+
+.menuitem {
+  cursor: pointer;
+  color: #7E471B;
+}
+
+.mailbox {
+  background-image: url('@/assets/images/icons/message24.png');
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  padding-left: 24px;
+  text-align: left;
+}
+
+.mainmenuitem {
+  position: relative;
+}
+
+.submenu1 {
+  position: absolute;
+  border: 1px solid #7E471B;
+  background-color: #F9A22C;
+  display: none;
+  left: 0;
+  top: 2.5em;
+}
+.submenu1 > li {
+  padding: 0.5em;
+  line-height: 1em;
+  color: #7E471B;
+}
+.submenu1>li:hover {
+  color: #000000;
+  background-color: #D37C06;
 }
 </style>

frontend/src/i18n/locales/de/error.json

@@ -1,6 +1,7 @@
 {
     "error": {
         "title": "Fehler aufgetreten",
-        "close": "Schließen"
+        "close": "Schließen",
+        "credentialsinvalid": "Die Zugangsdaten sind nicht korrekt."
     }
 }

frontend/src/i18n/locales/de/navigation.json

@@ -1,12 +1,44 @@
 {
-    "home": "Startseite",
-    "about": "Über uns",
-    "services": "Dienstleistungen",
-    "team": "Team",
-    "company": "Firma",
-    "consulting": "Beratung",
-    "development": "Entwicklung",
-    "mailbox": "Briefkasten",
-    "logout": "Abmelden"
+    "navigation": {
+        "home": "Startseite",
+        "logout": "Abmelden",
+        "friends": "Freunde",
+        "socialnetwork": "Treffpunkt",
+        "chats": "Chats",
+        "falukant": "Falukant",
+        "minigames": "Minispiele",
+        "settings": "Einstellungen",
+        "administration": "Verwaltung",
+        "m-chats": {
+            "multiChat": "Multiuser-Chat",
+            "randomChat": "Zufalls-Singlechat"
+        },
+        "m-socialnetwork": {
+            "guestbook": "Gästebuch",
+            "usersearch": "Benutzersuche",
+            "forum": "Forum",
+            "gallery": "Galerie",
+            "blockedUsers": "Blockierte Benutzer",
+            "oneTimeInvitation": "Einmal-Einladungen",
+            "diary": "Tagebuch"
+        },
+        "m-settings": {
+            "homepage": "Startseite",
+            "account": "Account",
+            "personal": "Persönliches",
+            "view": "Aussehen",
+            "interrests": "Interessen",
+            "notifications": "Benachrichtigungen",
+            "sexuality": "Sexualität"
+        },
+        "m-administration": {
+            "contactrequests": "Kontaktanfragen",
+            "useradministration": "Benutzerverwaltung",
+            "forum": "Forum",
+            "userrights": "Benutzerrechte",
+            "interrests": "Interessen",
+            "falukant": "Falukant"
+        }
+    }
 }
   

frontend/src/router/index.js

@@ -1,6 +1,8 @@
 import { createRouter, createWebHistory } from 'vue-router';
+import store from '../store';
 import HomeView from '../views/HomeView.vue';
 import ActivateView from '../views/auth/ActivateView.vue';
+import PeronalSettingsView from '../views/settings/PersonalView.vue';
 
 const routes = [
   {
@@ -12,9 +14,16 @@ const routes = [
     path: '/activate',
     name: 'Activate page',
     component: ActivateView
+  },
+  {
+    path: '/settings/personal',
+    name: 'Personal settings',
+    component: PeronalSettingsView,
+    meta: { requiresAuth: true }
   }
 ];
 
+
 const router = createRouter({
   history: createWebHistory(process.env.BASE_URL),
   routes
@@ -24,10 +33,10 @@ router.beforeEach((to, from, next) => {
   if (to.matched.some(record => record.meta.requiresAuth)) {
     if (!store.getters.isLoggedIn) {
       next('/');
-    } else if (!store.user.active) {
-      next();
-    } else {
+    } else if (!store.getters.user.active) {
       next('/activate');
+    } else {
+      next();
     }
   } else {
     next();

frontend/src/store/index.js

@@ -1,6 +1,7 @@
 import { createStore } from 'vuex';
 import dialogs from './modules/dialogs';
 import loadMenu from '../utils/menuLoader.js';
+import router from '../router';
 
 const store = createStore({
   state: {
@@ -43,13 +44,14 @@ const store = createStore({
     }
   },
   actions: {
-    async login({ commit, dispatch }, user) { // Dispatch hinzufügen
+    async login({ commit, dispatch }, user) { 
       commit('dologin', user);
-      await dispatch('loadMenu'); // Korrekte Verwendung von dispatch
+      await dispatch('loadMenu'); 
       dispatch('startMenuReload');
     },
     logout({ commit }) {
       commit('dologout');
+      router.push('/');
     },
     loadLoginState({ commit }) {
       commit('loadLoginState');
@@ -69,7 +71,7 @@ const store = createStore({
     startMenuReload({ dispatch }) {
       setInterval(() => {
         dispatch('loadMenu');
-      }, 5000);
+      }, 10000);
     },
   },
   getters: {

frontend/src/utils/menuLoader.js

@@ -3,7 +3,6 @@ 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');

frontend/src/views/auth/ActivateView.vue

@@ -39,7 +39,7 @@ export default {
                 const response = await apiClient.post('/api/auth/activate', { token: this.token });
                 if (response.status === 200) {
                     this.user.active = true;
-                    this.$router.push('/'); // Redirect to login after activation
+                    this.$router.push('/settings/personal'); 
                 }
             } catch (error) {
                 console.error('Error activating account:', error);

frontend/src/views/home/NoLoginView.vue

@@ -38,6 +38,7 @@
         <RandomChatDialog ref="randomChatDialog" />
         <RegisterDialog ref="registerDialog" />
         <PasswordResetDialog ref="passwordResetDialog" />
+        <ErrorDialog ref="errorDialog" />
     </div>
 </template>
 
@@ -47,6 +48,7 @@ import RegisterDialog from '@/dialogues/auth/RegisterDialog.vue';
 import PasswordResetDialog from '@/dialogues/auth/PasswordResetDialog.vue';
 import apiClient from '@/utils/axios.js';
 import { mapActions } from 'vuex';
+import ErrorDialog from '@/dialogues/standard/ErrorDialog.vue';
 
 export default {
     name: 'HomeNoLoginView',
@@ -60,6 +62,7 @@ export default {
         RandomChatDialog,
         RegisterDialog,
         PasswordResetDialog,
+        ErrorDialog,
     },
     methods: {
         ...mapActions(['login']),
@@ -73,8 +76,16 @@ export default {
             this.$refs.passwordResetDialog.open();
         },
         async doLogin() {
-            const response = await apiClient.post('/api/auth/login', { username: this.username, password: this.password });
-            this.login(response.data);
+            try {
+                const response = await apiClient.post('/api/auth/login', { username: this.username, password: this.password });
+                this.login(response.data);
+                if (response.data.forwardDataInput) {
+                    console.log(response.data);
+                    this.$router.push({ path: '/settings/personal' });
+                }
+            } catch (error) {
+                this.$refs.errorDialog.open(`tr:error.${error.response.data.error}`);
+            }
         }
     }
 };

frontend/src/views/settings/PersonalView.vue

@@ -0,0 +1,11 @@
+<template>
+    <div>
+        Persönliche Einstellungen
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'PersonalSettingsView',
+}
+</script>