Refactor logic

frontend/components/Captcha.vue

@@ -48,6 +48,10 @@ const emit = defineEmits(['update:captcha']);
 watch(captchaInput, (newVal) => {
   emit('update:captcha', newVal)
 });
+
+defineExpose({
+  refreshCaptcha
+});
 </script>
 
 <style scoped>

frontend/pages/index.vue

@@ -3,23 +3,42 @@
     <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 v-if="!loading">
+      <div v-if="allowAccess" class="login-container">
+        <form @submit.prevent="submitForm" class="login-form">
+          <h2 class="title">Login</h2>
+          <div class="input-group">
+            <input
+              type="text"
+              placeholder="Username"
+              v-model="username"
+              required
+            />
+          </div>
+          <div class="input-group">
+            <input
+              type="password"
+              placeholder="Password"
+              v-model="password"
+              required
+            />
+          </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>
+      </div>
     </div>
   </div>
 </template>
@@ -33,7 +52,10 @@ import Captcha from '@/components/Captcha.vue';
 const output = ref('');
 const router = useRouter();
 const route = useRoute();
-const loading = ref(false);
+const loading = ref(true);
+const username = ref('');
+const password = ref('');
+const captchaRef = ref(null);
 const captchaValue = ref('');
 const captchaError = ref('');
 const redirectTo = ref('/');
@@ -49,6 +71,8 @@ onMounted(() => {
   if (authParam === 'ok') {
     allowAccess.value = true;
   }
+
+  loading.value = false;
 });
 
 const submitForm = async () => {
@@ -63,6 +87,8 @@ const submitForm = async () => {
         'Content-Type': 'application/json',
       },
       body: {
+        username: username.value,
+        password: password.value,
         source: 'login',
         panswer: captchaValue.value,
         redirect: redirectTo.value,
@@ -71,23 +97,24 @@ const submitForm = async () => {
       throwHttpErrors: false, // important: do NOT throw on 401/4xx
     });
 
-    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 {
-      captchaError.value = res.message || 'Login failed. Please try again.';
-    }
+    captchaError.value = '';
+    const encodedRedirect = new URL(redirectTo.value, window.location.origin);
+    encodedRedirect.searchParams.set('username', username.value);
+    encodedRedirect.searchParams.set('password', password.value);
+    window.location.href = encodedRedirect.toString();
   } catch (error) {
-    // This should rarely happen now because throwHttpErrors is false
-    captchaError.value = error.message || 'Network error.';
+    if (error.statusCode === 400) {
+      captchaError.value = error?.data?.message || 'Invalid CAPTCHA';
+      loading.value = false;
+    } else {
+      captchaError.value = error?.data?.message || 'Internal server error!';
+      // window.location.reload();
+      loading.value = false;
+    }
+    
   } finally {
-    loading.value = false;
+    captchaRef.value?.refreshCaptcha();
+    captchaValue.value = '';
   }
 };
 </script>
@@ -154,4 +181,16 @@ const submitForm = async () => {
   margin-bottom: 1rem;
   text-align: center;
 }
+.input-group input {
+  padding: 0.8rem;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  font-size: 1rem;
+}
+.input-group input:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
+}
+
 </style>