108 lines
3.2 KiB
Vue
108 lines
3.2 KiB
Vue
<template>
|
|
<v-container class="fill-height">
|
|
<v-card class="recipe-card auth-card pa-10 mx-auto" elevation="10" max-width="500">
|
|
|
|
<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-model="email"
|
|
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
|
|
v-model="password"
|
|
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" style="cursor: pointer;">
|
|
{{ 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 config = useRuntimeConfig()
|
|
|
|
const handleAuth = async () => {
|
|
const endpoint = isLogin.value ? 'api/auth/login' : 'api/auth/register'
|
|
|
|
const url = isLogin.value
|
|
? `${config.public.apiBase}${endpoint}?useCookies=false`
|
|
: `${config.public.apiBase}${endpoint}`
|
|
|
|
try {
|
|
const response = await $fetch(url, {
|
|
method: 'POST',
|
|
body: {
|
|
email: email.value,
|
|
userName: email.value,
|
|
password: password.value
|
|
}
|
|
})
|
|
|
|
if (isLogin.value) {
|
|
if (response.accessToken) {
|
|
|
|
const tokenCookie = useCookie('seasoned_token', { maxAge: response.expiresIn })
|
|
tokenCookie.value = response.accessToken
|
|
|
|
if (import.meta.client) {
|
|
localStorage.setItem('token', response.accessToken)
|
|
}
|
|
|
|
navigateTo('/gallery')
|
|
}
|
|
} else {
|
|
alert("Account created successfully! Please sign in to open your ledger.")
|
|
isLogin.value = true
|
|
}
|
|
} catch (err) {
|
|
const errorDetail = err.data?.errors
|
|
? Object.values(err.data.errors).flat().join('\n')
|
|
: "Check your credentials and try again."
|
|
|
|
alert(`Authentication failed:\n${errorDetail}`)
|
|
}
|
|
}
|
|
</script> |