Refactor authentication and registration processes to use Axios; update API...

Refactor authentication and registration processes to use Axios; update API endpoints and improve error handling

frontend/src/stores/auth.ts

@@ -28,7 +28,7 @@ export const useAuthStore = defineStore('auth', {
   actions: {
     async login(username: string, password: string, router: Router | null = null): Promise<void> {
       try {
-        const response = await api.post('/auth/login', {
+        const response = await api.post('/login', {
           username,
           password,
         })
@@ -64,7 +64,7 @@ export const useAuthStore = defineStore('auth', {
       }
 
       try {
-        const response = await api.get('/auth/me')
+        const response = await api.get('/user')
         this.user = response.data
         this.isAuthenticated = true
       } catch (error) {

frontend/src/views/BuildingsView.vue

@@ -2,6 +2,7 @@
 import { ref } from 'vue'
 import BauCard from '../components/BauCard.vue'
 import RoomCard from '../components/RoomCard.vue'
+import api from '@/services/apiClient'
 
 const buildings = [
     {
@@ -27,7 +28,7 @@ const buildings = [
         title: 'Bau 8',
         description: 'Informatik und IT-Räume',
         image: new URL('@/assets/bau-8.png', import.meta.url).href,
-  }
+    },
 ]
 
 const selectedBuildingId = ref<string | null>(null)
@@ -42,16 +43,13 @@ async function loadRooms(buildingId: string) {
     error.value = null
 
     try {
-    const response = await fetch(`http://localhost:8000/api/get_rooms_from_building?building=${buildingId}`)
-    const data = await response.json()
+        const response = await api.get('/get_rooms_from_building', {
+            params: { building: buildingId },
+        })
 
-    if (response.ok) {
-      rooms.value = data.rooms
-    } else {
-      throw new Error(data.detail || 'Fehler beim Laden der Räume')
-    }
+        rooms.value = response.data.rooms
     } catch (err: any) {
-    error.value = err.message
+        error.value = err.response?.data?.detail || err.message || 'Fehler beim Laden der Räume'
     } finally {
         isLoading.value = false
     }
@@ -90,12 +88,14 @@ async function loadRooms(buildingId: string) {
     display: flex;
     padding: 2rem;
     gap: 2rem;
-  align-items: flex-start; /* wichtige Ergänzung */
+    align-items: flex-start;
+    /* wichtige Ergänzung */
 }
 
 .building-grid {
     display: flex;
-  flex-direction: column; /* Gebäude untereinander */
+    flex-direction: column;
+    /* Gebäude untereinander */
     gap: 1.5rem;
     flex-shrink: 0;
 }

frontend/src/views/ChartView.vue

-<template>
-  <div class="chart-view">
-    <h2>Daten für Raum: {{ room }}</h2>
-
-    <div class="time-form">
-      <label>
-        Start:
-        <input class="datetime" type="datetime-local" v-model="start" />
-      </label>
-      <label>
-        Stop:
-        <input class="datetime" type="datetime-local" v-model="stop" />
-      </label>
-      <button @click="loadData">Zeitraum aktualisieren</button>
-      <button @click="loadDataWithDefaultWindow" class="default-btn">Zeige die letzte Woche</button>
-    </div>
-
-    <div class="chart-grid">
-      <ChartCard
-        title="CO₂ Verlauf"
-        :labels="displayLabels"
-        :data="co2Data"
-        borderColor="#ff6384"
-      />
-      <ChartCard
-        title="Temperatur Verlauf"
-        :labels="displayLabels"
-        :data="temperatureData"
-        borderColor="#36a2eb"
-      />
-      <ChartCard
-        title="Luftfeuchtigkeit Verlauf"
-        :labels="displayLabels"
-        :data="humidityData"
-        borderColor="#4bc0c0"
-      />
-    </div>
-  </div>
-</template>
-
 <script lang="ts">
 import { defineComponent, ref, onMounted, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import ChartCard from '../components/ChartCard.vue'
+import api from '@/services/apiClient' // Axios instance
 
 export default defineComponent({
     name: 'ChartView',
@@ -58,16 +19,12 @@ export default defineComponent({
         const start = ref('')
         const stop = ref('')
 
-    // Computed property for displaying max 6 labels
         const displayLabels = computed(() => {
             const total = labels.value.length
             if (total <= 6) return labels.value
-      const result: string[] = []
-      for (let i = 0; i < total; i++) {
-        result.push('')
-      }
+            const result: string[] = Array(total).fill('')
             for (let i = 0; i < 6; i++) {
-        const idx = Math.round(i * (total - 1) / 5)
+                const idx = Math.round((i * (total - 1)) / 5)
                 result[idx] = labels.value[idx]
             }
             return result
@@ -85,7 +42,6 @@ export default defineComponent({
             const now = new Date()
             const weekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)
 
-      // Format dates properly for datetime-local inputs
             const formatForInput = (date: Date) => {
                 const year = date.getFullYear()
                 const month = ('0' + (date.getMonth() + 1)).slice(-2)
@@ -110,16 +66,16 @@ export default defineComponent({
                 return
             }
 
-      const url = `http://localhost:8000/api/room_data_range?room=${encodeURIComponent(
-        room
-      )}&start=${startISO}&stop=${stopISO}`
-
             try {
-        const response = await fetch(url)
-        if (!response.ok) throw new Error('Fehler beim Laden')
+                const response = await api.get('/room_data_range', {
+                    params: {
+                        room,
+                        start: startISO,
+                        stop: stopISO,
+                    },
+                })
 
-        const json = await response.json()
-        const entries = Object.entries(json.data).sort(
+                const entries = Object.entries(response.data.data).sort(
                     ([a], [b]) => new Date(a).getTime() - new Date(b).getTime()
                 )
 
@@ -132,18 +88,14 @@ export default defineComponent({
                     })
                 )
                 co2Data.value = entries.map(([, values]: any) => Number(values.co2))
-        temperatureData.value = entries.map(([, values]: any) =>
-          Number(values.temperature)
-        )
-        humidityData.value = entries.map(([, values]: any) =>
-          Number(values.humidity)
-        )
-      } catch (err) {
+                temperatureData.value = entries.map(([, values]: any) => Number(values.temperature))
+                humidityData.value = entries.map(([, values]: any) => Number(values.humidity))
+            } catch (err: any) {
                 console.error('❌ Fehler beim Laden der Daten:', err)
+                alert('Fehler beim Laden der Daten')
             }
         }
 
-    // Function to load data with default last week window
         async function loadDataWithDefaultWindow() {
             setDefaultTimeWindow()
             await loadData()
@@ -168,55 +120,3 @@ export default defineComponent({
     },
 })
 </script>
-
-<style scoped>
-.chart-view {
-  padding: 2rem;
-  color: #1a1a1a; 
-}
-
-.time-form {  
-  display: flex;
-  gap: 1rem;
-  margin-bottom: 2rem;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.time-form input {
-  padding: 0.5rem;
-  font-size: 1rem;
-  border-radius: 5px;
-}
-
-.time-form button {
-  background: #007bff;
-  color: white;
-  padding: 0.6rem 1.2rem;
-  border: none;
-  border-radius: 4px;
-  font-weight: bold;
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-}
-
-.time-form button:hover {
-  background-color: #0056b3;
-}
-
-.time-form .default-btn {
-  background: #28a745;
-}
-
-.time-form .default-btn:hover {
-  background-color: #218838;
-}
-
-.chart-grid {
-    display: flex;
-    flex-wrap: nowrap;
-    gap: 2rem;
-    justify-content: flex-start;
-    flex-direction: row;
-}
-</style>

frontend/src/views/RegisterView.vue

 <script lang="ts">
-import { getCSRFToken } from '../stores/auth'
+import api from '@/services/apiClient' // Your axios instance
 
 export default {
     data() {
@@ -13,29 +13,23 @@ export default {
     methods: {
         async register() {
             try {
-                const response = await fetch('http://localhost:8000/api/register', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'X-CSRFToken': getCSRFToken(),
-                    },
-                    body: JSON.stringify({
-                        email: this.email,
+                const response = await api.post('/register', {
+                    username: this.email,
                     password: this.password,
-                    }),
-                    credentials: 'include',
                 })
-                const data = await response.json()
-                if (response.ok) {
+
+                if (response.status === 200) {
                     this.success = 'Registration successful! Please log in.'
                     setTimeout(() => {
                         this.$router.push('/login')
                     }, 1000)
                 } else {
-                    this.error = data.error || 'Registration failed'
+                    this.error = response.data.error || 'Registration failed'
                 }
-            } catch (err) {
-                this.error = 'An error occurred during registration: ' + err
+            } catch (err: any) {
+                this.error =
+                    err.response?.data?.error ||
+                    'An error occurred during registration: ' + err.message
             }
         },
     },
@@ -46,7 +40,9 @@ export default {
     <div class="register-container">
         <div class="register-card">
             <h1>Registrieren</h1>
-      <p class="intro">Erstelle ein Konto, um Zugriff auf Sensor- und Raumdaten zu erhalten.</p>
+            <p class="intro">
+                Erstelle ein Konto, um Zugriff auf Sensor- und Raumdaten zu erhalten.
+            </p>
 
             <form @submit.prevent="register">
                 <div class="form-group">
@@ -80,7 +76,6 @@ export default {
     </div>
 </template>
 
-
 <style scoped>
 .register-container {
     display: flex;

frontend/src/views/RoomNavView.vue

 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { getCSRFToken } from '../stores/auth'
 import RoomCard from '../components/RoomCard.vue'
+import api from '@/services/apiClient' // Custom Axios instance
 
 const rooms = ref<string[]>([])
 const error = ref<string | null>(null)
 
 const fetchRooms = async () => {
     try {
-    const response = await fetch('http://localhost:8000/api/get_rooms', {
-      headers: {
-        'Content-Type': 'application/json',
-        'X-CSRFToken': getCSRFToken(),
-      },
-      credentials: 'include',
-    })
-
-    const data = await response.json()
-
-    if (response.ok && data.rooms) {
-      rooms.value = data.rooms
+        const response = await api.get('/get_rooms')
+
+        if (response.data.rooms) {
+            rooms.value = response.data.rooms
         } else {
             error.value = 'Fehler beim Laden der Räume.'
         }
-  } catch (err) {
-    error.value = 'Serverfehler: ' + err
+    } catch (err: any) {
+        error.value = err.response?.data?.detail || 'Serverfehler: ' + err.message
     }
 }