sidebarItem belum fix

pages/auth/Login.vue

@@ -1,31 +1,165 @@
-<script setup lang="ts">
-/*-For Set Blank Layout-*/
-definePageMeta({
-  layout: "blank",
-});
-</script>
 <template>
-    <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">Your Social Campaigns</div>
-                            <AuthLoginForm />
-                            <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>
-                            </h6>
-                        </v-card-item>
-                    </v-card>
-                </v-col>
-            </v-row>
-        </v-container>
+  <div class="login-container">
+    <!-- Static gradient background with CSS animations instead of using directives -->
+    <div class="background-animation"></div>
+
+    <!-- Simple layout without nested component issues -->
+    <div class="login-wrapper">
+      <div class="login-card">
+        <div class="card-header">
+          <h2 class="title">SIMRS</h2>
+          <p class="subtitle">Sistem Informasi Manajemen Rumah Sakit</p>
+        </div>
+
+        <div class="card-content">
+          <button v-for="provider in providers" :key="provider.id" class="login-button" @click="signIn(provider.id)">
+            Sign in with {{ provider.name }}
+          </button>
+
+          <div class="footer">
+            <p>© {{ new Date().getFullYear() }} SIMRS. All rights reserved.</p>
+          </div>
+        </div>
+      </div>
     </div>
+  </div>
 </template>
+
+<script setup>
+definePageMeta({
+  layout: 'auth',
+  auth: {
+    unauthenticatedOnly: false,
+    navigateAuthenticatedTo: '/coba2',
+  },
+})
+
+const { signIn, getProviders } = useAuth()
+const providers = await getProviders()
+console.log(providers)
+</script>
+
+<style scoped>
+.login-container {
+  position: relative;
+  min-height: 100vh;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(135deg, #0072ff 0%, #00c6ff 100%);
+}
+
+/* Background animation using CSS only - no SVG or complex animations */
+.background-animation {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg,
+      rgba(0, 114, 255, 0.8) 0%,
+      rgba(0, 198, 255, 0.8) 100%);
+  opacity: 0.7;
+}
+
+.background-animation::before,
+.background-animation::after {
+  content: '';
+  position: absolute;
+  left: -50%;
+  top: -50%;
+  width: 200%;
+  height: 200%;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 40%;
+  z-index: 1;
+  animation: rotate 25s linear infinite;
+}
+
+.background-animation::after {
+  border-radius: 35%;
+  background-color: rgba(255, 255, 255, 0.15);
+  animation: rotate 30s linear infinite;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.login-wrapper {
+  position: relative;
+  z-index: 10;
+  width: 100%;
+  max-width: 440px;
+  padding: 20px;
+}
+
+.login-card {
+  background-color: rgba(255, 255, 255, 0.9);
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease;
+}
+
+.login-card:hover {
+  transform: translateY(-5px);
+}
+
+.card-header {
+  padding: 20px;
+  text-align: center;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.title {
+  margin: 0;
+  color: #0072ff;
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.subtitle {
+  margin: 5px 0 0;
+  color: #555;
+  font-size: 14px;
+}
+
+.card-content {
+  padding: 20px;
+}
+
+.login-button {
+  display: block;
+  width: 100%;
+  padding: 12px 16px;
+  margin-bottom: 16px;
+  background-color: #0072ff;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.login-button:hover {
+  background-color: #005fd6;
+}
+
+.footer {
+  margin-top: 20px;
+  text-align: center;
+  color: #666;
+  font-size: 12px;
+}
+</style>

pages/auth/Loginn.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+/*-For Set Blank Layout-*/
+definePageMeta({
+    layout: "blank",
+    auth: {
+        unauthenticatedOnly: true,
+        navigateAuthenticatedTo: '/homepage',
+    },
+});
+</script>
+<template>
+    <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">Your Social Campaigns</div>
+                            <AuthLoginForm />
+                            <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>
+                            </h6>
+                        </v-card-item>
+                    </v-card>
+                </v-col>
+            </v-row>
+        </v-container>
+    </div>
+</template>

pages/callback.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <p>User Profil: </p>
+    <pre>{{ tokenUser }}</pre>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue';
+
+const tokenUser = useCookie('user_token_profile');
+const runtimeconfig = useRuntimeConfig();
+
+
+const sessionState = ref('');
+const issuer = ref('');
+const code = ref('');
+onMounted(async () => {
+  const url = window.location.href;
+  const urlParams = new URL(url).searchParams;
+
+  // Ambil parameter yang diperlukan
+  sessionState.value = urlParams.get('session_state') || '';
+  issuer.value = urlParams.get('iss') || '';
+  code.value = urlParams.get('code') || '';
+
+  if (code.value) {
+    try {
+      const tokenUrl = `${issuer.value}/protocol/openid-connect/token`;
+      const response = await $fetch(tokenUrl, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded',
+        },
+        body: new URLSearchParams({
+          grant_type: 'authorization_code',
+          client_id: runtimeconfig.public.keycloakClient, // Ganti dengan client ID Anda
+          client_secret: runtimeconfig.public.keycloakSecretKey, // Ganti dengan client secret Anda
+          code: urlParams.get('code'),
+          redirect_uri: `${runtimeconfig.public.keycloakRedirectURI}/callback`, // Ganti dengan redirect URI Anda
+        }),
+      });
+      const accessToken = response.access_token;
+      tokenUser.value = accessToken;
+      // Ambil informasi pengguna
+      const userInfoUrl = `${issuer.value}/protocol/openid-connect/userinfo`;
+      const userInfoResponse = await $fetch(userInfoUrl, {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      });
+      tokenUser.value = JSON.stringify(userInfoResponse);
+    } catch (error) {
+      console.error('Error during token exchange or user info fetch:', error);
+    }
+  }
+});
+
+</script>
+
+<style></style>

pages/coba2.vue

@@ -3,6 +3,7 @@
     <Vueform ref="data" validate-on="change|step" method="post" :endpoint="onSubmit">
       <FormLibIdentifier />
       <FormLibHumanName />
+      <FormLibHumanName />
       <ButtonElement name="submit" button-label="Simpan" :submits="true" align="center" size="lg" />
     </Vueform>
 

pages/signin.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style>
+
+</style>