(frontend) redirect once user is logged to the homepage

travian/frontend/src/components/Home.vue

@@ -1,31 +1,30 @@
 <!-- Home.vue -->
 
 <template>
-    <div class="container">
-      <h1>Welcome to the Home Page</h1>
-      <p>You are logged in as {{ userEmail }}</p>
-    </div>
-  </template>
-
-  <script lang="ts">
-  import { defineComponent, computed } from 'vue';
-  import { useAuthStore } from '@/store/auth';
-
-  export default defineComponent({
-    name: 'Home',
-    setup() {
-      const authStore = useAuthStore();
-
-      const userEmail = computed(() => authStore.userEmail);
-
-      return {
-        userEmail,
-      };
-    }
-  });
-  </script>
-
-  <style scoped>
-  /* Add your scoped styles for Home */
-  </style>
-
+  <div class="container">
+    <h1>Welcome to the Home Page</h1>
+    <p>You are logged in as {{ username }}</p>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from 'vue';
+import { useAuthStore } from '@/store/auth';
+
+export default defineComponent({
+  name: 'Home',
+  setup() {
+    const authStore = useAuthStore();
+
+    const username = computed(() => authStore.username);
+
+    return {
+      username,
+    };
+  }
+});
+</script>
+
+<style scoped>
+/* Add your scoped styles for Home */
+</style>

travian/frontend/src/components/Login.vue

@@ -1,54 +1,55 @@
 <!-- Login.vue -->
 
 <template>
-    <div class="container">
-      <h1>Login</h1>
-      <form @submit.prevent="login">
-        <div>
-          <label>Username:</label> <!-- Change label to Username -->
-          <input type="text" v-model="username" required> <!-- Change type to text and v-model to username -->
-        </div>
-        <div>
-          <label>Password:</label>
-          <input type="password" v-model="password" required>
-        </div>
-        <button type="submit">Login</button>
-      </form>
-    </div>
-  </template>
-
-  <script lang="ts">
-  import { ref } from 'vue';
-  import { useAuthStore } from '@/store/auth';
-
-  export default {
-    name: 'Login',
-    setup() {
-      const authStore = useAuthStore();
-      const username = ref('');
-      const password = ref('');
-
-      const login = async () => {
-        try {
-          await authStore.login(username.value, password.value);
-          // Redirect to home page or wherever needed after successful login
-          // Example: router.push('/home');
-        } catch (error) {
-          console.error(error);
-          // Handle login error
-        }
-      };
-
-      return {
-        username,
-        password,
-        login,
-      };
-    }
-  };
-  </script>
-
-  <style scoped>
-  /* Add your styles for Login */
-  </style>
-
+  <div class="container">
+    <h1>Login</h1>
+    <form @submit.prevent="login">
+      <div>
+        <label>Username:</label>
+        <input type="text" v-model="username" required>
+      </div>
+      <div>
+        <label>Password:</label>
+        <input type="password" v-model="password" required>
+      </div>
+      <button type="submit">Login</button>
+    </form>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from 'vue';
+import { useAuthStore } from '@/store/auth';
+import { useRouter } from 'vue-router';
+
+export default {
+  name: 'Login',
+  setup() {
+    const authStore = useAuthStore();
+    const router = useRouter();
+    const username = ref('');
+    const password = ref('');
+
+    const login = async () => {
+      try {
+        await authStore.login(username.value, password.value);
+        // Redirect to home page after successful login
+        router.push('/home');
+      } catch (error) {
+        console.error(error);
+        // Handle login error
+      }
+    };
+
+    return {
+      username,
+      password,
+      login,
+    };
+  }
+};
+</script>
+
+<style scoped>
+/* Add your styles for Login */
+</style>

travian/frontend/src/components/Navbar.vue

@@ -1,39 +1,38 @@
 <!-- Navbar.vue -->
 
 <template>
-    <nav>
-      <div class="container">
-        <div class="brand">
-          My App
-        </div>
-        <div v-if="isLoggedIn" class="user-info">
-          Logged in as {{ userEmail }}
-        </div>
+  <nav>
+    <div class="container">
+      <div class="brand">
+        My App
       </div>
-    </nav>
-  </template>
-
-  <script lang="ts">
-  import { defineComponent, computed } from 'vue';
-  import { useAuthStore } from '@/store/auth';
-
-  export default defineComponent({
-    name: 'Navbar',
-    setup() {
-      const authStore = useAuthStore();
-
-      const isLoggedIn = computed(() => authStore.isLoggedIn);
-      const userEmail = computed(() => authStore.userEmail);
-
-      return {
-        isLoggedIn,
-        userEmail,
-      };
-    }
-  });
-  </script>
-
-  <style scoped>
-  /* Add your scoped styles for Navbar */
-  </style>
-
+      <div v-if="isLoggedIn" class="user-info">
+        Logged in as {{ username }}
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from 'vue';
+import { useAuthStore } from '@/store/auth';
+
+export default defineComponent({
+  name: 'Navbar',
+  setup() {
+    const authStore = useAuthStore();
+
+    const isLoggedIn = computed(() => authStore.isLoggedIn);
+    const username = computed(() => authStore.username);
+
+    return {
+      isLoggedIn,
+      username,
+    };
+  }
+});
+</script>
+
+<style scoped>
+/* Add your scoped styles for Navbar */
+</style>

travian/frontend/src/router.ts

@@ -3,6 +3,7 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
 import LoginPage from '@/views/LoginPage.vue';
 import HomePage from '@/views/HomePage.vue';
+import { useAuthStore } from '@/store/auth';
 
 const routes: Array<RouteRecordRaw> = [
   { path: '/', component: LoginPage },
@@ -14,11 +15,10 @@ const router = createRouter({
   routes,
 });
 
-// Check authentication status before each route navigation
 router.beforeEach((to, from, next) => {
-  const isAuthenticated = true; // Replace with your actual authentication check
+  const authStore = useAuthStore();
 
-  if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
+  if (to.matched.some(record => record.meta.requiresAuth) && !authStore.isLoggedIn) {
     next('/');
   } else {
     next();

travian/frontend/src/store/auth.ts

@@ -1,7 +1,8 @@
-// src/store/auth.ts
+// auth.ts
 
 import { defineStore } from 'pinia';
 import apiClient from '@/api/api';
+import { useRouter } from 'vue-router';
 
 interface AuthState {
   isLoggedIn: boolean;
@@ -21,29 +22,20 @@ export const useAuthStore = defineStore('auth', {
           password: password
         });
 
-        // Assuming your backend returns the username in the response
-        const { access_token, username: responseUsername } = response.data;
+        const { access_token, username: returnedUsername } = response.data;
 
-        // Save username and set logged in status
         this.isLoggedIn = true;
-        this.username = responseUsername;
+        this.username = returnedUsername;
 
-        // Save token to localStorage or sessionStorage if needed
         localStorage.setItem('access_token', access_token);
-
-        // You may want to redirect here after successful login
-        // Example: router.push('/home');
       } catch (error) {
         console.error('Login failed:', error);
         throw new Error('Login failed');
       }
     },
     logout(this: any): void {
-      // Clear user data and set logged out status
       this.isLoggedIn = false;
       this.username = '';
-
-      // Clear token from localStorage or sessionStorage if used
       localStorage.removeItem('access_token');
     }
   }

travian/frontend/src/views/HomePage.vue

@@ -1,21 +1,29 @@
 <!-- views/HomePage.vue -->
 
 <template>
-    <div class="container">
-      <h1>Home Page</h1>
-      <p>Welcome to the Home Page</p>
-    </div>
-  </template>
-
-  <script lang="ts">
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    name: 'HomePage',
-  });
-  </script>
-
-  <style scoped>
-  /* Add scoped styles for HomePage */
-  </style>
-
+  <div class="container">
+    <h1>Home Page</h1>
+    <p>Welcome to the Home Page, {{ username }}</p>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from 'vue';
+import { useAuthStore } from '@/store/auth';
+
+export default defineComponent({
+  name: 'HomePage',
+  setup() {
+    const authStore = useAuthStore();
+    const username = computed(() => authStore.username);
+
+    return {
+      username,
+    };
+  }
+});
+</script>
+
+<style scoped>
+/* Add your styles for HomePage */
+</style>