diff --git a/.env.production b/.env.production
index 4f7a45a51fe6a01d024e88de7c6bdeae3bda7c61..3d7d01972acd3afd07b4a57280af4d3ed501f8de 100644
--- a/.env.production
+++ b/.env.production
@@ -1 +1 @@
-VITE_APP_API_URL=http://backend:8080
\ No newline at end of file
+VITE_APP_API_URL=https://api.sparesti.org
\ No newline at end of file
diff --git a/README.md b/README.md
index 78a07bc472ae4358bfec024b00a6497fc1e052ba..d6f2ace929cdd86a1f312ef1912355da5662d09b 100644
--- a/README.md
+++ b/README.md
@@ -5,6 +5,7 @@ The frontend of sparesti.app. SpareSti is designed to make saving fun. The app i
## Links
+- **Website**: [https://sparesti.org/](https://sparesti.org/login)
- **Backend**: [https://gitlab.stud.idi.ntnu.no/idatt2106-2024-07/backend](https://gitlab.stud.idi.ntnu.no/idatt2106-2024-07/backend)
## Recommended IDE Setup
diff --git a/src/App.vue b/src/App.vue
index 3e11f067af7be7944457f7bc96e765d8abdf0dea..d80fae0b5000eaab01e06674f5084b3da957048d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,6 @@
<script setup lang="ts">
import { RouterView } from 'vue-router'
import ErrorBoundaryCatcher from '@/components/Exceptions/ErrorBoundaryCatcher.vue';
-let apiUrl = import.meta.env.VITE_APP_API_URL;
-console.log("apiUrl: ", apiUrl);
</script>
<template>
diff --git a/src/components/BaseComponents/NavBar.vue b/src/components/BaseComponents/NavBar.vue
index 6ef042d12b0a9af2f325092819b6c20d922a1a73..b8c859933e973622feae7e356a3d8c0fd5bab710 100644
--- a/src/components/BaseComponents/NavBar.vue
+++ b/src/components/BaseComponents/NavBar.vue
@@ -343,10 +343,8 @@ function toLogout() {
* Calls the getNotifications function when the component is mounted.
*/
onMounted(() => {
- getNotifications();
+ getNotifications()
})
-
-
</script>
<style scoped>
.navbar-brand {
diff --git a/src/components/Friends/UserFriends.vue b/src/components/Friends/UserFriends.vue
index 8cad2f898a1f71ec35b8fd5b740755e887481f83..d83a13ef9e201ef83adafbc15810d385abae0b1c 100644
--- a/src/components/Friends/UserFriends.vue
+++ b/src/components/Friends/UserFriends.vue
@@ -19,7 +19,7 @@
<div class="card card-one">
<div class="header">
<div v-if="friend.profileImage" class="avatar">
- <img :src="'http://localhost:8080/api/images/' + friend.profileImage" alt="">
+ <img :src="apiUrl + '/api/images/' + friend.profileImage" alt="">
</div>
<div v-else class="avatar">
<img :src="'../src/assets/userprofile.png'" alt="">
@@ -53,7 +53,7 @@
<div v-if="elementsInFriendRequest" id="requests">
<div class="request" v-for="(friend) in friendRequests" :key="friend.id">
<div v-if="friend.profileImage !== null"><img id="profilePicture"
- :src="'http://localhost:8080/api/images/' + friend.profileImage" alt="bruker"
+ :src="apiUrl + '/api/images/' + friend.profileImage" alt="bruker"
class="profile-photo-lg"></div>
<div v-else><img id="profilePicture" :src="'../src/assets/userprofile.png'" alt="bruker"
class="profile-photo-lg"></div>
@@ -86,7 +86,7 @@
<div class="row d-flex align-items-center">
<div class="col-md-2 col-sm-2">
<div v-if="user.profileImage !== null"><img id="profilePicture"
- :src="'http://localhost:8080/api/images/' + user.profileImage"
+ :src="apiUrl + '/api/images/' + user.profileImage"
alt="bruker" class="profile-photo-lg"></div>
<div v-else><img id="profilePicture" :src="'../src/assets/userprofile.png'"
alt="bruker" class="profile-photo-lg"></div>
@@ -123,6 +123,8 @@ import { useRouter } from 'vue-router';
import { FriendService, UserService } from '@/api';
import handleUnknownError from '@/components/Exceptions/unkownErrorHandler';
+let apiUrl = import.meta.env.VITE_APP_API_URL;
+
const router = useRouter();
// Declaring reactive variables
diff --git a/src/components/Settings/SettingsAccount.vue b/src/components/Settings/SettingsAccount.vue
index aa0a5c9b439b208be6d5e37a58c60b68e67ac7bb..0bbead13e63ea5ac614bceaf16356575f3fe74eb 100644
--- a/src/components/Settings/SettingsAccount.vue
+++ b/src/components/Settings/SettingsAccount.vue
@@ -83,7 +83,7 @@ onMounted(() => {
<p data-cy="change-email-msg-error" class="text-danger">{{ errorMsg }}</p>
<p data-cy="change-email-msg-confirm" class="text-success">{{ confirmationMsg }}</p>
<br>
- <button data-cy="change-email-btn" type="submit" class="btn btn-primary">Endre
+ <button data-cy="change-email-btn" type="submit" class="btn btn-primary classyButton">Endre
Informasjon</button>
<hr>
<div class="form-group">
@@ -94,3 +94,20 @@ onMounted(() => {
</form>
</div>
</template>
+
+<style scoped>
+ .classyButton {
+ background-color: #003A58;
+ border: #003A58;
+ }
+
+ .classyButton:hover {
+ background-color: #003b58ec;
+ border: #003A58;
+ }
+
+ .classyButton:active {
+ background-color: #003b58d6;
+ border: #003A58;
+ }
+</style>
diff --git a/src/components/Settings/SettingsBank.vue b/src/components/Settings/SettingsBank.vue
index ca3a0fb781a95d0df415b1aeec11ca541feeb89f..c660ba3e6d4416fdfb73601e216a7fdede474b1b 100644
--- a/src/components/Settings/SettingsBank.vue
+++ b/src/components/Settings/SettingsBank.vue
@@ -10,7 +10,7 @@
invalid-message="Vennligst skriv inn din brukskonto" />
</div>
<br>
- <button data-cy="update-spending-btn" type="submit" class="btn btn-primary">Oppdater
+ <button data-cy="update-spending-btn" type="submit" class="btn btn-primary classyButton">Oppdater
brukskonto</button>
</form>
<br>
@@ -22,7 +22,7 @@
invalid-message="Vennligst skriv inn din sparekonto" />
</div>
<br>
- <button data-cy="update-savings-btn" type="submit" class="btn btn-primary">Oppdater
+ <button data-cy="update-savings-btn" type="submit" class="btn btn-primary classyButton">Oppdater
sparekonto</button>
</form>
<hr>
@@ -129,4 +129,21 @@ async function getAccountInfo() {
handleUnknownError(err)
}
}
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+ .classyButton {
+ background-color: #003A58;
+ border: #003A58;
+ }
+
+ .classyButton:hover {
+ background-color: #003b58ec;
+ border: #003A58;
+ }
+
+ .classyButton:active {
+ background-color: #003b58d6;
+ border: #003A58;
+ }
+</style>
\ No newline at end of file
diff --git a/src/components/Settings/SettingsProfile.vue b/src/components/Settings/SettingsProfile.vue
index 47fc3fe8cf483559220d0c0a204f45a2be3bd11b..fcdebadb865c7909d9ad52c7e678fd7d90b6e71e 100644
--- a/src/components/Settings/SettingsProfile.vue
+++ b/src/components/Settings/SettingsProfile.vue
@@ -5,6 +5,8 @@ import { useUserInfoStore } from "@/stores/UserStore";
import { UserService, ImageService } from '@/api';
import type { UserUpdateDTO } from '@/api';
+let apiUrl = import.meta.env.VITE_APP_API_URL;
+
const firstNameRef = ref()
const surnameRef = ref('')
const emailRef = ref('')
@@ -69,7 +71,7 @@ const uploadImage = async (file: any) => {
try {
const response = await ImageService.uploadImage({ formData });
- iconSrc.value = "http://localhost:8080/api/images/" + response;
+ iconSrc.value = apiUrl + "/api/images/" + response;
const updateUserPayload: UserUpdateDTO = {
profileImage: response,
@@ -96,7 +98,7 @@ async function setupForm() {
surnameRef.value = response.lastName;
}
if (response.profileImage != null) {
- iconSrc.value = "http://localhost:8080/api/images/" + response.profileImage;
+ iconSrc.value = apiUrl + "/api/images/" + response.profileImage;
} else {
iconSrc.value = "../src/assets/userprofile.png";
}
@@ -145,7 +147,7 @@ onMounted(() => {
style="display: none;" />
<img :src="iconSrc" alt="Brukeravatar" style="width: 200px; height: 200px;">
<div class="mt-2">
- <button type="button" class="btn btn-primary" @click="triggerFileUpload"><img
+ <button type="button" class="btn btn-primary classyButton" @click="triggerFileUpload"><img
src="../../assets/icons/download.svg"> Last opp bilde</button>
</div>
</div>
@@ -161,18 +163,9 @@ onMounted(() => {
placeholder="Skriv inn ditt etternavn" invalid-message="Vennligst skriv inn ditt etternavn" />
</div>
<br>
- <button data-cy="profile-submit-btn" type="submit" class="btn btn-primary">Oppdater
+ <button data-cy="profile-submit-btn" type="submit" class="btn btn-primary classyButton">Oppdater
profil</button>
</form>
- <hr>
- <div>
- <h6>Stilsett din profil banner</h6>
- <div class="bannerHolder">
- <div v-for="x in imageRange" :key="x">
- <img :src="'http://localhost:8080/api/images/' + x" style="width: 400px; height: 40px; margin: 10px">
- </div>
- </div>
- </div>
</div>
</template>
@@ -192,4 +185,19 @@ onMounted(() => {
flex-wrap: wrap;
margin-top: 20px;
}
+
+.classyButton {
+ background-color: #003A58;
+ border: #003A58;
+ }
+
+ .classyButton:hover {
+ background-color: #003b58ec;
+ border: #003A58;
+ }
+
+ .classyButton:active {
+ background-color: #003b58d6;
+ border: #003A58;
+ }
</style>
\ No newline at end of file
diff --git a/src/components/Settings/SettingsSecurity.vue b/src/components/Settings/SettingsSecurity.vue
index e5d72a453b64d06e3d5f528b5c85f64bcfeb79c2..e0bbe2433dfc8908fc960ee8116c2cea4a65f593 100644
--- a/src/components/Settings/SettingsSecurity.vue
+++ b/src/components/Settings/SettingsSecurity.vue
@@ -23,7 +23,7 @@
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{4,16}" label="Bekreft nytt passord" placeholder="Skriv inn passord"
invalid-message="Passordet må være mellom 4 og 16 tegn og inneholde en stor bokstav, en liten bokstav og et tall" />
</div>
- <button data-cy="update-password-btn" type="submit" class="btn btn-primary">Oppdater
+ <button data-cy="update-password-btn" type="submit" class="btn btn-primary classyButton">Oppdater
passord</button>
<button data-cy="reset-fields-btn" type="reset" class="btn btn-light">Tilbakestill
endringer</button>
@@ -96,4 +96,21 @@ const handleSubmit = async () => {
console.error(err)
}
}
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+ .classyButton {
+ background-color: #003A58;
+ border: #003A58;
+ }
+
+ .classyButton:hover {
+ background-color: #003b58ec;
+ border: #003A58;
+ }
+
+ .classyButton:active {
+ background-color: #003b58d6;
+ border: #003A58;
+ }
+</style>
\ No newline at end of file
diff --git a/src/components/Shop/ItemShop.vue b/src/components/Shop/ItemShop.vue
index c03065fc2d3d0ceb211108d0ecb0a03539830717..6a9c787ee254caf667008977ff1221140a015a03 100644
--- a/src/components/Shop/ItemShop.vue
+++ b/src/components/Shop/ItemShop.vue
@@ -37,7 +37,7 @@
<div class="category row mb-2 m-2">
<div v-for="product in products" :key="product.id" class="card text-center d-flex justify-content-center align-items-center"
style="width: 8rem; border: none">
- <img :src="`http://localhost:8080/api/images/${product.imageId}`" style="width: 100px; height: 100px;" class="card-img-top" alt="..." />
+ <img :src="apiUrl + `/api/images/${product.imageId}`" style="width: 100px; height: 100px;" class="card-img-top" alt="..." />
<div class="card-body">
<h5 class="card-title">{{ product.itemName }}</h5>
<h6>{{ product.price }}<img src="../../assets/items/pigcoin.png" style="width: 2rem" /></h6>
@@ -98,88 +98,94 @@
</div>
</template>
-<script setup lang="ts">
-import ShopButton from '@/components/Shop/ShopButton.vue';
-import { ref, onMounted } from 'vue';
-import { UserService } from '@/api';
-import { useUserInfoStore } from '@/stores/UserStore';
-import { ItemService } from '@/api';
-import handleUnknownError from '@/components/Exceptions/unkownErrorHandler';
+ <script setup lang="ts">
+ import ShopButton from '@/components/Shop/ShopButton.vue';
+ import { ref, onMounted } from 'vue';
+ import { UserService } from '@/api';
+ import { useUserInfoStore } from '@/stores/UserStore';
+ import { ItemService } from '@/api';
+ import handleUnknownError from '@/components/Exceptions/unkownErrorHandler';
-const products = ref([] as any);
-const points = ref();
+ let apiUrl = import.meta.env.VITE_APP_API_URL;
+ const products = ref([] as any);
+ const points = ref();
-/**
- * Retrieves the store's products and updates the products list.
- */
-const getStore = async () => {
- try {
- const response = await ItemService.getStore();
- products.value = response;
- } catch (error) {
- handleUnknownError(error);
+ /**
+ * Retrieves the store's products and updates the products list.
+ */
+ const getStore = async () => {
+ try {
+ const response = await ItemService.getStore();
+ products.value = response;
+ } catch (error) {
+ handleUnknownError(error);
+ console.log(error);
+ }
}
-}
-/**
- * Retrieves the user's current points and updates the points reference.
- */
-const getPoints = async () => {
- try {
- const response = await UserService.getUser();
- points.value = response.point?.currentPoints;
- } catch (error) {
- handleUnknownError(error);
+ /**
+ * Retrieves the user's current points and updates the points reference.
+ */
+ const getPoints = async () => {
+ try {
+ const response = await UserService.getUser();
+ points.value = response.point?.currentPoints;
+ } catch (error) {
+ handleUnknownError(error);
+ console.log(error);
+ }
}
-}
-/**
- * Buys an item with the specified item ID.
- * Sends a request to buy the item, then refreshes the store and points information.
- *
- * @param {number} itemId - The ID of the item to buy.
- */
-const buyItem = async (itemId: number) => {
- try {
- const response = await ItemService.buyItem({ itemId: itemId });
- await getStore();
- await getPoints();
- } catch (error) {
- handleUnknownError(error);
+ /**
+ * Buys an item with the specified item ID.
+ * Sends a request to buy the item, then refreshes the store and points information.
+ *
+ * @param {number} itemId - The ID of the item to buy.
+ */
+ const buyItem = async (itemId: number) => {
+ try {
+ await ItemService.buyItem({ itemId: itemId });
+ await getStore();
+ await getPoints();
+ } catch (error) {
+ handleUnknownError(error);
+ console.log(error);
+ }
}
-}
-/**
- * Buys a premium subscription for the user.
- * Sends a request to update the user's subscription level to 'PREMIUM'.
- * Updates the user's subscription level in the store.
- */
-const buyPremium = async () => {
- try {
- await UserService.updateSubscriptionLevel({ subscriptionLevel: 'PREMIUM' });
- useUserInfoStore().setUserInfo({
- subscriptionLevel: 'PREMIUM',
- })
- } catch (error) {
- handleUnknownError(error);
+ /**
+ * Buys a premium subscription for the user.
+ * Sends a request to update the user's subscription level to 'PREMIUM'.
+ * Updates the user's subscription level in the store.
+ */
+ const buyPremium = async () => {
+ try {
+ await UserService.updateSubscriptionLevel({ subscriptionLevel: 'PREMIUM' });
+ useUserInfoStore().setUserInfo({
+ subscriptionLevel: 'PREMIUM',
+ })
+ } catch (error) {
+ handleUnknownError(error);
+ console.log(error);
+ }
}
-}
-/**
- * Buys a subscription to remove ads for the user.
- * Sends a request to update the user's subscription level to 'NO_ADS'.
- * Updates the user's subscription level in the store.
- */
-const buyNoAds = async () => {
- try {
- await UserService.updateSubscriptionLevel({ subscriptionLevel: 'NO_ADS' });
- useUserInfoStore().setUserInfo({
- subscriptionLevel: 'NO_ADS',
- })
- } catch (error) {
- handleUnknownError(error);
+ /**
+ * Buys a subscription to remove ads for the user.
+ * Sends a request to update the user's subscription level to 'NO_ADS'.
+ * Updates the user's subscription level in the store.
+ */
+ const buyNoAds = async () => {
+ try {
+ await UserService.updateSubscriptionLevel({ subscriptionLevel: 'NO_ADS' });
+ useUserInfoStore().setUserInfo({
+ subscriptionLevel: 'NO_ADS',
+ })
+ } catch (error) {
+ handleUnknownError(error);
+ console.log(error);
+ }
}
-}
/**
* Generates a random code of the specified length.
diff --git a/src/components/UserProfile/ExternalProfile.vue b/src/components/UserProfile/ExternalProfile.vue
index ac4ca77bac530be7e131c193f73696615b5c9388..0baf368becd7ce4f3bd4129afd498bccabfa6d21 100644
--- a/src/components/UserProfile/ExternalProfile.vue
+++ b/src/components/UserProfile/ExternalProfile.vue
@@ -6,6 +6,8 @@ import {UserService, BadgeService, GoalService, type GoalDTO, type BadgeDTO, Fri
import { ItemService } from "@/api";
import handleUnknownError from '@/components/Exceptions/unkownErrorHandler'
+let apiUrl = import.meta.env.VITE_APP_API_URL;
+
let firstname = ref();
let lastname = ref();
const imageUrl = ref(`../src/assets/userprofile.png`);
@@ -46,7 +48,7 @@ async function setupForm() {
streak.value = response.streak?.currentStreak;
}
if (response.profileImage) {
- imageUrl.value = "http://localhost:8080/api/images/" + response.profileImage;
+ imageUrl.value = apiUrl + "/api/images/" + response.profileImage;
}
getInventory();
getBadges();
@@ -195,7 +197,7 @@ const removeFriend = () => {
<div v-if="hasInventory" class="scrolling-wrapper-badges row flex-row flex-nowrap mt-2 pb-2 pt-2">
<div v-for="product in inventory" :key="product.id" class="card text-center"
style="width: 12rem; border: none; cursor: pointer; margin: 1rem; border: 2px solid black">
- <img :src="`http://localhost:8080/api/images/${product.imageId}`" class="card-img-top"
+ <img :src="apiUrl + `/api/images/${product.imageId}`" class="card-img-top"
alt="..." />
<div class="card-body">
<h5 class="card-title">{{ product.itemName }}</h5>
@@ -219,7 +221,7 @@ const removeFriend = () => {
style="width: 12rem; border: none; cursor: pointer; margin: 1rem;
border: 2px solid black" data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-custom-class="custom-tooltip" :data-bs-title="badge.criteria">
- <img :src="`http://localhost:8080/api/images/${badge.imageId}`" class="card-img-top"
+ <img :src="apiUrl + `/api/images/${badge.imageId}`" class="card-img-top"
alt="..." />
<div class="card-body">
<h5 class="card-title">{{ badge.badgeName }}</h5>
diff --git a/src/components/UserProfile/MyProfile.vue b/src/components/UserProfile/MyProfile.vue
index 721bc71eac800a213fd3062c38ff9b3fc2d26ee3..cc7e292287fe5475b49e810c972a6975db0be1a6 100644
--- a/src/components/UserProfile/MyProfile.vue
+++ b/src/components/UserProfile/MyProfile.vue
@@ -5,6 +5,7 @@ import { type BadgeDTO, BadgeService, type GoalDTO, GoalService, ItemService, Us
import handleUnknownError from '@/components/Exceptions/unkownErrorHandler'
import bannerImage from '@/assets/banners/stacked.svg'
+let apiUrl = import.meta.env.VITE_APP_API_URL;
let numberOfHistory = 6;
let cardTitles = ["Spain tour", "Food waste", "Coffee", "Concert", "New book", "Pretty clothes"]
let firstname = ref();
@@ -61,7 +62,11 @@ async function setupForm() {
streak.value = response.streak?.currentStreak;
}
if (response.profileImage) {
- imageUrl.value = "http://localhost:8080/api/images/" + response.profileImage;
+ imageUrl.value = apiUrl + "/api/images/" + response.profileImage;
+ }
+ if (response.bannerImage != 0 && response.bannerImage !== null) {
+ console.log(response.bannerImage)
+ bannerImageUrl.value = apiUrl + "/api/images/" + response.bannerImage;
}
getInventory();
getBadges();
@@ -109,14 +114,20 @@ const getBadges = async () => {
* @param {any} item - The selected item object.
*/
const selectItem = (item: any) => {
+ try {
backgroundName.value = item.itemName;
let imageId = item.imageId;
- //const bannerImagePayload: UserUpdateDTO = {
- // bannerImage: imageId as any,
- // };
- //UserService.update({ requestBody: bannerImagePayload })
- //bannerImageUrl.value = `http://localhost:8080/api/images/${imageId}`;
-
+ const bannerImagePayload: UserUpdateDTO = {
+ bannerImage: imageId as any,
+ };
+ UserService.update({ requestBody: bannerImagePayload })
+ if (imageId != 0) {
+ bannerImageUrl.value = `${apiUrl}/api/images/${imageId}`;
+ }
+ } catch (error) {
+ handleUnknownError(error)
+ console.error(error)
+ }
}
/**
@@ -149,29 +160,32 @@ const toUpdateUserSettings = () => {
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col 12">
<div class="card">
- <div class="rounded-top text-white d-flex flex-row bg-primary" :style="{ height: '200px', backgroundImage: `url(${bannerImageUrl})` }">
- <div class=" d-flex flex-column align-items-center justify-content-center">
+ <div class="rounded-top text-white d-flex flex-row bg-primary justify-content-between" :style="{ height: '200px', backgroundImage: `url(${bannerImageUrl})` }">
+ <div class=" text-white d-flex flex-row">
+ <div class=" d-flex flex-column align-items-center justify-content-center">
<img :src="imageUrl" alt="Generisk plassholderbilde" class="img-fluid img-thumbnail"
style="width: 150px; height:150px; margin-left: 25px; margin-right: 15px;">
</div>
<h1 data-cy="firstname" style="display: flex; align-items: end; margin-bottom: 20px;">{{ firstname }} {{ lastname }}</h1>
+ </div>
+ <div class="d-flex align-items-end text-white my-3 mx-5">
+ <div class="d-flex align-items-center flex-column">
+ <p class="mb-1 h2 d-flex flex-column align-items-center" data-cy="points">{{ points }} <img src="@/assets/items/pigcoin.png" style="width: 80px; height: 80px"></p>
+ <p class="small text-white mb-0">Poeng</p>
+ </div>
+ <div class="d-flex align-items-center flex-column px-3">
+ <p class="mb-1 h2 d-flex flex-column align-items-center" data-cy="streak">{{ streak }} <img src="@/assets/icons/fire.png" style="width: 80px; height: 80px"></p>
+ <p class="small text-white mb-0">Streak</p>
+ </div>
+ </div>
</div>
<div class="p-3 text-black" style="background-color: #f8f9fa;">
<div class="d-flex justify-content-end text-center py-1">
<div style="width: 100%; display: flex; justify-content: start">
- <button data-cy="toUpdate" type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-primary"
+ <button data-cy="toUpdate" type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-primary classyButton"
data-mdb-ripple-color="dark" style="z-index: 1; height: 40px; margin-left: 17px" id="toUpdate" @click="toUpdateUserSettings">
Rediger profil
</button>
-
- </div>
- <div>
- <p class="mb-1 h2" data-cy="points">{{ points }} <img src="@/assets/items/pigcoin.png" style="width: 4rem"></p>
- <p class="small text-muted mb-0">Poeng</p>
- </div>
- <div class="px-3">
- <p class="mb-1 h2" data-cy="streak">{{ streak }} <img src="@/assets/icons/fire.png" style="width: 4rem"></p>
- <p class="small text-muted mb-0">Streak</p>
</div>
</div>
</div>
@@ -184,7 +198,7 @@ const toUpdateUserSettings = () => {
<div v-if="hasInventory" class="scrolling-wrapper-badges row flex-row flex-nowrap mt-2 pb-2 pt-2">
<div v-for="product in inventory" :key="product.id" class="card text-center"
style="width: 12rem; border: none; cursor: pointer; margin: 1rem; border: 2px solid black" @click="selectItem(product)">
- <img :src="`http://localhost:8080/api/images/${product.imageId}`" class="card-img-top"
+ <img :src="apiUrl + `/api/images/${product.imageId}`" class="card-img-top"
alt="..." />
<div class="card-body">
<h5 class="card-title">{{ product.itemName }}</h5>
@@ -209,7 +223,7 @@ const toUpdateUserSettings = () => {
style="width: 12rem; border: none; cursor: pointer; margin: 1rem;
border: 2px solid black" data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-custom-class="custom-tooltip" :data-bs-title="badge.criteria">
- <img :src="`http://localhost:8080/api/images/${badge.imageId}`" class="card-img-top"
+ <img :src="apiUrl + `/api/images/${badge.imageId}`" class="card-img-top"
alt="..." />
<div class="card-body">
<h5 class="card-title">{{ badge.badgeName }}</h5>
@@ -325,60 +339,18 @@ const toUpdateUserSettings = () => {
background-image: url('/src/assets/banners/stacked.svg');
}
-.card-1 {
- background-color: #4158D0;
- background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
-}
-
-.card-2 {
- background-color: #0093E9;
- background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
-}
-
-.card-3 {
- background-color: #00DBDE;
- background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);
-}
-
-.card-4 {
- background-color: #FBAB7E;
- background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
-}
-
-.card-5 {
- background-color: #85FFBD;
- background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
-}
-
-.card-6 {
- background-color: #FA8BFF;
- background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
-}
-
-.card-7 {
- background-color: #FA8BFF;
- background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
-}
-
-.card-8 {
- background-color: #FBDA61;
- background-image: linear-gradient(45deg, #FBDA61 0%, #FF5ACD 100%);
-}
-
-.card-9 {
- background-color: #4158D0;
- background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
-}
-
-.card-10 {
- background-color: #FF3CAC;
- background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
-
-}
-
-
/*-------*/
.rounded-top {
background-color: #00DBDE;
}
+
+ .classyButton:hover {
+ background-color: #003b58ec;
+ border: #003A58;
+ }
+
+ .classyButton:active {
+ background-color: #003b58d6;
+ border: #003A58;
+ }
</style>
\ No newline at end of file
diff --git a/src/views/BankID/RedirectView.vue b/src/views/BankID/RedirectView.vue
index 77104349be4f7bb8f3f94a792e6cb3c452549dc5..fc3691d6d6edf4e43e19a5d32a6b3ee4ade6683d 100644
--- a/src/views/BankID/RedirectView.vue
+++ b/src/views/BankID/RedirectView.vue
@@ -5,6 +5,8 @@ import { useUserInfoStore } from '@/stores/UserStore'
import axios from 'axios'
import router from '@/router'
+let apiUrl = import.meta.env.VITE_APP_API_URL;
+
/**
* Retrieves the authorization code and state from the URL parameters,
* then calls the 'exchangeCodeForToken' function with the code and state if they are present.
@@ -31,7 +33,7 @@ onMounted(() => {
* @param {string} state - The state parameter received from the OAuth2 authorization server.
*/
async function exchangeCodeForToken(code: string, state: string) {
- axios.post<AuthenticationResponse>('http://localhost:8080/api/auth/bank-id', { code: code, state: state })
+ axios.post<AuthenticationResponse>(apiUrl + '/api/auth/bank-id', { code: code, state: state })
.then(response => {
OpenAPI.TOKEN = response.data.token;
useUserInfoStore().setUserInfo({
diff --git a/src/views/User/UserSettingsView.vue b/src/views/User/UserSettingsView.vue
index 485d8dd73014ae413f73fdebc29dd676b6ce578e..bd11bcc03a46c6c0739d948eb178efa782ffe0eb 100644
--- a/src/views/User/UserSettingsView.vue
+++ b/src/views/User/UserSettingsView.vue
@@ -188,6 +188,11 @@ function toBilling() {
color: #4a5568;
}
+.nav-link.active {
+ color: white;
+ background-color: #003A58;
+}
+
.card {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
}