diff --git a/package-lock.json b/package-lock.json
index 88d57bd03bdde17aecd6e8981798af7a0cf3879e..d887708f52dc6717998442d119dfd80d053cbc63 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
"@testing-library/user-event": "^14.5.2",
"@testing-library/vue": "^8.0.3",
"@tsconfig/node20": "^20.1.4",
+ "@types/js-cookie": "^3.0.6",
"@types/jsdom": "^21.1.6",
"@types/node": "^20.12.5",
"@vitejs/plugin-vue": "^5.0.4",
@@ -1844,6 +1845,12 @@
"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
"dev": true
},
+ "node_modules/@types/js-cookie": {
+ "version": "3.0.6",
+ "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz",
+ "integrity": "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==",
+ "dev": true
+ },
"node_modules/@types/jsdom": {
"version": "21.1.6",
"resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-21.1.6.tgz",
diff --git a/package.json b/package.json
index 107df03de864ad4cb836307fd03df0cbf981c172..c7305399cb0eed8bdfd5b03cc45c616a01489e59 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
"@testing-library/user-event": "^14.5.2",
"@testing-library/vue": "^8.0.3",
"@tsconfig/node20": "^20.1.4",
+ "@types/js-cookie": "^3.0.6",
"@types/jsdom": "^21.1.6",
"@types/node": "^20.12.5",
"@vitejs/plugin-vue": "^5.0.4",
diff --git a/src/components/Configuration/ConfigurationSteps/SuitableChallenges.vue b/src/components/Configuration/ConfigurationSteps/SuitableChallenges.vue
index a81fa4199e19bbfbea94e18f8b224b73e7ef947e..1a7a10c84d7ce1c69f9fce9479f6180586cdbbbf 100644
--- a/src/components/Configuration/ConfigurationSteps/SuitableChallenges.vue
+++ b/src/components/Configuration/ConfigurationSteps/SuitableChallenges.vue
@@ -28,7 +28,7 @@ const challenges = ['Make packed lunch', 'Stop shopping', 'Drop coffee',
* The first element is the challenge value, and the second element
* indicates whether the challenge is checked (true) or unchecked (false).
*/
-const onChangedChallengeEvent = (value) => {
+const onChangedChallengeEvent = (value: any) => {
// if challenge is checked then add it to the chosenChallenges variable
if (value[1]) {
chosenChallenges.value.push(value[0])
diff --git a/src/components/Exceptions/ErrorBoundaryCatcher.vue b/src/components/Exceptions/ErrorBoundaryCatcher.vue
index fa80d8db5bcc4694fb10be7ad2ae1fad08af48aa..29500a2b3080583b012e271c2e8b30bbdeb988df 100644
--- a/src/components/Exceptions/ErrorBoundaryCatcher.vue
+++ b/src/components/Exceptions/ErrorBoundaryCatcher.vue
@@ -1,6 +1,6 @@
<template>
<error-box :error-message="errorStore.getFirstError" @update:errorMessage="errorStore.removeCurrentError" />
- <slot />
+ <slot></slot>
</template>
<script setup lang="ts">
diff --git a/src/views/BasePageView.vue b/src/views/BasePageView.vue
index a9780ec71399880d811a9690ddc028b96ec94d17..07af9953b1384c894b42a476b9bccecd9012526e 100644
--- a/src/views/BasePageView.vue
+++ b/src/views/BasePageView.vue
@@ -8,13 +8,13 @@ import Menu from '@/components/BaseComponents/Menu.vue'
<Menu></Menu>
<div style="display: flex; flex-direction: row;">
- <img v-for="item in 7" src="@/assets/coca.webp" style="width: 100%; height: 100px; margin: 5px; border-radius: 1rem;">
+ <img v-for="item in 7" src="@/assets/coca.webp" style="width: 100%; height: 100px; margin: 5px; border-radius: 1rem;" alt="picture">
</div>
<div>
<RouterView />
</div>
<div style="display: flex; flex-direction: row;">
- <img v-for="item in 7" src="@/assets/coca.webp" style="width: 100%; height: 100px; margin: 5px; border-radius: 1rem;">
+ <img v-for="item in 7" src="@/assets/coca.webp" style="width: 100%; height: 100px; margin: 5px; border-radius: 1rem;" alt="picture">
</div>
<Footer></Footer>
</template>
\ No newline at end of file
diff --git a/src/views/BudgetOverview.vue b/src/views/BudgetOverview.vue
index e58fb67ed304fcffc341f2baea40d1ace164c119..617c79bb0bf6084454c6ca61e8e8238cd8deea70 100644
--- a/src/views/BudgetOverview.vue
+++ b/src/views/BudgetOverview.vue
@@ -1,6 +1,9 @@
<script setup lang="ts">
import Button1 from '@/components/Buttons/Button1.vue'
import BudgetBox from '@/components/Budget/BudgetBox.vue'
+
+const budget = 1000;
+const expenses = 95600;
</script>
<template>
@@ -19,15 +22,15 @@ import BudgetBox from '@/components/Budget/BudgetBox.vue'
<!--TODO make this more generic-->
<ul class="budgetContainer">
- <li><budget-box title="April 2024" budget="1000" expenses="908700"></budget-box></li>
- <li><budget-box title="Mai 2024" budget="1000" expenses="87"></budget-box></li>
- <li><budget-box title="Juni 2024" budget="1000" expenses="87"></budget-box></li>
- <li><budget-box title="Juli 2024" budget="1000" expenses="87"></budget-box></li>
- <li><budget-box title="August 2024" budget="1000" expenses="87"></budget-box></li>
- <li><budget-box title="September 2024" budget="1000" expenses="87"></budget-box></li>
- <li><budget-box title="Oktober 2024" budget="1000" expenses="87"></budget-box></li>
- <li><budget-box title="November 2024" budget="1000" expenses="87"></budget-box></li>
- <li><budget-box title="Desember 2024" budget="1000" expenses="87"></budget-box></li>
+ <li><budget-box title="April 2024" :budget=budget :expenses=expenses></budget-box></li>
+ <li><budget-box title="Mai 2024" :budget=budget :expenses=expenses></budget-box></li>
+ <li><budget-box title="Juni 2024" :budget=budget :expenses=expenses></budget-box></li>
+ <li><budget-box title="Juli 2024" :budget=budget :expenses=expenses></budget-box></li>
+ <li><budget-box title="August 2024" :budget=budget :expenses=expenses></budget-box></li>
+ <li><budget-box title="September 2024" :budget=budget :expenses=expenses></budget-box></li>
+ <li><budget-box title="Oktober 2024" :budget=budget :expenses=expenses></budget-box></li>
+ <li><budget-box title="November 2024" :budget=budget :expenses=expenses></budget-box></li>
+ <li><budget-box title="Desember 2024" :budget=budget :expenses=expenses></budget-box></li>
</ul>
<nav id="navbar" aria-label="Page navigation example">
diff --git a/src/views/BudgetView.vue b/src/views/BudgetView.vue
index 0297c102ccddc3c1f463cf93fb3049b5f1901b1c..750d0e16a3140ba26aee608bf5c1d77c609d78a1 100644
--- a/src/views/BudgetView.vue
+++ b/src/views/BudgetView.vue
@@ -153,7 +153,7 @@ const onDeleteBudgetPressed = () => {
<button class="btn btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
- <button id="importButton" class="btn btn-primary"><img src="../assets/icons/import.svg" height="20" width="20">Import budget</button>
+ <button id="importButton" class="btn btn-primary"><img src="../assets/icons/import.svg" height="20" width="20" alt="picture">Import budget</button>
<button id="editBudget" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#editBudgetCollapse" aria-expanded="false" aria-controls="editBudgetCollapse"><img src="../assets/icons/edit-button.svg" alt="editButton">Rename budget</button>
<div class="collapse" id="editBudgetCollapse">
<div class="container collapse-container">
@@ -165,7 +165,7 @@ const onDeleteBudgetPressed = () => {
</form>
</div>
</div>
- <button id="deleteButton" class="btn btn-primary" data-bs-toggle="modal" @click="onDeleteBudgetPressed"><img src="../assets/icons/trash-can.svg" height="20" width="20">Delete budget</button>
+ <button id="deleteButton" class="btn btn-primary" data-bs-toggle="modal" @click="onDeleteBudgetPressed"><img src="../assets/icons/trash-can.svg" height="20" width="20" alt="picture">Delete budget</button>
</div>
</div>
</div>
@@ -173,7 +173,7 @@ const onDeleteBudgetPressed = () => {
<div class="budget-info-container">
<div class="info budget-container">
- <i><img src="../assets/icons/money2.svg" width="48px" height="48px"></i>
+ <i><img src="../assets/icons/money2.svg" width="48px" height="48px" alt="picture"></i>
<div class="budget-text-container">
<h5>{{budget}} kr</h5>
<p>Budget</p>
@@ -181,7 +181,7 @@ const onDeleteBudgetPressed = () => {
</div>
<div class="info expenses-container">
- <i><img src="../assets/icons/credit-card.svg" width="48px" height="48px"></i>
+ <i><img src="../assets/icons/credit-card.svg" width="48px" height="48px" alt="picture"></i>
<div class="expenses-text-container">
<h5>{{expenses}} kr</h5>
<p>Expenses</p>
@@ -189,7 +189,7 @@ const onDeleteBudgetPressed = () => {
</div>
<div class="info balance-container">
- <i ref="iRef"><img src="../assets/icons/scale.svg" width="48px" height="48px"></i>
+ <i ref="iRef"><img src="../assets/icons/scale.svg" width="48px" height="48px" alt="picture"></i>
<div class="balance-text-container">
<h5>{{balance}} kr</h5>
<p>Balance</p>
diff --git a/src/views/ConfigurationView.vue b/src/views/ConfigurationView.vue
index 58a63f43e9d6cb7ab5f205a8fb09489b9bd2701c..2c375e5d6c494d84822eb53e84684aba09572356 100644
--- a/src/views/ConfigurationView.vue
+++ b/src/views/ConfigurationView.vue
@@ -1,7 +1,5 @@
<script setup lang="ts">
import Configuration from '@/components/Configuration/Configuration.vue'
-import Menu from '@/components/BaseComponents/Menu.vue'
-import Footer from '@/components/BaseComponents/Footer.vue'
</script>
<template>
diff --git a/src/views/LeaderboardView.vue b/src/views/LeaderboardView.vue
index e0ffc537d39098a8654eaeffbd901f65fd9b4234..12acc33fe8c791a95188ebdc829294b90752f25a 100644
--- a/src/views/LeaderboardView.vue
+++ b/src/views/LeaderboardView.vue
@@ -9,40 +9,38 @@
<div class="btn-group-vertical" id="radioContainer" role="group"
aria-label="Vertical radio toggle button group">
<input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio1" autocomplete="off" checked>
- <label class="btn btn-outline-primary" for="vbtn-radio1" @click="global"><img src="@/assets/globe.png" style="width: 60px"> Global</label>
+ <label class="btn btn-outline-primary" for="vbtn-radio1" @click="global"><img src="@/assets/globe.png" style="width: 60px" alt="globe"> Global</label>
<input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio2" autocomplete="off">
- <label class="btn btn-outline-primary" for="vbtn-radio2" @click="friends"><img src="@/assets/friends.png" style="width: 60px"> Friends</label>
+ <label class="btn btn-outline-primary" for="vbtn-radio2" @click="friends"><img src="@/assets/friends.png" style="width: 60px" alt="friends"> Friends</label>
</div>
</div>
</div>
<main>
<div id="leaderboard">
- <h1><img src="@/assets/items/pigcoin.png" style="width: 2rem"> Total points</h1>
+ <h1><img src="@/assets/items/pigcoin.png" style="width: 2rem" alt="pig coin"> Total points</h1>
<Leaderboard :leaderboard="pointsLeaderboardData" :leaderboardExtra="pointsLeaderboardDataExtra" @navigateToUserProfile="navigateToUserProfile" />
</div>
<div id="leaderboard">
- <h1><img src="@/assets/icons/fire.png" style="width: 2rem"> Current streak</h1>
+ <h1><img src="@/assets/icons/fire.png" style="width: 2rem" alt="fire"> Current streak</h1>
<Leaderboard :leaderboard="currentLeaderboardData" :leaderboardExtra="currentLeaderboardDataExtra" @navigateToUserProfile="navigateToUserProfile" />
</div>
<div id="leaderboard">
- <h1><img src="@/assets/icons/fire.png" style="width: 2rem"> Highest streak</h1>
+ <h1><img src="@/assets/icons/fire.png" style="width: 2rem" alt="fire"> Highest streak</h1>
<Leaderboard :leaderboard="streakLeaderboardData" :leaderboardExtra="streakLeaderboardDataExtra" @navigateToUserProfile="navigateToUserProfile" />
</div>
</main>
</div>
<div id="communityContainer">
<h1>Total points earned as a community</h1>
- <h2>1000000 <img src="@/assets/items/v-buck.png" style="width: 2rem"></h2>
+ <h2>1000000 <img src="@/assets/items/v-buck.png" style="width: 2rem" alt="alt"></h2>
</div>
</template>
<script setup lang="ts">
-import { onMounted, ref, type PropType } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
import Leaderboard from '@/components/LeaderboardComponents/Leaderboard.vue';
-import { on } from 'events';
import { LeaderboardService } from '@/api';
-import type { LeaderboardEntryDTO } from '@/api/models/LeaderboardEntryDTO';
let streakLeaderboardData = ref([] as any);
let currentLeaderboardData = ref([] as any);
@@ -55,7 +53,7 @@ let pointsLeaderboardDataExtra = ref([] as any);
const router = useRouter();
async function fetchQuizData() {
- global();
+ await global();
}
onMounted(() => {
@@ -202,10 +200,4 @@ h1 {
margin-bottom: 5rem;
}
-.leaderBoardButton {
- padding: 1rem 4rem;
- font-weight: 700;
- border-radius: 2rem;
- margin: 1rem;
-}
</style>
\ No newline at end of file
diff --git a/src/views/Settings/SettingsAccountView.vue b/src/views/Settings/SettingsAccountView.vue
index f3d2c54bd951805dd072af5d700c661f52dec5f1..ee06249337fbba6a7b358a3cea9c5fb69d9d96ec 100644
--- a/src/views/Settings/SettingsAccountView.vue
+++ b/src/views/Settings/SettingsAccountView.vue
@@ -11,6 +11,14 @@ const confirmPasswordRef = ref('')
const formRef = ref()
let samePasswords = ref(true)
+const handleFirstNameInputEvent = (newValue: any) => {
+ firstNameRef.value = newValue
+}
+
+const handleEmailInputEvent = (newValue: any) => {
+ emailRef.value = newValue
+}
+
</script>
<template>
diff --git a/src/views/Settings/SettingsProfileView.vue b/src/views/Settings/SettingsProfileView.vue
index e082b050b85b9654f1af815a952137422c235dc1..b562554ee44203d4f4b82ebfaa209d03c9b27ab9 100644
--- a/src/views/Settings/SettingsProfileView.vue
+++ b/src/views/Settings/SettingsProfileView.vue
@@ -11,6 +11,15 @@ const confirmPasswordRef = ref('')
const formRef = ref()
let samePasswords = ref(true)
+const handleFirstNameInputEvent = (newValue: any) => {
+ firstNameRef.value = newValue
+}
+
+
+const handleSurnameInputEvent = (newValue: any) => {
+ surnameRef.value = newValue
+}
+
</script>
diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
index 195694c4eb50a14a7eaabaa324c6876bd01b7e3d..bfacde14fc84fd679ba5dd74411c03c60bf5a219 100644
--- a/src/views/SettingsView.vue
+++ b/src/views/SettingsView.vue
@@ -116,7 +116,7 @@ function toBilling() {
<div class="card-header border-bottom mb-3 d-flex d-md-none">
<ul class="nav nav-tabs card-header-tabs nav-gap-x-1" role="tablist">
<li class="nav-item">
- <a href="#profile" data-toggle="tab" class="nav-link has-icon active"><svg
+ <a href="#" data-toggle="tab" class="nav-link has-icon active"><svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-user">
@@ -125,7 +125,7 @@ function toBilling() {
</svg></a>
</li>
<li class="nav-item">
- <a href="#account" data-toggle="tab" class="nav-link has-icon"><svg
+ <a href="#" data-toggle="tab" class="nav-link has-icon"><svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-settings">
@@ -136,7 +136,7 @@ function toBilling() {
</svg></a>
</li>
<li class="nav-item">
- <a href="#security" data-toggle="tab" class="nav-link has-icon"><svg
+ <a href="#" data-toggle="tab" class="nav-link has-icon"><svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-shield">
@@ -144,7 +144,7 @@ function toBilling() {
</svg></a>
</li>
<li class="nav-item">
- <a href="#notification" data-toggle="tab" class="nav-link has-icon"><svg
+ <a href="#" data-toggle="tab" class="nav-link has-icon"><svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-bell">
@@ -153,7 +153,7 @@ function toBilling() {
</svg></a>
</li>
<li class="nav-item">
- <a href="#billing" data-toggle="tab" class="nav-link has-icon"><svg
+ <a href="#" data-toggle="tab" class="nav-link has-icon"><svg
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-credit-card">
@@ -180,10 +180,6 @@ function toBilling() {
margin-bottom: 4rem;
}
-.main-body {
- padding: 15px;
-}
-
.nav-link {
color: #4a5568;
}
@@ -215,31 +211,13 @@ function toBilling() {
margin-left: -8px;
}
-.gutters-sm>.col,
-.gutters-sm>[class*=col-] {
+.gutters-sm>,
+.gutters-sm> {
padding-right: 8px;
padding-left: 8px;
}
-.mb-3,
-.my-3 {
+.mb-3 {
margin-bottom: 1rem !important;
}
-
-.bg-gray-300 {
- background-color: #e2e8f0;
-}
-
-.h-100 {
- height: 100% !important;
-}
-
-.shadow-none {
- box-shadow: none !important;
-}
-
-.routerLink {
- text-decoration: none;
- color: #4a5568;
-}
</style>
\ No newline at end of file
diff --git a/src/views/UnauthorizedView.vue b/src/views/UnauthorizedView.vue
index 81e1aea9da6240f6655f46a18d78670983c7a179..b5cc9b581ba5c25e50530d000ef516aa383a4eef 100644
--- a/src/views/UnauthorizedView.vue
+++ b/src/views/UnauthorizedView.vue
@@ -3,7 +3,7 @@
<div class="container py-5">
<div class="row">
<div class="col-md-2 text-center">
- <p><img src="@/assets/icons/danger.svg"> <br/>Status Code: 403</p>
+ <p><img src="@/assets/icons/danger.svg" alt="danger"> <br/>Status Code: 403</p>
</div>
<div class="col-md-10">
<h3>OPPSSS!!!! Sorry...</h3>
@@ -16,7 +16,6 @@
</template>
<script setup lang="ts">
-import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';
import Button1 from '@/components/Buttons/Button1.vue';
diff --git a/src/views/User/UserFriendsView.vue b/src/views/User/UserFriendsView.vue
index e281c65b25970f4e7e29ddf897a8696f8db9a64d..f37dfe4b237c2f8d9f20cc87c29973874f2ea33b 100644
--- a/src/views/User/UserFriendsView.vue
+++ b/src/views/User/UserFriendsView.vue
@@ -360,11 +360,11 @@ function addFriend() {
}
// Define the navigateToQuiz method
-const navigateToFriend = (friendID :string) => {
+const navigateToFriend = (friendID :number) => {
router.push('/profile/' + friendID)
};
-const removeFriend = (friendID) => {
+const removeFriend = (friendID: number) => {
};