byte/expensetracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Connecting front to back

Browse Source
This commit is contained in:
Daniel
2023-10-24 23:36:47 +03:00
parent 6ca8b861e4
commit d990d224ab
5 changed files with 90 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/main/java/com/faf223/expensetrackerfaf/web/package-lock.json generated
View File

@@ -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",

5
src/main/java/com/faf223/expensetrackerfaf/web/package.json
View File

@@ -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"
}
}

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

@@ -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() {
let valid = EmailValidator.validate(username);
isErrorVisible = valid ? false : true;
message = isErrorVisible ? "Invalid e-mail!" : "";
return valid;
}
function validatePassword() {
let valid = password.value != '';
isErrorVisible = valid ? false : true;
message = isErrorVisible ? "Invalid password!" : "";
return valid;
}
// function validateEmail() {
// let valid = EmailValidator.validate(username);
// isErrorVisible = !valid;
// message = isErrorVisible ? "Invalid e-mail!" : "";
// return valid;
// }
//
// function validatePassword() {
// let valid = password.value !== '';
// isErrorVisible = !valid;
// message = isErrorVisible ? "Invalid password!" : "";
// 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">

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

@@ -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() {

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

@@ -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);