remove keycloak change use cookie only

src/main.ts

@@ -9,7 +9,6 @@ import "@vuepic/vue-datepicker/dist/main.css";
 
 import "quasar/src/css/index.sass";
 import http from "./plugins/http";
-import keycloak, { getToken } from "@/plugins/keycloak";
 
 // import OpenLayersMap from "vue3-openlayers";
 
@@ -41,27 +40,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");

src/modules/00_support/store/Main.ts

@@ -12,15 +12,16 @@ import type {
   SupportUserStatus,
   SupportMessageStatus,
 } from "@/modules/00_support/interface/index/Main";
-import keycloak from "@/plugins/keycloak";
 import { useCounterMixin } from "@/stores/mixin";
+import { getToken, tokenParsed } from "@/plugins/auth";
 
 export const useSupportStore = defineStore("supportServiceStore", () => {
   const { showLoader, hideLoader, messageError } = useCounterMixin();
   const $q = useQuasar();
   const openChat = ref<boolean>(false);
   const icon = ref<string>("mdi-account-check");
-  const userId = ref<string | undefined>(keycloak.subject);
+
+  const userId = ref<string | undefined>("");
   const userStatus = ref<SupportUserStatus[]>([]);
   const issue = ref<SupportIssueResponse>();
   const issueCategory = ref<SupportIssueCategoryResponse>();
@@ -33,7 +34,7 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
   const scrollContainer = ref();
 
   const socket = io(config.API.supportSocket, {
-    auth: { token: keycloak.token },
+    auth: { token: getToken() },
     autoConnect: false,
     path: "/api/v1/support/socket/",
   });
@@ -42,7 +43,9 @@ export const useSupportStore = defineStore("supportServiceStore", () => {
     userStatus.value = data;
   });
 
-  socket.on("online", (r) => {
+  socket.on("online", async (r) => {
+    const user = await tokenParsed();
+    userId.value = user?.sub;
     userStatus.value.push({
       socketId: r.socketId,
       userId: r.userId,

src/modules/01_dashboard/views/Dashboard.vue

@@ -6,9 +6,9 @@ import router from "@/router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
-import keycloak from "@/plugins/keycloak";
 import PopupReplyInbox from "@/components/PopupReplyInbox.vue";
 import PopupDetailInbox from "@/components/PopupDetailInbox.vue";
+import { tokenParsed } from "@/plugins/auth";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
@@ -125,8 +125,9 @@ const items = ref<any>([
 ]);
 onMounted(async () => {
   await fetchlistInbox(1);
-  if (keycloak.tokenParsed != null) {
-    fullname.value = keycloak.tokenParsed.name;
+  const user = await tokenParsed();
+  if (user) {
+    fullname.value = user.name;
   }
 });
 const fetchlistInbox = async (index: number) => {

src/modules/05_leave/components/Calendar.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { ref, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
-import keycloak from "@/plugins/keycloak";
 import http from "@/plugins/http";
 import config from "@/app.config";
-
+import { tokenParsed } from "@/plugins/auth";
 /**import calendar*/
 import FullCalendar from "@fullcalendar/vue3";
 import dayGridPlugin from "@fullcalendar/daygrid";
@@ -35,9 +34,7 @@ const $q = useQuasar();
 const emit = defineEmits(["update:dateYear"]);
 const fullName = ref<string>("");
 const mainData = ref<DataCalendar[]>([]);
-const keycloakId = ref<string>(
-  keycloak.tokenParsed ? keycloak.tokenParsed.sub!.toString() : ""
-);
+const keycloakId = ref<string>("");
 const modal = ref<boolean>(false);
 const leaveId = ref<string>("");
 
@@ -171,7 +168,6 @@ const fetchData = async () => {
       // 	textColor: "#FF8000",
       // }))
       // calendarOptions.value.events = [...calendarOptions.value.events, ...eventSix]
-      console.log(calendarOptions.value.events);
     })
     .catch((e) => {
       messageError($q, e);
@@ -265,6 +261,8 @@ watch(
 
 /**Hook */
 onMounted(async () => {
+  const user = await tokenParsed();
+  keycloakId.value = await (user ? user.sub : "");
   filterVal.value.push(keycloakId.value);
   await fetchDataCalendar();
   await fetchData();

src/modules/06_evaluate/components/step/step2.vue

@@ -3,11 +3,11 @@ import { ref, watch, onMounted, reactive } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import { VuePDF, usePDF } from "@tato30/vue-pdf";
 import { useQuasar } from "quasar";
-import keycloak from "@/plugins/keycloak";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import axios from "axios";
 import genReport from "@/plugins/genreport";
+import { tokenParsed } from "@/plugins/auth";
 
 /** importType*/
 import type { FormCommand } from "@/modules/06_evaluate/interface/evalute";
@@ -401,8 +401,9 @@ async function downloadFile(fileName: string) {
 
 /**lifecycle Hooks*/
 onMounted(async () => {
-  if (keycloak.tokenParsed != null) {
-    formCommand.author = keycloak.tokenParsed.name;
+  const user = await tokenParsed();
+  if (user) {
+    formCommand.author = user.name;
   }
   showLoader();
   await Promise.all([

src/modules/06_evaluate/components/step/step6.vue

@@ -2,11 +2,10 @@
 import { ref, reactive, watch, onMounted } from "vue";
 import { useRoute } from "vue-router";
 import { useQuasar } from "quasar";
-import keycloak from "@/plugins/keycloak";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import axios from "axios";
-
+import { tokenParsed } from "@/plugins/auth";
 /** importType*/
 import type { FormCommand } from "@/modules/06_evaluate/interface/evalute";
 
@@ -214,8 +213,9 @@ function checkDoc() {
 
 /** hook lifecycle*/
 onMounted(async () => {
-  if (keycloak.tokenParsed != null) {
-    formCommand.author = keycloak.tokenParsed.name;
+  const user = await tokenParsed();
+  if (user) {
+    formCommand.author = user.name;
   }
   checkDoc();
   if (store.currentStep > 2) {

src/modules/07_appealComplain/views/Main.vue

@@ -179,7 +179,6 @@ const getData = async () => {
       maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
       let data = res.data.result.data;
       dataStore.fetchAppealComplain(data);
-      console.log(data);
     })
     .catch((e: any) => {
       messageError($q, e);

src/modules/08_KPI/components/Tab/Dialog/03_FormIndicatorSpecial.vue

@@ -51,7 +51,6 @@ function fetchspecialByid(id: string) {
     .get(config.API.kpiAchievement("special") + `/${id}`)
     .then((res) => {
       const data = res.data.result;
-      console.log(data);
 
       formData.including = data.including;
       formData.includingName = data.includingName;

src/modules/09_scholarship/views/detail.vue

@@ -364,7 +364,6 @@ function fetchDataDetail(id: string) {
     .get(config.API.developmentScholarship + `/${id}`)
     .then((res) => {
       const data: DataSholarship = res.data.result;
-      console.log(data);
       formBody.rank = data.rank;
       formBody.prefix = data.prefix;
       formBody.firstName = data.firstName;

src/modules/10_registry/components/DialogAddRequestEdit.vue

@@ -4,7 +4,6 @@ import { useQuasar } from "quasar";
 import config from "@/app.config";
 import http from "@/plugins/http";
 import axios from "axios";
-import keycloak from "@/plugins/keycloak";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 

src/modules/10_registry/views/main.vue

@@ -3,7 +3,6 @@ import avatar from "@/assets/avatar_user.jpg";
 import { ref, reactive, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
-import keycloak from "@/plugins/keycloak";
 
 //หน้าเมนู
 import InformationPage from "@/modules/10_registry/tabs/01_information.vue";
@@ -373,12 +372,12 @@ onMounted(async () => {
                 <q-avatar text-color="info" icon="mdi-chevron-right" />
               </q-item-section>
             </q-item>
-            <q-item clickable v-ripple disabled>
+            <!-- <q-item clickable v-ripple disabled>
               <q-item-section>เปลี่ยนรหัสผ่าน</q-item-section>
               <q-item-section avatar>
                 <q-avatar text-color="info" icon="mdi-chevron-right" />
               </q-item-section>
-            </q-item>
+            </q-item> -->
           </q-list>
         </q-card>
       </div>

src/modules/11_probation/views/main.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 { useRouter } from "vue-router";
 

src/modules/11_probation/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";
 

src/plugins/ !keycloak.ts

@@ -0,0 +1,70 @@
+// // authen with keycloak client
+// import Keycloak from "keycloak-js";
+
+// const ACCESS_TOKEN = "BMAHRIS_KEYCLOAK_IDENTITY";
+// const REFRESH_TOKEN = "BMAHRIS_KEYCLOAK_REFRESH";
+// const keycloakConfig = {
+//   url: import.meta.env.VITE_URL_KEYCLOAK,
+//   realm: import.meta.env.VITE_REALM_KEYCLOAK,
+//   clientId: import.meta.env.VITE_CLIENTID_KEYCLOAK,
+//   clientSecret: import.meta.env.VITE_CLIENTSECRET_KEYCLOAK,
+// };
+
+// const keycloak = new Keycloak(keycloakConfig);
+
+// async function kcAuthen(access_token: string, refresh_token: string) {
+//   await setCookie(ACCESS_TOKEN, access_token, 1);
+//   await setCookie(REFRESH_TOKEN, refresh_token, 1);
+//   window.location.href = "/";
+// }
+
+// async function kcLogout() {
+//   await deleteCookie(ACCESS_TOKEN);
+//   await deleteCookie(REFRESH_TOKEN);
+//   if (keycloak.authenticated !== undefined) {
+//     keycloak.logout();
+//   }
+//   window.location.href = "/login";
+// }
+
+// async function getToken() {
+//   return {
+//     token: getCookie(ACCESS_TOKEN),
+//     refresh_token: getCookie(REFRESH_TOKEN),
+//   };
+// }
+
+// function setCookie(name: string, value: any, days: number) {
+//   let expires = "";
+//   if (days) {
+//     const date = new Date();
+//     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=/;`;
+// }
+
+// export default keycloak;
+// export {
+//   keycloakConfig,
+//   getToken,
+//   kcAuthen,
+//   kcLogout,
+//   ACCESS_TOKEN,
+//   REFRESH_TOKEN,
+// };

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 = "/";
+}
+
+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 };

src/plugins/axios.ts

@@ -1,25 +1,24 @@
-import axios from "axios"
-import config from "process"
+import axios from "axios";
+import { getToken } from "./auth";
 // import { dotnetPath } from "../path/axiosPath";
 // import { getToken } from "@baloise/vue-keycloak";
-import keycloak from "../plugins/keycloak"
 
 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) => {
+    const token = await getToken();
+    config.headers = {
+      Authorization: `Bearer ${token}`,
+    };
+    return config;
+  },
+  (error) => {
+    Promise.reject(error);
+  }
+);
 
-export default axiosInstance
+export default axiosInstance;

src/plugins/http.ts

@@ -1,5 +1,5 @@
 import Axios, { type AxiosRequestConfig, type AxiosResponse } from "axios";
-import keycloak, { kcLogout } from "./keycloak";
+import { getToken } from "./auth";
 
 const http = Axios.create({
   timeout: 1000000000, // เพิ่มค่า timeout
@@ -12,7 +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 = await getToken();
     // const token = localStorage.getItem("access_token")
     // const token =
     //   "eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICIxU2VKV2dVRFVlNXZwNS13Q1ZHaG9lT2l4bDJTTkdKemthLU5ZN211NXZJIn0.eyJleHAiOjE2NzI0MTI1NDksImlhdCI6MTY3MjM3NjU0OSwiYXV0aF90aW1lIjoxNjcyMzc2NTQ5LCJqdGkiOiI1MTVhY2IwNC1jODQ3LTQzM2YtYjUxOC03ODUzMzJhY2ZjNWYiLCJpc3MiOiJodHRwczovL2tleWNsb2FrLmZyYXBwZXQuc3lub2xvZ3kubWUvYXV0aC9yZWFsbXMvYm1hLWVociIsImF1ZCI6ImFjY291bnQiLCJzdWIiOiJlZmM5YjRlMC1mZGU2LTQ1NDQtYmU1OS1lMTA0MjEwMjUzZjAiLCJ0eXAiOiJCZWFyZXIiLCJhenAiOiJibWEtZWhyIiwibm9uY2UiOiI3NjMyMGI3ZS0xZTMxLTQ5ODYtYWIzOC1iOTUyYjFlODY3OGYiLCJzZXNzaW9uX3N0YXRlIjoiMDZlNTBkZjktNzAyNi00ZGIwLTkxMjgtMWY3Y2FiYTRkNDEyIiwiYWNyIjoiMSIsImFsbG93ZWQtb3JpZ2lucyI6WyJodHRwczovL2xvY2FsaG9zdDo3MDA2Il0sInJlYWxtX2FjY2VzcyI6eyJyb2xlcyI6WyJkZWZhdWx0LXJvbGVzLWJtYS1laHIiLCJvZmZsaW5lX2FjY2VzcyIsImFkbWluIiwidW1hX2F1dGhvcml6YXRpb24iXX0sInJlc291cmNlX2FjY2VzcyI6eyJhY2NvdW50Ijp7InJvbGVzIjpbIm1hbmFnZS1hY2NvdW50IiwibWFuYWdlLWFjY291bnQtbGlua3MiLCJ2aWV3LXByb2ZpbGUiXX19LCJzY29wZSI6Im9wZW5pZCBlbWFpbCBwcm9maWxlIiwic2lkIjoiMDZlNTBkZjktNzAyNi00ZGIwLTkxMjgtMWY3Y2FiYTRkNDEyIiwiZW1haWxfdmVyaWZpZWQiOnRydWUsInJvbGUiOlsiZGVmYXVsdC1yb2xlcy1ibWEtZWhyIiwib2ZmbGluZV9hY2Nlc3MiLCJhZG1pbiIsInVtYV9hdXRob3JpemF0aW9uIl0sIm5hbWUiOiJTeXN0ZW0gQWRtaW5pc3RyYXRvciIsInByZWZlcnJlZF91c2VybmFtZSI6ImFkbWluIiwiZ2l2ZW5fbmFtZSI6IlN5c3RlbSIsImZhbWlseV9uYW1lIjoiQWRtaW5pc3RyYXRvciIsImVtYWlsIjoiYWRtaW5AbG9jYWxob3N0In0.xmfJ3pzI-jLYsaiFXyjTW7gfAEpvUmMVsp9BsB1CfRCVOKiGBbuZhnQY8W-1SWVAx1NjJ55L-zMHPK6hk1dRPLbEse3DlIBZw04W9j8m-Wz3eqdHf_UCjmrXb8qAwkeq0Iaxq9mVfJJeQWeKhFBi-Ff8ek4hCXTYDICXS8ny_BaC5WkyrefHQ2xBqQjwRyoxsg4IoVMjXYNb8L9A-4BNlRfs928SqgFYCRlF5h6zw_rC0XoLrGTmqeacBdpey-r3j2g_lTqWy8mQg2T9s65IDqW3kFPOsr0SVO88sjlFbN9Et0L57RmiqORk_RwzbWg-_Yb6dOuolXsnjBOhOoTzkA";

src/plugins/keycloak.ts

@@ -1,70 +0,0 @@
-// authen with keycloak client
-import Keycloak from "keycloak-js";
-
-const ACCESS_TOKEN = "BMAHRIS_KEYCLOAK_IDENTITY";
-const REFRESH_TOKEN = "BMAHRIS_KEYCLOAK_REFRESH";
-const keycloakConfig = {
-  url: import.meta.env.VITE_URL_KEYCLOAK,
-  realm: import.meta.env.VITE_REALM_KEYCLOAK,
-  clientId: import.meta.env.VITE_CLIENTID_KEYCLOAK,
-  clientSecret: import.meta.env.VITE_CLIENTSECRET_KEYCLOAK,
-};
-
-const keycloak = new Keycloak(keycloakConfig);
-
-async function kcAuthen(access_token: string, refresh_token: string) {
-  await setCookie(ACCESS_TOKEN, access_token, 1);
-  await setCookie(REFRESH_TOKEN, refresh_token, 1);
-  window.location.href = "/";
-}
-
-async function kcLogout() {
-  await deleteCookie(ACCESS_TOKEN);
-  await deleteCookie(REFRESH_TOKEN);
-  if (keycloak.authenticated !== undefined) {
-    keycloak.logout();
-  }
-  window.location.href = "/login";
-}
-
-async function getToken() {
-  return {
-    token: getCookie(ACCESS_TOKEN),
-    refresh_token: getCookie(REFRESH_TOKEN),
-  };
-}
-
-function setCookie(name: string, value: any, days: number) {
-  let expires = "";
-  if (days) {
-    const date = new Date();
-    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=/;`;
-}
-
-export default keycloak;
-export {
-  keycloakConfig,
-  getToken,
-  kcAuthen,
-  kcLogout,
-  ACCESS_TOKEN,
-  REFRESH_TOKEN,
-};

src/router/index.ts

@@ -19,8 +19,9 @@ import ModuleRegistry from "@/modules/10_registry/router";
 import ModuleProbation from "@/modules/11_probation/router";
 import ModuleOrganization from "@/modules/12_organization/router";
 import ModulePortfolio from "@/modules/13_portfolio/router";
+import { authenticated, tokenParsed } from "@/plugins/auth";
+import { ro } from "date-fns/locale";
 // TODO: ใช้หรือไม่?
-import keycloak, { kcLogout } from "@/plugins/keycloak";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -81,11 +82,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 && to.meta.Auth) {
-      kcLogout();
+    const checkAuthen = await authenticated();
+    if (!checkAuthen && to.meta.Auth) {
+      router.push({ name: "loginMain" });
     }
   } else {
     next();

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");
 export const useCounterMixin = defineStore("mixin", () => {
@@ -386,7 +386,7 @@ export const useCounterMixin = defineStore("mixin", () => {
               },
             }).onCancel(async () => {
               showLoader();
-              await kcLogout();
+              await logout();
               setTimeout(() => {
                 hideLoader();
               }, 1000);
@@ -428,7 +428,7 @@ export const useCounterMixin = defineStore("mixin", () => {
                 },
               }).onCancel(async () => {
                 showLoader();
-                await kcLogout();
+                await logout();
                 setTimeout(() => {
                   hideLoader();
                 }, 1000);
@@ -446,7 +446,7 @@ export const useCounterMixin = defineStore("mixin", () => {
                 },
               }).onCancel(async () => {
                 showLoader();
-                await kcLogout();
+                await logout();
                 setTimeout(() => {
                   hideLoader();
                 }, 1000);

src/views/MainLayout.vue

@@ -4,10 +4,11 @@ import config from "@/app.config";
 import { onMounted, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useQuasar } from "quasar";
-import keycloak, { kcLogout } from "@/plugins/keycloak";
 import { useCounterMixin } from "@/stores/mixin";
 import CustomComponent from "@/components/CustomDialog.vue";
 import avatar from "@/assets/avatar_user.jpg";
+import { tokenParsed, logout } from "@/plugins/auth";
+
 const route = useRoute();
 const router = useRouter();
 
@@ -36,9 +37,8 @@ const link = ref<string>("");
  */
 onMounted(async () => {
   await fetchTotolNotificate();
-  if (keycloak.tokenParsed != null) {
-    fullname.value = keycloak.tokenParsed.name;
-  }
+  const user = await tokenParsed();
+  fullname.value = user?.name;
 });
 
 async function checkUser() {
@@ -65,7 +65,7 @@ async function checkUser() {
         },
       }).onCancel(async () => {
         showLoader();
-        await kcLogout();
+        await logout();
         setTimeout(() => {
           hideLoader();
         }, 1000);
@@ -132,15 +132,15 @@ const fetchlistNotification = async (index: number, type: string) => {
 };
 
 /**
- * logout keycloak
+ * logout
  * confirm ก่อนออกจากระบบ
  */
 const doLogout = () => {
   dialogConfirm(
     $q,
     async () => {
-      // authen with keycloak client
-      kcLogout();
+      // authen with client
+      logout();
     },
     "ยืนยันการออกจากระบบ",
     "ต้องการออกจากระบบใช่หรือไม่"
@@ -456,14 +456,14 @@ function onInfo() {
               >
             </q-item>
 
-            <q-item clickable v-close-popup>
+            <!-- <q-item clickable v-close-popup>
               <q-item-section avatar style="min-width: 30px">
                 <q-icon color="orange-9" size="18px" name="mdi-lock-outline" />
               </q-item-section>
               <q-item-section
                 ><q-item-label>เปลี่ยนรหัสผ่าน</q-item-label></q-item-section
               >
-            </q-item>
+            </q-item> -->
 
             <q-item clickable v-close-popup @click="doLogout">
               <q-item-section avatar style="min-width: 30px">

src/views/auth.vue

@@ -1,15 +1,18 @@
 <script setup lang="ts">
 import { onMounted } from "vue";
 import { useRoute } from "vue-router";
-import { kcAuthen } from "@/plugins/keycloak";
+import { kcAuthen } from "@/plugins/auth";
 
 const route = useRoute();
 
-onMounted(() => {
+onMounted(async () => {
   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>

src/views/login.vue

@@ -1,11 +1,12 @@
-<!-- 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 { setAuthen, authenticated } from "@/plugins/auth";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
+import CustomComponent from "@/components/CustomDialog.vue";
 
 const router = useRouter();
 const mixin = useCounterMixin();
@@ -18,39 +19,38 @@ const password = ref<string>("");
 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",
-        },
-      }
-    )
+    .post(`${import.meta.env.VITE_API_URI_CONFIG}/org/login`, formdata, {
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+    })
     .then(async (res) => {
-      kcAuthen(res.data.access_token, res.data.refresh_token);
+      console.log("res", res.data.result);
+      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(() => {
-  if (keycloak.authenticated) {
-    console.log("authenticated", keycloak.authenticated);
+onMounted(async () => {
+  const checkAuthen = await authenticated();
+  if (checkAuthen) {
     router.push("/");
   }
 });