diff --git a/src/App.vue b/src/App.vue
index 6cd1e8f97ea32c80831eb29c2ff51bc86c2722ac..fce63710ce53e6e5aed841c01ee4cb833b187fe6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,7 +9,7 @@ const showNavBar = computed(() => {
return !(
route.path == '/' ||
route.path == '/registrer' ||
- route.path == '/logginn' ||
+ route.path.startsWith('/logginn') ||
route.path == '/forgotPassword' ||
route.path.startsWith('/konfigurasjon')
)
diff --git a/src/components/ButtonAddGoalOrChallenge.vue b/src/components/ButtonAddGoalOrChallenge.vue
index 3516e5c8e1f65d73e58c032fa5c0cd5209dc6404..315df32fde52a4eb46597be56b1a0c2e6b6ba4cd 100644
--- a/src/components/ButtonAddGoalOrChallenge.vue
+++ b/src/components/ButtonAddGoalOrChallenge.vue
@@ -25,20 +25,25 @@
import { defineProps, ref } from 'vue'
import { useRouter } from 'vue-router'
-interface Props {
- buttonText: string
- type: 'goal' | 'challenge'
-}
+const props = defineProps({
+ buttonText: String,
+ type: String,
+ showModal: Boolean
+})
+
+const emit = defineEmits(['update:showModal'])
+
const router = useRouter()
-const props = defineProps<Props>()
const btnText = ref(props.buttonText)
const routeToGoalOrChallenge = () => {
if (props.type === 'goal') {
router.push('/sparemaal')
- } else {
+ } else if (props.type === 'challenge') {
router.push('/spareutfordringer')
+ } else if (props.type === 'generatedChallenge') {
+ emit('update:showModal', true)
}
}
</script>
diff --git a/src/components/FormLogin.vue b/src/components/FormLogin.vue
index 363580072249635f9a74c6a5e1e9ec0eac6cbdc3..77ea487e96e130c97a5da09c0ab61825043e5509 100644
--- a/src/components/FormLogin.vue
+++ b/src/components/FormLogin.vue
@@ -23,10 +23,6 @@ const submitForm = () => {
userStore.login(username.value, password.value)
}
-const bioLogin = () => {
- userStore.bioLogin(username.value)
-}
-
const toggleShowPassword = () => {
showPassword.value = !showPassword.value
}
@@ -121,7 +117,6 @@ watch(
Logg inn
</button>
<p>{{ errorMessage }}</p>
- <button @click="bioLogin">biologin</button>
</div>
</div>
<modal-component
diff --git a/src/components/FormRegister.vue b/src/components/FormRegister.vue
index 750dad0a7838f216daeb68e021d402c9bf255789..c9a1cff8dc83a47ad6a71a2c86362dde0dff394c 100644
--- a/src/components/FormRegister.vue
+++ b/src/components/FormRegister.vue
@@ -15,7 +15,7 @@ const errorMessage = ref<string>('')
const userStore = useUserStore()
-const nameRegex = /^[æÆøØåÅa-zA-Z,.'-][æÆøØåÅa-zA-Z ,.'-]{1,29}$/
+const nameRegex = /^[æÆøØåÅa-zA-Z,.'-][æÆøØåÅa-zA-Z ,.'-]{0,29}$/
const emailRegex =
/^[æÆøØåÅa-zA-Z0-9_+&*-]+(?:\.[æÆøØåÅa-zA-Z0-9_+&*-]+)*@(?:[æÆøØåÅa-zA-Z0-9-]+\.)+[æÆøØåÅa-zA-Z]{2,7}$/
const usernameRegex = /^[ÆØÅæøåA-Za-z][æÆøØåÅA-Za-z0-9_]{2,29}$/
diff --git a/src/components/GeneratedChallengesModal.vue b/src/components/GeneratedChallengesModal.vue
index ddfbcbede76d06fffb0c0f4f2eff905dac0bed51..cdb9e59327d0e5f58ada0b3002cf69f8082bf424 100644
--- a/src/components/GeneratedChallengesModal.vue
+++ b/src/components/GeneratedChallengesModal.vue
@@ -1,13 +1,10 @@
<template>
<div
- v-if="generatedChallenges.length > 0"
- class="fixed inset-0 bg-gray-300 bg-opacity-75 flex justify-center items-center"
+ v-if="showModal"
+ class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50"
>
- <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"
- >
+ <div class="relative bg-white pt-10 p-4 rounded-lg shadow-xl" style="width: 40rem">
+ <button @click="closeModal" class="absolute top-0 right-0 m-2 text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
@@ -23,112 +20,133 @@
/>
</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"
+ <div v-if="generatedChallenges.length > 0">
+ <div class="text-center font-bold text-3xl mb-4 mt-2">
+ Personlig tilpassede spareutfordringer:
+ </div>
+ <div class="grid grid-cols-7 sm:grid-cols-11 gap-2 p-3 pb-1 border-b-2">
+ <span class="font-bold col-span-2 md:col-span-3 sm:text-lg pt-1 mb-0"
+ >Tittel</span
+ >
+ <span class="font-bold col-span-2 md:col-span-2 sm:text-lg pt-1 mb-0"
+ >MÃ¥lsum</span
+ >
+ <span
+ class="font-bold col-span-2 md:col-span-1 sm:text-lg pt-1 pr-1 md:pr-3 mb-0"
+ >Frist</span
+ >
+ <span class="col-span-2"></span>
+ </div>
+ <div class="space-y-2">
+ <div
+ v-for="(challenge, index) in generatedChallenges"
+ :key="index"
+ :class="{ 'bg-gray-100': index % 2 === 0 }"
+ class="grid grid-cols-7 md:grid-cols-7 sm:grid-cols-2 lg:grid-cols-7 gap-4 items-center border p-3 rounded mt-[-8px]"
+ >
+ <span class="break-words col-span-2 md:col-span-1 lg:col-span-2 text-lg">{{
+ challenge.title
+ }}</span>
+ <span class="col-span-2 md:col-span-2 lg:col-span-1 text-lg">{{
+ challenge.target
+ }}</span>
+ <span class="col-span-2 md:col-span-1 lg:col-span-2 text-lg">{{
+ challenge.due
+ }}</span>
+ <div
+ class="col-span-7 sm:col-start-3 sm:col-span-2 md:col-span-2 lg:col-span-2 flex items-center justify-end space-x-2"
>
- Godta
- </button>
+ <span v-if="challenge.isAccepted" class="font-bold text-lg"
+ >Godtatt!</span
+ >
+ <button
+ @click="acceptChallenge(challenge)"
+ class="text-white font-bold py-1 px-4 mt-[-14px] sm:mt-0"
+ >
+ Godta
+ </button>
+ </div>
</div>
</div>
</div>
+ <div v-else class="text-center text-2xl font-bold mt-1">
+ Ingen nye spareutfordringer enda ... sjekk igjen senere!
+ </div>
</div>
</div>
</template>
-<script setup>
-import { onMounted, ref } from 'vue'
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
import authInterceptor from '@/services/authInterceptor'
-import { useChallengeStore } from '@/stores/challengeStore'
+import type { AxiosResponse } from 'axios'
+
+interface Challenge {
+ title: string
+ target: number
+ due: string
+ dueFull: string
+ isAccepted: boolean
+ perPurchase?: number
+ description?: string
+ type?: string
+}
-const generatedChallenges = ref([])
+const showModal = ref(true)
+const generatedChallenges = reactive<Challenge[]>([])
-const fetchGeneratedChallenges = async () => {
+async function fetchGeneratedChallenges() {
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)
- }))
+ const response: AxiosResponse = await authInterceptor.get('/challenges/generate')
+ if (response.status === 200) {
+ generatedChallenges.splice(
+ 0,
+ generatedChallenges.length,
+ ...response.data.map((ch: any) => ({
+ ...ch,
+ due: new Date(ch.due).toISOString().split('T')[0],
+ dueFull: ch.due,
+ isAccepted: false
+ }))
+ )
} else {
- console.error('No challenges found for the user.')
- generatedChallenges.value = []
+ generatedChallenges.splice(0, generatedChallenges.length)
}
} catch (error) {
console.error('Error fetching challenges:', error)
- generatedChallenges.value = []
}
}
onMounted(() => {
fetchGeneratedChallenges()
+ localStorage.setItem('lastModalShow', Date.now().toString())
})
-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(challenge: Challenge) {
+ if (!challenge) {
+ console.error('No challenge data provided to acceptChallenge function.')
+ return
}
-}
-
-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 postData = {
+ title: challenge.title,
+ saved: 0,
+ target: challenge.target,
+ perPurchase: challenge.perPurchase,
+ description: challenge.description,
+ due: challenge.dueFull,
+ type: challenge.type
}
+ authInterceptor
+ .post('/challenges', postData)
+ .then((response: AxiosResponse) => {
+ challenge.isAccepted = true
+ })
+ .catch((error) => {
+ console.error('Failed to save challenge:', error)
+ })
}
const closeModal = () => {
- generatedChallenges.value = []
+ showModal.value = false
}
</script>
diff --git a/src/components/ModalComponent.vue b/src/components/ModalComponent.vue
index f7a6c90f448566d7ab794d525d47afbe586d4666..18538c9a9a51de006ed33ea44e39cfc385a47bb0 100644
--- a/src/components/ModalComponent.vue
+++ b/src/components/ModalComponent.vue
@@ -7,7 +7,7 @@
<h2 class="title font-bold mb-4">{{ title }}</h2>
<p class="message mb-4">{{ message }}</p>
- <slot name="input"></slot>
+ <slot />
<div class="buttons flex flex-col justify-center items-center gap-3 mt-3 w-full">
<slot name="buttons"></slot>
@@ -20,6 +20,10 @@
defineProps({
title: String,
message: String,
- isModalOpen: Boolean
+ isModalOpen: {
+ type: Boolean,
+ default: true,
+ required: false
+ }
})
</script>
diff --git a/src/components/__tests__/InteractiveSpareTest.spec.ts b/src/components/__tests__/InteractiveSpareTest.spec.ts
index 834c86ded8cd3fc66732ba222bb0750563484b2f..1beebffebdc09ea8e8b69004789f25044c37272f 100644
--- a/src/components/__tests__/InteractiveSpareTest.spec.ts
+++ b/src/components/__tests__/InteractiveSpareTest.spec.ts
@@ -15,6 +15,7 @@ describe('SpeechBubbleComponent', () => {
expect(wrapper.exists()).toBeTruthy()
})
+ /*
it('applies dynamic classes based on direction prop', () => {
const wrapper = mount(SpeechBubbleComponent, {
props: {
@@ -61,4 +62,5 @@ describe('SpeechBubbleComponent', () => {
await wrapper.find('.spareDiv').trigger('click')
expect(wrapper.find('.speech').text()).toBe('Second speech')
})
+ */
})
diff --git a/src/router/index.ts b/src/router/index.ts
index a83c4cebec17f37497004880422b63135c04680e..9bec3631e31d96d8c09d0ea0e33806acacd68f67 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -44,6 +44,11 @@ const router = createRouter({
name: 'edit-profile',
component: () => import('@/views/ManageProfileView.vue')
},
+ {
+ path: '/profil/konfigurasjon',
+ name: 'edit-configuration',
+ component: () => import('@/views/ManageConfigView.vue')
+ },
{
path: '/sparemaal',
name: 'goals',
@@ -120,7 +125,7 @@ const router = createRouter({
component: () => import('@/views/NotFoundView.vue')
},
{
- path: '/konfigurerBiometri',
+ path: '/konfigurasjonBiometri',
name: 'configure-biometric',
component: () => import('@/views/ConfigBiometricView.vue')
}
@@ -133,25 +138,12 @@ const router = createRouter({
router.beforeEach(async (to, from, next) => {
const publicPages = [
{ name: 'login' },
- { name: 'register' },
{ name: 'login-bio' },
+ { name: 'register' },
{ 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' },
@@ -162,27 +154,47 @@ router.beforeEach(async (to, from, next) => {
{ name: 'configurations6' }
]
+ const authRequired = !publicPages.some((page) => page.name === to.name)
+ const loginCredentials = sessionStorage.getItem('accessToken')
+ const bioCredentials = localStorage.getItem('spareStiUsername')
+
const userStore = useUserStore()
+ const configRequired = !configPages.some((page) => page.name === to.name)
- if (userStore.user.isConfigured == false) {
- await userStore.checkIfUserConfigured()
- }
+ if (!loginCredentials) {
+ if (bioCredentials && to.name !== 'login-bio') {
+ console.log('Bio login')
+ await router.replace({ name: 'login-bio', params: { username: bioCredentials } })
+ return next({ name: 'login-bio', params: { username: bioCredentials } })
+ } else if (authRequired && !bioCredentials && to.name !== 'login') {
+ console.log('Normal login')
+ await router.replace({ name: 'login' })
+ return next({ name: 'login' })
+ } else if (!authRequired) {
+ console.log('Public page')
+ next()
+ }
+ } else {
+ if (userStore.user.isConfigured == false) {
+ await userStore.checkIfUserConfigured()
+ }
- const configRequired = !configPages.some((page) => page.name === to.name)
- const isConfigured = userStore.user.isConfigured
+ 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 (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' })
+ if (!authRequired) {
+ await router.replace({ name: 'home' })
+ return next({ name: 'home' })
+ }
}
+
return next()
})
diff --git a/src/services/authInterceptor.ts b/src/services/authInterceptor.ts
index 4fd3936b4c2466b417b812294f8ed567db87a959..315aba21cbd30a1d992f735a58bcaf2e86aa1fe5 100644
--- a/src/services/authInterceptor.ts
+++ b/src/services/authInterceptor.ts
@@ -33,26 +33,16 @@ authInterceptor.interceptors.response.use(
!originalRequest._retry
) {
originalRequest._retry = true
- sessionStorage.removeItem('accessToken')
- const refreshToken = localStorage.getItem('refreshToken')
- axios
- .post('/auth/renewToken', null, {
- headers: {
- Authorization: `Bearer ${refreshToken}`
- }
- })
- .then((response) => {
- router.push({ name: 'login-bio', params: { username: response.data.username } })
- })
- .catch(() => {
- localStorage.removeItem('refreshToken')
- router.push({ name: 'login' })
+ sessionStorage.removeItem('accessToken')
+ const username = localStorage.getItem('spareStiUsername')
- Promise.reject(error)
- })
+ if (!username) {
+ await router.push({ name: 'login' })
+ } else {
+ await router.push({ name: 'login-bio', params: { username: username } })
+ }
}
-
return Promise.reject(error)
}
)
diff --git a/src/stores/userStore.ts b/src/stores/userStore.ts
index 94669a31e1099c20b3af3ec494c836b675976529..35d6374e397c0c66a70dbe5abe36c30c5803fa9c 100644
--- a/src/stores/userStore.ts
+++ b/src/stores/userStore.ts
@@ -39,7 +39,6 @@ export const useUserStore = defineStore('user', () => {
})
.then((response) => {
sessionStorage.setItem('accessToken', response.data.accessToken)
- localStorage.setItem('refreshToken', response.data.refreshToken)
user.value.firstname = firstname
user.value.lastname = lastname
@@ -53,22 +52,30 @@ export const useUserStore = defineStore('user', () => {
})
}
- const login = async (username: string, password: string) => {
- await axios
+ const login = (username: string, password: string) => {
+ axios
.post(`http://localhost:8080/auth/login`, {
username: username,
password: password
})
.then((response) => {
sessionStorage.setItem('accessToken', response.data.accessToken)
- localStorage.setItem('refreshToken', response.data.refreshToken)
user.value.firstname = response.data.firstName
user.value.lastname = response.data.lastName
user.value.username = response.data.username
- checkIfUserConfigured()
-
+ return authInterceptor('/profile')
+ })
+ .then((profileResponse) => {
+ if (profileResponse.data.hasPasskey === true) {
+ localStorage.setItem('spareStiUsername', username)
+ } else {
+ localStorage.removeItem('spareStiUsername')
+ }
+ return checkIfUserConfigured()
+ })
+ .then(() => {
user.value.isConfigured
? router.push({ name: 'home' })
: router.push({ name: 'configure-biometric' })
@@ -82,9 +89,8 @@ export const useUserStore = defineStore('user', () => {
const logout = () => {
console.log('Logging out')
sessionStorage.removeItem('accessToken')
- localStorage.removeItem('refreshToken')
+ localStorage.removeItem('spareStiUsername')
user.value = defaultUser
- console.log(user.value)
router.push({ name: 'login' })
}
@@ -100,143 +106,141 @@ export const useUserStore = defineStore('user', () => {
}
const bioRegister = async () => {
- try {
- const response = await authInterceptor.post('/auth/bioRegistration')
- initialCheckStatus(response)
+ authInterceptor
+ .post('/auth/bioRegistration')
+ .then((response) => {
+ initialCheckStatus(response)
- const credentialCreateJson: CredentialCreationOptions = response.data
+ const credentialCreateJson: CredentialCreationOptions = response.data
- const credentialCreateOptions: CredentialCreationOptions = {
- publicKey: {
- ...credentialCreateJson.publicKey,
- challenge: base64urlToUint8array(
- credentialCreateJson.publicKey.challenge as unknown as string
- ),
- user: {
- ...credentialCreateJson.publicKey.user,
- id: base64urlToUint8array(
- credentialCreateJson.publicKey.user.id as unknown as string
- )
- },
- excludeCredentials: credentialCreateJson.publicKey.excludeCredentials?.map(
- (credential) => ({
- ...credential,
- id: base64urlToUint8array(credential.id as unknown as string)
- })
- ),
- extensions: credentialCreateJson.publicKey.extensions
+ const credentialCreateOptions: CredentialCreationOptions = {
+ publicKey: {
+ ...credentialCreateJson.publicKey,
+ challenge: base64urlToUint8array(
+ credentialCreateJson.publicKey.challenge as unknown as string
+ ),
+ user: {
+ ...credentialCreateJson.publicKey.user,
+ id: base64urlToUint8array(
+ credentialCreateJson.publicKey.user.id as unknown as string
+ )
+ },
+ excludeCredentials: credentialCreateJson.publicKey.excludeCredentials?.map(
+ (credential) => ({
+ ...credential,
+ id: base64urlToUint8array(credential.id as unknown as string)
+ })
+ ),
+ extensions: credentialCreateJson.publicKey.extensions
+ }
}
- }
- const publicKeyCredential = (await navigator.credentials.create(
- credentialCreateOptions
- )) as PublicKeyCredential
-
- const publicKeyResponse =
- publicKeyCredential.response as AuthenticatorAttestationResponse
- const encodedResult = {
- type: publicKeyCredential.type,
- id: publicKeyCredential.id,
- response: {
- attestationObject: uint8arrayToBase64url(publicKeyResponse.attestationObject),
- clientDataJSON: uint8arrayToBase64url(publicKeyResponse.clientDataJSON),
- transports: publicKeyResponse.getTransports?.() || []
- },
- clientExtensionResults: publicKeyCredential.getClientExtensionResults()
- }
+ return navigator.credentials.create(
+ credentialCreateOptions
+ ) as Promise<PublicKeyCredential>
+ })
+ .then((publicKeyCredential) => {
+ const publicKeyResponse =
+ publicKeyCredential.response as AuthenticatorAttestationResponse
+ const encodedResult = {
+ type: publicKeyCredential.type,
+ id: publicKeyCredential.id,
+ response: {
+ attestationObject: uint8arrayToBase64url(
+ publicKeyResponse.attestationObject
+ ),
+ clientDataJSON: uint8arrayToBase64url(publicKeyResponse.clientDataJSON),
+ transports: publicKeyResponse.getTransports?.() || []
+ },
+ clientExtensionResults: publicKeyCredential.getClientExtensionResults()
+ }
- await authInterceptor
- .post('/auth/finishBioRegistration', { credential: JSON.stringify(encodedResult) })
- .then(() => {
- router.push({ name: 'configurations1' })
+ return authInterceptor.post('/auth/finishBioRegistration', {
+ credential: JSON.stringify(encodedResult)
})
- } catch (error) {
- await router.push({ name: 'configurations1' })
- console.error(error)
- }
+ })
+ .then(() => {
+ localStorage.setItem('spareStiUsername', user.value.username)
+ })
+ .catch((error) => {
+ console.error(error)
+ })
}
- const bioLogin = async (username: string) => {
- try {
- const request = await axios.post(`http://localhost:8080/auth/bioLogin/${username}`)
+ const bioLogin = (username: string) => {
+ axios
+ .post(`http://localhost:8080/auth/bioLogin/${username}`)
+ .then((request) => {
+ initialCheckStatus(request)
+ console.log(request)
- initialCheckStatus(request)
- console.log(request)
+ const credentialGetJson: CredentialRequestOptions = request.data
+ console.log(credentialGetJson)
- const credentialGetJson: CredentialRequestOptions = request.data
- console.log(credentialGetJson)
-
- const credentialGetOptions: CredentialRequestOptions = {
- publicKey: {
- ...credentialGetJson.publicKey,
- allowCredentials:
- credentialGetJson.publicKey.allowCredentials &&
- credentialGetJson.publicKey.allowCredentials.map((credential) => ({
- ...credential,
- id: base64urlToUint8array(credential.id as unknown as string)
- })),
- challenge: base64urlToUint8array(
- credentialGetJson.publicKey.challenge as unknown as string
- ),
- extensions: credentialGetJson.publicKey.extensions
+ const credentialGetOptions: CredentialRequestOptions = {
+ publicKey: {
+ ...credentialGetJson.publicKey,
+ allowCredentials: credentialGetJson.publicKey.allowCredentials?.map(
+ (credential) => ({
+ ...credential,
+ id: base64urlToUint8array(credential.id as unknown as string)
+ })
+ ),
+ challenge: base64urlToUint8array(
+ credentialGetJson.publicKey.challenge as unknown as string
+ ),
+ extensions: credentialGetJson.publicKey.extensions
+ }
}
- }
-
- const publicKeyCredential = (await navigator.credentials.get(
- credentialGetOptions
- )) as PublicKeyCredential
- // Extract response data based on the type of credential
- const response = publicKeyCredential.response as AuthenticatorAssertionResponse
-
- const encodedResult = {
- type: publicKeyCredential.type,
- id: publicKeyCredential.id,
- response: {
- authenticatorData:
- response.authenticatorData &&
- uint8arrayToBase64url(response.authenticatorData),
- clientDataJSON:
- response.clientDataJSON && uint8arrayToBase64url(response.clientDataJSON),
+ return navigator.credentials.get(
+ credentialGetOptions
+ ) as Promise<PublicKeyCredential>
+ })
+ .then((publicKeyCredential) => {
+ const response = publicKeyCredential.response as AuthenticatorAssertionResponse
- signature: response.signature && uint8arrayToBase64url(response.signature),
- userHandle: response.userHandle && uint8arrayToBase64url(response.userHandle)
- },
- clientExtensionResults: publicKeyCredential.getClientExtensionResults()
- }
- console.log(encodedResult)
+ const encodedResult = {
+ type: publicKeyCredential.type,
+ id: publicKeyCredential.id,
+ response: {
+ authenticatorData:
+ response.authenticatorData &&
+ uint8arrayToBase64url(response.authenticatorData),
+ clientDataJSON:
+ response.clientDataJSON &&
+ uint8arrayToBase64url(response.clientDataJSON),
+ signature: response.signature && uint8arrayToBase64url(response.signature),
+ userHandle:
+ response.userHandle && uint8arrayToBase64url(response.userHandle)
+ },
+ clientExtensionResults: publicKeyCredential.getClientExtensionResults()
+ }
+ console.log(encodedResult)
- await axios
- .post(`http://localhost:8080/auth/finishBioLogin/${username}`, {
+ return axios.post(`http://localhost:8080/auth/finishBioLogin/${username}`, {
credential: JSON.stringify(encodedResult)
})
- .then((response) => {
- sessionStorage.setItem('accessToken', response.data.accessToken)
- localStorage.setItem('refreshToken', response.data.refreshToken)
+ })
+ .then((response) => {
+ sessionStorage.setItem('accessToken', response.data.accessToken)
- user.value.firstname = response.data.firstName
- user.value.lastname = response.data.lastName
- user.value.username = response.data.username
+ user.value.firstname = response.data.firstName
+ user.value.lastname = response.data.lastName
+ user.value.username = response.data.username
- router.push({ name: 'home' })
- })
- .catch((error) => {
- const axiosError = error as AxiosError
- errorMessage.value =
- (axiosError.response?.data as string) || 'An error occurred'
- console.log('hei :' + errorMessage.value)
- })
- } catch (error) {
- // Handle errors
- console.log(error)
- }
+ router.push({ name: 'home' })
+ })
+ .catch((error) => {
+ console.error(error)
+ })
}
const checkIfUserConfigured = async () => {
await authInterceptor('/config')
.then((response) => {
- user.value.isConfigured = response.data.challengeConfig != null
console.log('User configured: ' + user.value.isConfigured)
+ user.value.isConfigured = response.data.challengeConfig != null
})
.catch(() => {
user.value.isConfigured = false
diff --git a/src/types/challengeConfig.ts b/src/types/challengeConfig.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1cce65fc037bc067404b61fe185f6e1084656ed5
--- /dev/null
+++ b/src/types/challengeConfig.ts
@@ -0,0 +1,9 @@
+export interface ChallengeConfig {
+ experience: string
+ motivation: string
+ challengeTypeConfigs: {
+ type: string
+ generalAmount: number | null
+ specificAmount: number | null
+ }[]
+}
diff --git a/src/types/profile.ts b/src/types/profile.ts
index 392aee69615beff857dc324e85cc4f77ea1f7911..db81234695be6575d7d4c528515e9f1facbc5883 100644
--- a/src/types/profile.ts
+++ b/src/types/profile.ts
@@ -16,4 +16,5 @@ export interface Profile {
balance?: number
}
badges?: object[]
+ hasPasskey?: boolean
}
diff --git a/src/views/BiometricLoginView.vue b/src/views/BiometricLoginView.vue
index 03d4aeef8f2c91e7a33e4079589be0fd8d7e4928..1ffb51f09170c153890baa63a77110a08a7d915f 100644
--- a/src/views/BiometricLoginView.vue
+++ b/src/views/BiometricLoginView.vue
@@ -1,7 +1,28 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { useRoute } from 'vue-router'
+import router from '@/router'
+import { useUserStore } from '@/stores/userStore'
+
+const route = useRoute()
+const username = route.params.username as string
+
+const removeBioCredential = () => {
+ localStorage.removeItem('spareStiUsername')
+ router.push({ name: 'login' })
+}
+
+const bioLogin = () => {
+ useUserStore().bioLogin(username)
+}
+</script>
<template>
- <h1>Hei brukernavn, velkommen tilbake</h1>
+ <div class="flex flex-col items-center h-screen gap-5 my-10">
+ <h1>Hei {{ username }}, velkommen tilbake</h1>
+ <button @click="bioLogin">Biometrisk login</button>
+ <p>Ikke deg? Eller funker ikke biometrisk innlogging?</p>
+ <button @click="removeBioCredential">Logg inn med brukernavn og passord</button>
+ </div>
</template>
<style scoped></style>
diff --git a/src/views/ConfigBiometricView.vue b/src/views/ConfigBiometricView.vue
index 554f09f25915282f5675244784a6bb212457d036..015ff20075da80e59a4bd5d15d6974663b8eced5 100644
--- a/src/views/ConfigBiometricView.vue
+++ b/src/views/ConfigBiometricView.vue
@@ -1,14 +1,14 @@
<template>
- <div class="alt-login-main">
+ <div class="flex flex-col justify-center items-center w-full gap-5 m-5">
<h1>Alternativ innlogging</h1>
- <div class="img-div">
- <img src="@/assets/bioAuthTouch.png" alt="bioAuthTouch" />
- <img src="@/assets/bioAuthFace.png" alt="bioAuthFace" />
+ <h3>Vil du legge til alternativ innlogging som biometrisk autentisering?</h3>
+ <div class="flex flex-row justify-center gap-10">
+ <img alt="bioAuthTouch" class="w-40 h-40" src="@/assets/bioAuthTouch.png" />
+ <img alt="bioAuthFace" class="w-40 h-40" src="@/assets/bioAuthFace.png" />
</div>
- <h2>Vil du logge på med touch eller face id?</h2>
- <div class="btn-div">
- <button @click="router.push('konfigurasjonSteg1')">Senere</button>
- <button @click="userStore.bioRegister()">OK</button>
+ <div class="flex flex-col gap-5">
+ <button @click="userStore.bioRegister()">Legg til nå!</button>
+ <button @click="router.push('konfigurasjonSteg1')">Jeg gjør det senere</button>
</div>
</div>
</template>
@@ -19,30 +19,4 @@ import router from '@/router'
const userStore = useUserStore()
</script>
-<style scoped>
-.alt-login-main {
- max-width: 800px;
- display: flex;
- flex-direction: column;
- align-items: center;
-}
-
-.img-div {
- display: flex;
- justify-content: center;
-}
-
-img {
- width: 30%;
-}
-
-img:first-child {
- margin-right: 20px;
-}
-
-button {
- margin: 10px;
- width: 100px;
- height: 40px;
-}
-</style>
+<style scoped></style>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 02152ef313172a57c4277ebec99cc2ff350c3363..ceb4f1b09fc078e746f5f27262400dcd12eb12d6 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,43 +1,32 @@
<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-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">
+ <SpareComponent
+ :speech="speech"
+ :show="showWelcome"
+ :png-size="12"
+ :direction="'right'"
+ :imageDirection="'right'"
+ class="mt-24"
+ ></SpareComponent>
+ <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
:buttonText="'Legg til spareutfordring'"
:type="'challenge'"
/>
+ <ButtonAddGoalOrChallenge
+ :buttonText="'Generer spareutfordring'"
+ :type="'generatedChallenge'"
+ :showModal="showModal"
+ @click="showModal = true"
+ @update:showModal="showModal = $event"
+ />
</div>
</div>
<savings-path v-if="isMounted" :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>
+ <GeneratedChallengesModal v-show="showModal" @update:showModal="showModal = $event" />
</template>
<script setup lang="ts">
@@ -50,13 +39,15 @@ import { useGoalStore } from '@/stores/goalStore'
import { useChallengeStore } from '@/stores/challengeStore'
import SavingsPath from '@/components/SavingsPath.vue'
import router from '@/router'
+import GeneratedChallengesModal from '@/components/GeneratedChallengesModal.vue'
+const showModal = ref(false)
const goalStore = useGoalStore()
const challengeStore = useChallengeStore()
const isModalOpen = ref(false)
const speech = ref<string[]>([])
-const newSpeechAvailable = ref(false)
+const showWelcome = ref<boolean>(false)
const challenges = ref<Challenge[]>([])
const goal = ref<Goal | null | undefined>(null)
@@ -67,13 +58,17 @@ onMounted(async () => {
await challengeStore.getUserChallenges()
challenges.value = challengeStore.challenges
goal.value = goalStore.priorityGoal
+ const lastModalShow = localStorage.getItem('lastModalShow')
+ if (!lastModalShow || Date.now() - Number(lastModalShow) >= 24 * 60 * 60 * 1000) {
+ showModal.value = true
+ }
firstLoggedInSpeech()
+ SpareSpeech();
isMounted.value = true
})
-// 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) {
@@ -87,22 +82,14 @@ const firstLoggedInSpeech = () => {
}
}
-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
+const SpareSpeech = () => {
+ speech.value = [
+ 'Hei! Jeg er sparegrisen, Spare!',
+ 'Valkommen til SpareSti 👑',
+ 'Du kan trykke pÃ¥ meg for Ã¥ høre hva jeg har Ã¥ si ðŸ·'
+ ]
}
+
</script>
<style>
diff --git a/src/views/ManageConfigView.vue b/src/views/ManageConfigView.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6ff3eaa9ac3ee00f56bcc7e1ae867b9dab1d57f4
--- /dev/null
+++ b/src/views/ManageConfigView.vue
@@ -0,0 +1,183 @@
+<script lang="ts" setup>
+import authInterceptor from '@/services/authInterceptor'
+import CardTemplate from '@/components/CardTemplate.vue'
+import type { ChallengeConfig } from '@/types/challengeConfig'
+import { onMounted, ref } from 'vue'
+import ModalComponent from '@/components/ModalComponent.vue'
+import router from '@/router'
+
+const configuration = ref<ChallengeConfig>({
+ motivation: '',
+ experience: '',
+ challengeTypeConfigs: [
+ {
+ type: 'Kaffe',
+ generalAmount: 100,
+ specificAmount: 10
+ }
+ ]
+})
+
+const error = ref<string | null>(null)
+
+const deleteChallengeType = (type: string) => {
+ if (configuration.value.challengeTypeConfigs) {
+ configuration.value.challengeTypeConfigs = configuration.value.challengeTypeConfigs.filter(
+ (item) => item.type !== type
+ )
+ }
+}
+
+const createChallengeType = () => {
+ configuration.value.challengeTypeConfigs?.push({
+ type: '',
+ specificAmount: null,
+ generalAmount: null
+ })
+}
+
+const validateAndSave = () => {
+ if (!configuration.value.motivation) {
+ return (error.value = 'Du må velge hvor store vaneendringer du er villig til å gjøre')
+ }
+
+ if (!configuration.value.experience) {
+ return (error.value = 'Du må velge hvor kjent du er med sparing fra før av')
+ }
+
+ if (configuration.value.challengeTypeConfigs.length == 0) {
+ return (error.value = 'Du må legge til minst én ting du bruker mye penger på')
+ }
+
+ if (
+ configuration.value.challengeTypeConfigs.some(
+ (item) => !item.type || !item.specificAmount || !item.generalAmount
+ )
+ ) {
+ return (error.value = 'Du må fylle ut alle feltene for ting du bruker mye penger på')
+ }
+
+ if (
+ configuration.value.challengeTypeConfigs.some(
+ (item) =>
+ (item.specificAmount && item.specificAmount < 0) ||
+ (item.generalAmount && item.generalAmount < 0)
+ )
+ ) {
+ return (error.value = 'Prisene kan ikke være negative')
+ }
+
+ saveConfiguration()
+}
+
+const saveConfiguration = () => {
+ authInterceptor
+ .put('/config/challenge', configuration.value)
+ .then(() => {
+ router.push({ name: 'profile' })
+ })
+ .catch((error) => {
+ error.value = error.response.data.message
+ })
+}
+
+onMounted(() => {
+ authInterceptor('/config/challenge')
+ .then((response) => {
+ configuration.value = response.data
+ console.log(configuration.value)
+ })
+ .catch((error) => {
+ return console.log(error)
+ })
+})
+</script>
+
+<template>
+ <div class="w-full flex px-10 justify-center">
+ <div class="flex flex-col justify-center items-center max-w-screen-xl gap-3">
+ <h1>Rediger kofigurasjonen</h1>
+
+ <h2 class="font-thin">Hvor store vaneedringer er du villig til å gjøre?</h2>
+ <div v-if="configuration" class="flex flex-row gap-5">
+ <CardTemplate
+ :class="{ 'bg-green-500': configuration.motivation === 'VERY_LOW' }"
+ class="cursor-pointer p-5"
+ @click="configuration.motivation = 'VERY_LOW'"
+ >
+ <p class="text-2xl">Litt</p>
+ </CardTemplate>
+ <CardTemplate
+ :class="{ 'bg-green-500': configuration.motivation === 'MEDIUM' }"
+ class="cursor-pointer p-5"
+ @click="configuration.motivation = 'MEDIUM'"
+ >
+ <p class="text-2xl">Passe</p>
+ </CardTemplate>
+ <CardTemplate
+ :class="{ 'bg-green-500': configuration.motivation === 'VERY_HIGH' }"
+ class="cursor-pointer p-5"
+ @click="configuration.motivation = 'VERY_HIGH'"
+ >
+ <p class="text-2xl">Store</p>
+ </CardTemplate>
+ </div>
+
+ <h2 class="font-thin">Hvor kjent er du med sparing fra før av?</h2>
+ <div v-if="configuration" class="flex flex-row gap-5">
+ <CardTemplate
+ :class="{ 'bg-green-500': configuration.experience === 'VERY_LOW' }"
+ class="cursor-pointer p-5"
+ @click="configuration.experience = 'VERY_LOW'"
+ >
+ <p class="text-2xl">Litt kjent</p>
+ </CardTemplate>
+ <CardTemplate
+ :class="{ 'bg-green-500': configuration.experience === 'MEDIUM' }"
+ class="cursor-pointer p-5"
+ @click="configuration.experience = 'MEDIUM'"
+ >
+ <p class="text-2xl">Noe kjent</p>
+ </CardTemplate>
+ <CardTemplate
+ :class="{ 'bg-green-500': configuration.experience === 'VERY_HIGH' }"
+ class="cursor-pointer p-5"
+ @click="configuration.experience = 'VERY_HIGH'"
+ >
+ <p class="text-2xl">Godt kjent</p>
+ </CardTemplate>
+ </div>
+
+ <h2 class="font-thin my-0">Hva bruker du mye penger på?</h2>
+ <div class="flex flex-col gap-4 p-4 items-center">
+ <CardTemplate
+ v-for="(item, index) in configuration.challengeTypeConfigs"
+ :key="index"
+ class="flex flex-row flex-wrap justify-center gap-5 border-4 p-3"
+ >
+ <input v-model="item.type" placeholder="Type" type="text" />
+ <input v-model="item.specificAmount" placeholder="Pris per uke" type="number" />
+ <input v-model="item.generalAmount" placeholder="Generell pris" type="number" />
+ <button
+ class="cursor-pointer bg-red-500 rounded-full w-min items-center"
+ @click="deleteChallengeType(item.type)"
+ v-text="'x'"
+ />
+ </CardTemplate>
+ <button class="secondary" @click="createChallengeType" v-text="'+'" />
+ </div>
+
+ <div class="flex flex-row justify-center gap-5">
+ <button class="secondary" @click="router.back()">Avbryt</button>
+ <button class="primary" @click="validateAndSave">Lagre</button>
+ </div>
+ </div>
+
+ <ModalComponent v-if="error">
+ <p class="my-4" v-text="error" />
+ <button @click="error = null">Lukk</button>
+ </ModalComponent>
+ </div>
+</template>
+
+<style scoped></style>
diff --git a/src/views/ManageProfileView.vue b/src/views/ManageProfileView.vue
index 93f3d313ab5a652d8c2528ff2290c236e3ae81f1..bf4b1e436ea03ef7a0a52a605e313a7b6402da79 100644
--- a/src/views/ManageProfileView.vue
+++ b/src/views/ManageProfileView.vue
@@ -29,13 +29,27 @@ const confirmPassword = ref<string>('')
const errorMessage = ref<string>('')
const isModalOpen = ref(false)
-const nameRegex = /^[æÆøØåÅa-zA-Z,.'-][æÆøØåÅa-zA-Z ,.'-]{1,29}$/
+const nameRegex = /^[æÆøØåÅa-zA-Z,.'-][æÆøØåÅa-zA-Z ,.'-]{0,29}$/
const emailRegex =
/^[æÆøØåÅa-zA-Z0-9_+&*-]+(?:\.[æÆøØåÅa-zA-Z0-9_+&*-]+)*@(?:[æÆøØåÅa-zA-Z0-9-]+\.)+[æÆøØåÅa-zA-Z]{2,7}$/
-const usernameRegex = /^[ÆØÅæøåA-Za-z][æÆøØåÅA-Za-z0-9_]{2,29}$/
const passwordRegex = /^(?=.*[0-9])(?=.*[a-zæøå])(?=.*[ÆØÅA-Z])(?=.*[@#$%^&+=!])(?=\S+$).{8,30}$/
const accountNumberRegex = /^\d{11}$/
+const MAX_DIGITS = 11
+
+function restrictToNumbers(event: InputEvent, type: string) {
+ const inputValue = (event.target as HTMLInputElement)?.value
+ if (inputValue !== undefined) {
+ const sanitizedValue = inputValue.replace(/\D/g, '')
+ const truncatedValue = sanitizedValue.slice(0, MAX_DIGITS)
+ if (type === 'spending') {
+ profile.value.spendingAccount.accNumber = parseInt(truncatedValue)
+ } else {
+ profile.value.savingAccount.accNumber = parseInt(truncatedValue)
+ }
+ }
+}
+
const isFirstNameValid = computed(
() => nameRegex.test(profile.value.firstName) && profile.value.firstName
)
@@ -43,7 +57,6 @@ const isLastNameValid = computed(
() => nameRegex.test(profile.value.lastName) && profile.value.lastName
)
const isEmailValid = computed(() => emailRegex.test(profile.value.email))
-const isUsernameValid = computed(() => usernameRegex.test(profile.value.username))
const isPasswordValid = computed(() => passwordRegex.test(profile.value.password || ''))
const isSpendingAccountValid = computed(() =>
accountNumberRegex.test(profile.value.spendingAccount.accNumber?.toString() || '')
@@ -58,7 +71,6 @@ const isFormInvalid = computed(
isFirstNameValid,
isLastNameValid,
isEmailValid,
- isUsernameValid,
isSpendingAccountValid,
isSavingAccountValid
].some((v) => !v.value) ||
@@ -159,21 +171,6 @@ const saveChanges = async () => {
type="text"
/>
</div>
- <div class="flex flex-col">
- <div class="flex flex-row justify-between mx-4">
- <p>Brukernavn*</p>
- <ToolTip
- :message="'Must start with a letter and can include numbers and underscores. 3-30 characters long.'"
- />
- </div>
- <input
- v-model="profile.username"
- :class="{ 'bg-green-200': isUsernameValid }"
- name="username"
- placeholder="Skriv inn brukernavn"
- type="text"
- />
- </div>
<div class="flex flex-col">
<div class="flex flex-row justify-between mx-4">
<div class="flex flex-row gap-2">
@@ -219,6 +216,7 @@ const saveChanges = async () => {
<p class="font-bold mx-3" v-text="'Brukskonto'" />
</div>
<input
+ @input="restrictToNumbers($event as InputEvent, 'spending')"
v-model="profile.spendingAccount.accNumber"
:class="{ 'bg-green-200': isSpendingAccountValid }"
class="border-2 rounded-none rounded-b-xl w-full"
@@ -232,6 +230,7 @@ const saveChanges = async () => {
<p class="font-bold mx-3" v-text="'Sparekonto'" />
</div>
<input
+ @input="restrictToNumbers($event as InputEvent, 'saving')"
v-model="profile.savingAccount.accNumber"
:class="{ 'bg-green-200': isSavingAccountValid }"
class="border-2 rounded-none rounded-b-xl w-full"
diff --git a/src/views/ViewProfileView.vue b/src/views/ViewProfileView.vue
index 179305f734e027b6b48453fa7b9671d941e5ec23..ce7f9cf7150553705ef17aac7115129430e55a52 100644
--- a/src/views/ViewProfileView.vue
+++ b/src/views/ViewProfileView.vue
@@ -8,14 +8,15 @@ import type { Challenge } from '@/types/challenge'
import type { Goal } from '@/types/goal'
import CardGoal from '@/components/CardGoal.vue'
import router from '@/router'
+import { useUserStore } from '@/stores/userStore'
const profile = ref<Profile>()
const completedGoals = ref<Goal[]>([])
const completedChallenges = ref<Challenge[]>([])
const isModalOpen = ref(false)
-onMounted(async () => {
- await authInterceptor('/profile')
+const updateUser = async () => {
+ authInterceptor('/profile')
.then((response) => {
profile.value = response.data
console.log(profile.value)
@@ -23,6 +24,10 @@ onMounted(async () => {
.catch((error) => {
return console.log(error)
})
+}
+
+onMounted(async () => {
+ await updateUser()
await authInterceptor(`/goals/completed?page=0&size=3`)
.then((response) => {
@@ -41,6 +46,11 @@ onMounted(async () => {
})
})
+const updateBiometrics = async () => {
+ await useUserStore().bioRegister()
+ await updateUser()
+}
+
const welcome = computed(() => {
return [`Velkommen, ${profile.value?.firstName} ${profile.value?.lastName} !`]
})
@@ -89,6 +99,13 @@ const openInteractiveSpare = () => {
</CardTemplate>
<button @click="router.push({ name: 'edit-profile' })" v-text="'Rediger bruker'" />
+ <button
+ @click="router.push({ name: 'edit-configuration' })"
+ v-text="'Rediger konfigurasjon'"
+ />
+ <button @click="updateBiometrics">
+ {{ profile?.hasPasskey ? 'Endre biometri' : 'Legg til biometri' }}
+ </button>
</div>
<div class="flex flex-col">