104 lines
3.0 KiB
Vue
104 lines
3.0 KiB
Vue
<template>
|
|
<v-container class="fill-height">
|
|
<v-card class="recipe-card auth-card pa-10 mx-auto" elevation="10">
|
|
|
|
<v-fade-transition mode="out-in">
|
|
<div :key="isLogin">
|
|
<header class="text-center mb-8">
|
|
<h1 class="auth-title">{{ isLogin ? 'Sign In' : 'Join Us' }}</h1>
|
|
<p class="brand-subtitle">The Seasoned Ledger</p>
|
|
</header>
|
|
|
|
<v-form @submit.prevent="handleAuth">
|
|
<v-text-field
|
|
v-if="!isLogin"
|
|
label="Name"
|
|
placeholder="Your name"
|
|
class="custom-input auth-input mb-4"
|
|
variant="flat"
|
|
prepend-inner-icon="mdi-account-outline"
|
|
></v-text-field>
|
|
|
|
<v-text-field
|
|
label="Email"
|
|
placeholder="email@example.com"
|
|
class="custom-input auth-input mb-4"
|
|
variant="flat"
|
|
prepend-inner-icon="mdi-email-outline"
|
|
></v-text-field>
|
|
|
|
<v-text-field
|
|
label="Password"
|
|
type="password"
|
|
placeholder="••••••••"
|
|
class="custom-input auth-input mb-6"
|
|
variant="flat"
|
|
prepend-inner-icon="mdi-lock-outline"
|
|
></v-text-field>
|
|
|
|
<v-btn
|
|
block
|
|
class="analyze-btn mb-4"
|
|
size="large"
|
|
elevation="0"
|
|
type="submit"
|
|
>
|
|
{{ isLogin ? 'Open Ledger' : 'Create Account' }}
|
|
</v-btn>
|
|
|
|
<div class="text-center">
|
|
<span class="auth-toggle-btn" @click="isLogin = !isLogin">
|
|
{{ isLogin ? "New here? Register an account" : "Already a member? Sign in" }}
|
|
</span>
|
|
</div>
|
|
</v-form>
|
|
</div>
|
|
</v-fade-transition>
|
|
|
|
<v-divider class="my-6 separator"></v-divider>
|
|
|
|
<v-btn to="/" variant="text" color="#6d5e4a" block class="view-recipe-btn">
|
|
<v-icon icon="mdi-chevron-left" class="mr-1"></v-icon>
|
|
Return to Kitchen
|
|
</v-btn>
|
|
</v-card>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script setup>
|
|
const isLogin = ref(true)
|
|
const email = ref('')
|
|
const password = ref('')
|
|
|
|
const authUrl = '/api/auth/login?useCookies=false'
|
|
|
|
const handleAuth = async () => {
|
|
try {
|
|
const response = await $fetch(isLogin.value ? authUrl : '/api/auth/register', {
|
|
method: 'POST',
|
|
body: {
|
|
email: email.value,
|
|
password: password.value
|
|
}
|
|
})
|
|
|
|
if (isLogin.value && response.accessToken) {
|
|
const token = useCookie('seasoned_token', {
|
|
maxAge: response.expiresIn,
|
|
sameSite: 'lax',
|
|
secure: true,
|
|
path: '/'
|
|
})
|
|
|
|
token.value = response.accessToken
|
|
|
|
navigateTo('/gallery')
|
|
} else if (!isLogin.value) {
|
|
isLogin.value = true
|
|
alert("Account created. Please sign in to open your ledger.")
|
|
}
|
|
} catch (err) {
|
|
console.error("Authentication failed:", err.data?.errors || err)
|
|
}
|
|
}
|
|
</script> |