Merge pull request #21 from HE-Arc/6-login-registration-logic-users-rights

6 login registration logic users rights

Author: sebastienmendes

api/Pipfile

@@ -9,6 +9,6 @@ djangorestframework = "*"
 django-cors-headers = "*"
 psycopg2-binary = "*"
 python-dotenv = "*"
-rest-framework-simplejwt = "*"
+djangorestframework-simplejwt = "*"
 
 [dev-packages]

api/Pipfile.lock

@@ -1,4 +1,5 @@
 import axios from 'axios';
+axios.defaults.baseURL = import.meta.env.VITE_API_URL
 
 // Create API instance
 const api = axios.create({

frontend/src/api.js

@@ -40,8 +40,16 @@ export async function login(username, password) {
 }
 
 // Logout function
-export function logout() {
+export async function logout() {
+  try {
+    const response = await api.post("/auth/logout/", {});
+
     localStorage.removeItem("access");
     localStorage.removeItem("refresh");
-    setAuthToken(null); // Remove token from API
+    setAuthToken(null);
+    return response.data;
+  } catch (error) {
+    console.error("Logout failed:", error.response.data);
+    throw error.response.data;
+  }
 }

frontend/src/auth.js

@@ -1,4 +1,5 @@
 <script setup>
+import LoginLogout from '@/components/functional/LoginLogout.vue'
 import { ref } from 'vue'
 </script>
 
@@ -23,10 +24,7 @@ import { ref } from 'vue'
             </router-link>
           </li>
           <li>
-            <!-- TODO if logged in - log out -->
-            <router-link :to="{ name: 'login' }" class="text-gray-400 dark:text-white-400 inline-block py-2 px-4 text-sm font-medium">
-              Login
-            </router-link>
+            <LoginLogout></LoginLogout>
           </li>
         </ul>
       </div>

frontend/src/components/NavBar.vue

@@ -0,0 +1,38 @@
+<script setup>
+import { ref, watchEffect } from "vue";
+import { useRouter } from "vue-router";
+import { logout } from "../../auth.js";
+
+const router = useRouter();
+const errorMessage = ref("");
+const isAuthenticated = ref(!!localStorage.getItem("access"));
+
+// Watch for changes to localStorage and update isAuthenticated
+watchEffect(() => {
+  isAuthenticated.value = !!localStorage.getItem("access");
+});
+
+async function handleLogout() {
+  try {
+    await logout();
+    localStorage.removeItem("access");
+    isAuthenticated.value = false;
+    router.push("/login");
+  } catch (error) {
+    errorMessage.value = "Error logging out.";
+  }
+}
+</script>
+
+<template>
+  <div v-if="isAuthenticated">
+    <router-link to="#" @click.prevent="handleLogout" class="text-gray-400 dark:text-white-400 inline-block py-2 px-4 text-sm font-medium">
+      Logout
+    </router-link>
+  </div>
+  <div v-else>
+    <router-link :to="{ name: 'login' }" class="text-gray-400 dark:text-white-400 inline-block py-2 px-4 text-sm font-medium">
+      Login
+    </router-link>
+  </div>
+</template>

frontend/src/components/functional/LoginLogout.vue

@@ -39,6 +39,7 @@ const router = createRouter({
     { path: "/login",
       name: 'login',
       component: () => import('../views/LoginView.vue' ) },
+
     { path: "/register",
       name: 'register',
       component: () => import('../views/RegisterView.vue' ) },
@@ -49,7 +50,7 @@ const router = createRouter({
 
 router.beforeEach((to, from, next) => {
   const isAuthenticated = !!localStorage.getItem("access");
-  if ( ( to.path != "/register"  && to.path != "/login" ) && !isAuthenticated) {
+  if ( ( to.path != "/register"  && to.path != "/login" && to.path != "/about" ) && !isAuthenticated) {
       next("/login");
   } else {
       next();

frontend/src/router/index.js

@@ -12,7 +12,7 @@ const errorMessage = ref("");
 async function handleLogin() {
     try {
         await login(username.value, password.value);
-        router.push("/characters"); // Redirect after login
+        router.push("/characters").then(() => { window.location.reload(); });
     } catch (error) {
         errorMessage.value = "Invalid username or password.";
     }
@@ -35,7 +35,7 @@ async function handleLogin() {
             <input class="ff-input" v-model="password" type="password" placeholder="Password" required />
           </div>
             <button type="submit" class="ff-button">Login</button>
-            <a class="text-red px-4 py-2 rounded" href="register">No account? Register</a>
+            <a class="px-4 py-2.5 rounded dark:text-gray-900" href="register">No account? Register</a>
         </form>
 
         </div>