From 17418764a025bab3bbfe905197805679fc819d75 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Trygve=20J=C3=B8rgensen?= <trygjor@stud.ntnu.no>
Date: Thu, 2 May 2024 13:00:24 +0200
Subject: [PATCH] fix(userStore): user state is properly reset on logout
---
cypress/e2e/register.cy.ts | 4 +-
src/components/FormRegister.vue | 18 ++++----
.../__tests__/FormRegisterTest.spec.ts | 12 +++---
src/services/authInterceptor.ts | 3 +-
src/stores/userStore.ts | 43 +++++++++----------
src/types/user.ts | 4 +-
6 files changed, 42 insertions(+), 42 deletions(-)
diff --git a/cypress/e2e/register.cy.ts b/cypress/e2e/register.cy.ts
index 508e055..44724e1 100644
--- a/cypress/e2e/register.cy.ts
+++ b/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!')
diff --git a/src/components/FormRegister.vue b/src/components/FormRegister.vue
index c9a1cff..c10565f 100644
--- a/src/components/FormRegister.vue
+++ b/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"
diff --git a/src/components/__tests__/FormRegisterTest.spec.ts b/src/components/__tests__/FormRegisterTest.spec.ts
index 9358013..f3604b5 100644
--- a/src/components/__tests__/FormRegisterTest.spec.ts
+++ b/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('')
diff --git a/src/services/authInterceptor.ts b/src/services/authInterceptor.ts
index 315aba2..e9c6046 100644
--- a/src/services/authInterceptor.ts
+++ b/src/services/authInterceptor.ts
@@ -1,6 +1,7 @@
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 } })
}
diff --git a/src/stores/userStore.ts b/src/stores/userStore.ts
index 35d6374..e94e851 100644
--- a/src/stores/userStore.ts
+++ b/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' })
diff --git a/src/types/user.ts b/src/types/user.ts
index 6241886..9fb1fe3 100644
--- a/src/types/user.ts
+++ b/src/types/user.ts
@@ -1,6 +1,6 @@
export interface User {
- firstname: string
- lastname: string
+ firstName: string
+ lastName: string
username: string
isConfigured: boolean
isBiometric?: boolean
--
GitLab