Example implementation of API-Requests in frontend (#8)

* Example implementation of API-Requests in frontend

* Remove invalid package.json dependency

Author: Wunderwaffel

.gitignore

@@ -1,4 +1,5 @@
 .idea/
 .vscode/
+__pycache__/
 
 *.env

backend/app/main.py

@@ -4,6 +4,7 @@
 from contextlib import asynccontextmanager
 
 from fastapi import FastAPI
+from starlette.middleware.cors import CORSMiddleware
 
 from app.core.config import settings
 from app.core.database import init_db
@@ -48,6 +49,23 @@ async def lifespan(_app: FastAPI):
 )
 
 
+# ---------------------------------------------------------
+# Development-only CORS configuration
+# ---------------------------------------------------------
+if settings.ENVIRONMENT == "dev":
+    logger.info("🌐 Enabling CORS for local development...")
+    app.add_middleware(
+        CORSMiddleware,
+        allow_origins=[
+            "http://localhost:5173",
+            "http://127.0.0.1:5173",
+        ],
+        allow_credentials=True,
+        allow_methods=["*"],
+        allow_headers=["*"],
+    )
+
+
 # ---------------------------------------------------------
 # Register Routers
 # ---------------------------------------------------------

backend/requirements.txt

@@ -17,4 +17,5 @@ httpx==0.28.1
 email-validator==2.3.0
 
 # --- Security & Auth ---
-python-jose[cryptography]==3.3.0
+python-jose[cryptography]==3.3.0
+starlette~=0.49.3

frontend/package.json

@@ -12,8 +12,12 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.13.1",
     "vue": "^3.5.22",
-    "vuetify": "^3.10.7"
+    "vue-router": "^4.6.3",
+    "vuetify": "^3.10.7",
+    "tailwindcss": "^4.1.16",
+    "pinia": "^3.0.3"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.1",

frontend/src/App.vue

@@ -1,47 +1,12 @@
 <script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
 </script>
 
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
-
   <main>
-    <TheWelcome />
+    <router-view />
   </main>
 </template>
 
 <style scoped>
-header {
-  line-height: 1.5;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
 
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-}
-</style>
+</style>

frontend/src/components/HelloWorld.vue

@@ -0,0 +1,15 @@
+<script setup>
+import {useAuthStore} from "@/stores/auth.js";
+
+const authStore = useAuthStore()
+
+</script>
+
+<template>
+  <h1>Hello, {{ authStore.user }}</h1>
+  <p>{{ authStore.accessToken }}</p>
+</template>
+
+<style scoped>
+
+</style>

frontend/src/components/HomeView.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { ref } from 'vue';
+import axios from 'axios';
+import { useRouter } from 'vue-router';
+import { useAuthStore } from '@/stores/auth';
+
+const username = ref('michael');
+const errorMessage = ref(null);
+const isLoading = ref(false);
+
+const authStore = useAuthStore();
+const router = useRouter();
+
+const handleLogin = async () => {
+  isLoading.value = true;
+  errorMessage.value = null;
+
+  try {
+    console.log("Trying to login")
+    const response = await axios.post('http://localhost:8000/auth/login', {
+      username: username.value,
+    });
+    console.log(response)
+
+    const { access_token, refresh_token, user } = response.data;
+
+    authStore.setAuth({
+      accessToken: access_token,
+      refreshToken: refresh_token,
+      user,
+    });
+
+    console.log(authStore.accessToken);
+
+    await router.push({ name: 'home' });
+
+  } catch (error) {
+    if (error.response?.data?.detail) {
+      errorMessage.value = error.response.data.detail;
+    } else {
+      errorMessage.value = 'An unexpected error occurred.';
+    }
+    console.error('Login failed:', error);
+  } finally {
+    isLoading.value = false;
+  }
+};
+</script>
+
+<template>
+  <div>
+    <v-btn @click="handleLogin" :disabled="isLoading || authStore.isAuthenticated">
+      {{ isLoading ? 'Logging in...' : 'Login' }}
+    </v-btn>
+  </div>
+</template>