Merge pull request #47 from heikkkk/fix/sucessfull-login-after-logout

Fixed bug not letting users log in after logging out

src/components/Login/Login.vue

@@ -2,10 +2,8 @@
 import '../../assets/css/Login/login.css'
 import LogoTitle from '@/components/LogoTitle.vue'
 import { useRouter } from 'vue-router';
-import { useUserStore } from '@/stores/UserStore.js'
 import { login, username, password } from '../../services/LoginService.js'
-import axios from 'axios'
-import { ref, computed } from 'vue'
+import { ref } from 'vue'
 
 const authenticationError = ref(false)
 
@@ -15,7 +13,8 @@ const handleSubmit = async () => {
   try {
     const response = await login()
     if (response && response.status === 200) {
-      router.push('/discover')
+
+      await router.push('/discover')
     } else {
       authenticationError.value = true
     }
@@ -30,16 +29,16 @@ const handleSubmit = async () => {
   <div class="login-wrapper">
     <div class="login-container">
       <form class="login-form" @submit.prevent="handleSubmit">
-        <LogoTitle color="#ffffff"></LogoTitle>
+        <LogoTitle data-cy="logo-title-login" color="#ffffff"></LogoTitle>
         <p v-if="authenticationError" class="error_msg">Incorrect username or password</p>
         <input v-model="username" :class="authenticationError === false ? 'username-input' : 'error'" type="text" placeholder="Username">
         <input v-model="password" :class="authenticationError === false ? 'password-input' : 'error'" type="password" placeholder="Password">
         <div class="login-button-container">
 
-          <button class="login-button" type="submit">Login</button>
+          <button data-cy="login-button" class="login-button" type="submit">Login</button>
           <div class="signup-paragraph-container">
             <p >Don't have a user?
-              <RouterLink to="/sign-up" style="color: white">Sign up</RouterLink>
+              <RouterLink data-cy="sign-up-button" to="/sign-up" style="color: white">Sign up</RouterLink>
             </p>
           </div>
         </div>

src/services/LoginService.js

@@ -1,12 +1,18 @@
 import axios from 'axios'
 import { ref, computed } from 'vue'
 import { useUserStore } from '@/stores/UserStore.js'
-import { getIdByUsername } from '@/services/QuizInfoService.js'
+import piniaPluginPersistedState from "pinia-plugin-persistedstate"
+import { createPinia } from 'pinia'
+import { createApp } from 'vue'
+import App from '@/App.vue'
+
+const pinia = createPinia()
+pinia.use(piniaPluginPersistedState);
+const app = createApp(App)
+app.use(pinia)
 
 const username = ref('')
 const password = ref('')
-const authenticationError = ref(false)
-const userStore = useUserStore()
 
 const authConfig = computed(() => ({
   auth: {
@@ -16,24 +22,23 @@ const authConfig = computed(() => ({
 }))
 
 function parseResponse(response) {
+  const userStore = useUserStore()
   userStore.setUsername(response.data.user_name)
   userStore.setToken(response.data.access_token)
   return response; // Return the response
 }
 
-export function postLoginCredentials() {
-  return axios.post('http://localhost:8080/sign-in', {}, authConfig.value)
-    .then(response => {
-      return parseResponse(response, userStore)
-    })
-    .catch(error => {
-      authenticationError.value = true
-      throw error; // Throw error to propagate it to the caller
-    })
+export async function postLoginCredentials() {
+  try {
+    const response = await axios.post('http://localhost:8080/sign-in', {}, authConfig.value);
+    return parseResponse(response);
+  } catch (error) {
+    throw error; // Throw error to propagate it to the caller
+  }
 }
 
-export function login() {
-  return postLoginCredentials()
+export async function login() {
+  return await postLoginCredentials();
 }
 
-export { username, password, authenticationError }
+export { username, password }