UI update
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<v-card class="recipe-card pa-10 mx-auto mt-10" max-width="950" elevation="1">
|
||||
<header class="text-center mb-10">
|
||||
<v-card class="recipe-card pa-6 mx-auto mt-4" max-width="950" elevation="1">
|
||||
<header class="text-center mb-4">
|
||||
<v-img
|
||||
src="/images/seasoned-logo.png"
|
||||
width="180"
|
||||
@@ -12,10 +12,10 @@
|
||||
<p class="brand-subtitle">Kitchen Consultation</p>
|
||||
</header>
|
||||
|
||||
<v-divider class="mb-10 separator"></v-divider>
|
||||
<v-divider class="mb-6 separator"></v-divider>
|
||||
|
||||
<v-row justify="center" class="mb-6">
|
||||
<v-col cols="12" md="10">
|
||||
<v-col cols="12" md="11">
|
||||
<div class="chat-container">
|
||||
<div class="section-header mb-4 d-flex align-center">
|
||||
<v-icon icon="mdi-chef-hat" class="mr-2" size="small"></v-icon>
|
||||
@@ -29,6 +29,13 @@
|
||||
<div v-for="(msg, i) in chatMessages" :key="i" :class="['message', msg.role]">
|
||||
<span class="message-text">{{ msg.text }}</span>
|
||||
</div>
|
||||
<div v-if="chatLoading" class="message assistant thinking-bubble">
|
||||
<div class="typing">
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
<span class="dot"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<v-textarea
|
||||
@@ -39,16 +46,14 @@
|
||||
max-rows="6"
|
||||
hide-details
|
||||
class="chat-input"
|
||||
@keyup.enter.exact.prevent="askChef"
|
||||
@keydown.enter.exact.prevent="askChef"
|
||||
:loading="chatLoading"
|
||||
>
|
||||
<template v-slot:append-inner>
|
||||
<v-btn
|
||||
icon="mdi-send-variant"
|
||||
variant="text"
|
||||
size="small"
|
||||
color="#8c4a32"
|
||||
class="mt-1"
|
||||
class="mt-1 send-btn"
|
||||
@click="askChef"
|
||||
></v-btn>
|
||||
</template>
|
||||
@@ -88,8 +93,7 @@ const askChef = async () => {
|
||||
userQuery.value = ''
|
||||
chatLoading.value = true
|
||||
|
||||
await nextTick()
|
||||
scrollToBottom()
|
||||
await scrollToBottom()
|
||||
|
||||
try {
|
||||
const data = await $fetch(`${config.public.apiBase}api/recipe/consult`, {
|
||||
@@ -105,9 +109,6 @@ const askChef = async () => {
|
||||
localStorage.removeItem('pending_recipe')
|
||||
}
|
||||
|
||||
await nextTick()
|
||||
scrollToBottom()
|
||||
|
||||
} catch (err) {
|
||||
chatMessages.value.push({
|
||||
role: 'assistant',
|
||||
@@ -115,12 +116,22 @@ const askChef = async () => {
|
||||
})
|
||||
} finally {
|
||||
chatLoading.value = false
|
||||
await scrollToBottom()
|
||||
}
|
||||
}
|
||||
|
||||
const scrollToBottom = () => {
|
||||
const scrollToBottom = async () => {
|
||||
await nextTick()
|
||||
if (chatDisplay.value) {
|
||||
chatDisplay.value.scrollTop = chatDisplay.value.scrollHeight
|
||||
const { scrollTop, scrollHeight, clientHeight } = chatDisplay.value
|
||||
const isAtBottom = scrollHeight - scrollTop <= clientHeight + 100
|
||||
|
||||
if (isAtBottom) {
|
||||
chatDisplay.value.scrollTo({
|
||||
top: scrollHeight,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -28,7 +28,7 @@
|
||||
Turn handwritten cards into searchable digital text instantly.
|
||||
</p>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn v-if="isLoggedIn" to="/uploader" class="mt-12 column-button">
|
||||
<v-btn v-if="isLoggedIn" to="/uploader" class="mt-12 column-btn">
|
||||
Got to Uploader
|
||||
</v-btn>
|
||||
</v-col>
|
||||
@@ -39,7 +39,7 @@
|
||||
Chat with an AI chef to scale ingredients, find substitutes, or get inspiration.
|
||||
</p>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn v-if="isLoggedIn" to="/chat" class="mt-12 column-button">
|
||||
<v-btn v-if="isLoggedIn" to="/chat" class="mt-12 column-btn">
|
||||
Talk to Chef
|
||||
</v-btn>
|
||||
</v-col>
|
||||
@@ -50,13 +50,13 @@
|
||||
Build a private collection that keeps your family traditions alive and organized.
|
||||
</p>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn v-if="isLoggedIn" to="/gallery" class="mt-12 column-button">
|
||||
<v-btn v-if="isLoggedIn" to="/gallery" class="mt-12 column-btn">
|
||||
View Collection
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<div v-if="!isLoggedIn" class="d-flex flex-column align-center">
|
||||
<v-btn to="/login" class="analyze-btn px-12 py-6 mb-4" size="x-large">
|
||||
<v-btn to="/login" class="column-btn" size="x-large">
|
||||
Get Started
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
@@ -1,43 +1,92 @@
|
||||
<template>
|
||||
<v-container class="fill-height">
|
||||
<v-card class="recipe-card auth-card pa-10 mx-auto" elevation="10" max-width="500">
|
||||
<v-card theme="light" 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">
|
||||
<header class="text-center mb-10">
|
||||
<div class="brand-icon-container mb-1">
|
||||
<v-img
|
||||
src="/images/seasoned-logo.png"
|
||||
width="180"
|
||||
class="mx-auto"
|
||||
contain
|
||||
></v-img>
|
||||
</div>
|
||||
<h1 class="auth-title">{{ isLogin ? 'Sign In' : 'Join Us' }}</h1>
|
||||
</header>
|
||||
|
||||
<v-form @submit.prevent="handleAuth">
|
||||
<v-expand-transition>
|
||||
<div v-if="errorMessage"
|
||||
:class="[
|
||||
'auth-message',
|
||||
errorMessage.includes('created') ? 'auth-success' : 'auth-error'
|
||||
]"
|
||||
>
|
||||
<v-icon
|
||||
:icon="errorMessage.includes('created') ? 'mdi-check-circle-outline' : 'mdi-alert-circle-outline'"
|
||||
size="small"
|
||||
class="mr-2"
|
||||
></v-icon>
|
||||
{{ errorMessage }}
|
||||
</div>
|
||||
</v-expand-transition>
|
||||
|
||||
<v-text-field
|
||||
autofocus
|
||||
v-model="email"
|
||||
placeholder="Email"
|
||||
bg-color="#5d4037"
|
||||
base-color="#f8f1e0"
|
||||
class="auth-input mb-4"
|
||||
label="Email Address"
|
||||
class="mb-4 auth-input"
|
||||
color="#8c4a32"
|
||||
variant="outlined"
|
||||
hide-details
|
||||
prepend-inner-icon="mdi-email-outline"
|
||||
@input="errorMessage = ''"
|
||||
:style="{
|
||||
caretColor: '#2e1e0a !important',
|
||||
fontFamily: 'Libre Baskerville, serif !important'
|
||||
}"
|
||||
></v-text-field>
|
||||
|
||||
<v-text-field
|
||||
v-model="password"
|
||||
placeholder="Password"
|
||||
bg-color="#5d4037"
|
||||
base-color="#f8f1e0"
|
||||
label="Password"
|
||||
type="password"
|
||||
class="auth-input mb-6"
|
||||
class="mb-8 auth-input"
|
||||
variant="outlined"
|
||||
color="#8c4a32"
|
||||
hide-details
|
||||
prepend-inner-icon="mdi-lock-outline"
|
||||
@input="errorMessage = ''"
|
||||
:style="{
|
||||
caretColor: '#2e1e0a !important',
|
||||
fontFamily: 'Libre Baskerville, serif !important'
|
||||
}"
|
||||
></v-text-field>
|
||||
|
||||
<v-expand-transition>
|
||||
<v-text-field
|
||||
v-if="!isLogin"
|
||||
v-model="confirmPassword"
|
||||
label="Confirm Password"
|
||||
type="password"
|
||||
class="mb-8 auth-input"
|
||||
variant="outlined"
|
||||
color="#8c4a32"
|
||||
hide-details
|
||||
prepend-inner-icon="mdi-lock-check-outline"
|
||||
@input="errorMessage = ''"
|
||||
:style="{
|
||||
caretColor: '#2e1e0a !important',
|
||||
fontFamily: 'Libre Baskerville, serif !important'
|
||||
}"
|
||||
></v-text-field>
|
||||
</v-expand-transition>
|
||||
|
||||
<v-btn
|
||||
block
|
||||
class="analyze-btn mb-4"
|
||||
class="auth-btn mb-4"
|
||||
size="large"
|
||||
elevation="0"
|
||||
type="submit"
|
||||
:loading="authLoading"
|
||||
:disabled="authLoading"
|
||||
@@ -67,14 +116,29 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import '@/assets/css/login.css'
|
||||
import '@/assets/css/app-theme.css'
|
||||
|
||||
const isLogin = ref(true)
|
||||
const email = ref('')
|
||||
const password = ref('')
|
||||
const confirmPassword = ref('')
|
||||
const errorMessage = ref('')
|
||||
const authLoading = ref(false)
|
||||
const config = useRuntimeConfig()
|
||||
|
||||
const toggleMode = () => {
|
||||
isLogin.value = !isLogin.value
|
||||
errorMessage.value = ''
|
||||
confirmPassword.value = ''
|
||||
}
|
||||
|
||||
const handleAuth = async () => {
|
||||
errorMessage.value = ''
|
||||
if (!isLogin.value && password.value !== confirmPassword.value) {
|
||||
errorMessage.value = "Passwords do not match."
|
||||
return
|
||||
}
|
||||
|
||||
authLoading.value = true
|
||||
const endpoint = isLogin.value ? 'api/auth/login' : 'api/auth/register'
|
||||
|
||||
@@ -98,9 +162,18 @@ const handleAuth = async () => {
|
||||
} else {
|
||||
isLogin.value = true
|
||||
authLoading.value = false
|
||||
errorMessage.value = "Account created! Please sign in."
|
||||
}
|
||||
} catch (err) {
|
||||
authLoading.value = false
|
||||
if (err.status === 401) {
|
||||
errorMessage.value = "Invalid email or password. Please try again."
|
||||
} else if (err.status === 404) {
|
||||
errorMessage.value = "Account not found. Would you like to register?"
|
||||
} else {
|
||||
errorMessage.value = "Something went wrong. Please check your connection."
|
||||
}
|
||||
|
||||
console.error('Auth error:', err)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user