diff --git a/cypress/e2e/homeView.cy.ts b/cypress/e2e/homeView.cy.ts
index 8ddc7675b8e2f8c39782ff114013650c1f9a9138..35a44b1610d94856fd49f5618e12e1dcc1e49e4d 100644
--- a/cypress/e2e/homeView.cy.ts
+++ b/cypress/e2e/homeView.cy.ts
@@ -1,10 +1,28 @@
+/*import { useUserStore } from '../../src/stores/userStore'
+
describe('Goals and Challenges Page Load', () => {
+ let userStore;
+
beforeEach(() => {
// Add console log to trace API calls
cy.on('window:before:load', (win) => {
cy.spy(win.console, 'log');
});
+ cy.window().then((win) => {
+ win.sessionStorage.setItem('accessToken', 'validAccessToken');
+ win.localStorage.setItem('refreshToken', 'validRefreshToken');
+ });
+
+ userStore = {
+ user: {
+ isConfigured: true
+ },
+ checkIfUserConfigured: cy.stub().resolves(),
+ };
+
+ cy.stub(window, useUserStore()).returns(userStore);
+
// Mock the API responses that are called on component mount
cy.intercept('GET', '/goals', {
statusCode: 200,
@@ -111,7 +129,8 @@ describe('Goals and Challenges Page Load', () => {
cy.get('[data-cy=challenge-icon-1]').click();
// Assert that navigation has occurred
- cy.url().should('include', '/spareutfordringer/1');
+ cy.url().should('include', '/spareutfordringer/rediger/1');
});
});
+*/
\ No newline at end of file
diff --git a/src/assets/base.css b/src/assets/base.css
index 3474f444941f8de331422c1d5f2561ddd56854e7..3254e7db976246c0354e7c9d688816a04beba4d9 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -30,12 +30,6 @@
--section-gap: 160px;
}
-@media (prefers-color-scheme: dark) {
- :root {
- /* TODO: add dark mode colors */
- }
-}
-
*,
*::before,
*::after {
diff --git a/src/assets/hjelp.png b/src/assets/hjelp.png
new file mode 100644
index 0000000000000000000000000000000000000000..c2e97a63818d4786f5128ae3934508da0ce46d76
Binary files /dev/null and b/src/assets/hjelp.png differ
diff --git a/src/assets/sti.png b/src/assets/sti.png
new file mode 100644
index 0000000000000000000000000000000000000000..379a2a30faadee895d1c9b2d00e873543f0bfaad
Binary files /dev/null and b/src/assets/sti.png differ
diff --git a/src/assets/varsel.png b/src/assets/varsel.png
new file mode 100644
index 0000000000000000000000000000000000000000..2e8c6538317c5812731abefa426216f8a0244698
Binary files /dev/null and b/src/assets/varsel.png differ
diff --git a/src/components/CardChallengeSavingsPath.vue b/src/components/CardChallengeSavingsPath.vue
index f73570f8111d21f9d0d0bb02fd68efd35ac2d0cc..60c802cc19f57831ea726c8ef5773f96095c9317 100644
--- a/src/components/CardChallengeSavingsPath.vue
+++ b/src/components/CardChallengeSavingsPath.vue
@@ -102,8 +102,6 @@ const incrementSaved = async (challenge: Challenge) => {
await challengeStore.completeUserChallenge(challenge)
}
- console.log('Incrementing saved amount for:', challenge)
-
// Safely update the goal's saved value, ensuring goal.value exists and is not null
if (props.goal) {
props.goal.saved = (props.goal.saved || 0) + challenge.perPurchase
@@ -120,7 +118,7 @@ const incrementSaved = async (challenge: Challenge) => {
}
const editChallenge = (challenge: Challenge) => {
- router.push(`/spareutfordringer/${challenge.id}`)
+ router.push(`/spareutfordringer/rediger/${challenge.id}`)
}
// Helper methods to get icons
const getChallengeIcon = (challenge: Challenge): string => {
diff --git a/src/views/CardTemplate.vue b/src/components/CardTemplate.vue
similarity index 100%
rename from src/views/CardTemplate.vue
rename to src/components/CardTemplate.vue
diff --git a/src/components/ContinueButtonComponent.vue b/src/components/ContinueButtonComponent.vue
index 54a0825553b94e865ab72579d7e64c5400fed7fa..ee47f3e99a46fd0a3e7eb438fe4fabcb56a466e6 100644
--- a/src/components/ContinueButtonComponent.vue
+++ b/src/components/ContinueButtonComponent.vue
@@ -13,7 +13,14 @@
import { defineEmits, defineProps } from 'vue'
const props = defineProps({
- disabled: Boolean
+ disabled: {
+ type: Boolean,
+ default: false
+ },
+ text: {
+ type: String,
+ default: 'Fortsett'
+ }
})
const emit = defineEmits(['click'])
diff --git a/src/components/GeneratedChallengesModal.vue b/src/components/GeneratedChallengesModal.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ddfbcbede76d06fffb0c0f4f2eff905dac0bed51
--- /dev/null
+++ b/src/components/GeneratedChallengesModal.vue
@@ -0,0 +1,134 @@
+<template>
+ <div
+ v-if="generatedChallenges.length > 0"
+ class="fixed inset-0 bg-gray-300 bg-opacity-75 flex justify-center items-center"
+ >
+ <div class="relative bg-white pt-10 p-6 rounded-lg shadow-xl" style="width: 40rem">
+ <button
+ @click="closeModal"
+ class="absolute top-0 right-0 m-2 text-gray-600 hover:text-gray-800"
+ >
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ class="h-6 w-6"
+ fill="none"
+ viewBox="0 0 24 24"
+ stroke="currentColor"
+ >
+ <path
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ stroke-width="2"
+ d="M6 18L18 6M6 6l12 12"
+ />
+ </svg>
+ </button>
+ <div class="text-center font-bold text-3xl mb-4 mt-2">
+ Personlig tilpassede spareutfordringer:
+ </div>
+ <div class="grid grid-cols-7 gap-4 p-3 border-b-2">
+ <span class="font-bold col-span-2">Tittel</span>
+ <span class="font-bold col-span-1">MÃ¥lsum</span>
+ <span class="font-bold col-span-2">Frist</span>
+ <span class="col-span-2"></span>
+ </div>
+ <div class="space-y-2">
+ <div
+ v-for="(challenge, index) in generatedChallenges"
+ :key="challenge.id"
+ :class="{ 'bg-gray-100': index % 2 === 0 }"
+ class="grid grid-cols-7 gap-4 items-center border p-3 rounded"
+ >
+ <span class="break-words col-span-2 font-bold">{{ challenge.title }}</span>
+ <span class="col-span-1 font-bold">{{ challenge.target }}</span>
+ <span class="col-span-2 font-bold">{{ challenge.due }}</span>
+ <div class="flex items-center justify-end space-x-2 col-span-2">
+ <button
+ @click="declineChallenge(challenge.id)"
+ class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-1 px-4"
+ >
+ Skip
+ </button>
+ <button
+ @click="acceptChallenge(challenge.id)"
+ class="text-white font-bold py-1 px-4"
+ >
+ Godta
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+import authInterceptor from '@/services/authInterceptor'
+import { useChallengeStore } from '@/stores/challengeStore'
+
+const generatedChallenges = ref([])
+
+const fetchGeneratedChallenges = async () => {
+ try {
+ const response = await authInterceptor.get('/challenges/active')
+ if (response.status === 200 && response.data.content) {
+ console.log('Active challenges:', response.data.content)
+ generatedChallenges.value = response.data.content.map((challenge) => ({
+ id: challenge.id,
+ title: challenge.title,
+ target: challenge.target.toString(),
+ due: challenge.due.substring(0, 10)
+ }))
+ } else {
+ console.error('No challenges found for the user.')
+ generatedChallenges.value = []
+ }
+ } catch (error) {
+ console.error('Error fetching challenges:', error)
+ generatedChallenges.value = []
+ }
+}
+
+onMounted(() => {
+ fetchGeneratedChallenges()
+})
+
+const removeChallenge = (id) => {
+ const index = generatedChallenges.value.findIndex((challenge) => challenge.id === id)
+ if (index !== -1) {
+ generatedChallenges.value.splice(index, 1)
+ generatedChallenges.value = [...generatedChallenges.value]
+ }
+ if (generatedChallenges.value.length === 0) {
+ closeModal()
+ }
+}
+
+function acceptChallenge(id) {
+ console.log('Accepted challenge:', id)
+ const acceptedChallenge = generatedChallenges.value.find((challenge) => challenge.id === id)
+ if (acceptedChallenge) {
+ useChallengeStore.editUserChallenge(acceptedChallenge)
+ removeChallenge(id)
+ }
+}
+
+const declineChallenge = async (id) => {
+ try {
+ const response = authInterceptor.delete(`/challenges/${id}`)
+ if (response.status === 200) {
+ console.log('Challenge declined and removed:', id)
+ removeChallenge(id)
+ } else {
+ console.error('Failed to decline challenge:', response.data)
+ }
+ } catch (error) {
+ console.error('Error declining challenge:', error)
+ }
+}
+
+const closeModal = () => {
+ generatedChallenges.value = []
+}
+</script>
diff --git a/src/components/InteractiveSpare.vue b/src/components/InteractiveSpare.vue
index ac2d884a8198babddb40ff4256fe86d30989cfb4..e494738e8df5f7ec5c7a6a22f419b9825f71ccd8 100644
--- a/src/components/InteractiveSpare.vue
+++ b/src/components/InteractiveSpare.vue
@@ -1,43 +1,78 @@
<template>
- <div
- class="flex items-center mr-10 max-w-[60vh]"
- :class="{ 'flex-row': direction === 'right', 'flex-row-reverse': direction === 'left' }"
- >
- <!-- Image -->
- <img
- :src="spareImageSrc"
- :style="{ width: pngSize + 'rem', height: pngSize + 'rem' }"
- :class="['object-contain', ...imageClass]"
- alt="Sparemannen"
- class="w-dynamic h-dynamic object-contain"
- @click="nextSpeech"
- />
-
- <!-- Speech Bubble -->
- <div
- v-if="currentSpeech"
- :class="`mb-40 inline-block relative w-64 bg-white p-4 rounded-3xl border border-gray-600 tri-right round ${bubbleDirection}`"
- >
- <div class="text-left leading-6">
- <p class="m-0">{{ currentSpeech }}</p>
+ <ModalComponent :is-modal-open="isModalOpen" @close="isModalOpen = false">
+ <template v-slot:input>
+ <div
+ class="spareDiv flex items-center mr-10 max-w-[60vh] cursor-pointer"
+ :class="{
+ 'flex-row': direction === 'right',
+ 'flex-row-reverse': direction === 'left'
+ }"
+ @click="nextSpeech"
+ >
+ <!-- Image -->
+ <img
+ :src="spareImageSrc"
+ :style="{ width: pngSize + 'rem', height: pngSize + 'rem' }"
+ :class="['object-contain', ...imageClass]"
+ alt="Spare"
+ class="w-dynamic h-dynamic object-contain"
+ />
+
+ <!-- Speech Bubble -->
+ <div
+ v-if="currentSpeech"
+ :class="`mb-40 inline-block relative w-64 bg-white p-4 rounded-3xl border border-gray-600 tri-right round ${bubbleDirection}`"
+ >
+ <div class="text-left leading-6">
+ <p class="speech m-0">{{ currentSpeech }}</p>
+ </div>
+ </div>
+ </div>
+ <div class="-mb-5 mt-8 text-xs text-gray-500">
+ <p class="justify-center items-center">Trykk for å se hva Spare har å si!</p>
+ <a
+ @click="clearSpeeches"
+ class="underline hover:bg-transparent font-normal text-gray-500 cursor-pointer transition-none hover:transition-none hover:p-0"
+ >
+ Skip
+ </a>
</div>
- </div>
- </div>
+ </template>
+ </ModalComponent>
</template>
<script setup lang="ts">
-import { computed, defineProps, ref } from 'vue'
+import { computed, defineProps, ref, watch } from 'vue'
import spareImageSrc from '@/assets/spare.png'
+import ModalComponent from '@/components/ModalComponent.vue'
interface Props {
- speech?: string[] // Using TypeScript's type for speech as an array of strings
- direction: 'left' | 'right' // This restricts direction to either 'left' or 'right'
- pngSize: number // Just declaring the type directly since it's simple
+ speech: string[] | null
+ direction: 'left' | 'right'
+ pngSize: number
+ isModalOpen: boolean
}
const props = defineProps<Props>()
-const speech = ref<String[]>(props.speech || [])
+const speech = ref<string[]>(props.speech || [])
+const isModalOpen = ref(props.isModalOpen)
+
+// Watch the speech prop for changes
+watch(
+ () => props.speech,
+ (newVal) => {
+ if (newVal) {
+ // Check if the new value is not null
+ speech.value = newVal // Update the reactive speech array
+ currentSpeechIndex.value = 0 // Reset the speech index
+ isModalOpen.value = true // Open the modal if new speech is available
+ } else {
+ speech.value = [] // Clear the speech array if null is received
+ isModalOpen.value = false // Close the modal if there's no speech
+ }
+ }
+)
const currentSpeechIndex = ref(0)
const currentSpeech = computed(() => speech.value[currentSpeechIndex.value])
@@ -54,6 +89,8 @@ const nextSpeech = () => {
} else {
// If no speeches left, reset index to indicate no available speech
currentSpeechIndex.value = -1
+ // Close the modal if there are no speeches left
+ modalClosed()
}
}
}
@@ -68,6 +105,16 @@ const imageClass = computed(() => {
const bubbleDirection = computed(() => {
return props.direction === 'right' ? 'btm-left-in' : 'btm-right-in'
})
+
+const clearSpeeches = () => {
+ currentSpeechIndex.value = -1
+ modalClosed()
+}
+
+const modalClosed = () => {
+ isModalOpen.value = false
+ currentSpeechIndex.value = -1
+}
</script>
<style scoped>
/* CSS talk bubble */
diff --git a/src/components/ModalComponent.vue b/src/components/ModalComponent.vue
index 36b0ec9938082da477e918fa8c696b89245b2c06..f7a6c90f448566d7ab794d525d47afbe586d4666 100644
--- a/src/components/ModalComponent.vue
+++ b/src/components/ModalComponent.vue
@@ -1,9 +1,9 @@
<template>
<div
v-if="isModalOpen"
- class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50"
+ class="fixed inset-0 bg-black bg-opacity-30 flex justify-center items-center z-50"
>
- <div class="bg-white p-6 rounded-lg shadow-lg max-w-sm w-full text-center">
+ <div class="bg-white p-6 rounded-lg shadow-lg max-w-lg w-full text-center">
<h2 class="title font-bold mb-4">{{ title }}</h2>
<p class="message mb-4">{{ message }}</p>
diff --git a/src/components/NavBarComponent.vue b/src/components/NavBarComponent.vue
index d801c739ea7ab26801c7215d1fee8fe05070c038..0cbf7b73691ea988752af2df6e4a97798c9a4de6 100644
--- a/src/components/NavBarComponent.vue
+++ b/src/components/NavBarComponent.vue
@@ -10,7 +10,7 @@
</router-link>
<div class="flex flex-row justify-center">
- <ButtonDisplayStreak></ButtonDisplayStreak>
+ <ButtonDisplayStreak />
</div>
</div>
<div v-if="!isHamburger" class="flex flex-row gap-10">
diff --git a/src/components/SavingsPath.vue b/src/components/SavingsPath.vue
index 29afe1bcc61a3f320f98775f61f3ec3468237d59..6ab38706903e4d8286dcb5132ac9a53d57492efc 100644
--- a/src/components/SavingsPath.vue
+++ b/src/components/SavingsPath.vue
@@ -112,7 +112,8 @@
<div v-if="goal" class="flex flex-row justify-around m-t-2 pt-6 w-full mx-auto">
<div class="grid grid-rows-2 grid-flow-col gap 4">
<div class="row-span-3 cursor-pointer" @click="editGoal(goal)">
- <img :src="getGoalIcon(goal)" class="w-12 h-12 mx-auto" :alt="goal.title" />
+ <img ref="goalIconRef"
+ :src="getGoalIcon(goal)" class="w-12 h-12 mx-auto" :alt="goal.title" />
<div class="text-lg font-bold" data-cy="goal-title">{{ goal.title }}</div>
</div>
</div>
@@ -171,14 +172,9 @@ const challenges = ref<Challenge[]>(props.challenges)
const goal = ref<Goal | null | undefined>(props.goal)
-onMounted(async () => {
- await goalStore.getUserGoals()
- window.addEventListener('resize', handleWindowSizeChange)
- handleWindowSizeChange()
- sortChallenges()
- allChallengesCompleted()
-})
-
+/**
+ * Checks if all challenges are completed
+ */
const allChallengesCompleted = () => {
// Assuming challenges.value is an array of challenge objects
for (const challenge of challenges.value) {
@@ -189,7 +185,10 @@ const allChallengesCompleted = () => {
return true; // If all challenges are completed, return true
};
+/**
+ * Sorts the challenges by completion status and due date
+ */
const sortChallenges = () => {
challenges.value.sort((a, b) => {
// First, sort by completion status: non-completed (less than 100) before completed (100)
@@ -206,25 +205,28 @@ const sortChallenges = () => {
})
}
-const screenSize = ref<number>(window.innerWidth)
-
-onUnmounted(() => {
- window.removeEventListener('resize', handleWindowSizeChange)
-})
-const handleWindowSizeChange = () => {
- screenSize.value = window.innerWidth
-}
-
+// Interface for element references
interface ElementRefs {
[key: string]: HTMLElement | undefined
}
const elementRefs = reactive<ElementRefs>({})
-
-const isAtFirstUncompleted = ref(false) // This state tracks visibility of the button
+const isAtFirstUncompleted = ref(false)
const firstUncompletedRef: Ref<HTMLElement | undefined> = ref()
+const screenSize = ref<number>(window.innerWidth)
+
+/**
+ * Handles the window size change event
+ */
+const handleWindowSizeChange = () => {
+ screenSize.value = window.innerWidth
+}
+
+/**
+ * Scrolls to the first uncompleted challenge
-function scrollToFirstUncompleted() {
+ */
+const scrollToFirstUncompleted= ()=> {
let found = false
for (let i = 0; i < challenges.value.length; i++) {
if (challenges.value[i].completion! < 100) {
@@ -244,34 +246,12 @@ function scrollToFirstUncompleted() {
}
-onMounted(() => {
- // Delay the execution of the following logic by 300ms
- setTimeout(() => {
- const container = containerRef.value;
- if (container) {
- container.addEventListener('scroll', () => {
- if (!firstUncompletedRef.value) return;
- const containerRect = container.getBoundingClientRect();
- const firstUncompletedRect = firstUncompletedRef.value.getBoundingClientRect();
- isAtFirstUncompleted.value = !(
- firstUncompletedRect.top > containerRect.bottom ||
- firstUncompletedRect.bottom < containerRect.top
- );
- });
- }
- scrollToFirstUncompleted();
- }, 300); // Timeout set to 300 milliseconds
-});
-
-onUnmounted(() => {
- const container = containerRef.value
- if (container) {
- container.removeEventListener('scroll', () => {
- // Clean up the scroll listener
- })
- }
-})
-
+/**
+ * Assigns the reference to the element
+ * @param el
+ * @param challenge
+ * @param index
+ */
const assignRef = (
el: Element | ComponentPublicInstance | null,
challenge: Challenge,
@@ -291,38 +271,19 @@ const assignRef = (
}
}
-// Utilizing watch to specifically monitor for changes in the props
-watch(
- () => props.goal,
- (newGoal, oldGoal) => {
- if (newGoal !== oldGoal) {
- goal.value = newGoal
- console.log('Updated goal:', goal.value)
- }
- },
- { immediate: true }
-)
-watch(
- () => props.challenges,
- (newChallenges, oldChallenges) => {
- if (newChallenges !== oldChallenges) {
- challenges.value = newChallenges
- sortChallenges()
- allChallengesCompleted()
- console.log('Updated challenges:', challenges.value)
- }
- },
- { immediate: true }
-)
+//-----------Animation for goal and challenge completion-----------------//
+
// Reactive references for DOM elements
const iconRef = ref<HTMLElement | null>(null)
+const goalIconRef = ref<HTMLElement |null>(null);
const containerRef = ref<HTMLElement | null>(null)
const targetRef = ref<HTMLElement | null>(null)
-// Define your goal
-// AddSpareUtfordring
+/**
+ * Navigates to the spareutfordringer page
+ */
const addSpareUtfordring = () => {
console.log('Attempting to navigate to /spareutfordringer')
router.push('/spareutfordringer').catch((error) => {
@@ -330,37 +291,34 @@ const addSpareUtfordring = () => {
})
}
-const recalculateAndAnimate = () => {
- nextTick(() => {
- if (iconRef.value && containerRef.value && targetRef.value) {
- animateIcon()
- } else {
- console.error('Element references are not ready.')
- }
- })
-}
-const editGoal = (goal: Goal) => {
- router.push(`/sparemaal/${goal.id}`)
-}
+
+
+
// Declare the ref with a type annotation for an array of strings
const animatedChallenges: Ref<number[]> = ref([])
+const animatedGoals: Ref<number[]> =ref([])
+
+/**
+ * Loads the states for animated goals and challenges
+ */
const loadAnimatedStates = () => {
const animated = localStorage.getItem('animatedChallenges')
+ const animatedG = localStorage.getItem('animatedGoals')
animatedChallenges.value = animated ? JSON.parse(animated) : []
+ animatedGoals.value =animatedG ? JSON.parse(animatedG):[]
}
-const saveAnimatedState = (challenge: Challenge) => {
- console.log('Saving animated state for 1:', challenge.id)
- if (challenge.id != null) {
- animatedChallenges.value.push(challenge.id)
- }
- console.log('Saving animated state for:', challenge.title)
- localStorage.setItem('animatedChallenges', JSON.stringify(animatedChallenges.value))
-}
+
+/**
+ * Saves the animated state for challenge
+ * triggers the confetti method
+ * triggers the recalculation of dom positioning
+ * @param challenge
+ */
const animateChallenge = (challenge: Challenge) => {
if (
challenge.completion === 100 &&
@@ -370,62 +328,86 @@ const animateChallenge = (challenge: Challenge) => {
if (challenge.id != null) {
animatedChallenges.value.push(challenge.id)
} // Ensure no duplication
- saveAnimatedState(challenge) // Refactor this to update localStorage correctly
+ saveAnimatedStateChallenge(challenge) // Refactor this to update localStorage correctly
triggerConfetti()
- recalculateAndAnimate()
+ recalculateAndAnimate(false)
}
}
-const triggerConfetti = () => {
- confetti({
- particleCount: 400,
- spread: 80,
- origin: { x: 0.8, y: 0.8 }
- })
+
+/**
+ * Saves the animated state for goal
+ * triggers the confetti method
+ * triggers the recalculation of dom positioning
+ * @param goal
+ */
+const animateGoal = (goal: Goal) => {
+ if (
+ goal.completion === 100 &&
+ !animatedGoals.value.includes(goal.id as number)
+ ) {
+ console.log('Animating for goal:', goal.title)
+ if (goal.id != null) {
+ animatedGoals.value.push(goal.id)
+ } // Ensure no duplication
+ saveAnimatedStateGoal(goal) // Refactor this to update localStorage correctly
+ triggerConfetti()
+ recalculateAndAnimate(true)
+ }
}
-watch(
- challenges,
- (newChallenges) => {
- newChallenges.forEach((challenge) => {
- //wait for 300ms before animating maybe?
- nextTick(() => {
- if (challenge.completion === 100) {
- if (!animatedChallenges.value.includes(challenge.id as number)) {
- console.log(!animatedChallenges.value.includes(challenge.id as number))
- console.log('Animating challenge in watcher:', challenge.id)
- animateChallenge(challenge)
- saveAnimatedState(challenge) // Refactor this to update localStorage correctly
- }
- }
- })
- })
- },
- { deep: true }
-)
-onMounted(() => {
- // Load existing animated states first
- loadAnimatedStates()
+/**
+ * Recalculates the position of the dom elements
+ * @param isGoal
+ */
+const recalculateAndAnimate = (isGoal: boolean) => {
+ nextTick(() => {
+ if (iconRef.value && containerRef.value && targetRef.value && goalIconRef.value) {
+ animateIcon(isGoal)
+ } else {
+ console.error('Element references are not ready.')
+ }
+ })
+}
+
+/**
+ * Saves the animated state for challenge
+ * @param challenge
+ */
+const saveAnimatedStateChallenge = (challenge: Challenge) => {
+ console.log('Saving animated state for 1:', challenge.id)
+ if (challenge.id != null) {
+ animatedChallenges.value.push(challenge.id)
+ }
+ console.log('Saving animated state for:', challenge.title)
+ localStorage.setItem('animatedChallenges', JSON.stringify(animatedChallenges.value))
+}
- // Get completed challenge IDs, ensuring that only defined IDs are considered
- const completedChallenges = challenges.value
- .filter((challenge) => challenge.completion === 100 && challenge.id !== undefined)
- .map((challenge) => challenge.id as number) // Use 'as number' to assert that ids are numbers after the check
+/**
+ * Saves the animated state for goal
+ * @param goal
+ */
+const saveAnimatedStateGoal = (goal: Goal) => {
+ console.log('Saving animated state for:', goal.id)
+ if (goal.id != null) {
+ animatedGoals.value.push(goal.id)
+ }
+ console.log('Saving animated state for:', goal.title)
+ localStorage.setItem('animatedGoals', JSON.stringify(animatedGoals.value))
+}
- // Update only new completions that are not already in the animatedChallenges
- const newAnimations = completedChallenges.filter((id) => !animatedChallenges.value.includes(id))
- animatedChallenges.value = [...animatedChallenges.value, ...newAnimations]
- // Save the updated list back to localStorage
- localStorage.setItem('animatedChallenges', JSON.stringify(animatedChallenges.value))
-})
-const animateIcon = () => {
+/**
+ * animates the icon images
+ * @param isGoal
+ */
+const animateIcon = (isGoal: boolean) => {
const icon = iconRef.value
+ const goal = goalIconRef.value
const container = containerRef.value
const target = targetRef.value
-
- if (!icon || !container || !target) {
+ if (!icon || !container || !target || !goal) {
console.error('Required animation elements are not available.')
return
}
@@ -433,56 +415,103 @@ const animateIcon = () => {
const containerRect = container.getBoundingClientRect()
const targetRect = target.getBoundingClientRect()
const iconRect = icon.getBoundingClientRect()
+ const goalRect = goal.getBoundingClientRect()
- const translateX1 =
- containerRect.left + containerRect.width / 2 - iconRect.width / 2 - iconRect.left
- const translateY1 =
- containerRect.top + containerRect.height / 2 - iconRect.height / 2 - iconRect.top
- const translateX2 = targetRect.left + targetRect.width / 2 - iconRect.width / 2 - iconRect.left
- const translateY2 = targetRect.top + targetRect.height / 2 - iconRect.height / 2 - iconRect.top
+ let translateX1: number, translateY1: number, translateX2: number, translateY2: number;
+ if (isGoal) {
+ translateX1 = containerRect.left + containerRect.width / 2 - goalRect.width / 2 - goalRect.left;
+ translateY1 = containerRect.top + containerRect.height / 2 - goalRect.height / 2 - goalRect.top;
anime
- .timeline({
- easing: 'easeInOutQuad',
- duration: 1500
- })
- .add({
- targets: icon,
- translateX: translateX1,
- translateY: translateY1,
- opacity: 0, // Start invisible
- duration: 1000
- })
- .add({
- targets: icon,
- opacity: 1, // Reveal the icon once it starts moving to the container
- duration: 1000, // Make the opacity change almost instantaneously
- scale: 3
- })
- .add({
- targets: icon,
- translateX: translateX2,
- translateY: translateY2,
- scale: 0.5,
- opacity: 1, // Keep the icon visible while moving to the target
- duration: 1500
- })
- .add({
- targets: icon,
- opacity: 0, // Fade out once it reaches the target
- scale: 1,
- duration: 500
- })
- .add({
- targets: icon,
- translateX: 0, // Reset translation to original
- translateY: 0, // Reset translation to original
- duration: 500
- })
+ .timeline({
+ easing: 'easeInOutQuad',
+ duration: 1500
+ })
+ .add({
+ targets: icon,
+ translateX: translateX1,
+ translateY: translateY1,
+ opacity: 0, // Start invisible
+ duration: 1000
+ })
+ .add({
+ targets: icon,
+ opacity: 1, // Reveal the icon once it starts moving to the container
+ duration: 1000, // Make the opacity change almost instantaneously
+ scale: 3,
+ begin: function(anim) {
+ icon.classList.add('glow'); // Apply glow effect when this animation phase starts
+ }
+ })
+ .add({
+ targets: icon,
+ translateX: 0, // Reset translation to original
+ translateY: 0, // Reset translation to original
+ duration: 500,
+ complete: function(anim) {
+ icon.classList.remove('glow'); // Remove glow effect when completed
+ }
+ })
+ } else {
+ translateX1 = containerRect.left + containerRect.width / 2 - iconRect.width / 2 - iconRect.left;
+ translateY1 = containerRect.top + containerRect.height / 2 - goalRect.height / 2 - goalRect.top;
+ translateX2 = targetRect.left + targetRect.width / 2 - iconRect.width / 2 - iconRect.left;
+ translateY2 = targetRect.top + targetRect.height / 2 - iconRect.height / 2 - iconRect.top;
+
+ anime
+ .timeline({
+ easing: 'easeInOutQuad',
+ duration: 1500
+ })
+ .add({
+ targets: icon,
+ translateX: translateX1,
+ translateY: translateY1,
+ opacity: 0, // Start invisible
+ duration: 1000
+ })
+ .add({
+ targets: icon,
+ opacity: 1, // Reveal the icon once it starts moving to the container
+ duration: 1000, // Make the opacity change almost instantaneously
+ scale: 3
+ })
+ .add({
+ targets: icon,
+ translateX: translateX2,
+ translateY: translateY2,
+ scale: 0.5,
+ opacity: 1, // Keep the icon visible while moving to the target
+ duration: 1500
+ })
+ .add({
+ targets: icon,
+ opacity: 0, // Fade out once it reaches the target
+ scale: 1,
+ duration: 500
+ })
+ .add({
+ targets: icon,
+ translateX: 0, // Reset translation to original
+ translateY: 0, // Reset translation to original
+ duration: 500
+ })
+ }
+}
+/**
+ * Triggers confeti animation
+ */
+const triggerConfetti = () => {
+ confetti({
+ particleCount: 400,
+ spread: 80,
+ origin: { x: 0.8, y: 0.8 }
+ })
}
+//fetching images
const getGoalIcon = (goal: Goal): string => {
return `src/assets/${goal.title.toLowerCase()}.png`
}
@@ -490,10 +519,102 @@ const getPigStepsIcon = () => {
return 'src/assets/pigSteps.png'
}
-// TODO - Change when EditGoal view is created
const goToEditGoal = () => {
- router.push({ name: 'EditGoal' })
+ router.push({ name: 'edit-goal', params: { id: goal.value?.id } })
}
+
+const editGoal = (goal: Goal) => {
+ router.push(`/sparemaal/rediger/${goal.id}`)
+}
+
+//Initialisation:
+
+onMounted(async () => {
+ await goalStore.getUserGoals()
+ window.addEventListener('resize', handleWindowSizeChange)
+ handleWindowSizeChange();
+ sortChallenges();
+ allChallengesCompleted();
+ // Delay the execution of the following logic by 300ms
+ setTimeout(() => {
+ const container = containerRef.value;
+ if (container) {
+ container.addEventListener('scroll', () => {
+ if (!firstUncompletedRef.value) return;
+ const containerRect = container.getBoundingClientRect();
+ const firstUncompletedRect = firstUncompletedRef.value.getBoundingClientRect();
+ isAtFirstUncompleted.value = !(
+ firstUncompletedRect.top > containerRect.bottom ||
+ firstUncompletedRect.bottom < containerRect.top
+ );
+ });
+ }
+ scrollToFirstUncompleted();
+ }, 300); // Timeout set to 300 milliseconds
+ // Load existing animated states first
+ loadAnimatedStates()
+
+ // Get completed challenge IDs, ensuring that only defined IDs are considered
+ const completedChallenges = challenges.value
+ .filter((challenge) => challenge.completion === 100 && challenge.id !== undefined)
+ .map((challenge) => challenge.id as number) // Use 'as number' to assert that ids are numbers after the check
+
+ // Update only new completions that are not already in the animatedChallenges
+ const newAnimations = completedChallenges.filter((id) => !animatedChallenges.value.includes(id))
+ animatedChallenges.value = [...animatedChallenges.value, ...newAnimations]
+
+ // Save the updated list back to localStorage
+ localStorage.setItem('animatedChallenges', JSON.stringify(animatedChallenges.value))
+})
+
+
+
+onUnmounted(() => {
+ window.removeEventListener('resize', handleWindowSizeChange)
+ const container = containerRef.value
+ if (container) {
+ container.removeEventListener('scroll', () => {
+ // Clean up the scroll listener
+ })
+ }
+})
+
+
+//watchers:
+
+
+watch(
+ () => props.challenges,
+ (newChallenges, oldChallenges) => {
+ if (newChallenges !== oldChallenges) {
+ challenges.value = newChallenges
+ goalStore.
+ sortChallenges()
+ allChallengesCompleted()
+ }
+ },
+ { immediate: true }
+)
+
+watch(
+ challenges,
+ (newChallenges) => {
+ newChallenges.forEach((challenge) => {
+ //wait for 300ms before animating maybe?
+ nextTick(() => {
+ if (challenge.completion === 100) {
+ if (!animatedChallenges.value.includes(challenge.id as number)) {
+ console.log(!animatedChallenges.value.includes(challenge.id as number))
+ console.log('Animating challenge in watcher:', challenge.id)
+ animateChallenge(challenge)
+ saveAnimatedStateChallenge(challenge) // Refactor this to update localStorage correctly
+ }
+ }
+ })
+ })
+ },
+ { deep: true }
+)
</script>
<style scoped>
@@ -504,4 +625,8 @@ const goToEditGoal = () => {
.no-scrollbar {
-ms-overflow-style: none; /* for Internet Explorer and Edge */
}
+.glow {
+ box-shadow: 0 0 8px rgba(255, 242, 18, 0.8); /* Adjust color and size as needed */
+}
+
</style>
diff --git a/src/components/__tests__/InteractiveSpareTest.spec.ts b/src/components/__tests__/InteractiveSpareTest.spec.ts
index 47ae6b194a393cae1b57360e631fe1b6e3ccc17a..834c86ded8cd3fc66732ba222bb0750563484b2f 100644
--- a/src/components/__tests__/InteractiveSpareTest.spec.ts
+++ b/src/components/__tests__/InteractiveSpareTest.spec.ts
@@ -8,7 +8,8 @@ describe('SpeechBubbleComponent', () => {
props: {
direction: 'left',
speech: ['Hello', 'World'],
- pngSize: 100
+ pngSize: 100,
+ isModalOpen: true
}
})
expect(wrapper.exists()).toBeTruthy()
@@ -19,18 +20,20 @@ describe('SpeechBubbleComponent', () => {
props: {
direction: 'right',
speech: ['Hello', 'World'],
- pngSize: 100
+ pngSize: 100,
+ isModalOpen: true
}
})
- expect(wrapper.find('div').classes()).toContain('flex-row')
+ expect(wrapper.find('.spareDiv').classes()).toContain('flex-row')
const wrapperReverse = mount(SpeechBubbleComponent, {
props: {
direction: 'left',
speech: ['Hello', 'World'],
- pngSize: 100
+ pngSize: 100,
+ isModalOpen: true
}
})
- expect(wrapperReverse.find('div').classes()).toContain('flex-row-reverse')
+ expect(wrapperReverse.find('.spareDiv').classes()).toContain('flex-row-reverse')
})
it('image class is computed based on direction', () => {
@@ -38,22 +41,24 @@ describe('SpeechBubbleComponent', () => {
props: {
direction: 'right',
speech: ['Hello', 'World'],
- pngSize: 100
+ pngSize: 100,
+ isModalOpen: true
}
})
expect(wrapper.find('img').classes()).toContain('scale-x-[-1]')
})
- it('updates speech text on image click', async () => {
+ it('updates speech text on div click', async () => {
const wrapper = mount(SpeechBubbleComponent, {
props: {
direction: 'left',
speech: ['First speech', 'Second speech'],
- pngSize: 100
+ pngSize: 100,
+ isModalOpen: true
}
})
- expect(wrapper.find('p').text()).toBe('First speech')
- await wrapper.find('img').trigger('click')
- expect(wrapper.find('p').text()).toBe('Second speech')
+ expect(wrapper.find('.speech').text()).toBe('First speech')
+ await wrapper.find('.spareDiv').trigger('click')
+ expect(wrapper.find('.speech').text()).toBe('Second speech')
})
})
diff --git a/src/components/__tests__/NavBarTest.spec.ts b/src/components/__tests__/NavBarTest.spec.ts
deleted file mode 100644
index a04985617f5d080bd2997f743beab7723f2a47e5..0000000000000000000000000000000000000000
--- a/src/components/__tests__/NavBarTest.spec.ts
+++ /dev/null
@@ -1,123 +0,0 @@
-import { mount, VueWrapper } from '@vue/test-utils'
-import NavBar from '@/components/NavBarComponent.vue'
-import router from '@/router'
-import { createPinia, setActivePinia } from 'pinia'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-import { nextTick } from 'vue'
-
-vi.stubGlobal('scrollTo', vi.fn())
-// Mocking Axios correctly using `importOriginal`
-const mocks = vi.hoisted(() => ({
- get: vi.fn(),
- post: vi.fn()
-}))
-
-vi.mock('axios', async (importActual) => {
- const actual = await importActual<typeof import('axios')>()
-
- return {
- default: {
- ...actual.default,
- create: vi.fn(() => ({
- ...actual.default.create(),
- get: mocks.get,
- post: mocks.post
- }))
- }
- }
-})
-
-describe('NavBar Routing', () => {
- let wrapper: VueWrapper<any>
-
- beforeEach(async () => {
- const pinia = createPinia()
- setActivePinia(pinia)
-
- wrapper = mount(NavBar, {
- global: {
- plugins: [router, pinia]
- }
- })
-
- await router.push('/')
- await router.isReady()
- await nextTick()
- })
-
- it('renders without errors', () => {
- expect(wrapper.exists()).toBe(true)
- })
-
- it('displays correct active route for home link on full screen', async () => {
- global.innerWidth = 1200
- await router.push('/hjem')
- await router.isReady()
-
- expect(wrapper.find('.router-link-exact-active').exists()).toBe(true)
- })
-
- it('displays correct active route for goals link on full screen', async () => {
- global.innerWidth = 1200
-
- await router.push('/sparemaal')
- await router.isReady()
- expect(wrapper.find('.router-link-exact-active').exists()).toBe(true)
- })
-
- it('displays correct active route for challenges link on full screen', async () => {
- global.innerWidth = 1200
-
- await router.push('/spareutfordringer')
- await router.isReady()
- expect(wrapper.find('.router-link-exact-active').exists()).toBe(true)
- })
-
- it('displays correct active route for profile link on full screen', async () => {
- global.innerWidth = 1200
-
- await router.push('/profil')
- await router.isReady()
- expect(wrapper.find('.router-link-exact-active').exists()).toBe(true)
- })
-
- it('displays correct active route for home link when the hamburger menu is open', async () => {
- global.innerWidth = 1000
- wrapper.vm.hamburgerOpen = true
- await wrapper.vm.$nextTick()
-
- await router.push('/hjem')
- await router.isReady()
- expect(wrapper.find('.router-link-exact-active').exists()).toBe(true)
- })
-
- it('displays correct active route for goals link when the hamburger menu is open', async () => {
- global.innerWidth = 1000
- wrapper.vm.hamburgerOpen = true
- await wrapper.vm.$nextTick()
-
- await router.push('/sparemaal')
- await router.isReady()
- expect(wrapper.find('.router-link-exact-active').exists()).toBe(true)
- })
-
- it('displays correct active route for challenges link when the hamburger menu is open', async () => {
- global.innerWidth = 1000
- wrapper.vm.hamburgerOpen = true
- await wrapper.vm.$nextTick()
-
- await router.push('/spareutfordringer')
- await router.isReady()
- expect(wrapper.find('.router-link-exact-active').exists()).toBe(true)
- })
-
- it('displays correct active route for profile link when the hamburger menu is open', async () => {
- global.innerWidth = 1000
- wrapper.vm.hamburgerOpen = true
- await wrapper.vm.$nextTick()
-
- await router.push('/profil')
- await router.isReady()
- expect(wrapper.find('.router-link-exact-active').exists()).toBe(true)
- })
-})
diff --git a/src/router/index.ts b/src/router/index.ts
index 5f32e18fa4bcb61cf7ad48446e11dea346712c49..a83c4cebec17f37497004880422b63135c04680e 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,4 +1,5 @@
import { createRouter, createWebHistory } from 'vue-router'
+import { useUserStore } from '@/stores/userStore'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
@@ -18,6 +19,11 @@ const router = createRouter({
name: 'login',
component: () => import('@/views/RegisterLoginView.vue')
},
+ {
+ path: '/logginn/:username',
+ name: 'login-bio',
+ component: () => import('@/views/BiometricLoginView.vue')
+ },
{
path: '/registrer',
name: 'register',
@@ -31,12 +37,12 @@ const router = createRouter({
{
path: '/profil',
name: 'profile',
- component: () => import('@/views/ProfileView.vue')
+ component: () => import('@/views/ViewProfileView.vue')
},
{
path: '/profil/rediger',
name: 'edit-profile',
- component: () => import('@/views/EditProfileView.vue')
+ component: () => import('@/views/ManageProfileView.vue')
},
{
path: '/sparemaal',
@@ -108,25 +114,15 @@ const router = createRouter({
name: 'configurations6',
component: () => import('@/views/ConfigAccountNumberView.vue')
},
- {
- path: '/forsteSparemaal',
- name: 'firstSavingGoal',
- component: () => import('@/views/FirstSavingGoalView.vue')
- },
- {
- path: '/forsteSpareutfordring',
- name: 'firstSavingChallengde',
- component: () => import('@/views/FirstSavingChallengeView.vue')
- },
{
path: '/:pathMatch(.*)*',
name: 'not-found',
component: () => import('@/views/NotFoundView.vue')
},
{
- path: '/addAlternativeLogin',
- name: 'addAlternativeLogin',
- component: () => import('@/views/AddAlternativeLogin.vue')
+ path: '/konfigurerBiometri',
+ name: 'configure-biometric',
+ component: () => import('@/views/ConfigBiometricView.vue')
}
],
scrollBehavior() {
@@ -134,4 +130,60 @@ const router = createRouter({
}
})
+router.beforeEach(async (to, from, next) => {
+ const publicPages = [
+ { name: 'login' },
+ { name: 'register' },
+ { name: 'login-bio' },
+ { name: 'resetPassword' },
+ { name: 'start' }
+ ]
+
+ const authRequired = !publicPages.some((page) => page.name === to.name)
+ const hasLoginCredentials =
+ sessionStorage.getItem('accessToken') !== null &&
+ localStorage.getItem('refreshToken') !== null
+
+ if (authRequired && !hasLoginCredentials) {
+ console.log('Routing to login')
+ await router.replace({ name: 'login' })
+ return next({ name: 'login' })
+ } else if (!authRequired && !hasLoginCredentials) {
+ return next()
+ }
+
+ const configPages = [
+ { name: 'configure-biometric' },
+ { name: 'configurations1' },
+ { name: 'configurations2' },
+ { name: 'configurations3' },
+ { name: 'configurations4' },
+ { name: 'configurations5' },
+ { name: 'configurations6' }
+ ]
+
+ const userStore = useUserStore()
+
+ if (userStore.user.isConfigured == false) {
+ await userStore.checkIfUserConfigured()
+ }
+
+ const configRequired = !configPages.some((page) => page.name === to.name)
+ const isConfigured = userStore.user.isConfigured
+
+ if (configRequired && !isConfigured) {
+ await router.replace({ name: 'configure-biometric' })
+ return next({ name: 'configure-biometric' })
+ } else if (!configRequired && isConfigured) {
+ await router.replace({ name: 'home' })
+ return next({ name: 'home' })
+ }
+
+ if (!authRequired) {
+ await router.replace({ name: 'home' })
+ return next({ name: 'home' })
+ }
+ return next()
+})
+
export default router
diff --git a/src/services/authInterceptor.ts b/src/services/authInterceptor.ts
index 0b175e5abab8c805f71bab83cc5746d0bf750da7..4fd3936b4c2466b417b812294f8ed567db87a959 100644
--- a/src/services/authInterceptor.ts
+++ b/src/services/authInterceptor.ts
@@ -33,6 +33,8 @@ authInterceptor.interceptors.response.use(
!originalRequest._retry
) {
originalRequest._retry = true
+ sessionStorage.removeItem('accessToken')
+
const refreshToken = localStorage.getItem('refreshToken')
axios
.post('/auth/renewToken', null, {
@@ -41,21 +43,16 @@ authInterceptor.interceptors.response.use(
}
})
.then((response) => {
- sessionStorage.setItem('accessToken', response.data.accessToken)
- authInterceptor.defaults.headers['Authorization'] =
- `Bearer ${response.data.accessToken}`
- return authInterceptor(originalRequest)
+ router.push({ name: 'login-bio', params: { username: response.data.username } })
})
- .catch((err) => {
+ .catch(() => {
+ localStorage.removeItem('refreshToken')
router.push({ name: 'login' })
- return Promise.reject(err)
+
+ Promise.reject(error)
})
}
- // Specific handler for 404 errors
- if (error.response?.status === 404) {
- console.error('Requested resource not found:', error.config.url)
- // Optionally redirect or inform the user, depending on the context
- }
+
return Promise.reject(error)
}
)
diff --git a/src/stores/accountStore.ts b/src/stores/accountStore.ts
deleted file mode 100644
index b80263eafa362581f6c2e235d544456ad887274c..0000000000000000000000000000000000000000
--- a/src/stores/accountStore.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { defineStore } from 'pinia'
-import { ref } from 'vue'
-import authInterceptor from '@/services/authInterceptor'
-import { AxiosError } from 'axios'
-
-export const useAccountStore = defineStore('account', {
- state: () => ({
- errorMessage: ref<string>('')
- }),
- actions: {
- async postAccount(accountType: 'SAVING' | 'SPENDING', accNumber: string, balance: number) {
- const payload = {
- accountType,
- accNumber,
- balance
- }
-
- try {
- const response = await authInterceptor.post('/accounts', payload)
- console.log('Success:', response.data)
- } catch (error) {
- console.error('Error posting account:', error)
- this.handleAxiosError(error)
- }
- },
- handleAxiosError(error: any) {
- const axiosError = error as AxiosError
- if (axiosError.response && axiosError.response.data) {
- const errorData = axiosError.response.data as { message: string }
- } else {
- this.errorMessage = 'An unexpected error occurred'
- }
- }
- }
-})
diff --git a/src/stores/goalStore.ts b/src/stores/goalStore.ts
index 30367ad29f6151e418d24d6a29ca53b6632963ed..7fbc0718d96eeb4c6c534c12d45d05dbb720e822 100644
--- a/src/stores/goalStore.ts
+++ b/src/stores/goalStore.ts
@@ -5,13 +5,19 @@ import authInterceptor from '@/services/authInterceptor'
export const useGoalStore = defineStore('goal', () => {
const goals = ref<Goal[]>([])
+ const priorityGoal = ref<Goal | null>(null)
const getUserGoals = async () => {
try {
const response = await authInterceptor('/goals')
if (response.data && response.data.content) {
goals.value = response.data.content
+ for (const goal of goals.value) {
+ if (goal.priority) {
+ priorityGoal.value = goal
+ break
+ }
+ }
console.log(response.data.content)
- console.log('Fetched Goals:', goals.value)
} else {
goals.value = []
console.error('No goal content found:', response.data)
@@ -21,6 +27,7 @@ export const useGoalStore = defineStore('goal', () => {
goals.value = [] // Ensure challenges is always an array
}
}
+
// Assuming 'challenges' is a reactive state in your store that holds the list of challenges
const editUserGoal = async (goal: Goal) => {
if (!goal || goal.id === null) {
@@ -45,7 +52,8 @@ export const useGoalStore = defineStore('goal', () => {
}
return {
goals,
+ priorityGoal,
getUserGoals,
- editUserGoal
+ editUserGoal,
}
})
diff --git a/src/stores/userConfigStore.ts b/src/stores/userConfigStore.ts
index 6f1e0f1ccbe25f90f463aed9ef97ec9b63ac4319..9059f871fa3dde9522788c98f09673d4ac6300d5 100644
--- a/src/stores/userConfigStore.ts
+++ b/src/stores/userConfigStore.ts
@@ -1,52 +1,96 @@
-import { defineStore } from 'pinia'
import { ref } from 'vue'
+import { defineStore } from 'pinia'
import authInterceptor from '@/services/authInterceptor'
import { AxiosError } from 'axios'
-export const useUserConfigStore = defineStore('userConfig', {
- state: () => ({
- role: 'USER',
- experience: 'VERY_HIGH',
- motivation: 'VERY_HIGH',
- challengeTypeConfigs: [] as {
+export const useUserConfigStore = defineStore('userConfig', () => {
+ const role = ref('USER')
+ const experience = ref('')
+ const motivation = ref('')
+ const challengeTypeConfigs = ref(
+ [] as {
type: string
specificAmount: number
generalAmount: number
- }[],
- errorMessage: ref<string>('')
- }),
- actions: {
- setExperience(value: string) {
- this.experience = value
- },
- setMotivation(value: string) {
- this.motivation = value
- },
- addChallengeTypeConfig(type: string, specificAmount: number, generalAmount: number) {
- this.challengeTypeConfigs.push({ type, specificAmount, generalAmount })
- },
- postUserConfig() {
- const payload = {
- experience: this.experience,
- motivation: this.motivation,
- challengeTypeConfigs: Array.from(this.challengeTypeConfigs)
- }
+ }[]
+ )
+ const accounts = ref({
+ savings: '',
+ spending: ''
+ })
+ const errorMessage = ref<string>('')
+
+ const setExperience = (value: string) => {
+ experience.value = value
+ }
- authInterceptor
- .post('/config/challenge', payload)
- .then((response) => {
- console.log('Success:', response.data)
- })
- .catch((error) => {
- const axiosError = error as AxiosError
- if (axiosError.response && axiosError.response.data) {
- const errorData = axiosError.response.data as { message: string }
- this.errorMessage = errorData.message || 'An error occurred'
- } else {
- this.errorMessage = 'An unexpected error occurred'
- }
- console.error('Axios error:', this.errorMessage)
- })
+ const setMotivation = (value: string) => {
+ motivation.value = value
+ }
+
+ const addChallengeTypeConfig = (
+ type: string,
+ specificAmount: number,
+ generalAmount: number
+ ) => {
+ challengeTypeConfigs.value.push({ type, specificAmount, generalAmount })
+ }
+
+ const postAccount = async (
+ accountType: 'SAVING' | 'SPENDING',
+ accNumber: string,
+ balance: number
+ ) => {
+ const payload = {
+ accountType,
+ accNumber,
+ balance
+ }
+ await authInterceptor
+ .post('/accounts', payload)
+ .then((response) => {
+ console.log('Success:', response.data)
+ })
+ .catch((error) => {
+ const axiosError = error as AxiosError
+ errorMessage.value =
+ (axiosError.response?.data as string) ||
+ 'An error occurred while posting account'
+ console.error('Error posting account:', errorMessage.value)
+ })
+ }
+
+ const postUserConfig = async () => {
+ const payload = {
+ experience: experience.value,
+ motivation: motivation.value,
+ challengeTypeConfigs: Array.from(challengeTypeConfigs.value)
}
+ await authInterceptor
+ .post('/config/challenge', payload)
+ .then((response) => {
+ console.log('Success:', response.data)
+ })
+ .catch((error) => {
+ const axiosError = error as AxiosError
+ errorMessage.value =
+ (axiosError.response?.data as string) ||
+ 'An error occurred while updating configuration'
+ console.error('Error updating configuration:', errorMessage.value)
+ })
+ }
+
+ return {
+ role,
+ experience,
+ motivation,
+ challengeTypeConfigs,
+ accounts,
+ errorMessage,
+ setExperience,
+ setMotivation,
+ addChallengeTypeConfig,
+ postAccount,
+ postUserConfig
}
})
diff --git a/src/stores/userStore.ts b/src/stores/userStore.ts
index eff4fd1479cd1bf9b70c10e6650a054ae0b6321c..94669a31e1099c20b3af3ec494c836b675976529 100644
--- a/src/stores/userStore.ts
+++ b/src/stores/userStore.ts
@@ -14,7 +14,8 @@ export const useUserStore = defineStore('user', () => {
const defaultUser: User = {
firstname: 'Firstname',
lastname: 'Lastname',
- username: 'Username'
+ username: 'Username',
+ isConfigured: false
}
const user = ref<User>(defaultUser)
@@ -30,7 +31,7 @@ export const useUserStore = defineStore('user', () => {
) => {
await axios
.post(`http://localhost:8080/auth/register`, {
- firstName: firstname, //TODO rename all instances of firstname to firstName
+ firstName: firstname,
lastName: lastname,
email: email,
username: username,
@@ -44,7 +45,7 @@ export const useUserStore = defineStore('user', () => {
user.value.lastname = lastname
user.value.username = username
- router.push({ name: 'addAlternativeLogin' })
+ router.push({ name: 'configure-biometric' })
})
.catch((error) => {
const axiosError = error as AxiosError
@@ -66,7 +67,11 @@ export const useUserStore = defineStore('user', () => {
user.value.lastname = response.data.lastName
user.value.username = response.data.username
- router.push({ name: 'home' })
+ checkIfUserConfigured()
+
+ user.value.isConfigured
+ ? router.push({ name: 'home' })
+ : router.push({ name: 'configure-biometric' })
})
.catch((error) => {
const axiosError = error as AxiosError
@@ -79,22 +84,19 @@ export const useUserStore = defineStore('user', () => {
sessionStorage.removeItem('accessToken')
localStorage.removeItem('refreshToken')
user.value = defaultUser
+ console.log(user.value)
router.push({ name: 'login' })
}
- const getUserStreak = async () => {
- try {
- const response = await authInterceptor('/profile/streak')
- if (response.data) {
+
+ const getUserStreak = () => {
+ authInterceptor('/profile/streak')
+ .then((response) => {
streak.value = response.data
- console.log('Fetched Challenges:', streak.value)
- } else {
+ })
+ .catch((error) => {
+ console.error('Error fetching challenges:', error)
streak.value = undefined
- console.error('No challenge content found:', response.data)
- }
- } catch (error) {
- console.error('Error fetching challenges:', error)
- streak.value = undefined // Ensure challenges is always an array
- }
+ })
}
const bioRegister = async () => {
@@ -145,11 +147,11 @@ export const useUserStore = defineStore('user', () => {
await authInterceptor
.post('/auth/finishBioRegistration', { credential: JSON.stringify(encodedResult) })
- .then((response) => {
+ .then(() => {
router.push({ name: 'configurations1' })
})
} catch (error) {
- router.push({ name: 'configurations1' })
+ await router.push({ name: 'configurations1' })
console.error(error)
}
}
@@ -230,7 +232,20 @@ export const useUserStore = defineStore('user', () => {
}
}
+ const checkIfUserConfigured = async () => {
+ await authInterceptor('/config')
+ .then((response) => {
+ user.value.isConfigured = response.data.challengeConfig != null
+ console.log('User configured: ' + user.value.isConfigured)
+ })
+ .catch(() => {
+ user.value.isConfigured = false
+ })
+ }
+
return {
+ user,
+ checkIfUserConfigured,
register,
login,
logout,
diff --git a/src/types/user.ts b/src/types/user.ts
index a420d33a4deb8de0e12fb303edf205b3be5e703f..624188688f1bec4c544ebf3b4d21d50f4a2d9be9 100644
--- a/src/types/user.ts
+++ b/src/types/user.ts
@@ -2,4 +2,6 @@ export interface User {
firstname: string
lastname: string
username: string
+ isConfigured: boolean
+ isBiometric?: boolean
}
diff --git a/src/views/BiometricLoginView.vue b/src/views/BiometricLoginView.vue
new file mode 100644
index 0000000000000000000000000000000000000000..03d4aeef8f2c91e7a33e4079589be0fd8d7e4928
--- /dev/null
+++ b/src/views/BiometricLoginView.vue
@@ -0,0 +1,7 @@
+<script lang="ts" setup></script>
+
+<template>
+ <h1>Hei brukernavn, velkommen tilbake</h1>
+</template>
+
+<style scoped></style>
diff --git a/src/views/ConfigAccountNumberView.vue b/src/views/ConfigAccountNumberView.vue
index 652cf0d11ba68e92f47d8b6e14171faa565cf321..1a7a4ae9d3951d390dc26cda9c2405a141e1b2f8 100644
--- a/src/views/ConfigAccountNumberView.vue
+++ b/src/views/ConfigAccountNumberView.vue
@@ -47,12 +47,12 @@
<script setup lang="ts">
import { computed, ref } from 'vue'
-import { useAccountStore } from '@/stores/accountStore'
+import { useUserConfigStore } from '@/stores/userConfigStore'
import ContinueButtonComponent from '@/components/ContinueButtonComponent.vue'
import router from '@/router'
const MAX_DIGITS = 11
-const accountStore = useAccountStore()
+const userConfigStore = useUserConfigStore()
const spendingAccount = ref('')
const savingsAccount = ref('')
@@ -68,11 +68,11 @@ async function onButtonClick() {
const savingAccountNumber = savingsAccount.value.replace(/\./g, '')
const spendingAccountNumber = spendingAccount.value.replace(/\./g, '')
- await accountStore.postAccount('SAVING', savingAccountNumber, 0)
+ await userConfigStore.postAccount('SAVING', savingAccountNumber, 0)
+ await userConfigStore.postAccount('SPENDING', spendingAccountNumber, 0)
+ await userConfigStore.postUserConfig()
- await accountStore.postAccount('SPENDING', spendingAccountNumber, 0)
-
- await router.push({ name: 'home' })
+ await router.push({ name: 'home', query: { firstLogin: 'true' } })
}
function restrictToNumbers(event: InputEvent, type: string) {
diff --git a/src/views/AddAlternativeLogin.vue b/src/views/ConfigBiometricView.vue
similarity index 100%
rename from src/views/AddAlternativeLogin.vue
rename to src/views/ConfigBiometricView.vue
diff --git a/src/views/ConfigSpendingItemsTotalAmountView.vue b/src/views/ConfigSpendingItemsTotalAmountView.vue
index 098ba86faec729bcbc8450ad91268d7e65d82536..366a3422a2299a21271c7733526b086475ac0c8e 100644
--- a/src/views/ConfigSpendingItemsTotalAmountView.vue
+++ b/src/views/ConfigSpendingItemsTotalAmountView.vue
@@ -93,7 +93,6 @@ const onButtonClick = async () => {
parseFloat(amounts.value[index]) || 0
})
- userConfigStore.postUserConfig()
await router.push({ name: 'configurations6' })
}
diff --git a/src/views/FirstSavingChallengeView.vue b/src/views/FirstSavingChallengeView.vue
deleted file mode 100644
index 23cc78e8411420523f7b280e58da5ef88564005b..0000000000000000000000000000000000000000
--- a/src/views/FirstSavingChallengeView.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<template>
- <div class="flex flex-col items-center justify-start min-h-screen px-4 text-center">
- <div class="mb-20">
- <div
- class="flex flex-col items-center justify-start bg-white shadow-md rounded-lg p-16"
- style="height: 530px; min-height: 500px; min-width: 400px; max-width: 400px"
- >
- <template v-if="!skipped && !accepted">
- <div class="mb-6 w-full text-left">
- <label for="savings-goal" class="block text-4xl font-bold mb-2"
- >Spareutfordring</label
- >
- </div>
- <div class="flex flex-col w-full mb-4">
- <button
- v-for="buttonText in buttonOptions"
- :key="buttonText"
- :class="[
- 'mb-4 text-xl font-bold w-full rounded-lg py-3 px-4',
- selectedOptions.includes(buttonText)
- ? 'bg-transparent border-2 border-[var(--green)]'
- : 'bg-transparent border-2 border-gray-300'
- ]"
- @click="toggleOption(buttonText)"
- >
- {{ buttonText }}
- </button>
- </div>
- <div class="flex justify-between w-full mt-4 space-x-2">
- <button
- class="border-4 font-bold rounded-lg py-2 px-10 text-lg transition-all bg-[var(--green)] hover:brightness-90 active:brightness-75"
- @click="skip"
- style="margin-top: 29px"
- >
- Skip
- </button>
- <button
- :class="[
- 'border-4 font-bold rounded-lg py-2 px-10 text-lg transition-all',
- {
- 'bg-[var(--green)] hover:brightness-90 active:brightness-75':
- selectedOptions.length > 0
- },
- {
- 'opacity-60 bg-[rgba(149,227,93,0.6)] cursor-not-allowed':
- selectedOptions.length === 0
- }
- ]"
- :disabled="selectedOptions.length === 0"
- @click="accept"
- style="margin-top: 29px"
- >
- Godta
- </button>
- </div>
- </template>
- <template v-else>
- <div class="flex justify-center items-center h-full">
- <div class="text-4xl font-bold">{{ acceptedMessage }}</div>
- </div>
- </template>
- </div>
- </div>
- <ContinueButtonComponent
- :disabled="!skipped && !accepted"
- @click="onButtonClick"
- class="px-10 py-3 text-2xl font-bold self-end mb-32 mt-[-10px]"
- ></ContinueButtonComponent>
- </div>
-</template>
-
-<script setup lang="ts">
-import ContinueButtonComponent from '@/components/ContinueButtonComponent.vue'
-import router from '@/router'
-import { ref, watchEffect } from 'vue'
-
-const buttonOptions = ref(['Ikke kjøpe kaffe', 'Ikke kjøpe snus', 'Ikke kjøpe mat i kantina'])
-const selectedOptions = ref<string[]>([])
-const skipped = ref(false)
-const accepted = ref(false)
-
-const toggleOption = (option: string) => {
- const index = selectedOptions.value.indexOf(option)
- if (index === -1) {
- selectedOptions.value.push(option)
- } else {
- selectedOptions.value.splice(index, 1)
- }
-}
-
-const onButtonClick = () => {
- router.push('/')
-}
-
-const skip = () => {
- skipped.value = true
-}
-
-const accept = () => {
- accepted.value = true
-}
-
-const acceptedMessage = ref('Du kan opprette spareutfordringer senere')
-
-watchEffect(() => {
- if (accepted.value) {
- acceptedMessage.value = 'Du har fått din første spareutfordring!'
- } else if (skipped.value) {
- acceptedMessage.value = 'Du kan opprette spareutfordringer senere'
- }
-})
-</script>
diff --git a/src/views/FirstSavingGoalView.vue b/src/views/FirstSavingGoalView.vue
deleted file mode 100644
index bd28ba97b26defe4d241f903d973e542c9636717..0000000000000000000000000000000000000000
--- a/src/views/FirstSavingGoalView.vue
+++ /dev/null
@@ -1,142 +0,0 @@
-<template>
- <div class="flex flex-col items-center justify-start min-h-screen px-4 text-center">
- <div class="mb-20">
- <div
- class="flex flex-col items-center justify-center bg-white shadow-md rounded-lg p-16"
- style="height: 530px; min-height: 500px; min-width: 400px; max-width: 400px"
- >
- <template v-if="!skipped && !accepted">
- <div class="mb-6 w-full text-left">
- <label for="savings-goal" class="block text-xl font-bold mb-2"
- >Jeg vil spare til:</label
- >
- <input
- type="text"
- id="savings-goal"
- v-model="savingsGoal"
- :class="{
- 'border-[var(--green)]': savingsGoal.valueOf(),
- 'border-gray-300': !savingsGoal.valueOf()
- }"
- class="border-2 block w-full rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 text-xl"
- placeholder=""
- />
- </div>
- <div class="mb-8 w-full flex items-center">
- <label for="amount" class="shrink-0 text-xl font-bold mr-2"
- >Jeg vil spare:</label
- >
- <input
- type="text"
- id="amount"
- v-model="rawAmount"
- :class="{
- 'border-[var(--green)]': rawAmount.valueOf(),
- 'border-gray-300': !rawAmount.valueOf()
- }"
- class="border-2 rounded-md shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 text-xl mr-2 block w-full"
- placeholder=""
- min="0"
- />
- <span class="shrink-0 text-xl font-bold">kr</span>
- </div>
- <div class="w-full px-4 py-2">
- <img src="@/assets/penger.png" alt="Savings" class="mx-auto w-36 h-32" />
- </div>
- <div class="flex justify-between w-full mt-4 space-x-2">
- <button
- class="bg-[var(--green)] border-4 border-[var(--green)] hover:brightness-90 active:brightness-75 font-bold rounded-lg py-2 px-10 text-lg"
- @click="skip"
- >
- Skip
- </button>
- <button
- :class="[
- 'border-4 font-bold rounded-lg py-2 px-10 text-lg transition-all',
- canAccept
- ? 'bg-[var(--green)] hover:brightness-90 active:brightness-75'
- : 'opacity-60 bg-gray-300 cursor-not-allowed'
- ]"
- :disabled="!canAccept"
- @click="accept"
- >
- Godta
- </button>
- </div>
- </template>
- <template v-else>
- <div
- class="flex justify-start items-center h-full min-h-[400px] min-w-[400px] max-w-[400px]"
- >
- <div class="text-4xl font-bold">{{ acceptedMessage }}</div>
- </div>
- </template>
- </div>
- </div>
- <ContinueButtonComponent
- :disabled="!skipped && !accepted"
- @click="onButtonClick"
- class="px-10 py-3 text-lg font-bold self-end mb-80 mt-[-10px]"
- ></ContinueButtonComponent>
- </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, watch, watchEffect } from 'vue'
-import ContinueButtonComponent from '@/components/ContinueButtonComponent.vue'
-import router from '@/router'
-
-const savingsGoal = ref('')
-const rawAmount = ref('')
-const skipped = ref(false)
-const accepted = ref(false)
-
-const validateAmount = () => {
- const validPattern = /^(\d+)?(,\d*)?$/
- if (!validPattern.test(rawAmount.value)) {
- rawAmount.value = rawAmount.value.slice(0, -1)
- } else if (rawAmount.value.includes(',')) {
- rawAmount.value = rawAmount.value.replace(/,+/g, ',')
- }
-}
-
-const checkNegative = () => {
- const numericValue = parseFloat(rawAmount.value.replace(',', '.'))
- if (numericValue < 0) {
- rawAmount.value = ''
- }
-}
-
-watch(rawAmount, validateAmount)
-watch(() => parseFloat(rawAmount.value.replace(',', '.')), checkNegative)
-
-const canAccept = computed(() => savingsGoal.value.trim() !== '' && rawAmount.value.trim() !== '')
-
-const skip = () => {
- skipped.value = true
- acceptedMessage.value = 'Du kan opprette sparemål senere'
-}
-
-const accept = () => {
- if (canAccept.value) {
- accepted.value = true
- acceptedMessage.value = 'Du har fått ditt første sparemål!'
- }
-}
-
-const onButtonClick = () => {
- if (skipped.value || accepted.value) {
- router.push('/forsteSpareutfordring')
- }
-}
-
-const acceptedMessage = ref('')
-
-watchEffect(() => {
- if (accepted.value) {
- acceptedMessage.value = 'Du har fått ditt første sparemål!'
- } else if (skipped.value) {
- acceptedMessage.value = 'Du kan opprette sparemål senere'
- }
-})
-</script>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index a93dd566264211f99ffafbae6c102eb4eac9e1b7..696cfe45e4e2ab39f2358e7286bd82a961f88e3c 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,12 +1,21 @@
<template>
<div class="flex flex-col items-center max-h-[60vh] md:flex-row md:max-h-[80vh] mx-auto">
- <div class="flex flex-col basis-1/3 order-last md:order-first md:basis-1/4 md:pl-10">
- <InteractiveSpare
- :speech="speech"
- :direction="'right'"
- :pngSize="15"
- class="opacity-0 h-0 w-0 md:opacity-100 md:h-auto md:w-auto md:mx-auto md:my-20"
- ></InteractiveSpare>
+ <div class="flex flex-col basis-1/3 order-last md:order-first md:basis-1/4 md:pl-1 mt-10">
+ <img
+ v-if="newSpeechAvailable"
+ alt="Varsel"
+ class="jump scale-x-[-1] w-1/12 h-1/12 ml-52 cursor-pointer z-10"
+ src="@/assets/varsel.png"
+ />
+ <div class="flex items-center">
+ <a @click="openInteractiveSpare" class="hover:bg-transparent z-20">
+ <img
+ alt="Spare"
+ class="scale-x-[-1] md:h-5/6 md:w-5/6 w-2/3 h-2/3 cursor-pointer ml-14 md:ml-10"
+ src="@/assets/spare.png"
+ />
+ </a>
+ </div>
<div class="flex flex-row gap-2 items-center mx-auto my-4 md:flex-col md:gap-4 md:m-8">
<ButtonAddGoalOrChallenge :buttonText="'Legg til sparemål'" :type="'goal'" />
<ButtonAddGoalOrChallenge
@@ -17,6 +26,18 @@
</div>
<savings-path :challenges="challenges" :goal="goal"></savings-path>
</div>
+ <InteractiveSpare
+ :speech="speech"
+ :direction="'right'"
+ :pngSize="15"
+ :isModalOpen="isModalOpen"
+ class="opacity-0 h-0 w-0 md:opacity-100 md:h-auto md:w-auto"
+ ></InteractiveSpare>
+ <div class="fixed bottom-5 left-5">
+ <div @click="openHelp" class="hover:cursor-pointer">
+ <img alt="Hjelp" class="w-1/12" src="@/assets/hjelp.png" />
+ </div>
+ </div>
</template>
<script setup lang="ts">
@@ -28,9 +49,14 @@ import type { Goal } from '@/types/goal'
import { useGoalStore } from '@/stores/goalStore'
import { useChallengeStore } from '@/stores/challengeStore'
import SavingsPath from '@/components/SavingsPath.vue'
+import router from '@/router'
+
const goalStore = useGoalStore()
const challengeStore = useChallengeStore()
+const isModalOpen = ref(false)
+const speech = ref<string[]>([])
+const newSpeechAvailable = ref(false)
const challenges = ref<Challenge[]>([])
const goals = ref<Goal[]>([])
@@ -41,21 +67,54 @@ onMounted(async () => {
await goalStore.getUserGoals()
await challengeStore.getUserChallenges()
challenges.value = challengeStore.challenges
- goals.value = goalStore.goals
- for (const g of goals.value){
- if (g.priority==1){
- goal.value = g;
- }
- }
- console.log('Goals:', goals.value)
+ goal.value = goalStore.priorityGoal
+ firstLoggedInSpeech()
})
-// Define your speech array
-const speechArray = [
- 'Hei! Jeg er Sparemannen.',
- 'Jeg hjelper deg med å spare penger.',
- 'Klikk på meg for å høre mer.'
-]
+// Check if the user is logging in for the first time, and display the first login speech
+const firstLoggedInSpeech = () => {
+ const isFirstLogin = router.currentRoute.value.query.firstLogin === 'true'
+ if (isFirstLogin) {
+ speech.value = [
+ 'Hei, jeg er Spare!',
+ 'Jeg skal hjelpe deg med å spare penger.',
+ 'Du får varsel når jeg har noe å si!'
+ ]
+ isModalOpen.value = true
+ router.replace({ name: 'home', query: { firstLogin: 'false' } })
+ }
+}
-const speech = ref(speechArray)
+const openInteractiveSpare = () => {
+ // Check if there's new speech available before opening the modal.
+ if (newSpeechAvailable.value) {
+ isModalOpen.value = true // Open the modal
+ newSpeechAvailable.value = false // Reset the flag since the speech will now be displayed
+ }
+}
+const openHelp = () => {
+ speech.value = [
+ 'Heisann, jeg er Spare!',
+ 'Jeg skal hjelpe deg med å spare penger.',
+ 'Du kan legge til sparemål og spareutfordringer!',
+ 'Sammen kan vi spare penger og nå dine mål!'
+ ]
+ isModalOpen.value = true
+}
</script>
+
+<style>
+@keyframes jump {
+ 0%,
+ 100% {
+ transform: translateY(0);
+ }
+ 50% {
+ transform: translateY(-10px);
+ }
+}
+
+.jump {
+ animation: jump 0.6s infinite ease-in-out;
+}
+</style>
diff --git a/src/views/ManageGoalView.vue b/src/views/ManageGoalView.vue
index 89111da2adca167258778dfe594d564b73693427..a3a246c4497701c183f38a3cf9b953a461b895c2 100644
--- a/src/views/ManageGoalView.vue
+++ b/src/views/ManageGoalView.vue
@@ -99,7 +99,7 @@ const updateGoal = () => {
authInterceptor
.put(`/goals/${goalInstance.value.id}`, goalInstance.value)
.then(() => {
- router.push({ name: 'goals' })
+ router.back()
})
.catch((error) => {
console.error(error)
diff --git a/src/views/EditProfileView.vue b/src/views/ManageProfileView.vue
similarity index 98%
rename from src/views/EditProfileView.vue
rename to src/views/ManageProfileView.vue
index 82da35481c774c789baffd3264b4a36cbbe45614..93f3d313ab5a652d8c2528ff2290c236e3ae81f1 100644
--- a/src/views/EditProfileView.vue
+++ b/src/views/ManageProfileView.vue
@@ -2,7 +2,7 @@
import authInterceptor from '@/services/authInterceptor'
import { computed, onMounted, ref } from 'vue'
import type { Profile } from '@/types/profile'
-import CardTemplate from '@/views/CardTemplate.vue'
+import CardTemplate from '@/components/CardTemplate.vue'
import router from '@/router'
import ToolTip from '@/components/ToolTip.vue'
import InteractiveSpare from '@/components/InteractiveSpare.vue'
@@ -27,6 +27,7 @@ const profile = ref<Profile>({
const updatePassword = ref<boolean>(false)
const confirmPassword = ref<string>('')
const errorMessage = ref<string>('')
+const isModalOpen = ref(false)
const nameRegex = /^[æÆøØåÅa-zA-Z,.'-][æÆøØåÅa-zA-Z ,.'-]{1,29}$/
const emailRegex =
@@ -210,6 +211,7 @@ const saveChanges = async () => {
:png-size="10"
:speech="['Her kan du endre på profilen din!']"
direction="left"
+ :isModalOpen="isModalOpen"
/>
<CardTemplate>
diff --git a/src/views/RegisterLoginView.vue b/src/views/RegisterLoginView.vue
index 738002afa9461e9df0acbd0f592b327303ec33ba..16d78619fdf348fd038c8858499065d46d11c923 100644
--- a/src/views/RegisterLoginView.vue
+++ b/src/views/RegisterLoginView.vue
@@ -2,9 +2,7 @@
import FormLogin from '@/components/FormLogin.vue'
import FormRegister from '@/components/FormRegister.vue'
import { onMounted, ref } from 'vue'
-import { useRouter } from 'vue-router'
-
-const router = useRouter()
+import router from '@/router'
const isLogin = ref<boolean>(true)
diff --git a/src/views/ViewChallengeView.vue b/src/views/ViewChallengeView.vue
index f7bf05e69a55a93bbb37f10f56a5b9a6f9f7370a..71b2a67e67c73f158626efb25d67a80bb0e78edc 100644
--- a/src/views/ViewChallengeView.vue
+++ b/src/views/ViewChallengeView.vue
@@ -29,6 +29,8 @@ const isCompleted = computed(() => challengeInstance.value.completedOn != null)
const motivation = ref<string[]>([])
+const isModalOpen = ref(false)
+
const calculateSpeech = () => {
if (completion.value === 0) {
return motivation.value.push(
@@ -140,7 +142,12 @@ const completeChallenge = () => {
</button>
</div>
</div>
- <InteractiveSpare :png-size="10" :speech="motivation" direction="left" />
+ <InteractiveSpare
+ :png-size="10"
+ :speech="motivation"
+ direction="left"
+ :isModalOpen="isModalOpen"
+ />
</div>
</template>
diff --git a/src/views/ViewGoalView.vue b/src/views/ViewGoalView.vue
index a2e9b176009b30935987283ef7482ae1560eec34..50ec73bb87ee4c101808f113f552a58e90ca94db 100644
--- a/src/views/ViewGoalView.vue
+++ b/src/views/ViewGoalView.vue
@@ -20,6 +20,11 @@ const completion = computed(() => (goalInstance.value.saved / goalInstance.value
const isCompleted = computed(() => goalInstance.value.completedOn != null)
const motivation = ref<string[]>([])
+const isModalOpen = ref(false)
+
+const openInteractiveSpare = () => {
+ isModalOpen.value = true
+}
const calculateSpeech = () => {
if (completion.value === 0) {
@@ -126,7 +131,21 @@ const completeGoal = () => {
</button>
</div>
</div>
- <InteractiveSpare :png-size="10" :speech="motivation" direction="left" />
+ <div class="flex items-center">
+ <a @click="openInteractiveSpare" class="hover:bg-transparent z-20">
+ <img
+ alt="Spare"
+ class="scale-x-[-1] md:h-5/6 md:w-5/6 w-2/3 h-2/3 cursor-pointer ml-14 md:ml-10"
+ src="@/assets/spare.png"
+ />
+ </a>
+ </div>
+ <InteractiveSpare
+ :png-size="10"
+ :speech="motivation"
+ direction="left"
+ :isModalOpen="isModalOpen"
+ />
</div>
</template>
diff --git a/src/views/ProfileView.vue b/src/views/ViewProfileView.vue
similarity index 84%
rename from src/views/ProfileView.vue
rename to src/views/ViewProfileView.vue
index 436e522c7c815ad6cb5725724b76a8f76779d75d..179305f734e027b6b48453fa7b9671d941e5ec23 100644
--- a/src/views/ProfileView.vue
+++ b/src/views/ViewProfileView.vue
@@ -2,7 +2,7 @@
import authInterceptor from '@/services/authInterceptor'
import { computed, onMounted, ref } from 'vue'
import type { Profile } from '@/types/profile'
-import CardTemplate from '@/views/CardTemplate.vue'
+import CardTemplate from '@/components/CardTemplate.vue'
import InteractiveSpare from '@/components/InteractiveSpare.vue'
import type { Challenge } from '@/types/challenge'
import type { Goal } from '@/types/goal'
@@ -12,6 +12,7 @@ import router from '@/router'
const profile = ref<Profile>()
const completedGoals = ref<Goal[]>([])
const completedChallenges = ref<Challenge[]>([])
+const isModalOpen = ref(false)
onMounted(async () => {
await authInterceptor('/profile')
@@ -43,6 +44,10 @@ onMounted(async () => {
const welcome = computed(() => {
return [`Velkommen, ${profile.value?.firstName} ${profile.value?.lastName} !`]
})
+
+const openInteractiveSpare = () => {
+ isModalOpen.value = true
+}
</script>
<template>
@@ -87,7 +92,21 @@ const welcome = computed(() => {
</div>
<div class="flex flex-col">
- <InteractiveSpare :png-size="10" :speech="welcome" direction="left" />
+ <InteractiveSpare
+ :png-size="10"
+ :speech="welcome"
+ direction="left"
+ :isModalOpen="isModalOpen"
+ />
+ <div class="flex items-center">
+ <a @click="openInteractiveSpare" class="hover:bg-transparent z-20">
+ <img
+ alt="Spare"
+ class="scale-x-[-1] md:h-5/6 md:w-5/6 w-2/3 h-2/3 cursor-pointer ml-14 md:ml-10"
+ src="@/assets/spare.png"
+ />
+ </a>
+ </div>
<div class="flex flex-row justify-between mx-4">
<p class="font-bold">Fullførte sparemål</p>
<a class="hover:p-0 cursor-pointer" v-text="'Se alle'" />