Fix modal interactivity and login persistence issues

assets/css/main.css

@@ -448,3 +448,41 @@ img[src*="logo"], .logo-image {
   margin: 1rem !important;
   width: 100% !important;
 }
+
+/* Login modal specific overrides */
+.login-modal {
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  z-index: 9999 !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  backdrop-filter: blur(4px) !important;
+}
+
+.login-modal .modal-overlay {
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  background-color: rgba(0, 0, 0, 0.5) !important;
+  backdrop-filter: blur(4px) !important;
+}
+
+.login-modal .modal-content {
+  background: white !important;
+  border-radius: 0.5rem !important;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
+  max-width: 400px !important;
+  max-height: 90vh !important;
+  overflow: auto !important;
+  position: relative !important;
+  z-index: 10000 !important;
+  margin: 1rem !important;
+  width: 100% !important;
+}

components/LoginModal.vue

@@ -1,73 +1,58 @@
 <template>
-  <UModal
-    v-model="isOpen"
-    :ui="{ width: 'sm:max-w-md' }"
-    class="login-modal"
-    :style="{
-      position: 'fixed',
-      top: '0',
-      left: '0',
-      right: '0',
-      bottom: '0',
-      zIndex: 9999,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      backgroundColor: 'rgba(0, 0, 0, 0.5)',
-      backdropFilter: 'blur(4px)'
-    }"
-  >
-    <UCard>
-      <template #header>
-        <h3 class="text-lg font-semibold text-gray-900">Admin Login</h3>
-      </template>
+  <Teleport to="body">
+    <UModal v-model="isOpen" :ui="{ width: 'sm:max-w-md' }" class="login-modal">
+      <UCard>
+        <template #header>
+          <h3 class="text-lg font-semibold text-gray-900">Admin Login</h3>
+        </template>
 
-      <form @submit.prevent="handleSubmit" class="space-y-4">
-        <UFormGroup label="Username" name="username">
-          <UInput
-            v-model="form.username"
-            placeholder="Enter username"
-            :disabled="loading"
-            class="w-full"
-          />
-        </UFormGroup>
+        <form @submit.prevent="handleSubmit" class="space-y-4">
+          <UFormGroup label="Username" name="username">
+            <UInput
+              v-model="form.username"
+              placeholder="Enter username"
+              :disabled="loading"
+              class="w-full"
+            />
+          </UFormGroup>
 
-        <UFormGroup label="Password" name="password">
-          <UInput
-            v-model="form.password"
-            type="password"
-            placeholder="Enter password"
-            :disabled="loading"
-            class="w-full"
-          />
-        </UFormGroup>
+          <UFormGroup label="Password" name="password">
+            <UInput
+              v-model="form.password"
+              type="password"
+              placeholder="Enter password"
+              :disabled="loading"
+              class="w-full"
+            />
+          </UFormGroup>
 
-        <div v-if="error" class="text-red-600 text-sm p-3 bg-red-50 border border-red-200 rounded-md">
-          {{ error }}
-        </div>
+          <div v-if="error" class="text-red-600 text-sm p-3 bg-red-50 border border-red-200 rounded-md">
+            {{ error }}
+          </div>
 
-        <div class="flex justify-end space-x-3 pt-4">
-          <UButton
-            type="button"
-            variant="outline"
-            color="gray"
-            :disabled="loading"
-            @click="close"
-          >
-            Cancel
-          </UButton>
-          <UButton
-            type="submit"
-            variant="solid"
-            color="primary"
-            :loading="loading"
-          >
-            Login
-          </UButton>
-        </div>
-      </form>
-    </UCard>
-  </UModal>
+          <div class="flex justify-end space-x-3 pt-4">
+            <UButton
+              type="button"
+              variant="outline"
+              color="gray"
+              :disabled="loading"
+              @click="close"
+            >
+              Cancel
+            </UButton>
+            <UButton
+              type="submit"
+              variant="solid"
+              color="primary"
+              :loading="loading"
+            >
+              Login
+            </UButton>
+          </div>
+        </form>
+      </UCard>
+    </UModal>
+  </Teleport>
 </template>
 
 <script setup lang="ts">

server/api/auth/login.post.ts

@@ -22,7 +22,7 @@ export default defineEventHandler(async (event) => {
   const token = await createJWT(user)
 
   setCookie(event, 'auth_token', token, {
-    httpOnly: true,
+    httpOnly: false,
     secure: process.env.NODE_ENV === 'production',
     sameSite: 'strict',
     maxAge: 7 * 24 * 60 * 60 // 7 days