From 78288f418a1d5735d8a9a7adf4efc238cfb41642 Mon Sep 17 00:00:00 2001
From: Pierre-Alexandre35
 <46579114+Pierre-Alexandre35@users.noreply.github.com>
Date: Sat, 29 Jun 2024 17:15:52 +0200
Subject: [PATCH] (frontend) redirect once user is logged to the homepage

---
 travian/frontend/src/components/Home.vue   |  55 ++++++-----
 travian/frontend/src/components/Login.vue  | 103 +++++++++++----------
 travian/frontend/src/components/Navbar.vue |  69 +++++++-------
 travian/frontend/src/router.ts             |   6 +-
 travian/frontend/src/store/auth.ts         |  16 +---
 travian/frontend/src/views/HomePage.vue    |  44 +++++----
 6 files changed, 146 insertions(+), 147 deletions(-)

diff --git a/travian/frontend/src/components/Home.vue b/travian/frontend/src/components/Home.vue
index c0bdc695..c804d80f 100644
--- a/travian/frontend/src/components/Home.vue
+++ b/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>
-  
\ No newline at end of file
+  <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>
diff --git a/travian/frontend/src/components/Login.vue b/travian/frontend/src/components/Login.vue
index 21adfa62..26e8db16 100644
--- a/travian/frontend/src/components/Login.vue
+++ b/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>
-  
\ No newline at end of file
+  <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>
diff --git a/travian/frontend/src/components/Navbar.vue b/travian/frontend/src/components/Navbar.vue
index 549d960c..805b278d 100644
--- a/travian/frontend/src/components/Navbar.vue
+++ b/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>
-  
\ No newline at end of file
+      <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>
diff --git a/travian/frontend/src/router.ts b/travian/frontend/src/router.ts
index 672ad131..6794f464 100644
--- a/travian/frontend/src/router.ts
+++ b/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();
diff --git a/travian/frontend/src/store/auth.ts b/travian/frontend/src/store/auth.ts
index 4fe844bf..b4bfda95 100644
--- a/travian/frontend/src/store/auth.ts
+++ b/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');
     }
   }
diff --git a/travian/frontend/src/views/HomePage.vue b/travian/frontend/src/views/HomePage.vue
index bd33c334..0f2a2ca8 100644
--- a/travian/frontend/src/views/HomePage.vue
+++ b/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>
-  
\ No newline at end of file
+  <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>