(frontend) auth redirect to homepage

travian/frontend/src/api/api.ts

@@ -7,4 +7,9 @@ const apiClient: AxiosInstance = axios.create({
   withCredentials: true
 });
 
+export const getAllVillages = async () => {
+  const response = await apiClient.get('/all_villages');
+  return response.data;
+};
+
 export default apiClient;

travian/frontend/src/components/Home.vue

@@ -1,30 +1,46 @@
-<!-- Home.vue -->
+<!-- views/HomePage.vue -->
 
 <template>
   <div class="container">
-    <h1>Welcome to the Home Page</h1>
-    <p>You are logged in as {{ username }}</p>
+    <h1>Home Page</h1>
+    <p>Welcome to the Home Page, {{ username }}</p>
+    <h2>Your Villages</h2>
+    <ul>
+      <li v-for="village in villages" :key="village.village_id">
+        <h3>{{ village.name }}</h3>
+        <p>Population: {{ village.population }}</p>
+        <p>Position ID: {{ village.position_id }}</p>
+      </li>
+    </ul>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from 'vue';
+import { defineComponent, computed, onMounted } from 'vue';
 import { useAuthStore } from '@/store/auth';
+import { useVillagesStore } from '@/store/villages';
 
 export default defineComponent({
-  name: 'Home',
+  name: 'HomePage',
   setup() {
     const authStore = useAuthStore();
+    const villagesStore = useVillagesStore();
 
     const username = computed(() => authStore.username);
+    const villages = computed(() => villagesStore.villages);
+
+    onMounted(async () => {
+      await villagesStore.fetchVillages();
+    });
 
     return {
       username,
+      villages,
     };
   }
 });
 </script>
 
 <style scoped>
-/* Add your scoped styles for Home */
+/* Add your styles for HomePage */
 </style>

travian/frontend/src/store/villages.ts

@@ -0,0 +1,32 @@
+// store/villages.ts
+
+import { defineStore } from 'pinia';
+import { getAllVillages } from '@/api/api';
+
+interface Village {
+  village_id: number;
+  name: string;
+  owner_id: number;
+  position_id: number;
+  population: number;
+}
+
+interface VillagesState {
+  villages: Village[];
+}
+
+export const useVillagesStore = defineStore('villages', {
+  state: (): VillagesState => ({
+    villages: []
+  }),
+  actions: {
+    async fetchVillages() {
+      try {
+        const data = await getAllVillages();
+        this.villages = data.villages;
+      } catch (error) {
+        console.error('Failed to fetch villages:', error);
+      }
+    }
+  }
+});

travian/frontend/src/views/HomePage.vue

@@ -4,15 +4,20 @@
   <div class="container">
     <h1>Home Page</h1>
     <p>Welcome to the Home Page, {{ username }}</p>
+    <Home />
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, computed } from 'vue';
 import { useAuthStore } from '@/store/auth';
+import Home from '@/components/Home.vue';
 
 export default defineComponent({
   name: 'HomePage',
+  components: {
+    Home
+  },
   setup() {
     const authStore = useAuthStore();
     const username = computed(() => authStore.username);
@@ -26,4 +31,7 @@ export default defineComponent({
 
 <style scoped>
 /* Add your styles for HomePage */
+.container {
+  padding: 20px;
+}
 </style>