From 5a5e37c12d3d0d871271b28e7b4c8bb79365186b Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Wed, 28 Aug 2024 15:29:09 +0700
Subject: [PATCH] remove keycloak use cookie auth

---
 src/main.ts                                   |  30 --
 src/modules/00_support/store/Main.ts          |  14 +-
 .../03_recruiting/components/Information.vue  |  13 +-
 .../04_registry/components/Profile.vue        |  13 +-
 .../05_placement/components/Other/Detail.vue  |   8 +-
 .../components/PersonalList/Detail.vue        |   7 +-
 .../components/PersonalList/Table.vue         |   7 +-
 .../components/Relocation/RelocationbyId.vue  |   1 -
 .../components/Transfer/transferRegistry.vue  |   7 +-
 .../Discharged/dischargedRegistry.vue         |   7 +-
 .../components/DismissOrder/outRegistry.vue   |  13 +-
 .../components/ExitInterview/EditQuestion.vue |   1 -
 .../components/ExitInterview/exitRegistry.vue |  20 +-
 .../Expulsion/expulsionRegistry.vue           |   8 +-
 .../components/resign/ResignByid.vue          |  11 +-
 .../09_leave/components/2_Leave/Calendar.vue  |  20 +-
 .../components/7_ListSuspend/DetailPage.vue   |  26 +-
 src/modules/14_KPI/views/mainDetail.vue       | 451 +++++++++---------
 src/plugins/auth.ts                           |  71 +++
 src/plugins/axios.ts                          |  33 +-
 src/plugins/http.ts                           |   8 +-
 src/router/index.ts                           |  13 +-
 src/stores/mixin.ts                           |  10 +-
 src/stores/roleUser.ts                        |  63 ++-
 src/views/MainLayout.vue                      |  22 +-
 src/views/auth.vue                            |  11 +-
 src/views/login.vue                           |  53 +-
 27 files changed, 501 insertions(+), 440 deletions(-)
 create mode 100644 src/plugins/auth.ts

diff --git a/src/main.ts b/src/main.ts
index df8024dbe..e179635f1 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,7 +3,6 @@ import App from "./App.vue";
 import router from "./router";
 import { Dialog, Notify, Quasar, Loading } from "quasar";
 import "./quasar-user-options";
-import keycloak, { getToken } from "@/plugins/keycloak";
 
 import qDraggableTable from "quasar-ui-q-draggable-table";
 import "quasar-ui-q-draggable-table/dist/index.css";
@@ -14,15 +13,9 @@ import th from "quasar/lang/th";
 import "@vuepic/vue-datepicker/dist/main.css";
 import http from "./plugins/http";
 import { createPinia } from "pinia";
-// organization
-// position
-// positionEmployee
-//calendar
-// insignia
 
 // import './assets/main.css'
 
-// Import GlobalFilters
 import filters from "./plugins/filters";
 
 const app = createApp(App);
@@ -81,27 +74,4 @@ app.component(
 );
 
 app.config.globalProperties.$http = http;
-
-// authen with keycloak client
-const auth = await getToken();
-
-if (auth.token && auth.refresh_token) {
-  keycloak.init({
-    checkLoginIframe: false,
-    token: auth.token,
-    refreshToken: auth.refresh_token,
-  });
-  // .then((authenticated) => {
-  //   console.log("authenticated", authenticated);
-  //   if (!authenticated) {
-  //     window.location.reload();
-  //   } else {
-  //     console.log("Authenticated");
-  //   }
-  // })
-  // .catch((err) => {
-  //   console.error("Keycloak initialization failed:", err);
-  // });
-}
-
 app.mount("#app");
diff --git a/src/modules/00_support/store/Main.ts b/src/modules/00_support/store/Main.ts
index 3d612a96c..0a7d01cb9 100644
--- a/src/modules/00_support/store/Main.ts
+++ b/src/modules/00_support/store/Main.ts
@@ -12,13 +12,13 @@ import type {
   SupportMessageStatus,
   SupportIssueCategoryResponse,
 } from "@/modules/00_support/interface/index/Main";
-import keycloak from "@/plugins/keycloak";
 import { useQuasar } from "quasar";
+import { getToken, tokenParsed } from "@/plugins/auth";
 
-export const useSupportStore = defineStore("supportServiceStore", () => {
+export const useSupportStore = defineStore("supportServiceStore", async () => {
   const { showLoader, hideLoader, messageError } = useCounterMixin();
   const $q = useQuasar();
-  const userId = ref<string | undefined>(keycloak.subject);
+  const userId = ref<string | undefined>("");
   const issue = ref<SupportIssueResponse>();
   const message = ref<SupportMessageResponse>();
   const messageStatus = ref<SupportMessageStatus>();
@@ -44,8 +44,9 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
     }, 150);
   }
 
+  const token = await getToken();
   const socket = io(config.API.supportSocket, {
-    auth: { token: keycloak.token },
+    auth: { token: token },
     autoConnect: false,
     path: "/api/v1/support/socket/",
   });
@@ -54,7 +55,10 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
     userStatus.value = data;
   });
 
-  socket.on("online", (r) => {
+  socket.on("online", async (r) => {
+    const user = await tokenParsed();
+    userId.value = user.subject;
+
     userStatus.value.push({
       socketId: r.socketId,
       userId: r.userId,
diff --git a/src/modules/03_recruiting/components/Information.vue b/src/modules/03_recruiting/components/Information.vue
index ab19830b7..34a57b636 100644
--- a/src/modules/03_recruiting/components/Information.vue
+++ b/src/modules/03_recruiting/components/Information.vue
@@ -397,6 +397,7 @@
     </div> -->
   </q-form>
 </template>
+
 <script setup lang="ts">
 import { ref, onMounted, watch } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
@@ -412,8 +413,8 @@ import {
   changeData,
 } from "@/modules/03_recruiting/interface/index/Main";
 import HeaderTop from "@/modules/03_recruiting/components/top.vue";
+import { tokenParsed } from "@/plugins/auth";
 import { useRoute } from "vue-router";
-import keycloak from "@/plugins/keycloak";
 import { useQuasar } from "quasar";
 
 const props = defineProps({
@@ -499,12 +500,10 @@ const fetchData = async () => {
       defaultInformation.value.knowledge = data.knowledge;
     })
     .catch(() => {
-      defaultInformation.value.email =
-        keycloak.tokenParsed == null ? "" : keycloak.tokenParsed.email;
-      defaultInformation.value.firstname =
-        keycloak.tokenParsed == null ? "" : keycloak.tokenParsed.given_name;
-      defaultInformation.value.lastname =
-        keycloak.tokenParsed == null ? "" : keycloak.tokenParsed.family_name;
+      const user = await tokenParsed();
+      defaultInformation.value.email = user ? user.email : "";
+      defaultInformation.value.firstname = user ? user.given_name : "";
+      defaultInformation.value.lastname = user ? user.family_name : "";
     })
     .finally(() => {
       hideLoader();
diff --git a/src/modules/04_registry/components/Profile.vue b/src/modules/04_registry/components/Profile.vue
index 9b84e9244..97277c085 100644
--- a/src/modules/04_registry/components/Profile.vue
+++ b/src/modules/04_registry/components/Profile.vue
@@ -833,7 +833,7 @@ import type { DataOption } from "@/modules/04_registry/interface/index/Main";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useProfileDataStore } from "@/modules/04_registry/store";
-import keycloak from "@/plugins/keycloak";
+import { tokenParsed } from "@/plugins/auth";
 
 const $q = useQuasar();
 const store = useDataStore();
@@ -996,13 +996,10 @@ function onClickUnlock() {
   );
 }
 onMounted(async () => {
-  if (keycloak.tokenParsed != null) {
-    roleKeyregistry.value = await keycloak.tokenParsed.role.includes(
-      "keyregistry"
-    );
-    roleRegistryverify.value = await keycloak.tokenParsed.role.includes(
-      "registryverify"
-    );
+  const user = await tokenParsed();
+  if (user) {
+    roleKeyregistry.value = await user.role.includes("keyregistry");
+    roleRegistryverify.value = await user.role.includes("registryverify");
   }
 
   await changeTab("information");
diff --git a/src/modules/05_placement/components/Other/Detail.vue b/src/modules/05_placement/components/Other/Detail.vue
index 332bdd189..b93904e95 100644
--- a/src/modules/05_placement/components/Other/Detail.vue
+++ b/src/modules/05_placement/components/Other/Detail.vue
@@ -5,8 +5,7 @@ import { checkPermission } from "@/utils/permissions";
 import { useRoute, useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import keycloak from "@/plugins/keycloak";
-
+import { tokenParsed } from "@/plugins/auth";
 /**
  * impotyType
  */
@@ -143,8 +142,9 @@ const getClass = (val: boolean) => {
 };
 
 onMounted(async () => {
-  if (keycloak.tokenParsed != null) {
-    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+  const user = await tokenParsed();
+  if (user) {
+    roleAdmin.value = await user.role.includes("placement1");
   }
   fetchData();
 });
diff --git a/src/modules/05_placement/components/PersonalList/Detail.vue b/src/modules/05_placement/components/PersonalList/Detail.vue
index 932e0c69b..79b6e04f0 100644
--- a/src/modules/05_placement/components/PersonalList/Detail.vue
+++ b/src/modules/05_placement/components/PersonalList/Detail.vue
@@ -3,8 +3,8 @@ import { onMounted, ref } from "vue";
 import { defineAsyncComponent } from "@vue/runtime-core";
 import { useRouter, useRoute } from "vue-router";
 import cardTop from "@/modules/05_placement/components/PersonalList/StatCard.vue";
+import { tokenParsed } from "@/plugins/auth";
 
-import keycloak from "@/plugins/keycloak";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
@@ -81,8 +81,9 @@ onMounted(async () => {
     await fetchPlacementData();
   }
 
-  if (keycloak.tokenParsed != null) {
-    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+  const user = await tokenParsed();
+  if (user) {
+    roleAdmin.value = await user.role.includes("placement1");
   }
 
   await getStat();
diff --git a/src/modules/05_placement/components/PersonalList/Table.vue b/src/modules/05_placement/components/PersonalList/Table.vue
index 0243364fe..e9fd76e4c 100644
--- a/src/modules/05_placement/components/PersonalList/Table.vue
+++ b/src/modules/05_placement/components/PersonalList/Table.vue
@@ -18,9 +18,9 @@ import DialogOrgTree from "@/modules/05_placement/components/PersonalList/OrgTre
 import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import keycloak from "@/plugins/keycloak";
 import router from "@/router";
 import avatar from "@/assets/avatar_user.jpg";
+import { tokenParsed } from "@/plugins/auth";
 
 let roleAdmin = ref<boolean>(false);
 
@@ -714,8 +714,9 @@ function onSubmitDate() {
 }
 
 onMounted(async () => {
-  if (keycloak.tokenParsed != null) {
-    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+  const user = await tokenParsed();
+  if (user) {
+    roleAdmin.value = await user.role.includes("placement1");
     if (roleAdmin.value === false) {
       displayAdd.value = false;
       visibleColumns.value = [
diff --git a/src/modules/05_placement/components/Relocation/RelocationbyId.vue b/src/modules/05_placement/components/Relocation/RelocationbyId.vue
index da4c407a4..3bffec327 100644
--- a/src/modules/05_placement/components/Relocation/RelocationbyId.vue
+++ b/src/modules/05_placement/components/Relocation/RelocationbyId.vue
@@ -6,7 +6,6 @@ import { useCounterMixin } from "@/stores/mixin";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
-import keycloak from "@/plugins/keycloak";
 import CurrencyInput from "@/components/CurruncyInput.vue";
 import type { QTableProps, QForm } from "quasar";
 import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
diff --git a/src/modules/05_placement/components/Transfer/transferRegistry.vue b/src/modules/05_placement/components/Transfer/transferRegistry.vue
index c37ab14ed..bfb31fd1b 100644
--- a/src/modules/05_placement/components/Transfer/transferRegistry.vue
+++ b/src/modules/05_placement/components/Transfer/transferRegistry.vue
@@ -8,7 +8,6 @@ import { checkPermission } from "@/utils/permissions";
 // import CurrencyInput from "@/components/CurruncyInput.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import keycloak from "@/plugins/keycloak";
 
 import type { QTableProps, QForm } from "quasar";
 import type { DataProfile } from "@/modules/05_placement/interface/index/Main";
@@ -19,6 +18,7 @@ import type {
 } from "@/modules/05_placement/interface/response/Transfer";
 import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
 import CardProfile from "@/components/CardProfile.vue";
+import { tokenParsed } from "@/plugins/auth";
 
 const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
@@ -304,8 +304,9 @@ function updatemodalPersonal(modal: boolean) {
 }
 
 onMounted(async () => {
-  if (keycloak.tokenParsed != null) {
-    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+  const user = await tokenParsed();
+  if (user) {
+    roleAdmin.value = await user.role.includes("placement1");
   }
   await getData();
 });
diff --git a/src/modules/06_retirement/components/Discharged/dischargedRegistry.vue b/src/modules/06_retirement/components/Discharged/dischargedRegistry.vue
index a78028226..dd072f016 100644
--- a/src/modules/06_retirement/components/Discharged/dischargedRegistry.vue
+++ b/src/modules/06_retirement/components/Discharged/dischargedRegistry.vue
@@ -7,11 +7,11 @@ import { useCounterMixin } from "@/stores/mixin";
 import CurrencyInput from "@/components/CurruncyInput.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import keycloak from "@/plugins/keycloak";
 /**Import type */
 import type { QForm } from "quasar";
 import type { ResponseDataDetail } from "@/modules/06_retirement/interface/response/discharged";
 import PopupPersonal from "@/components/Dialogs/PopupPersonal.vue";
+import { tokenParsed } from "@/plugins/auth";
 
 const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
@@ -64,8 +64,9 @@ const responseData = ref<ResponseDataDetail>({
 
 /** Hook */
 onMounted(async () => {
-  if (keycloak.tokenParsed != null) {
-    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+  const user = await tokenParsed();
+  if (user) {
+    roleAdmin.value = await user.role.includes("placement1");
   }
   await getData();
 });
diff --git a/src/modules/06_retirement/components/DismissOrder/outRegistry.vue b/src/modules/06_retirement/components/DismissOrder/outRegistry.vue
index efc60e412..f3669fa42 100644
--- a/src/modules/06_retirement/components/DismissOrder/outRegistry.vue
+++ b/src/modules/06_retirement/components/DismissOrder/outRegistry.vue
@@ -5,7 +5,7 @@ import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import keycloak from "@/plugins/keycloak";
+import { tokenParsed } from "@/plugins/auth";
 
 /**Import type */
 import type { QForm } from "quasar";
@@ -146,8 +146,9 @@ const getClass = (val: boolean) => {
 
 /** Hook */
 onMounted(async () => {
-  if (keycloak.tokenParsed != null) {
-    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+  const user = await tokenParsed();
+  if (user) {
+    roleAdmin.value = await user.role.includes("placement1");
   }
   await getData();
 });
@@ -182,7 +183,11 @@ onMounted(async () => {
           แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย
         </div>
         <q-space />
-        <div v-if="status !== 'DONE' && status !== 'REPORT' && !checkRoutePermisson">
+        <div
+          v-if="
+            status !== 'DONE' && status !== 'REPORT' && !checkRoutePermisson
+          "
+        >
           <div class="q-gutter-sm" v-if="!edit">
             <q-btn
               outline
diff --git a/src/modules/06_retirement/components/ExitInterview/EditQuestion.vue b/src/modules/06_retirement/components/ExitInterview/EditQuestion.vue
index a77612b79..fe5353037 100644
--- a/src/modules/06_retirement/components/ExitInterview/EditQuestion.vue
+++ b/src/modules/06_retirement/components/ExitInterview/EditQuestion.vue
@@ -5,7 +5,6 @@ import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
-// import keycloak from "@/plugins/keycloak";
 
 import type { QForm } from "quasar";
 
diff --git a/src/modules/06_retirement/components/ExitInterview/exitRegistry.vue b/src/modules/06_retirement/components/ExitInterview/exitRegistry.vue
index ef76edb22..8b8612f0d 100644
--- a/src/modules/06_retirement/components/ExitInterview/exitRegistry.vue
+++ b/src/modules/06_retirement/components/ExitInterview/exitRegistry.vue
@@ -5,7 +5,7 @@ import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import keycloak from "@/plugins/keycloak";
+import { tokenParsed } from "@/plugins/auth";
 
 /**import type*/
 import type {
@@ -23,7 +23,9 @@ import CardProfile from "@/components/CardProfile.vue";
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
-const checkRoutePermisson = ref<boolean>(route.name == "exit-Interview-detailsOnly");
+const checkRoutePermisson = ref<boolean>(
+  route.name == "exit-Interview-detailsOnly"
+);
 const mixin = useCounterMixin();
 const dataId = route.params.id.toString();
 const {
@@ -80,8 +82,9 @@ const adjustOther = ref("");
 
 /** HOOK */
 onMounted(async () => {
-  if (keycloak.tokenParsed != null) {
-    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+  const user = await tokenParsed();
+  if (user) {
+    roleAdmin.value = await user.role.includes("placement1");
   }
   await getData();
   await fecthquestion();
@@ -1087,9 +1090,14 @@ const putData = () => {
                 </div>
               </div>
 
-              <div class="col-12" v-if="!checkRoutePermisson"><q-separator /></div>
+              <div class="col-12" v-if="!checkRoutePermisson">
+                <q-separator />
+              </div>
 
-              <q-card-actions class="col-12 text-primary q-pa-md" v-if="!checkRoutePermisson">
+              <q-card-actions
+                class="col-12 text-primary q-pa-md"
+                v-if="!checkRoutePermisson"
+              >
                 <q-space />
                 <q-btn
                   unelevated
diff --git a/src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue b/src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue
index 2fe4d1881..ebabc108c 100644
--- a/src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue
+++ b/src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue
@@ -6,7 +6,8 @@ import { useCounterMixin } from "@/stores/mixin";
 import CurrencyInput from "@/components/CurruncyInput.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import keycloak from "@/plugins/keycloak";
+import { tokenParsed } from "@/plugins/auth";
+
 /**Import Type */
 import type { QForm } from "quasar";
 import type { ResponseDataDetail } from "@/modules/06_retirement/interface/response/expulsion";
@@ -62,8 +63,9 @@ const responseData = ref<ResponseDataDetail>({
 
 /**Hook */
 onMounted(async () => {
-  if (keycloak.tokenParsed != null) {
-    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+  const user = await tokenParsed();
+  if (user) {
+    roleAdmin.value = await user.role.includes("placement1");
   }
   await getData();
 });
diff --git a/src/modules/06_retirement/components/resign/ResignByid.vue b/src/modules/06_retirement/components/resign/ResignByid.vue
index 5d9ac5070..37406a5c9 100644
--- a/src/modules/06_retirement/components/resign/ResignByid.vue
+++ b/src/modules/06_retirement/components/resign/ResignByid.vue
@@ -9,8 +9,8 @@ import { useRetirementDataStore } from "@/modules/06_retirement/store";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import axios from "axios";
+import { tokenParsed } from "@/plugins/auth";
 
-import keycloak from "@/plugins/keycloak";
 import type {
   TypeFile,
   rowFile,
@@ -144,10 +144,11 @@ const checkboxOp = ref<CheckBoxType[]>([
 onMounted(async () => {
   fetchData(id.value);
   fetchFile();
-  if (keycloak.tokenParsed !== undefined) {
-    const commander = await keycloak.tokenParsed.role.includes("commander");
-    const oligarch = await keycloak.tokenParsed.role.includes("oligarch");
-    const officer = await keycloak.tokenParsed.role.includes("officer");
+  const user = await tokenParsed();
+  if (user) {
+    const commander = await user.role.includes("commander");
+    const oligarch = await kuser.role.includes("oligarch");
+    const officer = await user.role.includes("officer");
     if (commander) {
       roleUser.value = "commander";
     } else if (oligarch) {
diff --git a/src/modules/09_leave/components/2_Leave/Calendar.vue b/src/modules/09_leave/components/2_Leave/Calendar.vue
index fcd31835a..d21e7978f 100644
--- a/src/modules/09_leave/components/2_Leave/Calendar.vue
+++ b/src/modules/09_leave/components/2_Leave/Calendar.vue
@@ -11,7 +11,6 @@ import allLocales from "@fullcalendar/core/locales-all";
 import listPlugin from "@fullcalendar/list";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import keycloak from "@/plugins/keycloak";
 import moment from "moment";
 import { checkPermission } from "@/utils/permissions";
 /** importType*/
@@ -19,6 +18,7 @@ import type {
   DataDateMonthObject,
   ResCalendar,
 } from "@/modules/09_leave/interface/response/leave";
+import { tokenParsed } from "@/plugins/auth";
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
@@ -32,9 +32,7 @@ const router = useRouter();
 
 const { showLoader, hideLoader, messageError, monthYear2Thai } = mixin;
 
-const keycloakId = ref<string>(
-  keycloak.tokenParsed ? keycloak.tokenParsed.sub!.toString() : ""
-);
+const keycloakId = ref<string>("");
 /**
  * Option ของปฏิทิน
  */
@@ -209,6 +207,8 @@ function redirectToDetail(id: string) {
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
 onMounted(async () => {
+  const user = await tokenParsed();
+  keycloakId.value = user?.sub;
   await fetchDataCalendar("onMounted");
 });
 
@@ -292,11 +292,19 @@ const monthYearThai = (val: DataDateMonthObject) => {
               <template v-slot:eventContent="arg">
                 <div
                   class="row col-12 items-center no-wrap"
-                  :style="checkPermission($route)?.attrIsGet ? `background: + ${arg.event.color}`:`background: + ${arg.event.color};pointer-events: none;cursor: auto;`"
+                  :style="
+                    checkPermission($route)?.attrIsGet
+                      ? `background: + ${arg.event.color}`
+                      : `background: + ${arg.event.color};pointer-events: none;cursor: auto;`
+                  "
                 >
                   <div
                     class="textHover col-10"
-                    @click="checkPermission($route)?.attrIsGet ? redirectToDetail(arg.event.id):''"
+                    @click="
+                      checkPermission($route)?.attrIsGet
+                        ? redirectToDetail(arg.event.id)
+                        : ''
+                    "
                   >
                     {{ arg.event.title }}
                   </div>
diff --git a/src/modules/11_discipline/components/7_ListSuspend/DetailPage.vue b/src/modules/11_discipline/components/7_ListSuspend/DetailPage.vue
index 665769f2f..7969b9629 100644
--- a/src/modules/11_discipline/components/7_ListSuspend/DetailPage.vue
+++ b/src/modules/11_discipline/components/7_ListSuspend/DetailPage.vue
@@ -5,7 +5,7 @@ import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
-import keycloak from "@/plugins/keycloak";
+import { tokenParsed } from "@/plugins/auth";
 import { useDisciplineSuspendStore } from "@/modules/11_discipline/store/SuspendStore";
 
 /**Import type */
@@ -16,7 +16,6 @@ import type { DataProfile } from "@/modules/05_placement/interface/index/Main";
 import PopupPersonal from "@/components/Dialogs/PopupPersonalNew.vue";
 import CardProfile from "@/components/CardProfile.vue";
 
-
 const modalPersonal = ref<boolean>(false);
 const personId = ref<string>("");
 /** use */
@@ -24,7 +23,9 @@ const dataStore = useDisciplineSuspendStore();
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
-const checkRoutePermission = ref<boolean>(route.name == 'disciplineDetailSuspend')
+const checkRoutePermission = ref<boolean>(
+  route.name == "disciplineDetailSuspend"
+);
 const mixin = useCounterMixin();
 const dataId = route.params.id.toString();
 const {
@@ -251,8 +252,9 @@ function changeFormDataDate() {
 
 /** Hook */
 onMounted(async () => {
-  if (keycloak.tokenParsed != null) {
-    roleAdmin.value = await keycloak.tokenParsed.role.includes("placement1");
+  const user = await tokenParsed();
+  if (user) {
+    roleAdmin.value = await user.role.includes("placement1");
   }
   await getData();
 });
@@ -332,10 +334,20 @@ onMounted(async () => {
     <q-form greedy @submit.prevent @validation-success="saveData">
       <div class="bg-grey-1 q-pa-sm col-12 row items-center text-primary">
         <div class="q-pl-sm text-weight-bold text-dark">
-          {{ checkRoutePermission ? 'รายละเอียดข้อมูลบัญชีแนบท้าย':'แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย'}}
+          {{
+            checkRoutePermission
+              ? "รายละเอียดข้อมูลบัญชีแนบท้าย"
+              : "แก้ไขข้อมูลเพื่อลงบัญชีแนบท้าย"
+          }}
         </div>
         <q-space />
-        <div v-if="data.status !== 'DONE' && data.status !== 'REPORT'&& !checkRoutePermission">
+        <div
+          v-if="
+            data.status !== 'DONE' &&
+            data.status !== 'REPORT' &&
+            !checkRoutePermission
+          "
+        >
           <div class="q-gutter-sm" v-if="!edit">
             <q-btn
               outline
diff --git a/src/modules/14_KPI/views/mainDetail.vue b/src/modules/14_KPI/views/mainDetail.vue
index c2a422e26..633729e42 100644
--- a/src/modules/14_KPI/views/mainDetail.vue
+++ b/src/modules/14_KPI/views/mainDetail.vue
@@ -2,7 +2,6 @@
 import avatar from "@/assets/avatar_user.jpg";
 import { ref, reactive, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
-import keycloak from "@/plugins/keycloak";
 
 import { useRoute, useRouter } from "vue-router";
 
@@ -11,13 +10,13 @@ import config from "@/app.config";
 import { useQuasar, type QTableProps } from "quasar";
 
 interface ListMain {
-  id: string
+  id: string;
   round_no: number;
-  date_start: string
-  date_finish: string
-  mentors: string
-  commander: string
-  chairman: string
+  date_start: string;
+  date_finish: string;
+  mentors: string;
+  commander: string;
+  chairman: string;
 }
 
 const profileId = ref<string>("");
@@ -38,7 +37,7 @@ const mode = ref<any>($q.screen.gt.xs);
 const profileImg = ref<string>("");
 const router = useRouter();
 const route = useRoute();
-const idEva = ref<string>(route.params.id as string)
+const idEva = ref<string>(route.params.id as string);
 const formData = reactive<any>({
   prefix: "",
   firstName: "",
@@ -123,7 +122,7 @@ function onMobile(type: string) {
 function getMain() {
   showLoader();
   http
-    .get(config.API.profilePosition+`/${idEva.value}`)
+    .get(config.API.profilePosition + `/${idEva.value}`)
     .then(async (res) => {
       const data = res.data.result;
       formData.prefix = data.prefix;
@@ -182,7 +181,7 @@ onMounted(async () => {
 });
 </script>
 <template>
-    <div class="toptitle col-12 row items-center">
+  <div class="toptitle col-12 row items-center">
     <q-btn
       icon="mdi-arrow-left"
       unelevated
@@ -195,104 +194,102 @@ onMounted(async () => {
     />
     รายละเอียดงานที่ได้รับมอบหมาย
   </div>
-      <div class="row q-col-gutter-md">
-        <div v-if="$q.screen.gt.xs" class="col-12">
-          <q-card>
-            <div class="bg-grey-1 row q-pa-sm items-center">
-              <span class="text-teal text-weight-bold text-body2">{{
-                formData.firstName
-                  ? `${formData.prefix}${formData.firstName} ${formData.lastName}`
-                  : "-"
-              }}</span>
+  <div class="row q-col-gutter-md">
+    <div v-if="$q.screen.gt.xs" class="col-12">
+      <q-card>
+        <div class="bg-grey-1 row q-pa-sm items-center">
+          <span class="text-teal text-weight-bold text-body2">{{
+            formData.firstName
+              ? `${formData.prefix}${formData.firstName} ${formData.lastName}`
+              : "-"
+          }}</span>
+        </div>
+        <q-resize-observer @resize="onResize" />
+        <q-card-section class="q-pa-md">
+          <div class="row">
+            <div class="col-2 text-center self-center">
+              <q-avatar :size="sizeImg" rounded>
+                <img
+                  :src="profileImg"
+                  style="border-radius: 10px; object-fit: cover"
+                />
+              </q-avatar>
             </div>
-            <q-resize-observer @resize="onResize" />
-            <q-card-section class="q-pa-md">
+            <div class="col-10 column justify-center no-wrap">
+              <div class="row text-grey-6">
+                <div class="col-4">ตำแหน่งในสายงาน</div>
+                <div class="col-4">ระดับ</div>
+                <div class="col-4">สังกัด</div>
+              </div>
               <div class="row">
-                <div class="col-2 text-center self-center">
-                  <q-avatar :size="sizeImg" rounded>
-                    <img
-                      :src="profileImg"
-                      style="border-radius: 10px; object-fit: cover"
-                    />
-                  </q-avatar>
+                <div class="col-4">
+                  {{ formData.position ? formData.position : "-" }}
                 </div>
-                <div class="col-10 column justify-center no-wrap">
-                  <div class="row text-grey-6">
-                    <div class="col-4">ตำแหน่งในสายงาน</div>
-                    <div class="col-4">ระดับ</div>
-                    <div class="col-4">สังกัด</div>
-                  </div>
-                  <div class="row">
-                    <div class="col-4">
-                      {{ formData.position ? formData.position : "-" }}
-                    </div>
-                    <div class="col-4">
-                      {{ formData.posLevelName ? formData.posLevelName : "-" }}
-                    </div>
-                    <div class="col-4">
-                      {{ formData.org ? formData.org : "-" }}
-                    </div>
-                  </div>
+                <div class="col-4">
+                  {{ formData.posLevelName ? formData.posLevelName : "-" }}
+                </div>
+                <div class="col-4">
+                  {{ formData.org ? formData.org : "-" }}
                 </div>
               </div>
-            </q-card-section>
-          </q-card>
-        </div>
-        <div v-else class="col-12">
-          <q-card bordered>
-            <div class="bg-grey-1 row q-pa-sm items-center">
-              <span class="text-teal text-weight-bold text-body2">{{
-                formData.firstName
-                  ? `${formData.prefix}${formData.firstName} ${formData.lastName}`
-                  : "-"
-              }}</span>
             </div>
-            <q-resize-observer @resize="onResize" />
-            <q-card-section>
-              <div class="text-center q-mt-md">
-                <q-avatar :size="sizeImg" rounded>
-                  <img
-                    :src="profileImg"
-                    style="border-radius: 10px; object-fit: cover"
-                  />
-                </q-avatar>
-              </div>
-            </q-card-section>
-
-            <q-list class="q-mt-md">
-              <q-item>
-                <q-item-section>
-                  <q-item-label class="text-grey-6"
-                    >ตำแหน่งในสายงาน</q-item-label
-                  >
-                  <q-item-label>{{
-                    formData.position ? formData.position : "-"
-                  }}</q-item-label>
-                </q-item-section>
-              </q-item>
-              <q-item>
-                <q-item-section>
-                  <q-item-label class="text-grey-6">ระดับ</q-item-label>
-                  <q-item-label>{{
-                    formData.posLevelName ? formData.posLevelName : "-"
-                  }}</q-item-label>
-                </q-item-section>
-              </q-item>
-              <q-item>
-                <q-item-section>
-                  <q-item-label class="text-grey-6">สังกัด</q-item-label>
-                  <q-item-label>{{
-                    formData.org ? formData.org : "-"
-                  }}</q-item-label>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-card>
+          </div>
+        </q-card-section>
+      </q-card>
+    </div>
+    <div v-else class="col-12">
+      <q-card bordered>
+        <div class="bg-grey-1 row q-pa-sm items-center">
+          <span class="text-teal text-weight-bold text-body2">{{
+            formData.firstName
+              ? `${formData.prefix}${formData.firstName} ${formData.lastName}`
+              : "-"
+          }}</span>
         </div>
-        <div class="col-12 row">
-          <q-card bordered class="col-12 q-pa-md">
-            <div class="row">
-              <!-- <q-btn
+        <q-resize-observer @resize="onResize" />
+        <q-card-section>
+          <div class="text-center q-mt-md">
+            <q-avatar :size="sizeImg" rounded>
+              <img
+                :src="profileImg"
+                style="border-radius: 10px; object-fit: cover"
+              />
+            </q-avatar>
+          </div>
+        </q-card-section>
+
+        <q-list class="q-mt-md">
+          <q-item>
+            <q-item-section>
+              <q-item-label class="text-grey-6">ตำแหน่งในสายงาน</q-item-label>
+              <q-item-label>{{
+                formData.position ? formData.position : "-"
+              }}</q-item-label>
+            </q-item-section>
+          </q-item>
+          <q-item>
+            <q-item-section>
+              <q-item-label class="text-grey-6">ระดับ</q-item-label>
+              <q-item-label>{{
+                formData.posLevelName ? formData.posLevelName : "-"
+              }}</q-item-label>
+            </q-item-section>
+          </q-item>
+          <q-item>
+            <q-item-section>
+              <q-item-label class="text-grey-6">สังกัด</q-item-label>
+              <q-item-label>{{
+                formData.org ? formData.org : "-"
+              }}</q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-card>
+    </div>
+    <div class="col-12 row">
+      <q-card bordered class="col-12 q-pa-md">
+        <div class="row">
+          <!-- <q-btn
                 @click="router.push(`/probation/add/${profileId}`)"
                 size="12px"
                 flat
@@ -302,141 +299,133 @@ onMounted(async () => {
               >
                 <q-tooltip>เพิ่มงานที่ได้รับมอบหมาย</q-tooltip>
               </q-btn> -->
-              <q-space />
-              <q-input
-                class="inputgreen"
-                outlined
-                dense
-                v-model="filter"
-                label="ค้นหา"
-                :style="mode ? `max-width: 200px` : `max-width: 150px`"
-              >
-                <template v-slot:append>
-                  <q-icon
-                    v-if="filter !== ''"
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="filter = ''"
-                  />
-                  <q-icon
-                    v-else
-                    name="search"
-                    class="cursor-pointer"
-                    @click="filter = ''"
-                  />
-                </template>
-              </q-input>
-              <q-select
-                v-if="$q.screen.gt.xs"
-                class="q-ml-sm"
-                dense
-                multiple
-                outlined
-                emit-value
-                map-options
-                options-cover
-                options-dense
-                option-value="name"
-                style="min-width: 150px"
-                v-model="visibleColumns"
-                :options="columns"
-                :display-value="$q.lang.table.columns"
+          <q-space />
+          <q-input
+            class="inputgreen"
+            outlined
+            dense
+            v-model="filter"
+            label="ค้นหา"
+            :style="mode ? `max-width: 200px` : `max-width: 150px`"
+          >
+            <template v-slot:append>
+              <q-icon
+                v-if="filter !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="filter = ''"
               />
-            </div>
-            <div class="q-mt-sm">
-              <d-table
-                flat
-                dense
-                bordered
-                ref="table"
-                virtual-scroll
-                :rows="rows"
-                :columns="columns"
-                :grid="!$q.screen.gt.xs"
-                :filter="filter"
-                :rows-per-page-options="[10, 25, 50, 100]"
-                :visible-columns="visibleColumns"
-                :virtual-scroll-sticky-size-start="48"
-              >
-                <template v-slot:header="props">
-                  <q-tr :props="props">
-                    <q-th
-                      v-for="col in props.cols"
-                      :key="col.name"
-                      :props="props"
-                    >
-                      <span class="text-weight-medium">{{ col.label }}</span>
-                    </q-th>
-                  </q-tr>
-                </template>
+              <q-icon
+                v-else
+                name="search"
+                class="cursor-pointer"
+                @click="filter = ''"
+              />
+            </template>
+          </q-input>
+          <q-select
+            v-if="$q.screen.gt.xs"
+            class="q-ml-sm"
+            dense
+            multiple
+            outlined
+            emit-value
+            map-options
+            options-cover
+            options-dense
+            option-value="name"
+            style="min-width: 150px"
+            v-model="visibleColumns"
+            :options="columns"
+            :display-value="$q.lang.table.columns"
+          />
+        </div>
+        <div class="q-mt-sm">
+          <d-table
+            flat
+            dense
+            bordered
+            ref="table"
+            virtual-scroll
+            :rows="rows"
+            :columns="columns"
+            :grid="!$q.screen.gt.xs"
+            :filter="filter"
+            :rows-per-page-options="[10, 25, 50, 100]"
+            :visible-columns="visibleColumns"
+            :virtual-scroll-sticky-size-start="48"
+          >
+            <template v-slot:header="props">
+              <q-tr :props="props">
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  <span class="text-weight-medium">{{ col.label }}</span>
+                </q-th>
+              </q-tr>
+            </template>
 
-                <template v-if="$q.screen.gt.xs" v-slot:body="props">
-                  <q-tr :props="props" class="cursor-pointer">
-                    <q-td
-                      v-for="(col, index) in props.cols"
-                      :key="col.name"
+            <template v-if="$q.screen.gt.xs" v-slot:body="props">
+              <q-tr :props="props" class="cursor-pointer">
+                <q-td
+                  v-for="(col, index) in props.cols"
+                  :key="col.name"
+                  @click="onDetail(props.row.id)"
+                >
+                  <div v-if="col.name == 'no'">
+                    {{ props.rowIndex + 1 }}
+                  </div>
+                  <div v-else-if="col.name == 'status'">
+                    {{ props.row.status ? props.row.status : "-" }}
+                  </div>
+                  <div v-else>
+                    {{ col.value ? col.value : "-" }}
+                  </div>
+                </q-td>
+              </q-tr>
+            </template>
+            <template v-else v-slot:item="props">
+              <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+                <q-card bordered flat>
+                  <q-list dense class="q-mt-lg relative-position">
+                    <q-btn
+                      icon="info"
+                      color="info"
+                      flat
+                      dense
+                      round
+                      size="14px"
+                      class="absolute_button"
                       @click="onDetail(props.row.id)"
                     >
-                      <div v-if="col.name == 'no'">
-                        {{ props.rowIndex + 1 }}
-                      </div>
-                      <div v-else-if="col.name == 'status'">
-                        {{ props.row.status ? props.row.status : "-" }}
-                      </div>
-                      <div v-else>
-                        {{ col.value ? col.value : "-" }}
-                      </div>
-                    </q-td>
-                  </q-tr>
-                </template>
-                <template v-else v-slot:item="props">
-                  <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
-                    <q-card bordered flat>
-                      <q-list dense class="q-mt-lg relative-position">
-                        <q-btn
-                          icon="info"
-                          color="info"
-                          flat
-                          dense
-                          round
-                          size="14px"
-                          class="absolute_button"
-                          @click="onDetail(props.row.id)"
-                        >
-                          <q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
-                        </q-btn>
-                        <q-item v-for="col in props.cols" :key="col.name">
-                          <q-item-section class="fix_top">
-                            <q-item-label
-                              class="text-grey-6 text-weight-medium"
-                              >{{ col.label }}</q-item-label
-                            >
-                          </q-item-section>
-                          <q-item-section class="fix_top">
-                            <q-item-label
-                              class="text-dark text-weight-medium"
-                              >{{ col.value ? col.value : "-" }}</q-item-label
-                            >
-                          </q-item-section>
-                        </q-item>
-                      </q-list>
-                    </q-card>
-                  </div>
-                </template>
-                <template v-slot:no-data>
-                  <div
-                    class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
-                  >
-                    <span> ไม่พบข้อมูล </span>
-                  </div>
-                </template>
-              </d-table>
-            </div>
-          </q-card>
+                      <q-tooltip>ประวัติแก้ไขตำแหน่ง/เงินเดือน</q-tooltip>
+                    </q-btn>
+                    <q-item v-for="col in props.cols" :key="col.name">
+                      <q-item-section class="fix_top">
+                        <q-item-label class="text-grey-6 text-weight-medium">{{
+                          col.label
+                        }}</q-item-label>
+                      </q-item-section>
+                      <q-item-section class="fix_top">
+                        <q-item-label class="text-dark text-weight-medium">{{
+                          col.value ? col.value : "-"
+                        }}</q-item-label>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-card>
+              </div>
+            </template>
+            <template v-slot:no-data>
+              <div
+                class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
+              >
+                <span> ไม่พบข้อมูล </span>
+              </div>
+            </template>
+          </d-table>
         </div>
-      </div>
-
-
+      </q-card>
+    </div>
+  </div>
 </template>
 <style scoped>
 .absolute_button {
diff --git a/src/plugins/auth.ts b/src/plugins/auth.ts
new file mode 100644
index 000000000..7e2001c36
--- /dev/null
+++ b/src/plugins/auth.ts
@@ -0,0 +1,71 @@
+const ACCESS_TOKEN = "BMAHRIS_KEYCLOAK_IDENTITY";
+
+interface AuthResponse {
+  access_token: string;
+  expires_in: number;
+  refresh_token: string;
+}
+
+const authenticated = async () => ((await getToken()) ? true : false);
+
+async function setAuthen(r: AuthResponse) {
+  await setCookie(ACCESS_TOKEN, r.access_token, r.expires_in);
+  window.location.href = "/login";
+}
+
+async function logout() {
+  await deleteCookie(ACCESS_TOKEN);
+  window.location.href = "/login";
+}
+
+async function getToken() {
+  return getCookie(ACCESS_TOKEN);
+}
+// 2024-08-29T02:55:13.000Z
+function setCookie(name: string, value: any, time: number) {
+  let expires = "";
+  if (time) {
+    const date = new Date();
+    date.setTime(date.getTime() + time * 1000);
+    // date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+    expires = "; expires=" + date.toUTCString();
+  }
+  document.cookie = name + "=" + (value || "") + expires + "; path=/";
+}
+
+function getCookie(name: string) {
+  const nameEQ = name + "=";
+  const ca = document.cookie.split(";");
+  for (let i = 0; i < ca.length; i++) {
+    let c = ca[i];
+    while (c.charAt(0) == " ") c = c.substring(1, c.length);
+    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
+  }
+  return null;
+}
+
+function deleteCookie(name: string) {
+  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
+}
+
+async function tokenParsed() {
+  const token = await getCookie(ACCESS_TOKEN);
+  if (!token) {
+    return null;
+  }
+  const base64Url = token.split(".")[1];
+  const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
+  const jsonPayload = decodeURIComponent(
+    window
+      .atob(base64)
+      .split("")
+      .map(function (c) {
+        return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
+      })
+      .join("")
+  );
+
+  return JSON.parse(jsonPayload);
+}
+
+export { getToken, authenticated, logout, setAuthen, tokenParsed };
diff --git a/src/plugins/axios.ts b/src/plugins/axios.ts
index 79bba4e1f..adac2e9ad 100644
--- a/src/plugins/axios.ts
+++ b/src/plugins/axios.ts
@@ -1,25 +1,24 @@
-import axios from "axios"
-import config from "process"
+import axios from "axios";
 // import { dotnetPath } from "../path/axiosPath";
 // import { getToken } from "@baloise/vue-keycloak";
-import keycloak from "../plugins/keycloak"
+import { getToken } from "../plugins/auth";
 
 const axiosInstance = axios.create({
-    withCredentials: false,
-})
+  withCredentials: false,
+});
 
 // axiosInstance.defaults.baseURL = dotnetPath;
 axiosInstance.interceptors.request.use(
-    async (config) => {
-        const token = await keycloak.token
-        config.headers = {
-            Authorization: `Bearer ${token}`,
-        }
-        return config
-    },
-    (error) => {
-        Promise.reject(error)
-    }
-)
+  async (config: any) => {
+    const token = await getToken();
+    config.headers = {
+      Authorization: `Bearer ${token}`,
+    };
+    return config;
+  },
+  (error) => {
+    Promise.reject(error);
+  }
+);
 
-export default axiosInstance
+export default axiosInstance;
diff --git a/src/plugins/http.ts b/src/plugins/http.ts
index 00615c3d5..8f4f04471 100644
--- a/src/plugins/http.ts
+++ b/src/plugins/http.ts
@@ -1,5 +1,5 @@
 import Axios, { type AxiosRequestConfig, type AxiosResponse } from "axios";
-import keycloak from "./keycloak";
+import { getToken } from "./auth";
 
 const http = Axios.create({
   timeout: 1000000000, // เพิ่มค่า timeout
@@ -12,10 +12,7 @@ http.interceptors.request.use(
   async function (config: AxiosRequestConfig<any>) {
     // await keycloak.updateToken(1);
     config.headers = config.headers ?? {};
-    const token = keycloak.token;
-    // const token = localStorage.getItem("access_token")
-    // const token =
-    //   "eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICIxU2VKV2dVRFVlNXZwNS13Q1ZHaG9lT2l4bDJTTkdKemthLU5ZN211NXZJIn0.eyJleHAiOjE2NzI0MTI1NDksImlhdCI6MTY3MjM3NjU0OSwiYXV0aF90aW1lIjoxNjcyMzc2NTQ5LCJqdGkiOiI1MTVhY2IwNC1jODQ3LTQzM2YtYjUxOC03ODUzMzJhY2ZjNWYiLCJpc3MiOiJodHRwczovL2tleWNsb2FrLmZyYXBwZXQuc3lub2xvZ3kubWUvYXV0aC9yZWFsbXMvYm1hLWVociIsImF1ZCI6ImFjY291bnQiLCJzdWIiOiJlZmM5YjRlMC1mZGU2LTQ1NDQtYmU1OS1lMTA0MjEwMjUzZjAiLCJ0eXAiOiJCZWFyZXIiLCJhenAiOiJibWEtZWhyIiwibm9uY2UiOiI3NjMyMGI3ZS0xZTMxLTQ5ODYtYWIzOC1iOTUyYjFlODY3OGYiLCJzZXNzaW9uX3N0YXRlIjoiMDZlNTBkZjktNzAyNi00ZGIwLTkxMjgtMWY3Y2FiYTRkNDEyIiwiYWNyIjoiMSIsImFsbG93ZWQtb3JpZ2lucyI6WyJodHRwczovL2xvY2FsaG9zdDo3MDA2Il0sInJlYWxtX2FjY2VzcyI6eyJyb2xlcyI6WyJkZWZhdWx0LXJvbGVzLWJtYS1laHIiLCJvZmZsaW5lX2FjY2VzcyIsImFkbWluIiwidW1hX2F1dGhvcml6YXRpb24iXX0sInJlc291cmNlX2FjY2VzcyI6eyJhY2NvdW50Ijp7InJvbGVzIjpbIm1hbmFnZS1hY2NvdW50IiwibWFuYWdlLWFjY291bnQtbGlua3MiLCJ2aWV3LXByb2ZpbGUiXX19LCJzY29wZSI6Im9wZW5pZCBlbWFpbCBwcm9maWxlIiwic2lkIjoiMDZlNTBkZjktNzAyNi00ZGIwLTkxMjgtMWY3Y2FiYTRkNDEyIiwiZW1haWxfdmVyaWZpZWQiOnRydWUsInJvbGUiOlsiZGVmYXVsdC1yb2xlcy1ibWEtZWhyIiwib2ZmbGluZV9hY2Nlc3MiLCJhZG1pbiIsInVtYV9hdXRob3JpemF0aW9uIl0sIm5hbWUiOiJTeXN0ZW0gQWRtaW5pc3RyYXRvciIsInByZWZlcnJlZF91c2VybmFtZSI6ImFkbWluIiwiZ2l2ZW5fbmFtZSI6IlN5c3RlbSIsImZhbWlseV9uYW1lIjoiQWRtaW5pc3RyYXRvciIsImVtYWlsIjoiYWRtaW5AbG9jYWxob3N0In0.xmfJ3pzI-jLYsaiFXyjTW7gfAEpvUmMVsp9BsB1CfRCVOKiGBbuZhnQY8W-1SWVAx1NjJ55L-zMHPK6hk1dRPLbEse3DlIBZw04W9j8m-Wz3eqdHf_UCjmrXb8qAwkeq0Iaxq9mVfJJeQWeKhFBi-Ff8ek4hCXTYDICXS8ny_BaC5WkyrefHQ2xBqQjwRyoxsg4IoVMjXYNb8L9A-4BNlRfs928SqgFYCRlF5h6zw_rC0XoLrGTmqeacBdpey-r3j2g_lTqWy8mQg2T9s65IDqW3kFPOsr0SVO88sjlFbN9Et0L57RmiqORk_RwzbWg-_Yb6dOuolXsnjBOhOoTzkA";
+    const token = await getToken();
     if (token) config.headers.Authorization = `Bearer ${token}`;
     return config;
   },
@@ -34,7 +31,6 @@ http.interceptors.response.use(
       if (error.hasOwnProperty("response")) {
         if (error.response.status === 403) {
           window.location.href = "/error";
-          // kcLogout();
           // Store.commit("SET_ERROR_MESSAGE", error.response.data.message);
           // Store.commit("REMOVE_ACCESS_TOKEN")
         }
diff --git a/src/router/index.ts b/src/router/index.ts
index 4687e62ab..be7d494fb 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -29,7 +29,7 @@ import ModuleSupport from "@/modules/00_support/router";
 import ModuleActing from "@/modules/17_acting/router";
 
 // TODO: ใช้หรือไม่?
-import keycloak, { kcLogout } from "@/plugins/keycloak";
+import { authenticated } from "@/plugins/auth";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -86,7 +86,7 @@ const router = createRouter({
       component: Error404NotFound,
     },
 
-    // authen with keycloak client
+    // authen with client
     {
       path: "/login",
       name: "loginMain",
@@ -114,11 +114,12 @@ const router = createRouter({
   },
 });
 
-// authen with keycloak client
-router.beforeEach((to, from, next) => {
+// authen with client
+router.beforeEach(async (to, from, next) => {
   if (to.meta.Auth) {
-    if (keycloak.authenticated === undefined) {
-      kcLogout();
+    const checkAuthen = await authenticated();
+    if (!checkAuthen && to.meta.Auth) {
+      router.push({ name: "loginMain" });
     } else {
       next();
     }
diff --git a/src/stores/mixin.ts b/src/stores/mixin.ts
index a2740ceff..ac3e9fc1e 100644
--- a/src/stores/mixin.ts
+++ b/src/stores/mixin.ts
@@ -3,7 +3,7 @@ import "moment/dist/locale/th";
 import moment from "moment";
 import CustomComponent from "@/components/CustomDialog.vue";
 import { Loading, QSpinnerCube } from "quasar";
-import { kcLogout } from "@/plugins/keycloak";
+import { logout } from "@/plugins/auth";
 
 moment.locale("th");
 
@@ -362,7 +362,7 @@ export const useCounterMixin = defineStore("mixin", () => {
             },
           }).onCancel(async () => {
             showLoader();
-            await kcLogout();
+            await logout();
             setTimeout(() => {
               hideLoader();
             }, 1000);
@@ -379,7 +379,7 @@ export const useCounterMixin = defineStore("mixin", () => {
               onlycancel: true,
             },
           });
-        } else {
+        } else if (e.response.data.status != 403) {
           const message = e.response.data.result ?? e.response.data.message;
           q.dialog({
             component: CustomComponent,
@@ -406,7 +406,7 @@ export const useCounterMixin = defineStore("mixin", () => {
               },
             }).onCancel(async () => {
               showLoader();
-              await kcLogout();
+              await logout();
               setTimeout(() => {
                 hideLoader();
               }, 1000);
@@ -424,7 +424,7 @@ export const useCounterMixin = defineStore("mixin", () => {
               },
             }).onCancel(async () => {
               showLoader();
-              await kcLogout();
+              await logout();
               setTimeout(() => {
                 hideLoader();
               }, 1000);
diff --git a/src/stores/roleUser.ts b/src/stores/roleUser.ts
index 802a70513..50f8c39a1 100644
--- a/src/stores/roleUser.ts
+++ b/src/stores/roleUser.ts
@@ -2,39 +2,36 @@ import { defineStore } from "pinia";
 import { ref } from "vue";
 
 export const useroleUserDataStore = defineStore("roleusers", () => {
-    const insignia1Role = ref<boolean>(false)
-    const insignia2Role = ref<boolean>(false)
-    const caregiverRole = ref<boolean>(false)
-    const chairmanRole = ref<boolean>(false)
-    const commanderRole = ref<boolean>(false)
-    const admin2Role = ref<boolean>(false)
-    const adminRole = ref<boolean>(false)
-    const oligarchRole = ref<boolean>(false)
+  const insignia1Role = ref<boolean>(false);
+  const insignia2Role = ref<boolean>(false);
+  const caregiverRole = ref<boolean>(false);
+  const chairmanRole = ref<boolean>(false);
+  const commanderRole = ref<boolean>(false);
+  const admin2Role = ref<boolean>(false);
+  const adminRole = ref<boolean>(false);
+  const oligarchRole = ref<boolean>(false);
 
-
-
-
-    const fetchroleUser = async (keycloak: any) => {
-        if (keycloak != null) {
-            insignia1Role.value = await keycloak.includes("insignia1");
-            insignia2Role.value = await keycloak.includes("insignia2");
-            caregiverRole.value = await keycloak.includes("caregiver");
-            chairmanRole.value = await keycloak.includes("chairman");
-            commanderRole.value = await keycloak.includes("commander");
-            admin2Role.value = await keycloak.includes("admin2");
-            adminRole.value = await keycloak.includes("admin");
-            oligarchRole.value = await keycloak.includes("oligarch");
-        }
+  const fetchroleUser = async (roles: string[]) => {
+    if (roles) {
+      insignia1Role.value = await roles.includes("insignia1");
+      insignia2Role.value = await roles.includes("insignia2");
+      caregiverRole.value = await roles.includes("caregiver");
+      chairmanRole.value = await roles.includes("chairman");
+      commanderRole.value = await roles.includes("commander");
+      admin2Role.value = await roles.includes("admin2");
+      adminRole.value = await roles.includes("admin");
+      oligarchRole.value = await roles.includes("oligarch");
     }
+  };
 
-    return {
-        fetchroleUser,
-        insignia1Role,
-        insignia2Role,
-        caregiverRole,
-        chairmanRole,
-        commanderRole,
-        admin2Role,
-        adminRole,
-    };
-});
\ No newline at end of file
+  return {
+    fetchroleUser,
+    insignia1Role,
+    insignia2Role,
+    caregiverRole,
+    chairmanRole,
+    commanderRole,
+    admin2Role,
+    adminRole,
+  };
+});
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index dbe2c21b4..ec3288d6f 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, watch } from "vue";
-import keycloak, { kcLogout } from "@/plugins/keycloak";
 import { useRoute, useRouter } from "vue-router";
 import { useDataStore } from "@/stores/data";
 import { storeToRefs } from "pinia";
 import { scroll, useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import { useMenuDataStore } from "@/stores/menuList";
+import { tokenParsed, logout } from "@/plugins/auth";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -231,8 +231,12 @@ onMounted(async () => {
   await fetchSys();
   await fetchPermissionsSys();
 
-  if (keycloak.tokenParsed) {
-    await fetchroleUser(keycloak.tokenParsed.role);
+  const user = await tokenParsed();
+  if (user) {
+    fullname.value = user.name;
+    role.value = user.role;
+
+    await fetchroleUser(user.role);
   }
   await fetchmsgNoread();
 
@@ -405,28 +409,20 @@ const tagClickPlacement = (tag: string) => {
 //**** End Tab Right หน้าจอแก้ไขข้อมูลส่วนตัวของผู้สอบผ่าน ****\\
 
 /**
- * logout keycloak
+ * logout
  * confirm ก่อนออกจากระบบ
  */
 const doLogout = () => {
   dialogConfirm(
     $q,
     async () => {
-      kcLogout();
+      logout();
     },
     "ยืนยันการออกจากระบบ",
     "ต้องการออกจากระบบใช่หรือไม่?"
   );
 };
 
-/**
- * ดิงชื่อผู้ใช้งานจาก keycloak
- */
-if (keycloak.tokenParsed != null) {
-  fullname.value = keycloak.tokenParsed.name;
-  role.value = keycloak.tokenParsed.role;
-}
-
 const clickDelete = async (id: string, index: number) => {
   dialogRemove($q, async () => {
     showLoader();
diff --git a/src/views/auth.vue b/src/views/auth.vue
index d27967d8e..e4cbcf99f 100644
--- a/src/views/auth.vue
+++ b/src/views/auth.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { kcAuthen } from "@/plugins/keycloak";
+import { setAuthen } from "@/plugins/auth";
 import { onMounted } from "vue";
 import { useRoute } from "vue-router";
 
@@ -7,9 +7,12 @@ const route = useRoute();
 
 onMounted(() => {
   if (route.query.token && route.query.accessToken) {
-    // console.log('query', route.query.token)
-    // console.log('accessToken', route.query.accessToken)
-    kcAuthen(route.query.token.toString(), route.query.accessToken.toString());
+    const params = await {
+      access_token: route.query.token,
+      expires_in: route.query.expires ? route.query.expires : 36000,
+      refresh_token: route.query.accessToken,
+    };
+    setAuthen(params);
   }
 });
 </script>
diff --git a/src/views/login.vue b/src/views/login.vue
index d8119eebe..e02050432 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -1,12 +1,13 @@
-<!-- authen with keycloak client -->
+<!-- authen with client -->
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
 import axios from "axios";
-import keycloak, { keycloakConfig, kcAuthen } from "@/plugins/keycloak";
+import { authenticated, tokenParsed, setAuthen } from "@/plugins/auth";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import CustomComponent from "@/components/CustomDialog.vue";
+import env from "@/api/index";
 
 const router = useRouter();
 const mixin = useCounterMixin();
@@ -23,47 +24,47 @@ const isDisplay = ref<boolean>(true); // check display login page
 async function onSubmit() {
   showLoader();
   const formdata = new URLSearchParams();
-  formdata.append("client_id", keycloakConfig.clientId);
-  formdata.append("client_secret", keycloakConfig.clientSecret);
-  formdata.append("grant_type", "password");
-  formdata.append(
-    "requested_token_type",
-    "urn:ietf:params:oauth:token-type:refresh_token"
-  );
   formdata.append("username", username.value);
   formdata.append("password", password.value);
 
   await axios
-    .post(
-      `${keycloakConfig.url}/realms/${keycloakConfig.realm}/protocol/openid-connect/token`,
-      formdata,
-      {
-        headers: {
-          "Content-Type": "application/x-www-form-urlencoded",
-        },
-      }
-    )
-    .then((res) => {
-      kcAuthen(res.data.access_token, res.data.refresh_token);
+    .post(`${env.API_URI}/org/login`, formdata, {
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+    })
+    .then(async (res) => {
+      setAuthen(res.data.result);
     })
     .catch((err) => {
-      messageError($q, err, "ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง");
+      $q.dialog({
+        component: CustomComponent,
+        componentProps: {
+          title: `ข้อความแจ้งเตือน`,
+          message: `${err.response.data.message}`,
+          icon: "warning",
+          color: "red",
+          onlycancel: true,
+        },
+      });
     })
     .finally(() => {
       hideLoader();
     });
 }
 
-onMounted(() => {
-  // check authen keycloak and role of system
-  if (keycloak.authenticated) {
+onMounted(async () => {
+  // check authen and role of system
+  const checkAuthen = await authenticated();
+  if (checkAuthen) {
     isDisplay.value = false;
     showLoader();
-    if (keycloak.tokenParsed) {
+    const user = await tokenParsed();
+    if (user) {
       const checkRole = (element: string) => element === "STAFF";
 
       // ถ้าไม่มีสิทธิ์เข้าใช้งานระบบ แสดงข้อความแจ้งเตือน
-      if (keycloak.tokenParsed.role.findIndex(checkRole) === -1) {
+      if (user.role.findIndex(checkRole) === -1) {
         $q.dialog({
           component: CustomComponent,
           componentProps: {