merch-tracker-v2/frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

register + push to sign in on success

Browse source
This commit is contained in:
nquidox 2025-09-14 17:44:32 +03:00
parent ba4d769591
commit 8934f7b219
3 changed files with 79 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

90
src/services/apiClient.js
View file

@ -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 refreshPromise = null;
let isRefreshing = false
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');
const data = await res.json();
console.log("Refresh response data: ", data);
return data;
if (!res.ok) throw new Error('Failed to refresh access token')
return await res.json()
})
.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);
console.log('refreshed token', data.access_token);
authStore.setToken(data.access_token)
return data;
return data
})
.catch((error) => {
throw error;
throw error
})
.finally(() => {
isRefreshing = false;
refreshPromise = null;
});
isRefreshing = false
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();
authStore.forceLogout();
throw e;
const authStore = useAuthStore()
authStore.forceLogout()
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);
return null;
console.warn('Failed to parse JSON response', e)
}
}
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' }),
};
}

17
src/stores/authStore.js
View file

@ -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(access_token)
user.value = userData || null
setToken(response.data.accessToken)
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,

36
src/views/LoginView.vue
View file

@ -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 password = ref('')
const { activeTab } = storeToRefs(store)
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-item-row label="Email">
<n-input />
<n-form @submit.prevent="onSignUp">
<n-form-item-row label="Email" >
<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>