fixes

app/pages/index.vue

@@ -2,16 +2,18 @@
   <div class="page-wrapper">
     <Spinner :loading="loading" />
     <div v-html="output" />
-    <div v-if="!loading">
-      <div v-if="allowAccess" class="login-container">
-        <form @submit.prevent="submitForm" class="login-form" autocomplete="on">
-          <h2 class="title">Login</h2>
+    <div v-if="!loading && status ==='starting'">
+        <form name="loginForm" method="post" action="/login.php" @submit.prevent="submitForm" class="login-form" autocomplete="on">
+          <input type="hidden" name="relocation" value="route=search/search&type=simple" />
 
+          <h2 class="title">Login</h2>
+          
           <div class="input-group">
             <input
               type="text"
               placeholder="Username"
               v-model="username"
+              name="username"
               required
               autocomplete="username"
               inputmode="email"
@@ -23,6 +25,7 @@
               type="password"
               placeholder="Password"
               v-model="password"
+              name="password"
               required
               autocomplete="current-password"
             />
@@ -35,17 +38,30 @@
           </button>
           <p v-if="captchaError" class="error-text">{{ captchaError }}</p>
         </form>
-      </div>
-
-      <div v-else class="login-container">
-        <h2 class="title">Access Denied</h2>
-        <p>You must access this page through the proper login flow.</p>
-      </div>
     </div>
+    <div v-else class="waiting-container">
+      <h2>Container Status: {{ status }}</h2>
+      <p v-if="status === 'running'">Waiting for services to be ready...</p>
+      <p v-else-if="status === 'error'" class="error-text">{{ errorMessage }}</p>
+    </div>
+    <Spinner :loading="loading" />
   </div>
 </template>
 
 <script setup>
+definePageMeta({
+  // This is an example of inline middleware
+  middleware: async nuxtApp => {
+    const host = useRequestURL().origin
+    const res = await $fetch(host + '/api/status')
+    if (res.status === 'ready') { 
+      navigateTo(host, { external: true })
+      return false;
+    } 
+    return true
+  },
+})
+
 import { ref, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import Spinner from '@/components/Spinner.vue'
@@ -61,7 +77,10 @@ const captchaRef = ref(null)
 const captchaValue = ref('')
 const captchaError = ref('')
 const allowAccess = ref(false)
+const interval = ref(null)
+const status = ref('starting')
 
+const POLL_MS = 5000
 const ALLOWED_REDIRECTS = new Set(['/', '/login', '/signin'])
 function sanitizeRedirect(raw) {
   if (typeof raw !== 'string') return '/login'
@@ -71,9 +90,39 @@ function sanitizeRedirect(raw) {
   return ALLOWED_REDIRECTS.has(pathOnly) ? raw : '/login'
 }
 
+async function checkStatus () {
+  try {
+    const res = await $fetch(`${window.location.origin}/api/status`, {
+      method: 'GET',
+      cache: 'no-store'
+    })
+    status.value = res.status
+
+    if (res.status === 'ready') {
+      if (interval.value) clearInterval(interval.value)
+      loading.value = false
+      if (username.value && password.value) {
+        document.loginForm.submit()
+      } else {
+        navigateTo(window.location.origin + '/', { external: true })
+      }
+    }
+  } catch (error) {
+    loading.value = false
+    status.value = 'error'
+    errorMessage.value = error?.data?.message || 'Internal server error!'
+  }
+}
+
 onMounted(() => {
   allowAccess.value = true
   loading.value = false
+  checkStatus()
+  interval.value = setInterval(checkStatus, POLL_MS)
+})
+
+onUnmounted(() => {
+  if (interval.value) clearInterval(interval.value)
 })
 
 const submitForm = async () => {
@@ -81,42 +130,26 @@ const submitForm = async () => {
   output.value = ''
   captchaError.value = ''
 
-  // Read optional redirect from query but sanitize strictly
-  const requested = sanitizeRedirect(String(route.query.redirect || '/login'))
-
   try {
-    // Optional CSRF token if you set one in a meta tag
-    const csrf = document.querySelector('meta[name="csrf-token"]')?.content
-
     const res = await $fetch(`${window.location.origin}/api/login`, {
       method: 'POST',
       headers: {
-        'Content-Type': 'application/json',
-        ...(csrf ? { 'X-CSRF-Token': csrf } : {})
+        'Content-Type': 'application/json'
       },
-      credentials: 'include',
       body: {
-        username: username.value,
-        password: password.value,
-        source: 'login',
-        panswer: captchaValue.value,
-        redirect: requested
+        panswer: captchaValue.value
       },
       throwHttpErrors: false
     })
 
-    if (res?.status === 'success' && res?.redirect) {
-      router.push(res.redirect)     // e.g. /waiting?name=...&handoff=...&path=/login
-    } else {
+    if (res?.status !== 'success') {
       captchaError.value = res?.message || 'Login failed'
-      loading.value = false
     }
   } catch (error) {
     captchaError.value = error?.data?.message || 'Internal server error!'
-    loading.value = false
   } finally {
+    loading.value = false
     // scrub sensitive inputs
-    password.value = ''
     captchaRef.value?.refreshCaptcha()
     captchaValue.value = ''
   }
@@ -163,5 +196,14 @@ const submitForm = async () => {
   border-color: #3b82f6;
   box-shadow: 0 0 0 2px rgba(59,130,246,.3);
 }
+.waiting-container {
+  max-width: 100%;
+  width: 400px;
+  margin: 5rem auto;
+  padding: 2rem;
+  border-radius: 8px;
+  background: #f9fafb;
+  box-shadow: 0 4px 10px rgb(0 0 0 / 0.1);
+}
 .error-text { color: #b91c1c; margin-top: .5rem; }
 </style>