diff --git a/src/components/FormLogin.vue b/src/components/FormLogin.vue index afc57aaf7fadf8cf75748362a2b2f7424ca5227c..ca15e2b2a717612c1dc783bc9f886bd7b74876b4 100644 --- a/src/components/FormLogin.vue +++ b/src/components/FormLogin.vue @@ -1,19 +1,28 @@ <script lang="ts" setup> -import { ref } from 'vue' +import { ref, watch } from 'vue' +import { useUserStore } from '@/stores/userStore' const username = ref<string>('') const password = ref<string>('') const showPassword = ref<boolean>(false) +const errorMessage = ref<string>('') -const emit = defineEmits(['submit']) +const userStore = useUserStore() const submitForm = () => { - emit('submit', username.value, password.value) + userStore.login(username.value, password.value) } const toggleShowPassword = () => { showPassword.value = !showPassword.value } + +watch( + () => userStore.errorMessage, + (newValue: string) => { + errorMessage.value = newValue + } +) </script> <template> @@ -36,7 +45,10 @@ const toggleShowPassword = () => { </button> </div> </div> - <button @click="submitForm">Logg inn</button> + <div class="flex flex-row gap-5"> + <button class="grow-0" @click="submitForm">Logg inn</button> + <p>{{ errorMessage }}</p> + </div> </div> </template> diff --git a/src/components/FormRegister.vue b/src/components/FormRegister.vue index 8e372caf6c9096848af2c14b4c3d94fd69537c82..a2730e92c8d85ae7b0eaef020d82e7662f99b116 100644 --- a/src/components/FormRegister.vue +++ b/src/components/FormRegister.vue @@ -1,19 +1,28 @@ <script lang="ts" setup> -import { ref } from 'vue' +import { ref, watch } from 'vue' +import { useUserStore } from '@/stores/userStore' const username = ref<string>('') const password = ref<string>('') const showPassword = ref<boolean>(false) +const errorMessage = ref<string>('') -const emit = defineEmits(['submit']) +const userStore = useUserStore() const submitForm = () => { - emit('submit', username.value, password.value) + userStore.register(username.value, password.value) } const toggleShowPassword = () => { showPassword.value = !showPassword.value } + +watch( + () => userStore.errorMessage, + (newValue: string) => { + errorMessage.value = newValue + } +) </script> <template> @@ -36,6 +45,9 @@ const toggleShowPassword = () => { </button> </div> </div> - <button @click="submitForm">Registrer deg</button> + <div class="flex flex-row gap-5"> + <button class="grow-0" @click="submitForm">Registrer deg</button> + <p>{{ errorMessage }}</p> + </div> </div> </template> diff --git a/src/stores/userStore.ts b/src/stores/userStore.ts index 1397166569f1646fdc8e89c09177b84d69a22626..a84003491718e3c0427eb3ff9ee5500dab4d8071 100644 --- a/src/stores/userStore.ts +++ b/src/stores/userStore.ts @@ -1,7 +1,8 @@ import { ref } from 'vue' import { defineStore } from 'pinia' import type { User } from '@/types/user' -import axios from 'axios' +import axios, { AxiosError } from 'axios' +import router from '@/router' export const useUserStore = defineStore('user', () => { const defaultUser: User = { @@ -9,6 +10,7 @@ export const useUserStore = defineStore('user', () => { } const user = ref<User>(defaultUser) + const errorMessage = ref<string>('') async function register(username: string, password: string) { try { @@ -17,13 +19,13 @@ export const useUserStore = defineStore('user', () => { password: password }) - if (response.status === 200) { - sessionStorage.setItem('accessToken', response.data.accessToken) - localStorage.setItem('refreshToken', response.data.refreshToken) - user.value.username = username - } + sessionStorage.setItem('accessToken', response.data.accessToken) + localStorage.setItem('refreshToken', response.data.refreshToken) + user.value.username = username + await router.push('/') } catch (error) { - console.error('Failed to register:', error) + const axiosError = error as AxiosError + errorMessage.value = (axiosError.response?.data as string) || 'An error occurred' } } @@ -36,18 +38,19 @@ export const useUserStore = defineStore('user', () => { console.log(response) - if (response.status === 200) { - sessionStorage.setItem('accessToken', response.data.accessToken) - localStorage.setItem('refreshToken', response.data.refreshToken) - user.value.username = username - } + sessionStorage.setItem('accessToken', response.data.accessToken) + localStorage.setItem('refreshToken', response.data.refreshToken) + user.value.username = username + await router.push('/') } catch (error) { - console.error('Failed to login:', error) + const axiosError = error as AxiosError + errorMessage.value = (axiosError.response?.data as string) || 'An error occurred' } } return { login, - register + register, + errorMessage } }) diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue index 97aa1c70d9da3a836a18a9d2cbabf570ac107945..e63cf8197bbe699db405040e962b165a6a0648c0 100644 --- a/src/views/LoginView.vue +++ b/src/views/LoginView.vue @@ -1,34 +1,24 @@ <script setup lang="ts"> import FormLogin from '@/components/FormLogin.vue' import FormRegister from '@/components/FormRegister.vue' -import { useUserStore } from '@/stores/userStore' import { ref } from 'vue' -const userStore = useUserStore() - const isLogin = ref<boolean>(true) - -function register(username: string, password: string) { - userStore.register(username, password) -} - -function login(username: string, password: string) { - userStore.login(username, password) -} </script> <template> <div class="grid grid-cols-2 gap-10"> <div class="border-2 border-black flex items-center"> <h1>Dette er et bilde</h1> + <button class="border border-black">Test</button> </div> <div class="flex flex-col"> <div class="flex flex-row gap-5 justify-center"> <h3 :class="{ selected: isLogin }" @click="isLogin = true">Logg inn</h3> <h3 :class="{ selected: !isLogin }" @click="isLogin = false">Registrer deg</h3> </div> - <FormLogin v-if="isLogin" @submit="login" /> - <FormRegister v-else @submit="register" /> + <FormLogin v-if="isLogin" /> + <FormRegister v-else /> </div> </div> </template>