gorb/frontend
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

feat: change to use useAuth composable

Browse source
This commit is contained in:
SauceyRed 2025-05-07 19:43:39 +02:00
parent a4b98ba58a
commit e1f2a5a591
2 changed files with 8 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

44
pages/login.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<NuxtLayout> <NuxtLayout>
<form @submit="login"> <form @submit="formLogin">
<div> <div>
<label for="username">Username/Email</label> <label for="username">Username/Email</label>
<br> <br>
@ -18,12 +18,6 @@
<div> <div>
Don't have an account? <NuxtLink href="/register">Register</NuxtLink> one! Don't have an account? <NuxtLink href="/register">Register</NuxtLink> one!
</div> </div>
<div v-if="response">
Response:
<p>
{{ response }}
</p>
</div>
</NuxtLayout> </NuxtLayout>
</template> </template>
@ -38,44 +32,14 @@ const form = reactive({
password: "", password: "",
}); });
const response = ref();
//const authStore = useAuthStore(); //const authStore = useAuthStore();
const accessToken = useCookie("access_token");
const refreshToken = useCookie("refresh_token");
const redirectTo = useRoute().query.redirect_to;
console.log("access token:", accessToken.value); const { login } = useAuth();
console.log("refresh token:", refreshToken.value);
onMounted(() => { async function formLogin(e: Event) {
console.log("accessToken:", accessToken.value);
console.log("refreshToken:", refreshToken.value);
if (accessToken.value) {
//return navigateTo(redirectTo ? redirectTo as string : useAppConfig().baseURL as string);
}
});
const apiVersion = useRuntimeConfig().public.apiVersion;
async function login(e: Event) {
e.preventDefault(); e.preventDefault();
console.log("Sending login data"); console.log("Sending login data");
const hashedPass = await hashPassword(form.password); await login(form.username, form.password, "Linux Laptop");
console.log("hashedPass:", hashedPass);
//authStore.setAccessToken(accessToken);
const res = await $fetch(`/api/v${apiVersion}/auth/login`, {
method: "POST", body:
{
username: form.username, password: hashedPass
}
}) as { access_token: string, refresh_token: string };
response.value = res;
accessToken.value = res.access_token;
console.log("set access token:", accessToken.value);
const refreshToken = useCookie("refresh_token", { secure: true, httpOnly: false });
refreshToken.value = res.refresh_token;
//return navigateTo(redirectTo ? redirectTo as string : useAppConfig().baseURL as string); //return navigateTo(redirectTo ? redirectTo as string : useAppConfig().baseURL as string);
} }

35
pages/register.vue
View file

@ -24,7 +24,7 @@
<input type="password" name="password" id="password" v-model="form.password"> <input type="password" name="password" id="password" v-model="form.password">
</div> </div>
<div> <div>
<label for="repeat-password">Password</label> <label for="repeat-password">Repeat password</label>
<br> <br>
<input type="password" name="repeat-password" id="repeat-password" v-model="form.repeatPassword"> <input type="password" name="repeat-password" id="repeat-password" v-model="form.repeatPassword">
</div> </div>
@ -35,12 +35,6 @@
<div> <div>
Already have an account? <NuxtLink href="/login">Log in</NuxtLink>! Already have an account? <NuxtLink href="/login">Log in</NuxtLink>!
</div> </div>
<div v-if="response">
Response:
<p>
{{ response }}
</p>
</div>
</NuxtLayout> </NuxtLayout>
</template> </template>
@ -57,8 +51,6 @@ const form = reactive({
repeatPassword: "" repeatPassword: ""
}); });
const response = ref();
/* /*
const errorMessages = reactive({ const errorMessages = reactive({
username: { username: {
@ -81,18 +73,11 @@ const errorMessages = reactive({
*/ */
//const authStore = useAuthStore(); //const authStore = useAuthStore();
const accessToken = useCookie("access_token"); const auth = useAuth();
const refreshToken = useCookie("refresh_token");
const redirectTo = useRoute().query.redirect_to; const redirectTo = useRoute().query.redirect_to;
console.log("access token:", accessToken.value);
console.log("refresh token:", refreshToken.value);
onMounted(() => { onMounted(() => {
console.log("accessToken:", accessToken.value); if (auth.accessToken.value) {
console.log("refreshToken:", refreshToken.value);
if (accessToken.value) {
//return navigateTo(redirectTo ? redirectTo as string : useAppConfig().baseURL as string); //return navigateTo(redirectTo ? redirectTo as string : useAppConfig().baseURL as string);
} }
}); });
@ -135,19 +120,7 @@ const apiVersion = useRuntimeConfig().public.apiVersion;
async function register(e: Event) { async function register(e: Event) {
e.preventDefault(); e.preventDefault();
console.log("Sending registration data"); console.log("Sending registration data");
const hashedPass = await hashPassword(form.password); await auth.register(form.username, form.email, form.password);
const res = await $fetch(`/api/v${apiVersion}/auth/register`, {
method: "POST", body:
{
email: form.email, username: form.username, password: hashedPass
}
}) as { access_token: string, refresh_token: string };
response.value = res;
//authStore.setAccessToken(accessToken);
accessToken.value = res.access_token;
console.log("set access token:", accessToken.value);
const refreshToken = useCookie("refresh_token", { secure: true, httpOnly: false });
refreshToken.value = res.refresh_token;
//return navigateTo(redirectTo ? redirectTo as string : useAppConfig().baseURL as string); //return navigateTo(redirectTo ? redirectTo as string : useAppConfig().baseURL as string);
} }