DB update

Seasoned.Frontend/app/assets/css/auth.css

@@ -0,0 +1,48 @@
+/* app/assets/css/auth.css */
+
+.auth-card {
+    /* Inherits recipe-card but adds a tighter feel for a login form */
+    max-width: 450px;
+    margin-top: 5vh;
+}
+
+.auth-title {
+    font-family: 'Libre Baskerville', serif;
+    font-weight: 700;
+    font-size: 2.2rem;
+    color: #2e1e0a;
+    margin-bottom: 8px;
+}
+
+/* Enhancing the custom-input for Auth with icons */
+.auth-input .v-field__prepend-inner {
+    display: flex !important; /* Overriding the 'display: none' from app-theme.css */
+    padding-right: 12px;
+}
+
+.auth-input .v-icon {
+    color: #f8f1e0 !important;
+    opacity: 0.6;
+}
+
+.auth-toggle-btn {
+    font-family: 'Inter', sans-serif !important;
+    font-size: 0.85rem !important;
+    color: #6d5e4a !important;
+    text-decoration: underline;
+    cursor: pointer;
+    transition: color 0.2s;
+}
+
+.auth-toggle-btn:hover {
+    color: #2e1e0a !important;
+}
+
+/* Subtle animation when switching between Login and Register */
+.auth-switch-enter-active, .auth-switch-leave-active {
+    transition: all 0.3s ease;
+}
+.auth-switch-enter-from, .auth-switch-leave-to {
+    opacity: 0;
+    transform: translateY(10px);
+}

Seasoned.Frontend/app/pages/auth.vue

@@ -0,0 +1,104 @@
+<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>

Seasoned.Frontend/nuxt.config.ts

@@ -13,7 +13,8 @@ export default defineNuxtConfig({
     'vuetify/lib/styles/main.sass',
     '@mdi/font/css/materialdesignicons.min.css',
     '~/assets/css/app-theme.css',
-    '~/assets/css/gallery.css'
+    '~/assets/css/gallery.css',
+    '~/assets/css/auth.css'
   ],
 
   build: {