register + push to sign in on success

src/services/apiClient.js

@@ -1,83 +1,81 @@
-import { useAuthStore } from '@/stores/authStore.js';
+import { useAuthStore } from '@/stores/authStore.js'
 
-const BASE_URL = 'http://localhost:9000/api/v2';
+const BASE_URL = 'http://localhost:9000/api/v2'
 
-let isRefreshing = false;
+let isRefreshing = false
-let refreshPromise = null;
+let refreshPromise = null
 
 function createConfig(options = {}) {
-  const authStore = useAuthStore();
+  const authStore = useAuthStore()
   const headers = {
     'Content-Type': 'application/json',
     ...options.headers,
-  };
+  }
 
   if (authStore.accessToken) {
-    headers['Authorization'] = `Bearer ${authStore.accessToken}`;
+    headers['Authorization'] = `Bearer ${authStore.accessToken}`
   }
 
   return {
     headers,
     credentials: 'include',
     ...options,
-  };
+  }
 }
 
 async function refreshAccessToken() {
-  const authStore = useAuthStore();
+  const authStore = useAuthStore()
 
-  if (isRefreshing) return refreshPromise;
+  if (isRefreshing) return refreshPromise
 
-  isRefreshing = true;
+  isRefreshing = true
   refreshPromise = fetch(`${BASE_URL}/user/auth/refresh`, {
     method: 'POST',
     credentials: 'include',
   })
 
     .then(async (res) => {
-      if (!res.ok) throw new Error('Failed to refresh access token');
+      if (!res.ok) throw new Error('Failed to refresh access token')
-      const data = await res.json();
+      return await res.json()
-      console.log("Refresh response data: ", data);
-      return data;
     })
 
     .then((data) => {
       const token = data.access_token
 
       if (!token) {
-        throw new Error('No access_token in refresh response');
+        throw new Error('No access_token in refresh response')
       }
 
-      authStore.setToken(data.access_token);
+      authStore.setToken(data.access_token)
-      console.log('refreshed token', data.access_token);
 
-      return data;
+
+      return data
     })
 
     .catch((error) => {
-      throw error;
+      throw error
     })
 
     .finally(() => {
-      isRefreshing = false;
+      isRefreshing = false
-      refreshPromise = null;
+      refreshPromise = null
-    });
+    })
 
-  return refreshPromise;
+  return refreshPromise
 }
 
 async function request(url, options = {}, isRetry = false) {
-  const config = createConfig(options);
+  const config = createConfig(options)
 
-  const response = await fetch(`${BASE_URL}${url}`, config);
+  const response = await fetch(`${BASE_URL}${url}`, config)
 
   if (response.status === 401 && !isRetry) {
     try {
-      const data = await refreshAccessToken();
+      const data = await refreshAccessToken()
 
-      const token = data.access_token;
+      const token = data.access_token
       if (!token) {
-        throw new Error('Refresh response did not contain access_token');
+        throw new Error('Refresh response did not contain access_token')
       }
 
       const newOptions = {
@@ -86,36 +84,40 @@ async function request(url, options = {}, isRetry = false) {
           ...options.headers,
           'Authorization': `Bearer ${token}`,
         },
-      };
+      }
-      return await request(url, newOptions, true);
+      return await request(url, newOptions, true)
     } catch (e) {
-      const authStore = useAuthStore();
+      const authStore = useAuthStore()
-      authStore.forceLogout();
+      authStore.forceLogout()
-      throw e;
+      throw e
     }
   }
 
   if (!response.ok) {
-    let errorData;
+    let errorData
     try {
-      errorData = await response.json();
+      errorData = await response.json()
     } catch {
-      errorData = {};
+      errorData = {}
     }
-    throw new Error(errorData.message || `HTTP Error: ${response.status}`);
+    throw new Error(errorData.message || `HTTP Error: ${response.status}`)
   }
 
-  const contentType = response.headers.get('content-type');
+  let data = null
+  const contentType = response.headers.get('content-type')
   if (contentType?.includes('application/json')) {
     try {
-      return await response.json();
+      data = await response.json()
     } catch (e) {
-      console.warn('Failed to parse JSON response', e);
+      console.warn('Failed to parse JSON response', e)
-      return null;
     }
   }
 
-  return null;
+  return {
+    status: response.status,
+    ok: response.ok,
+    data,
+  }
 }
 
 export const apiClient = {
@@ -129,4 +131,4 @@ export const apiClient = {
     body: JSON.stringify(data),
   }),
   delete: (url) => request(url, { method: 'DELETE' }),
-};
+}

src/stores/authStore.js

@@ -8,6 +8,8 @@ export const useAuthStore = defineStore('auth', () => {
   const accessToken = ref(localStorage.getItem('accessToken'))
   const user = ref(null)
 
+  const activeTab = ref('signin')
+
   // getters
   const isAuthenticated = computed(() => !!accessToken.value)
 
@@ -24,10 +26,7 @@ export const useAuthStore = defineStore('auth', () => {
   const login = async (email, password) => {
     try {
       const response = await apiClient.post('/user/auth/login', { email, password })
-      const { access_token, user: userData } = response
+      setToken(response.data.accessToken)
-
-      setToken(access_token)
-      user.value = userData || null
 
       router.push({ name: 'collection'})
     } catch (error) {
@@ -55,8 +54,10 @@ export const useAuthStore = defineStore('auth', () => {
   const register = async (email, password) => {
     try {
       const response = await apiClient.post('/user', { email, password })
-      if (response.data.code === 200) {
+
-        router.push({ name: 'login' })
+      if (response.status === 200) {
+        activeTab.value = 'signin'
+        router.push({ name: 'login'})
       }
     } catch (error) {
       console.error('Register error:', error)
@@ -65,7 +66,8 @@ export const useAuthStore = defineStore('auth', () => {
 
   const userInfo = async () => {
     try {
-      return await apiClient.get('/user/')
+      const response = await apiClient.get('/user/')
+      return response.data
     } catch (error) {
       console.error('Register error:', error)
     }
@@ -75,6 +77,7 @@ export const useAuthStore = defineStore('auth', () => {
     accessToken,
     user,
     isAuthenticated,
+    activeTab,
     setToken,
     login,
     logout,

src/views/LoginView.vue

@@ -1,26 +1,35 @@
 <script setup>
-import { ref } from 'vue'
+import { reactive, ref } from 'vue'
 import { useAuthStore } from '@/stores/authStore.js'
+import { storeToRefs } from 'pinia'
 
 const store = useAuthStore()
 
-const email = ref('')
+const { activeTab } = storeToRefs(store)
-const password = ref('')
+
+const signInEmail = ref('')
+const signInPassword = ref('')
 
 const onSignIn = () => {
-  store.login(email.value, password.value)
+  store.login(signInEmail.value, signInPassword.value)
 }
 
+const signUp = reactive({
+  email: '',
+  password: '',
+  reenterPassword: '',
+})
+
 const onSignUp = () => {
-  console.log('Sign up placeholder')
+  store.register(signUp.email, signUp.password)
 }
 </script>
 
 <template>
   <n-card class="my-card">
     <n-tabs
+      v-model:value="activeTab"
       class="card-tabs"
-      default-value="signin"
       size="large"
       animated
       pane-wrapper-style="margin: 0 -4px"
@@ -29,25 +38,25 @@ const onSignUp = () => {
       <n-tab-pane name="signin" tab="Sign in">
         <n-form @submit.prevent="onSignIn">
           <n-form-item-row label="Email">
-            <n-input v-model:value="email"/>
+            <n-input v-model:value="signInEmail"/>
           </n-form-item-row>
           <n-form-item-row label="Password">
-            <n-input v-model:value="password" type="password" show-password-on="click" />
+            <n-input v-model:value="signInPassword" type="password" show-password-on="click" />
           </n-form-item-row>
         </n-form>
         <n-button type="primary" block secondary strong @click="onSignIn"> Sign In</n-button>
       </n-tab-pane>
 
       <n-tab-pane name="signup" tab="Sign up">
-        <n-form @submit.prevent="onSignUp" @keydown.enter.prevent="onSignUp">
+        <n-form @submit.prevent="onSignUp">
-          <n-form-item-row label="Email">
+          <n-form-item-row label="Email" >
-            <n-input />
+            <n-input v-model:value="signUp.email"/>
           </n-form-item-row>
           <n-form-item-row label="Password">
-            <n-input type="password" show-password-on="click" />
+            <n-input type="password" v-model:value="signUp.password" show-password-on="click" />
           </n-form-item-row>
           <n-form-item-row label="Reenter Password">
-            <n-input type="password" show-password-on="click" />
+            <n-input type="password" v-model:value="signUp.reenterPassword" show-password-on="click" />
           </n-form-item-row>
         </n-form>
         <n-button type="primary" block secondary strong @click="onSignUp">Sign up</n-button>
@@ -64,5 +73,6 @@ const onSignUp = () => {
 .my-card {
   max-width: 500px;
   width: 90%;
+  margin: auto;
 }
 </style>