fix: update pass credentials to container

app/pages/index.vue

@@ -2,39 +2,41 @@
   <div class="page-wrapper">
     <Spinner :loading="loading" />
     <div v-html="output" />
-    <!-- 👇 Only show form if access is allowed -->
-     <div v-if="!loading">
+    <div v-if="!loading">
       <div v-if="allowAccess" class="login-container">
-        <form @submit.prevent="submitForm" class="login-form">
+        <form @submit.prevent="submitForm" class="login-form" autocomplete="on">
           <h2 class="title">Login</h2>
+
           <div class="input-group">
             <input
               type="text"
               placeholder="Username"
               v-model="username"
               required
+              autocomplete="username"
+              inputmode="email"
             />
           </div>
+
           <div class="input-group">
             <input
               type="password"
               placeholder="Password"
               v-model="password"
               required
+              autocomplete="current-password"
             />
           </div>
 
-          <!-- Include Captcha -->
           <Captcha ref="captchaRef" v-model:captcha="captchaValue" />
           <button type="submit" :disabled="loading || !captchaValue" class="btn">
             <span v-if="!loading">Login</span>
             <span v-else>Loading...</span>
           </button>
-          <br/>
           <p v-if="captchaError" class="error-text">{{ captchaError }}</p>
         </form>
       </div>
-      <!-- 👇 Show this if the user did not come from an approved source -->
+
       <div v-else class="login-container">
         <h2 class="title">Access Denied</h2>
         <p>You must access this page through the proper login flow.</p>
@@ -44,83 +46,83 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
-import { useRouter, useRoute } from 'vue-router';
-import Spinner from '@/components/Spinner.vue';
-import Captcha from '@/components/Captcha.vue';
+import { ref, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import Spinner from '@/components/Spinner.vue'
+import Captcha from '@/components/Captcha.vue'
+
+const output = ref('')
+const router = useRouter()
+const route = useRoute()
+const loading = ref(true)
+const username = ref('')
+const password = ref('')
+const captchaRef = ref(null)
+const captchaValue = ref('')
+const captchaError = ref('')
+const allowAccess = ref(false)
+
+const ALLOWED_REDIRECTS = new Set(['/', '/login', '/signin'])
+function sanitizeRedirect(raw) {
+  if (typeof raw !== 'string') return '/login'
+  if (raw.startsWith('http://') || raw.startsWith('https://')) return '/login'
+  if (!raw.startsWith('/')) return '/login'
+  const pathOnly = raw.split('?')[0]
+  return ALLOWED_REDIRECTS.has(pathOnly) ? raw : '/login'
+}
 
-const output = ref('');
-const router = useRouter();
-const route = useRoute();
-const loading = ref(true);
-const username = ref('');
-const password = ref('');
-const captchaRef = ref(null);
-const captchaValue = ref('');
-const captchaError = ref('');
-const redirectTo = ref('/');
-const allowAccess = ref(false) // 🔐 This controls what to show
-// 🟡 Grab redirect param on load
 onMounted(() => {
-  const redirectParam = route.query.redirect;
-  const authParam = route.query.auth;
-  if (redirectParam && typeof redirectParam === 'string') {
-    redirectTo.value = decodeURIComponent(redirectParam);
-  }
-  // ✅ More reliable than document.referrer
-  if (authParam === 'ok') {
-    allowAccess.value = true;
-  }
-
-  loading.value = false;
-});
+  allowAccess.value = true
+  loading.value = false
+})
 
 const submitForm = async () => {
-  loading.value = true;
-  output.value = '';
-  const encodedRedirect = new URL(redirectTo.value, window.location.origin);
-  encodedRedirect.searchParams.set('username', username.value);
-  encodedRedirect.searchParams.set('password', password.value);
+  loading.value = true
+  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 } : {})
       },
+      credentials: 'include',
       body: {
         username: username.value,
         password: password.value,
         source: 'login',
         panswer: captchaValue.value,
-        redirect: encodedRedirect.toString()
+        redirect: requested
       },
-      credentials: 'include',
-      throwHttpErrors: false, // important: do NOT throw on 401/4xx
-    });
+      throwHttpErrors: false
+    })
 
-    captchaError.value = '';
-    
-    router.push(res.redirect);
-    // window.location.href = encodedRedirect.toString();
-  } catch (error) {
-    if (error.statusCode === 400) {
-      captchaError.value = error?.data?.message || 'Invalid CAPTCHA';
-      loading.value = false;
+    if (res?.status === 'success' && res?.redirect) {
+      router.push(res.redirect)     // e.g. /waiting?name=...&handoff=...&path=/login
     } else {
-      captchaError.value = error?.data?.message || 'Internal server error!';
-      // window.location.reload();
-      loading.value = false;
+      captchaError.value = res?.message || 'Login failed'
+      loading.value = false
     }
-    
+  } catch (error) {
+    captchaError.value = error?.data?.message || 'Internal server error!'
+    loading.value = false
   } finally {
-    captchaRef.value?.refreshCaptcha();
-    captchaValue.value = '';
+    // scrub sensitive inputs
+    password.value = ''
+    captchaRef.value?.refreshCaptcha()
+    captchaValue.value = ''
   }
-};
+}
 </script>
 
-
 <style scoped>
 .login-container {
   max-width: 100%;
@@ -141,22 +143,15 @@ const submitForm = async () => {
   padding: 0.8rem;
   font-weight: 600;
   font-size: 1.1rem;
-  background-color: #3b82f6; /* blue-500 */
+  background-color: #3b82f6;
   color: white;
   border: none;
   border-radius: 6px;
   cursor: pointer;
   transition: background-color 0.3s;
 }
-
-.btn:hover:not(:disabled) {
-  background-color: #2563eb; /* blue-600 */
-}
-
-.btn:disabled {
-  background-color: #93c5fd; /* blue-300 */
-  cursor: not-allowed;
-}
+.btn:hover:not(:disabled) { background-color: #2563eb; }
+.btn:disabled { background-color: #93c5fd; cursor: not-allowed; }
 .input-group input {
   padding: 0.8rem;
   border: 1px solid #ccc;
@@ -166,7 +161,7 @@ const submitForm = async () => {
 .input-group input:focus {
   outline: none;
   border-color: #3b82f6;
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
+  box-shadow: 0 0 0 2px rgba(59,130,246,.3);
 }
-
-</style>
+.error-text { color: #b91c1c; margin-top: .5rem; }
+</style>