fix login & add sveltestrap

src/lib/auth.ts

@@ -0,0 +1,80 @@
+import Cookies from 'js-cookie';
+
+export const CSRF_URL = 'http://localhost:8000/api/csrf/';
+export const LOGIN_URL = 'http://localhost:8000/api/login/';
+export const LOGOUT_URL = 'http://localhost:8000/api/logout/';
+export const SESSION_URL = 'http://localhost:8000/api/session/';
+export const WHOAMI_URL = 'http://localhost:8000/api/whoami/';
+
+export async function getCsrfToken(): Promise<string | null> {
+    return Cookies.get('csrftoken') || null;
+}
+
+export async function getCsrfTokenAuth(): Promise<string | null> {
+    const response = await fetch(CSRF_URL, {});
+    console.log('CSRF Token Response:', response);
+    return Cookies.get('csrftoken') || null;
+}
+
+export async function checkAuthenticated(): Promise<boolean> {
+    const csrfToken = await getCsrfTokenAuth();
+    if (!csrfToken) {
+        throw new Error('CSRF token not found');
+    }
+    const response = await fetch(SESSION_URL, {
+        credentials: 'include',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRFToken': csrfToken
+        },
+    });
+    let data = await (response as Response).json();
+    return data.isAuthenticated;
+}
+
+export async function login(username: string, password: string): Promise<void> {
+    const csrfToken = await getCsrfTokenAuth();
+    if (!csrfToken) {
+        throw new Error('CSRF token not found');
+    }
+
+    const response = await fetch(LOGIN_URL, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRFToken': csrfToken
+        },
+        body: JSON.stringify({ username, password }),
+        credentials: 'include'
+    });
+
+    if (!response.ok) {
+        throw new Error(`Login failed: ${response.statusText}`);
+    }
+
+    const data = await response.json();
+    return data;
+}
+
+export async function logout(): Promise<void> {
+    const csrfToken = await getCsrfTokenAuth();
+    if (!csrfToken) {
+        throw new Error('CSRF token not found');
+    }
+
+    const response = await fetch(LOGOUT_URL, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'X-CSRFToken': csrfToken
+        },
+        credentials: 'include'
+    });
+
+    if (!response.ok) {
+        throw new Error(`Logout failed: ${response.statusText}`);
+    }
+
+    console.log('Logout successful');
+    return;
+}

src/lib/prediction.ts

@@ -2,6 +2,9 @@ import { writable } from "svelte/store"
 import type { LatLngExpression } from "leaflet";
 import L from "leaflet";
 
+import { getCsrfToken } from "./auth";
+
+
 interface TrajectoryPoint {
     altitude: number;
     datetime: string;
@@ -104,12 +107,19 @@ export const getForecast = async (flightParameters: Record<string, any>, startDa
 
     try {
         // Example POST request - replace with your actual API endpoint
-        const response = await fetch('http://127.0.0.1:8000/api/predictions', {
+        const csrfToken = await getCsrfToken();
+        if (!csrfToken) {
+            throw new Error('CSRF token not found');
+        }
+
+        const response = await fetch('http://localhost:8000/api/predictions', {
             method: 'POST',
             headers: {
-            'Content-Type': 'application/json',
+                'Content-Type': 'application/json',
+                'X-CSRFToken': csrfToken
             },
-            body: JSON.stringify(flightParameters)
+            body: JSON.stringify(flightParameters),
+            credentials: 'include'
         });
 
         if (!response.ok) {