fix(userStore): user state is properly reset on logout

cypress/e2e/register.cy.ts

@@ -5,8 +5,8 @@ describe('Register', () => {
     })
 
     function fullInput() {
-        cy.get('input[name="firstname"]').type('firstname')
-        cy.get('input[name="lastname"]').type('lastname')
+        cy.get('input[name="firstName"]').type('firstName')
+        cy.get('input[name="lastName"]').type('lastName')
         cy.get('input[name="email"]').type('email@test.work')
         cy.get('input[name="username"]').type('username')
         cy.get('input[name="password"]').type('Password123!')

src/components/FormRegister.vue

@@ -3,8 +3,8 @@ import { computed, ref, watch } from 'vue'
 import { useUserStore } from '@/stores/userStore'
 import ToolTip from '@/components/ToolTip.vue'
 
-const firstname = ref<string>('')
-const lastname = ref<string>('')
+const firstName = ref<string>('')
+const lastName = ref<string>('')
 const email = ref<string>('')
 const username = ref<string>('')
 const password = ref<string>('')
@@ -21,8 +21,8 @@ const emailRegex =
 const usernameRegex = /^[ÆØÅæøåA-Za-z][æÆøØåÅA-Za-z0-9_]{2,29}$/
 const passwordRegex = /^(?=.*[0-9])(?=.*[a-zæøå])(?=.*[ÆØÅA-Z])(?=.*[@#$%^&+=!])(?=\S+$).{8,30}$/
 
-const isFirstNameValid = computed(() => nameRegex.test(firstname.value) && firstname.value)
-const isLastNameValid = computed(() => nameRegex.test(lastname.value) && lastname.value)
+const isFirstNameValid = computed(() => nameRegex.test(firstName.value) && firstName.value)
+const isLastNameValid = computed(() => nameRegex.test(lastName.value) && lastName.value)
 const isEmailValid = computed(() => emailRegex.test(email.value))
 const isUsernameValid = computed(() => usernameRegex.test(username.value))
 const isPasswordValid = computed(() => passwordRegex.test(password.value))
@@ -35,7 +35,7 @@ const isFormInvalid = computed(
 )
 
 const submitForm = () => {
-    userStore.register(firstname.value, lastname.value, email.value, username.value, password.value)
+    userStore.register(firstName.value, lastName.value, email.value, username.value, password.value)
 }
 
 const toggleShowPassword = () => {
@@ -60,8 +60,8 @@ watch(
                 />
             </div>
             <input
-                v-model="firstname"
-                name="firstname"
+                v-model="firstName"
+                name="firstName"
                 :class="{ 'bg-green-200': isFirstNameValid }"
                 placeholder="Skriv inn fornavn"
                 type="text"
@@ -75,8 +75,8 @@ watch(
                 />
             </div>
             <input
-                v-model="lastname"
-                name="lastname"
+                v-model="lastName"
+                name="lastName"
                 :class="{ 'bg-green-200': isLastNameValid }"
                 placeholder="Skriv inn etternavn"
                 type="text"

src/components/__tests__/FormRegisterTest.spec.ts

@@ -24,8 +24,8 @@ describe('FormRegister', () => {
     })
 
     function successfulFormFill() {
-        wrapper.find('input[name="firstname"]').setValue('firstname')
-        wrapper.find('input[name="lastname"]').setValue('lastname')
+        wrapper.find('input[name="firstName"]').setValue('firstName')
+        wrapper.find('input[name="lastName"]').setValue('lastName')
         wrapper.find('input[name="email"]').setValue('email@test.work')
         wrapper.find('input[name="username"]').setValue('username')
         wrapper.find('input[name="password"]').setValue('Password123!')
@@ -37,15 +37,15 @@ describe('FormRegister', () => {
         expect(wrapper.text()).toContain('Passord')
         expect(wrapper.text()).toContain('Registrer deg')
 
-        expect(wrapper.find('input[name="firstname"]').exists()).toBe(true)
-        expect(wrapper.find('input[name="lastname"]').exists()).toBe(true)
+        expect(wrapper.find('input[name="firstName"]').exists()).toBe(true)
+        expect(wrapper.find('input[name="lastName"]').exists()).toBe(true)
         expect(wrapper.find('input[name="email"]').exists()).toBe(true)
         expect(wrapper.find('input[name="username"]').exists()).toBe(true)
         expect(wrapper.find('input[name="password"]').exists()).toBe(true)
         expect(wrapper.find('input[name="confirm"]').exists()).toBe(true)
 
-        expect((wrapper.find('input[name="firstname"]').element as HTMLInputElement).value).toBe('')
-        expect((wrapper.find('input[name="lastname"]').element as HTMLInputElement).value).toBe('')
+        expect((wrapper.find('input[name="firstName"]').element as HTMLInputElement).value).toBe('')
+        expect((wrapper.find('input[name="lastName"]').element as HTMLInputElement).value).toBe('')
         expect((wrapper.find('input[name="email"]').element as HTMLInputElement).value).toBe('')
         expect((wrapper.find('input[name="username"]').element as HTMLInputElement).value).toBe('')
         expect((wrapper.find('input[name="password"]').element as HTMLInputElement).value).toBe('')

src/services/authInterceptor.ts

 import type { AxiosResponse } from 'axios'
 import axios, { AxiosError } from 'axios'
 import router from '@/router'
+import { useUserStore } from '@/stores/userStore'
 
 const authInterceptor = axios.create({
     baseURL: 'http://localhost:8080',
@@ -38,7 +39,7 @@ authInterceptor.interceptors.response.use(
             const username = localStorage.getItem('spareStiUsername')
 
             if (!username) {
-                await router.push({ name: 'login' })
+                useUserStore().logout()
             } else {
                 await router.push({ name: 'login-bio', params: { username: username } })
             }

src/stores/userStore.ts

@@ -11,28 +11,26 @@ import { base64urlToUint8array, initialCheckStatus, uint8arrayToBase64url } from
 import type { CredentialCreationOptions } from '@/types/CredentialCreationOptions'
 
 export const useUserStore = defineStore('user', () => {
-    const defaultUser: User = {
-        firstname: 'Firstname',
-        lastname: 'Lastname',
-        username: 'Username',
+    const user = ref<User>({
+        firstName: '',
+        lastName: '',
+        username: '',
         isConfigured: false
-    }
-
-    const user = ref<User>(defaultUser)
+    })
     const errorMessage = ref<string>('')
     const streak = ref<Streak>()
 
     const register = async (
-        firstname: string,
-        lastname: string,
+        firstName: string,
+        lastName: string,
         email: string,
         username: string,
         password: string
     ) => {
         await axios
             .post(`http://localhost:8080/auth/register`, {
-                firstName: firstname,
-                lastName: lastname,
+                firstName: firstName,
+                lastName: lastName,
                 email: email,
                 username: username,
                 password: password
@@ -40,8 +38,8 @@ export const useUserStore = defineStore('user', () => {
             .then((response) => {
                 sessionStorage.setItem('accessToken', response.data.accessToken)
 
-                user.value.firstname = firstname
-                user.value.lastname = lastname
+                user.value.firstName = firstName
+                user.value.lastName = lastName
                 user.value.username = username
 
                 router.push({ name: 'configure-biometric' })
@@ -61,8 +59,8 @@ export const useUserStore = defineStore('user', () => {
             .then((response) => {
                 sessionStorage.setItem('accessToken', response.data.accessToken)
 
-                user.value.firstname = response.data.firstName
-                user.value.lastname = response.data.lastName
+                user.value.firstName = response.data.firstName
+                user.value.lastName = response.data.lastName
                 user.value.username = response.data.username
 
                 return authInterceptor('/profile')
@@ -87,10 +85,14 @@ export const useUserStore = defineStore('user', () => {
     }
 
     const logout = () => {
-        console.log('Logging out')
         sessionStorage.removeItem('accessToken')
         localStorage.removeItem('spareStiUsername')
-        user.value = defaultUser
+
+        user.value.firstName = ''
+        user.value.lastName = ''
+        user.value.username = ''
+        user.value.isConfigured = false
+
         router.push({ name: 'login' })
     }
 
@@ -172,10 +174,8 @@ export const useUserStore = defineStore('user', () => {
             .post(`http://localhost:8080/auth/bioLogin/${username}`)
             .then((request) => {
                 initialCheckStatus(request)
-                console.log(request)
 
                 const credentialGetJson: CredentialRequestOptions = request.data
-                console.log(credentialGetJson)
 
                 const credentialGetOptions: CredentialRequestOptions = {
                     publicKey: {
@@ -216,7 +216,6 @@ export const useUserStore = defineStore('user', () => {
                     },
                     clientExtensionResults: publicKeyCredential.getClientExtensionResults()
                 }
-                console.log(encodedResult)
 
                 return axios.post(`http://localhost:8080/auth/finishBioLogin/${username}`, {
                     credential: JSON.stringify(encodedResult)
@@ -225,8 +224,8 @@ export const useUserStore = defineStore('user', () => {
             .then((response) => {
                 sessionStorage.setItem('accessToken', response.data.accessToken)
 
-                user.value.firstname = response.data.firstName
-                user.value.lastname = response.data.lastName
+                user.value.firstName = response.data.firstName
+                user.value.lastName = response.data.lastName
                 user.value.username = response.data.username
 
                 router.push({ name: 'home' })

src/types/user.ts

 export interface User {
-    firstname: string
-    lastname: string
+    firstName: string
+    lastName: string
     username: string
     isConfigured: boolean
     isBiometric?: boolean