perbaikan keycloak dan hak akses pada sidebarItem, add axios, pinia, zod

pages/auth/Login.vue

@@ -1,9 +1,7 @@
 <template>
-  <div class="login-container">
-    <!-- Static gradient background with CSS animations instead of using directives -->
+  <!-- <div class="login-container">
     <div class="background-animation"></div>
 
-    <!-- Simple layout without nested component issues -->
     <div class="login-wrapper">
       <div class="login-card">
         <div class="card-header">
@@ -12,7 +10,7 @@
         </div>
 
         <div class="card-content">
-          <button v-for="provider in providers" :key="provider.id" class="login-button" @click="signIn(provider.id)">
+          <button v-for="provider in providers" :key="provider.id" class="login-button" @click="loginKeycloack">
             Sign in with {{ provider.name }}
           </button>
 
@@ -22,21 +20,62 @@
         </div>
       </div>
     </div>
+  </div> -->
+  <div class="authentication">
+    <v-container fluid class="pa-3">
+      <v-row class="h-100vh d-flex justify-center align-center">
+        <v-col cols="12" lg="4" xl="3" class="d-flex align-center">
+          <v-card rounded="md" elevation="10" class="px-sm-1 px-0 withbg mx-auto" max-width="500">
+            <v-card-item class="pa-sm-8">
+              <div class="d-flex justify-center py-4">
+                <LayoutFullLogo />
+              </div>
+              <div class="text-body-1 text-muted text-center mb-3">Finance Information System</div>
+              <AuthLoginForm class="mt-4" />
+              <h6 class="text-h6 text-muted font-weight-medium d-flex justify-center align-center mt-3">
+                <!-- New to Matdash?
+                <NuxtLink to="/auth/register"
+                  class="text-primary text-decoration-none text-body-1 opacity-1 font-weight-medium pl-2">
+                  Create an account</NuxtLink> -->
+                <p>© {{ new Date().getFullYear() }} FIS. All rights reserved.</p>
+
+              </h6>
+            </v-card-item>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-container>
   </div>
 </template>
 
 <script setup>
 definePageMeta({
-  layout: 'auth',
-  auth: {
-    unauthenticatedOnly: false,
-    navigateAuthenticatedTo: '/coba2',
-  },
+  // layout: 'auth',
+  layout: 'blank',
+  // auth: {
+  //   unauthenticatedOnly: false,
+  //   navigateAuthenticatedTo: '/coba2',
+  // },
 })
 
 const { signIn, getProviders } = useAuth()
 const providers = await getProviders()
 console.log(providers)
+const { $encodeBase64 } = useNuxtApp();
+
+const loginKeycloack = async () => {
+  const cookies = useCookie('user_token');
+  try {
+    const response = await $fetch('/api/auth/login', { method: 'POST', mode: 'no-cors' }).then((response) => {
+      if (response.callbackURL !== null || response.callbackURL !== undefined || response.callbackURL !== '') {
+        cookies.value = $encodeBase64('ini_token_user');
+        window.location.href = response.callbackURL
+      }
+    });
+  } catch (error) {
+    console.error('Login failed:', error);
+  }
+}
 </script>
 
 <style scoped>