Connecting front to back

src/main/java/com/faf223/expensetrackerfaf/web/package-lock.json

@@ -13,7 +13,10 @@
 				"axios": "^1.5.1",
 				"chart.js": "^4.4.0",
 				"email-validator": "^2.0.4",
-				"svelte-fa": "^3.0.4"
+				"js-cookie": "^3.0.5",
+				"svelte-cookie": "^1.0.1",
+				"svelte-fa": "^3.0.4",
+				"svelte-spa-router": "^3.3.0"
 			},
 			"devDependencies": {
 				"@fontsource/fira-mono": "^4.5.10",
@@ -1615,6 +1618,14 @@
 			"integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
 			"dev": true
 		},
+		"node_modules/js-cookie": {
+			"version": "3.0.5",
+			"resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+			"integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+			"engines": {
+				"node": ">=14"
+			}
+		},
 		"node_modules/js-yaml": {
 			"version": "4.1.0",
 			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
@@ -2131,6 +2142,14 @@
 				}
 			]
 		},
+		"node_modules/regexparam": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/regexparam/-/regexparam-2.0.1.tgz",
+			"integrity": "sha512-zRgSaYemnNYxUv+/5SeoHI0eJIgTL/A2pUtXUPLHQxUldagouJ9p+K6IbIZ/JiQuCEv2E2B1O11SjVQy3aMCkw==",
+			"engines": {
+				"node": ">=8"
+			}
+		},
 		"node_modules/resolve-from": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -2341,6 +2360,11 @@
 				"node": ">=16"
 			}
 		},
+		"node_modules/svelte-cookie": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/svelte-cookie/-/svelte-cookie-1.0.1.tgz",
+			"integrity": "sha512-c4cXLMeG7vlAk3Q5axjxlppMJgeLLWd/6cCvo1wEL6ZwEueVHAP71SBRi9r5XmLYnCYr7eAqlK6NrYT/29KuKQ=="
+		},
 		"node_modules/svelte-eslint-parser": {
 			"version": "0.33.1",
 			"resolved": "https://registry.npmjs.org/svelte-eslint-parser/-/svelte-eslint-parser-0.33.1.tgz",
@@ -2385,6 +2409,17 @@
 				"svelte": "^3.19.0 || ^4.0.0"
 			}
 		},
+		"node_modules/svelte-spa-router": {
+			"version": "3.3.0",
+			"resolved": "https://registry.npmjs.org/svelte-spa-router/-/svelte-spa-router-3.3.0.tgz",
+			"integrity": "sha512-cwRNe7cxD43sCvSfEeaKiNZg3FCizGxeMcf7CPiWRP3jKXjEma3vxyyuDtPOam6nWbVxl9TNM3hlE/i87ZlqcQ==",
+			"dependencies": {
+				"regexparam": "2.0.1"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/ItalyPaleAle"
+			}
+		},
 		"node_modules/text-table": {
 			"version": "0.2.0",
 			"resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",

src/main/java/com/faf223/expensetrackerfaf/web/package.json

@@ -29,6 +29,9 @@
 		"axios": "^1.5.1",
 		"chart.js": "^4.4.0",
 		"email-validator": "^2.0.4",
-		"svelte-fa": "^3.0.4"
+		"js-cookie": "^3.0.5",
+		"svelte-cookie": "^1.0.1",
+		"svelte-fa": "^3.0.4",
+		"svelte-spa-router": "^3.3.0"
 	}
 }

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/auth/login/LoginForm.svelte

@@ -1,29 +1,57 @@
 <script>
     import * as EmailValidator from 'email-validator';
+    import axios from "axios";
+    import {onMount} from "svelte";
+    import { getCookie, setCookie } from 'svelte-cookie';
 
     let isErrorVisible = false;
     let username, password;
     let message = ""
 
-    function submitForm(event) {
+    onMount(async () => {
+        console.log("Mounted");
+        const access_token = getCookie('access_token');
+        const refresh_token = getCookie('refresh_token');
+        if (access_token && refresh_token) {
+            window.location.href = '/dashboard';
+        }
+    });
+
+    async function submitForm(event) {
         event.preventDefault();
         console.log("Tried to submit!");
-        console.log("Valid? ", (validateEmail() && validatePassword() ? "Yes" : "No"));
+        console.log(username);
+        console.log(password);
+        try {
+            const response = await axios.post('http://localhost:8081/api/v1/auth/authenticate', {
+                email: username,
+                password: password,
+            });
+
+            const { access_token, refresh_token } = response.data;
+
+            // Save the tokens in cookies
+            setCookie('access_token', access_token);
+            setCookie('refresh_token', refresh_token);
+            console.log(access_token, refresh_token);
+        } catch (error) {
+            console.error('Login failed:', error);
+        }
     }
 
-    function validateEmail() {
+    // function validateEmail() {
-        let valid = EmailValidator.validate(username);
+    //     let valid = EmailValidator.validate(username);
-        isErrorVisible = valid ? false : true;
+    //     isErrorVisible = !valid;
-        message = isErrorVisible ? "Invalid e-mail!" : "";
+    //     message = isErrorVisible ? "Invalid e-mail!" : "";
-        return valid;
+    //     return valid;
-    }
+    // }
-
+    //
-    function validatePassword() {
+    // function validatePassword() {
-        let valid = password.value != '';
+    //     let valid = password.value !== '';
-        isErrorVisible = valid ? false : true;
+    //     isErrorVisible = !valid;
-        message = isErrorVisible ? "Invalid password!" : "";
+    //     message = isErrorVisible ? "Invalid password!" : "";
-        return valid;
+    //     return valid;
-    }
+    // }
 
 </script>
 
@@ -39,7 +67,7 @@
                 event => {username = event.target.value}
             }>
             <input id="passwordInput" type="password" name="password" placeholder="Password" autocomplete="off" on:input={
-                event => {password = event.target.password}
+                event => {password = event.target.value}
             }>
             <a href="/auth/recovery" class="recoveryPass">Forgot your password?</a>
             <input type="submit" value="Sign in" class="submitButton">

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/auth/register/RegisterForm.svelte

@@ -8,7 +8,7 @@
     function submitForm(event) {
         event.preventDefault();
         console.log("Tried to submit!");
-        console.log("Valid? ", (validateEmail() && validateUsername() && va && validatePassword() ? "Yes" : "No"));
+        console.log("Valid? ", (validateEmail() && validateUsername() && validatePassword() ? "Yes" : "No"));
     }
 
     function validateEmail() {

src/main/java/com/faf223/expensetrackerfaf/web/src/routes/dashboard/board/graphs/Graph1.svelte

@@ -2,20 +2,23 @@
 	import Chart from 'chart.js/auto';
 	import { onMount } from 'svelte';
 	import axios from 'axios';
+	import {getCookie} from "svelte-cookie";
 
 	let ctx;
 	let chartCanvas;
 
 	onMount(async () => {
+
+		const token = getCookie('access_token');
 		const config = {
 			headers: {
-				'Authorization': `Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJkYW4uYmFsYW5AZ21haWwuY29tIiwiaWF0IjoxNjk3NzQ0MjY3LCJleHAiOjE2OTc4MzA2Njd9.hzbEDDuOVCY_EQAA8xGlJskQ2FQjw8o0CtFKB1dKYOU`
+				'Authorization': `Bearer ${token}`
 			}
 		};
 
 		try {
 			const response = await axios.get('http://localhost:8081/incomes/00112233-4455-6677-8899-aabbccddeeaa', config);
-			const incomeData = response.data; // Assuming the response is an array of income data
+			const incomeData = response.data;
 
 			const chartLabels = incomeData.map(item => item.category.categoryName);
 			const chartValues = incomeData.map(item => item.amount);