feat(FE) : start integrate api

pages/auth/Login.vue

@@ -31,7 +31,36 @@
                     <div class="mb-8 pa-4">
                       <h1 class="text-h3 font-weight-bold mb-6">Login</h1>
 
-                      <v-btn cli color="default" size="x-large" block class="text-none mb-4 text-primary" elevation="0" to="/">
+                      <!-- Error Message -->
+                      <v-alert
+                        v-if="errorMessage"
+                        type="error"
+                        closable
+                        class="mb-4"
+                        @click:close="errorMessage = ''"
+                      >
+                        {{ errorMessage }}
+                      </v-alert>
+
+                      <!-- Success Message -->
+                      <v-alert
+                        v-if="successMessage"
+                        type="success"
+                        class="mb-4"
+                      >
+                        {{ successMessage }}
+                      </v-alert>
+
+                      <v-btn 
+                        color="default" 
+                        size="x-large" 
+                        block 
+                        class="text-none mb-4 text-primary" 
+                        elevation="0"
+                        :loading="isLoading"
+                        :disabled="isLoading"
+                        @click="handleLogin"
+                      >
                         <v-icon left class="mr-3">mdi-account-circle</v-icon>
                         Log In with Keycloak
                       </v-btn>
@@ -76,14 +105,69 @@
 </template>
 
 <script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import type { LoginResponse } from '~/types/auth';
+
+const route = useRoute();
+
 const AuthCuroselData = [
   {
     title: 'Sistem Antrean Operasi',
     subtitle: 'Kelola antrean operasi dengan efisien menggunakan sistem antrean.'
   }
 ];
+
+const isLoading = ref(false);
+const errorMessage = ref('');
+const successMessage = ref('');
+
+// Check for error in URL query parameters
+onMounted(() => {
+  const errorParam = route.query.error as string;
+  if (errorParam) {
+    errorMessage.value = decodeURIComponent(errorParam);
+  }
+});
+
+const handleLogin = async (): Promise<void> => {
+  isLoading.value = true;
+  errorMessage.value = '';
+  successMessage.value = '';
+
+  try {
+    console.log('Starting login process...');
+    
+    // Call API route to initiate Keycloak login process
+    const response = await $fetch<LoginResponse>('/api/auth/keycloak-login', {
+      method: 'POST'
+    });
+
+    if (response?.success && response?.data?.authUrl) {
+      console.log('Redirecting to Keycloak...');
+      successMessage.value = 'Redirecting to Keycloak...';
+      
+      // Redirect the user to the Keycloak authorization URL
+      setTimeout(() => {
+        window.location.href = response.data!.authUrl;
+      }, 500);
+    } else {
+      throw new Error('Failed to get authorization URL');
+    }
+  } catch (error: any) {
+    console.error('Login error:', error);
+    // Display the error message
+    errorMessage.value = `Login failed: ${error.message || 'Please try again.'}`;
+  } finally {
+    // Only set isLoading back to false if no redirect is happening
+    if (!successMessage.value.includes('Redirecting')) {
+      isLoading.value = false;
+    }
+  }
+};
+
 /*-For Set Blank Layout-*/
 definePageMeta({
-  layout: "blank"
+  layout: "blank",
+  middleware: "guest"
 });
 </script>