Merge pull request #21 from lumijiez/front-v2
Front v2
This commit was merged in pull request #21.
This commit is contained in:
Daniel
1
pom.xml
1
pom.xml
@@ -22,6 +22,7 @@
|
||||
<artifactId>spring-boot-starter-web</artifactId>
|
||||
<version>3.1.4</version>
|
||||
</dependency>
|
||||
|
||||
<dependency>
|
||||
<groupId>org.springframework.boot</groupId>
|
||||
<artifactId>spring-boot-starter-data-jpa</artifactId>
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
package com.faf223.expensetrackerfaf.config;
|
||||
|
||||
import org.springframework.context.annotation.Configuration;
|
||||
import org.springframework.web.servlet.config.annotation.CorsRegistry;
|
||||
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
|
||||
|
||||
@Configuration
|
||||
public class CorsConfig implements WebMvcConfigurer {
|
||||
|
||||
@Override
|
||||
public void addCorsMappings(CorsRegistry registry) {
|
||||
registry.addMapping("/**").allowedMethods("*");
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
package com.faf223.expensetrackerfaf.config;
|
||||
|
||||
import jakarta.servlet.*;
|
||||
import jakarta.servlet.http.HttpServletRequest;
|
||||
import jakarta.servlet.http.HttpServletResponse;
|
||||
import org.springframework.core.Ordered;
|
||||
import org.springframework.core.annotation.Order;
|
||||
import org.springframework.stereotype.Component;
|
||||
|
||||
import java.io.IOException;
|
||||
|
||||
@Component
|
||||
@Order(Ordered.HIGHEST_PRECEDENCE)
|
||||
public class CorsFilter implements Filter {
|
||||
|
||||
@Override
|
||||
public void destroy() {
|
||||
}
|
||||
|
||||
@Override
|
||||
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
|
||||
throws IOException, ServletException {
|
||||
HttpServletResponse response = (HttpServletResponse) res;
|
||||
HttpServletRequest request = (HttpServletRequest) req;
|
||||
|
||||
response.setHeader("Access-Control-Allow-Origin", "http://localhost:5173");
|
||||
response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
|
||||
response.setHeader("Access-Control-Max-Age", "3600");
|
||||
response.setHeader("Access-Control-Allow-Headers", "X-Requested-With, X-Auth-Token");
|
||||
response.setHeader("Access-Control-Allow-Credentials", "true");
|
||||
|
||||
if (!"OPTIONS".equalsIgnoreCase(request.getMethod())) {
|
||||
chain.doFilter(req, res);
|
||||
}
|
||||
}
|
||||
|
||||
@Override
|
||||
public void init(FilterConfig config) {
|
||||
}
|
||||
}
|
||||
@@ -8,6 +8,9 @@ import com.faf223.expensetrackerfaf.service.UserService;
|
||||
import lombok.RequiredArgsConstructor;
|
||||
import org.springframework.http.ResponseEntity;
|
||||
import org.springframework.security.access.prepost.PreAuthorize;
|
||||
import org.springframework.security.core.Authentication;
|
||||
import org.springframework.security.core.context.SecurityContextHolder;
|
||||
import org.springframework.security.core.userdetails.UserDetails;
|
||||
import org.springframework.validation.BindingResult;
|
||||
import org.springframework.web.bind.annotation.*;
|
||||
|
||||
@@ -33,12 +36,17 @@ public class UserController {
|
||||
}
|
||||
}
|
||||
|
||||
@GetMapping("/{userUuid}")
|
||||
public ResponseEntity<UserDTO> getUser(@PathVariable String userUuid) {
|
||||
User user = userService.getUserById(userUuid);
|
||||
@GetMapping("/getUserData")
|
||||
public ResponseEntity<UserDTO> getUser() {
|
||||
Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
|
||||
|
||||
if (authentication != null && authentication.getPrincipal() instanceof UserDetails userDetails) {
|
||||
User user = userService.getUserByEmail(userDetails.getUsername());
|
||||
if (user != null) return ResponseEntity.ok(userMapper.toDto(user));
|
||||
else return ResponseEntity.notFound().build();
|
||||
}
|
||||
return ResponseEntity.notFound().build();
|
||||
}
|
||||
|
||||
@GetMapping()
|
||||
@PreAuthorize("hasRole('ADMIN')")
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
package com.faf223.expensetrackerfaf.dto;
|
||||
|
||||
import com.faf223.expensetrackerfaf.model.ExpenseCategory;
|
||||
import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
|
||||
import lombok.AllArgsConstructor;
|
||||
import lombok.Data;
|
||||
|
||||
@@ -10,7 +9,6 @@ import java.time.LocalDate;
|
||||
|
||||
@Data
|
||||
@AllArgsConstructor
|
||||
@JsonIgnoreProperties({"expenseCategory"})
|
||||
public class ExpenseDTO {
|
||||
private long expenseId;
|
||||
private UserDTO userDTO;
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
package com.faf223.expensetrackerfaf.dto;
|
||||
|
||||
import com.faf223.expensetrackerfaf.model.IncomeCategory;
|
||||
import com.fasterxml.jackson.annotation.JsonIgnoreProperties;
|
||||
import lombok.AllArgsConstructor;
|
||||
import lombok.Data;
|
||||
|
||||
@@ -10,7 +9,6 @@ import java.time.LocalDate;
|
||||
|
||||
@Data
|
||||
@AllArgsConstructor
|
||||
@JsonIgnoreProperties({"incomeCategory"})
|
||||
public class IncomeDTO {
|
||||
private long incomeId;
|
||||
private UserDTO userDTO;
|
||||
|
||||
@@ -10,9 +10,13 @@
|
||||
"dependencies": {
|
||||
"@fortawesome/free-brands-svg-icons": "^6.4.2",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.4.2",
|
||||
"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",
|
||||
@@ -810,6 +814,21 @@
|
||||
"dequal": "^2.0.3"
|
||||
}
|
||||
},
|
||||
"node_modules/asynckit": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
|
||||
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.5.1.tgz",
|
||||
"integrity": "sha512-Q28iYCWzNHjAm+yEAot5QaAMxhMghWLFVf7rRdwhUI+c2jix2DUXjAHXVi+s1ibs3mjPO/cCgbA++3BjD0vP/A==",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.15.0",
|
||||
"form-data": "^4.0.0",
|
||||
"proxy-from-env": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/axobject-query": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
|
||||
@@ -902,6 +921,17 @@
|
||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/combined-stream": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
|
||||
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
|
||||
"dependencies": {
|
||||
"delayed-stream": "~1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/concat-map": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
|
||||
@@ -988,6 +1018,14 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/delayed-stream": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
||||
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
|
||||
"engines": {
|
||||
"node": ">=0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/dequal": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
|
||||
@@ -1349,6 +1387,38 @@
|
||||
"integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/follow-redirects": {
|
||||
"version": "1.15.3",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
|
||||
"integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://github.com/sponsors/RubenVerborgh"
|
||||
}
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=4.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"debug": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/form-data": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
|
||||
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
|
||||
"dependencies": {
|
||||
"asynckit": "^0.4.0",
|
||||
"combined-stream": "^1.0.8",
|
||||
"mime-types": "^2.1.12"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/fs.realpath": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
|
||||
@@ -1548,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",
|
||||
@@ -1693,6 +1771,25 @@
|
||||
"node": ">=10.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/mime-db": {
|
||||
"version": "1.52.0",
|
||||
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
|
||||
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/mime-types": {
|
||||
"version": "2.1.35",
|
||||
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
|
||||
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
|
||||
"dependencies": {
|
||||
"mime-db": "1.52.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/minimatch": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
|
||||
@@ -2011,6 +2108,11 @@
|
||||
"svelte": "^3.2.0 || ^4.0.0-next.0"
|
||||
}
|
||||
},
|
||||
"node_modules/proxy-from-env": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
|
||||
},
|
||||
"node_modules/punycode": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
|
||||
@@ -2040,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",
|
||||
@@ -2250,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",
|
||||
@@ -2294,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",
|
||||
|
||||
@@ -26,8 +26,12 @@
|
||||
"dependencies": {
|
||||
"@fortawesome/free-brands-svg-icons": "^6.4.2",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.4.2",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 57 KiB After Width: | Height: | Size: 28 KiB |
@@ -1,29 +1,58 @@
|
||||
<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);
|
||||
window.location.href = '/dashboard'
|
||||
} 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 +68,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">
|
||||
|
||||
@@ -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() {
|
||||
|
||||
@@ -16,5 +16,6 @@
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
min-height: 100vh;
|
||||
max-height: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -2,7 +2,14 @@
|
||||
import DashHeader from "./DashHeader.svelte";
|
||||
import DataMenu from "./DataMenu.svelte";
|
||||
import QuickInfobar from "./QuickInfobar.svelte";
|
||||
import NotificationBoard from "./NotificationBoard.svelte";
|
||||
import { getCookie } from "svelte-cookie";
|
||||
import {onMount} from "svelte";
|
||||
|
||||
onMount(() => {
|
||||
if (getCookie('access_token') === null ) {
|
||||
window.location.href = '/auth/login';
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<div id="dashboard">
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
import Graph1 from './graphs/Graph1.svelte';
|
||||
import Graph2 from './graphs/Graph2.svelte';
|
||||
import Graph3 from './graphs/Graph3.svelte';
|
||||
import Graph4 from './graphs/Graph4.svelte';
|
||||
import Graph5 from './graphs/Graph5.svelte';
|
||||
import Expenses from "./Expenses.svelte";
|
||||
import Incomes from "./Incomes.svelte";
|
||||
</script>
|
||||
|
||||
<div id="dataMenu">
|
||||
@@ -14,9 +14,9 @@
|
||||
<div id="oneVertical">
|
||||
<Graph3 />
|
||||
</div>
|
||||
<div id="twoHorizontal">
|
||||
<Graph4 />
|
||||
<Graph5 />
|
||||
<div id="dataPanel">
|
||||
<Incomes />
|
||||
<Expenses />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -34,7 +34,6 @@
|
||||
}
|
||||
|
||||
|
||||
|
||||
#twoVertical {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -53,9 +52,9 @@
|
||||
min-height:0;
|
||||
}
|
||||
|
||||
#twoHorizontal {
|
||||
#dataPanel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
align-self: stretch;
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
|
||||
@@ -0,0 +1,96 @@
|
||||
<script>
|
||||
import { onMount, afterUpdate } from 'svelte';
|
||||
import axios from 'axios';
|
||||
import { getCookie } from "svelte-cookie";
|
||||
|
||||
let data = [];
|
||||
let parentHeight;
|
||||
|
||||
onMount(async () => {
|
||||
const token = getCookie('access_token');
|
||||
|
||||
const config = {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await axios.get('http://localhost:8081/expenses/personal-expenses', config);
|
||||
data = response.data;
|
||||
parentHeight = document.querySelector('#expenseInfo').offsetHeight;
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
}
|
||||
});
|
||||
|
||||
afterUpdate(() => {
|
||||
parentHeight = document.querySelector('#expenseInfo').offsetHeight;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div id="expenseInfo" style="max-height: {parentHeight}px;">
|
||||
<h2 id="text">Expenses</h2>
|
||||
<div id="expenseList">
|
||||
<ul>
|
||||
{#each data as item}
|
||||
<li>
|
||||
{item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `}
|
||||
{item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}
|
||||
{`${item.date}`}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#text {
|
||||
padding: 0 0 10px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#expenseInfo {
|
||||
flex: 1;
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
overflow-y: auto;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: #f2f2f2;
|
||||
padding: 10px;
|
||||
border-radius: 10px 10px 0 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#expenseList {
|
||||
margin-top: 10px;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
#expenseList::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 20px;
|
||||
background-color: #f2f2f2;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
}
|
||||
|
||||
li:hover {
|
||||
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,92 @@
|
||||
<script>
|
||||
import { onMount, afterUpdate } from 'svelte';
|
||||
import axios from 'axios';
|
||||
import { getCookie } from "svelte-cookie";
|
||||
|
||||
let data = [];
|
||||
let parentHeight;
|
||||
|
||||
onMount(async () => {
|
||||
const token = getCookie('access_token');
|
||||
|
||||
const config = {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await axios.get('http://localhost:8081/incomes/personal-incomes', config);
|
||||
data = response.data;
|
||||
parentHeight = document.querySelector('#incomeInfo').offsetHeight;
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
}
|
||||
});
|
||||
|
||||
afterUpdate(() => {
|
||||
parentHeight = document.querySelector('#incomeInfo').offsetHeight;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div id="incomeInfo" style="max-height: {parentHeight}px;">
|
||||
<h2 id="text">Incomes</h2>
|
||||
<div id="incomeList">
|
||||
<ul>
|
||||
{#each data as item}
|
||||
<li>
|
||||
{item.incomeCategory ? `${item.incomeCategory.name}: ` : `${item.expenseCategory.name}: `}
|
||||
{item.incomeCategory ? `+${item.amount}$` : `-${item.amount}$`}
|
||||
{`${item.date}`}
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#text {
|
||||
padding: 0 0 10px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#incomeInfo {
|
||||
flex: 1;
|
||||
border-radius: 10px;
|
||||
margin: 10px;
|
||||
overflow-y: auto;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: #f2f2f2;
|
||||
padding: 10px;
|
||||
border-radius: 10px 10px 0 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#incomeList {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 20px;
|
||||
background-color: #f2f2f2;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
}
|
||||
|
||||
li:hover {
|
||||
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,15 +0,0 @@
|
||||
<script>
|
||||
|
||||
</script>
|
||||
|
||||
<div id="notificationBoard">
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#notificationBoard {
|
||||
display: none;
|
||||
width:0;
|
||||
height:0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,12 +1,46 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import axios from 'axios';
|
||||
import { getCookie } from "svelte-cookie";
|
||||
|
||||
let infobar1, infobar2, infobar3, infobar4;
|
||||
let totalExpenses = 0;
|
||||
let totalIncomes = 0;
|
||||
|
||||
onMount(async () => {
|
||||
const token = getCookie('access_token');
|
||||
|
||||
const config = {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
};
|
||||
|
||||
try {
|
||||
const [incomesResponse, expensesResponse] = await Promise.all([
|
||||
axios.get('http://localhost:8081/incomes/personal-incomes', config),
|
||||
axios.get('http://localhost:8081/expenses/personal-expenses', config)
|
||||
]);
|
||||
|
||||
const incomesData = incomesResponse.data;
|
||||
const expensesData = expensesResponse.data;
|
||||
|
||||
totalExpenses = expensesData.reduce((total, item) => total + item.amount, 0);
|
||||
totalIncomes = incomesData.reduce((total, item) => total + item.amount, 0);
|
||||
|
||||
infobar1.innerHTML = `<span style="font-size: larger">Total expenses:</span><br><span style="color:red;font-size: xxx-large">${totalExpenses}$`;
|
||||
infobar2.innerHTML = `<span style="font-size: larger">Total incomes:</span><br><span style="color:green;font-size: xxx-large">${totalIncomes}$</span>`;
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div id="quickInfobar">
|
||||
<div class="infobarElement">Income for this month 50$</div>
|
||||
<div class="infobarElement">Expense for this month 40$</div>
|
||||
<div class="infobarElement">Income for this month 50$</div>
|
||||
<div class="infobarElement">Expense for this month 40$</div>
|
||||
<div class="infobarElement" bind:this={infobar1}></div>
|
||||
<div class="infobarElement" bind:this={infobar2}></div>
|
||||
<div class="infobarElement" bind:this={infobar3}></div>
|
||||
<div class="infobarElement" bind:this={infobar4}></div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@@ -21,17 +55,15 @@
|
||||
width: 200px;
|
||||
min-width: 100px;
|
||||
height: 100px;
|
||||
color:white;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
background-color: #ffdde2;
|
||||
background-color: #212942;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
/* border: 1px solid black; */
|
||||
}
|
||||
|
||||
.infobarElement:hover {
|
||||
/* color:white; */
|
||||
/* background-color: black; */
|
||||
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
|
||||
}
|
||||
</style>
|
||||
@@ -1,22 +1,38 @@
|
||||
<script>
|
||||
import Chart from 'chart.js/auto';
|
||||
import { onMount } from 'svelte';
|
||||
import axios from 'axios';
|
||||
import {getCookie} from "svelte-cookie";
|
||||
|
||||
let chartValues = [20, 10, 5, 2, 20, 30, 45];
|
||||
let chartLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
let ctx;
|
||||
let chartCanvas;
|
||||
|
||||
onMount(async () => {
|
||||
|
||||
const token = getCookie('access_token');
|
||||
|
||||
const config = {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await axios.get('http://localhost:8081/incomes/personal-incomes', config);
|
||||
console.log(response.data);
|
||||
const incomeData = response.data;
|
||||
|
||||
const chartLabels = incomeData.map(item => item.incomeCategory.name);
|
||||
const chartValues = incomeData.map(item => item.amount);
|
||||
|
||||
ctx = chartCanvas.getContext('2d');
|
||||
new Chart(ctx, {
|
||||
type: 'line',
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: chartLabels,
|
||||
datasets: [{
|
||||
label: 'Revenue',
|
||||
backgroundColor: 'rgb(255, 99, 132)',
|
||||
borderColor: 'rgb(255, 99, 132)',
|
||||
data: chartValues
|
||||
}]
|
||||
},
|
||||
@@ -25,6 +41,9 @@
|
||||
maintainAspectRatio: false
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -38,8 +57,8 @@
|
||||
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
flex: 1;
|
||||
border-radius: 10px;
|
||||
margin:10px;
|
||||
background-color: #ffdde2;
|
||||
margin: 10px;
|
||||
background-color: #d3d3d3;
|
||||
}
|
||||
|
||||
#chart:hover {
|
||||
|
||||
@@ -1,48 +1,70 @@
|
||||
<script>
|
||||
import chartjs from 'chart.js/auto';
|
||||
import Chart from 'chart.js/auto';
|
||||
import { onMount } from 'svelte';
|
||||
import axios from 'axios';
|
||||
import {getCookie} from "svelte-cookie";
|
||||
|
||||
var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
|
||||
var config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ["January", "February", "March", "April", "May", "June", "July"],
|
||||
datasets: [{
|
||||
fill: false,
|
||||
data: [
|
||||
5,
|
||||
6,
|
||||
3,
|
||||
4
|
||||
]
|
||||
}, {
|
||||
label: "My Second dataset ",
|
||||
fill: false,
|
||||
data: [
|
||||
5,
|
||||
6,
|
||||
3,
|
||||
4
|
||||
]
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
title:{
|
||||
display:true,
|
||||
text: "Chart.js Line Chart - Animation Progress Bar"
|
||||
},
|
||||
maintainAspectRatio: false
|
||||
}
|
||||
};
|
||||
|
||||
let chartValues = [20, 10, 5, 2, 20, 30, 45];
|
||||
let chartLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
let ctx;
|
||||
let chartCanvas;
|
||||
|
||||
onMount(async (promise) => {
|
||||
onMount(async () => {
|
||||
|
||||
const token = getCookie('access_token');
|
||||
|
||||
const config = {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await axios.get('http://localhost:8081/expenses/personal-expenses', config);
|
||||
|
||||
const aggregatedData = {};
|
||||
|
||||
response.data.forEach(item => {
|
||||
const category = item.expenseCategory.name;
|
||||
const amount = item.amount;
|
||||
|
||||
if (aggregatedData[category]) {
|
||||
aggregatedData[category] += amount;
|
||||
} else {
|
||||
aggregatedData[category] = amount;
|
||||
}
|
||||
});
|
||||
|
||||
const chartLabels = Object.keys(aggregatedData);
|
||||
const chartValues = Object.values(aggregatedData);
|
||||
|
||||
ctx = chartCanvas.getContext('2d');
|
||||
var chart = new chartjs(ctx, config);
|
||||
new Chart(ctx, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: chartLabels,
|
||||
datasets: [{
|
||||
label: 'Revenue',
|
||||
backgroundColor: 'rgb(255, 99, 132)',
|
||||
data: chartValues
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
tooltips: {
|
||||
callbacks: {
|
||||
label: (tooltipItem) => {
|
||||
return tooltipItem.yLabel;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -56,8 +78,8 @@
|
||||
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
flex: 1;
|
||||
border-radius: 10px;
|
||||
margin:10px;
|
||||
background-color: #ffdde2;
|
||||
margin: 10px;
|
||||
background-color: #d3d3d3;
|
||||
}
|
||||
|
||||
#chart:hover {
|
||||
|
||||
@@ -1,45 +1,55 @@
|
||||
<script>
|
||||
import chartjs from 'chart.js/auto';
|
||||
import { onMount } from 'svelte';
|
||||
import axios from 'axios';
|
||||
import { getCookie } from "svelte-cookie";
|
||||
|
||||
let ctx;
|
||||
let chartCanvas;
|
||||
|
||||
var randomScalingFactor = function() {
|
||||
return Math.round(Math.random() * 100);
|
||||
onMount(async () => {
|
||||
const token = getCookie('access_token');
|
||||
|
||||
const config = {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
};
|
||||
|
||||
var config = {
|
||||
try {
|
||||
const [incomesResponse, expensesResponse] = await Promise.all([
|
||||
axios.get('http://localhost:8081/incomes/personal-incomes', config),
|
||||
axios.get('http://localhost:8081/expenses/personal-expenses', config)
|
||||
]);
|
||||
|
||||
const incomesData = incomesResponse.data;
|
||||
const expensesData = expensesResponse.data;
|
||||
|
||||
const totalIncomes = incomesData.reduce((total, item) => total + item.amount, 0);
|
||||
|
||||
const totalExpenses = expensesData.reduce((total, item) => total + item.amount, 0);
|
||||
|
||||
const chartLabels = ['Incomes', 'Expenses'];
|
||||
const chartValues = [totalIncomes, totalExpenses];
|
||||
|
||||
ctx = chartCanvas.getContext('2d');
|
||||
new chartjs(ctx, {
|
||||
type: 'pie',
|
||||
data: {
|
||||
labels: chartLabels,
|
||||
datasets: [{
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
],
|
||||
label: 'Dataset 1'
|
||||
}],
|
||||
labels: [
|
||||
"Red",
|
||||
"Orange",
|
||||
"Yellow",
|
||||
"Green",
|
||||
"Blue"
|
||||
]
|
||||
data: chartValues,
|
||||
backgroundColor: ['green', 'red'],
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false
|
||||
}
|
||||
};
|
||||
|
||||
let ctx;
|
||||
let chartCanvas;
|
||||
|
||||
onMount(async (promise) => {
|
||||
ctx = chartCanvas.getContext('2d');
|
||||
var chart = new chartjs(ctx, config);
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -53,8 +63,8 @@
|
||||
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
flex: 1;
|
||||
border-radius: 10px;
|
||||
margin:10px;
|
||||
background-color: #ffdde2;
|
||||
margin: 10px;
|
||||
background-color: #d3d3d3;
|
||||
}
|
||||
|
||||
#chart:hover {
|
||||
|
||||
@@ -1,48 +0,0 @@
|
||||
<script>
|
||||
import chartjs from 'chart.js/auto';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let chartValues = [20, 10, 5, 2, 20, 30, 45];
|
||||
let chartLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
let ctx;
|
||||
let chartCanvas;
|
||||
|
||||
onMount(async (promise) => {
|
||||
ctx = chartCanvas.getContext('2d');
|
||||
var chart = new chartjs(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: chartLabels,
|
||||
datasets: [{
|
||||
label: 'Revenue',
|
||||
backgroundColor: 'rgb(255, 99, 132)',
|
||||
borderColor: 'rgb(255, 99, 132)',
|
||||
data: chartValues
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<div id="chart">
|
||||
<canvas bind:this={chartCanvas}></canvas>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#chart {
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
flex: 1;
|
||||
border-radius: 10px;
|
||||
margin:10px;
|
||||
background-color: #ffdde2;
|
||||
}
|
||||
|
||||
#chart:hover {
|
||||
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
|
||||
}
|
||||
</style>
|
||||
@@ -1,48 +0,0 @@
|
||||
<script>
|
||||
import chartjs from 'chart.js/auto';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let chartValues = [20, 10, 5, 2, 20, 30, 45];
|
||||
let chartLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
|
||||
let ctx;
|
||||
let chartCanvas;
|
||||
|
||||
onMount(async (promise) => {
|
||||
ctx = chartCanvas.getContext('2d');
|
||||
var chart = new chartjs(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: chartLabels,
|
||||
datasets: [{
|
||||
label: 'Revenue',
|
||||
backgroundColor: 'rgb(255, 99, 132)',
|
||||
borderColor: 'rgb(255, 99, 132)',
|
||||
data: chartValues
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<div id="chart">
|
||||
<canvas bind:this={chartCanvas}></canvas>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#chart {
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
|
||||
flex: 1;
|
||||
border-radius: 10px;
|
||||
margin:10px;
|
||||
background-color: #ffdde2;
|
||||
}
|
||||
|
||||
#chart:hover {
|
||||
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
|
||||
}
|
||||
</style>
|
||||
@@ -1,4 +1,29 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import axios from 'axios';
|
||||
import {deleteCookie, getCookie} from "svelte-cookie";
|
||||
|
||||
let username;
|
||||
|
||||
onMount(async () => {
|
||||
const token = getCookie('access_token');
|
||||
|
||||
const config = {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await axios.get('http://localhost:8081/users/getUserData', config);
|
||||
const data = response.data;
|
||||
username = data.username;
|
||||
console.log(username)
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
@@ -37,7 +62,24 @@
|
||||
</div>
|
||||
|
||||
<div id="profileSpace">
|
||||
<div id="profileInfo">Profile Info</div>
|
||||
<div id="profileInfo">Hello, {username}</div>
|
||||
<div id="logout" role="button"
|
||||
tabindex="0"
|
||||
on:click={() => {
|
||||
deleteCookie('access_token');
|
||||
deleteCookie('refresh_token');
|
||||
window.location.href = '/auth/login';
|
||||
}}
|
||||
on:keydown={e => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
deleteCookie('access_token');
|
||||
deleteCookie('refresh_token');
|
||||
window.location.href = '/auth/login';
|
||||
}
|
||||
}}>
|
||||
Log out
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -81,15 +123,28 @@
|
||||
}
|
||||
|
||||
#iconImg {
|
||||
max-width: 100px;
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
#profileSpace {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color:white;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: white;
|
||||
font-weight: 900;
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
#logout {
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
transition: background 0.3s ease;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#logout:hover {
|
||||
background: rgba(128, 128, 128, 0.5);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user