UI update

Seasoned.Frontend/app/pages/login.vue

@@ -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)
   }
 }