update logic and refactor code

frontend/pages/index.vue

@@ -2,44 +2,97 @@
   <div class="page-wrapper">
     <Spinner :loading="loading" />
     <div v-html="output" />
+    <!-- 👇 Only show form if access is allowed -->
+    <div v-if="allowAccess" class="login-container">
+      <form @submit.prevent="submitForm" class="login-form">
+        <h2 class="title">Login</h2>
+         <!-- Include Captcha -->
+        <Captcha 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>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { ref, onMounted } from 'vue';
-import { useRouter } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
 import Spinner from '@/components/Spinner.vue';
+import Captcha from '@/components/Captcha.vue';
 
-const router = useRouter();
-
-const loading = ref(true);
 const output = ref('');
+const router = useRouter();
+const route = useRoute();
+const loading = ref(false);
+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;
+  }
+});
+
+const submitForm = async () => {
+  loading.value = true;
+  output.value = '';
+  const config = useRuntimeConfig();
 
-onMounted(async () => {
   try {
-    const config = useRuntimeConfig();
-    // fetch without forcing responseType to text, so it defaults to JSON if possible
-    const res = await $fetch(`${config.public.apiUrl}/proxy`);
+    const res = await $fetch(`${window.location.origin}/api/login`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: {
+        source: 'login',
+        panswer: captchaValue.value,
+        redirect: redirectTo.value,
+      },
+      credentials: 'include',
+      throwHttpErrors: false, // important: do NOT throw on 401/4xx
+    });
 
-    if (typeof res === 'object') {
-      if(res?.status === "not-found"){
-        router.push('/login');
-      }else{
-        // pretty print JSON response
-        output.value = `<pre>${JSON.stringify(res, null, 2)}</pre>`;
+    if (res.status === 'success') {
+      captchaError.value = '';
+      if (redirectTo.value.startsWith('http://') || redirectTo.value.startsWith('https://')) {
+        window.location.href = redirectTo.value;
+      } else {
+        router.push(redirectTo.value);
       }
+    } else if (res.status === 'error' && res.message === 'Invalid CAPTCHA') {
+      captchaError.value = '❌ Invalid CAPTCHA. Please try again.';
     } else {
-      // treat as plain text or HTML
-      output.value = res;
+      captchaError.value = res.message || 'Login failed. Please try again.';
     }
   } catch (error) {
-    output.value = `<p style="color:red;">Container access failed.</p>`;
+    // This should rarely happen now because throwHttpErrors is false
+    captchaError.value = error.message || 'Network error.';
   } finally {
     loading.value = false;
   }
-});
+};
 </script>
 
+
 <style scoped>
 .page-wrapper {
   width: 100%;
@@ -48,8 +101,57 @@ onMounted(async () => {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 0px;
-  margin: 0px;
+  padding: 0;
+  margin: 0;
   text-align: center;
 }
-</style>
+.login-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);
+}
+
+.title {
+  text-align: center;
+  margin-bottom: 1.5rem;
+  font-weight: 700;
+  font-size: 1.8rem;
+  color: #222;
+}
+.input-group {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 1.2rem;
+}
+.btn {
+  width: 100%;
+  padding: 0.8rem;
+  font-weight: 600;
+  font-size: 1.1rem;
+  background-color: #3b82f6; /* blue-500 */
+  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;
+}
+.error-text {
+  color: red;
+  font-size: 0.95rem;
+  margin-bottom: 1rem;
+  text-align: center;
+}
+</style>