From 76e7cfb39a12b247622de3948ed2ee86bbbfc718 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Mon, 23 Jun 2025 10:48:35 +0700
Subject: [PATCH] logoutPage

---
 src/plugins/cookie.ts    |  5 ++-
 src/router/index.ts      |  9 +++++
 src/views/home.vue       | 82 +++++++++++++---------------------------
 src/views/logoutPage.vue | 69 +++++++++++++++++++++++++++++++++
 4 files changed, 109 insertions(+), 56 deletions(-)
 create mode 100644 src/views/logoutPage.vue

diff --git a/src/plugins/cookie.ts b/src/plugins/cookie.ts
index 07471a9..fc150cc 100644
--- a/src/plugins/cookie.ts
+++ b/src/plugins/cookie.ts
@@ -1,3 +1,6 @@
+const cookieTokenName = "BMAHRIS_KEYCLOAK_IDENTITY";
+const cookieTokenRefName = "BMAHRIS_KEYCLOAK_REFRESH";
+
 // authen with keycloak client
 function setCookie(name: string, value: string, days: number) {
   let expires = "";
@@ -24,4 +27,4 @@ function deleteCookie(name: string) {
   document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
 }
 
-export { setCookie, getCookie, deleteCookie };
+export { setCookie, getCookie, deleteCookie, cookieTokenName, cookieTokenRefName };
diff --git a/src/router/index.ts b/src/router/index.ts
index 31d09f2..e976fb0 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from "vue-router";
 const homeView = () => import("@/views/home.vue");
 const ssoPage = () => import("@/views/sso.vue");
+const logoutPage = () => import("@/views/logoutPage.vue");
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -32,6 +33,14 @@ const router = createRouter({
         Auth: false,
       },
     },
+    {
+      path: "/logout",
+      name: "logout-page",
+      component: logoutPage,
+      meta: {
+        Auth: false,
+      },
+    },
   ],
 });
 
diff --git a/src/views/home.vue b/src/views/home.vue
index 1dd04bb..4a3d6ea 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -1,5 +1,11 @@
 <script setup lang="ts">
-import { deleteCookie, getCookie, setCookie } from "@/plugins/cookie";
+import {
+  deleteCookie,
+  getCookie,
+  setCookie,
+  cookieTokenName,
+  cookieTokenRefName,
+} from "@/plugins/cookie";
 import router from "@/router";
 
 import { useRoute } from "vue-router";
@@ -20,8 +26,8 @@ import type { DateCards } from "@/interface/index/Main";
 const $q = useQuasar();
 const route = useRoute();
 
-const cookieTokenName = ref<string>("BMAHRIS_KEYCLOAK_IDENTITY");
-const cookieTokenRefName = ref<string>("BMAHRIS_KEYCLOAK_REFRESH");
+// const cookieTokenName = ref<string>("BMAHRIS_KEYCLOAK_IDENTITY");
+// const cookieTokenRefName = ref<string>("BMAHRIS_KEYCLOAK_REFRESH");
 const urlAdmin = config.API.URL_ADMIN;
 const urlUser = config.API.URL_USER;
 const urlMgt = config.API.URL_MGT;
@@ -54,7 +60,7 @@ const token = ref<any>("");
 const refreshToken = ref<any>("");
 const name = ref<string>("");
 async function getName() {
-  const token = await getCookie(cookieTokenName.value);
+  const token = await getCookie(cookieTokenName);
   if (token) {
     const base64Url = token.split(".")[1];
 
@@ -70,7 +76,7 @@ async function getName() {
 }
 
 async function goPage(sys: string, url: string) {
-  const token = await getCookie(cookieTokenName.value);
+  const token = await getCookie(cookieTokenName);
   const redirectUrl = (route.query.redirectUrl as string) ?? "";
 
   if (token) {
@@ -136,8 +142,8 @@ async function logout() {
     cancel: true,
     persistent: true,
   }).onOk(async () => {
-    await deleteCookie(cookieTokenName.value);
-    await deleteCookie(cookieTokenRefName.value);
+    await deleteCookie(cookieTokenName);
+    await deleteCookie(cookieTokenRefName);
     // ยิง logout เข้าระบบ
     await postSaveLog("ออกจากระบบ", token.value);
     window.location.href = `${config.API.URL_SSO}`;
@@ -169,9 +175,17 @@ onMounted(async () => {
   // deleteCookie("BMAHRISADM_KEYCLOAK_IDENTITY");
   // deleteCookie("BMAHRISCKI_KEYCLOAK_IDENTITY");
   // deleteCookie("BMAHRISUSER_KEYCLOAK_IDENTITY");
+  const isLogout = route.query?.logout === "true";
+  if (isLogout) {
+    await deleteCookie(cookieTokenName);
+    await deleteCookie(cookieTokenRefName);
+    // ยิง logout เข้าระบบ
+    await postSaveLog("ออกจากระบบ", token);
+    window.location.href = `${config.API.URL_SSO}`;
+  }
 
-  token.value = await getCookie(cookieTokenName.value);
-  refreshToken.value = await getCookie(cookieTokenRefName.value);
+  token.value = await getCookie(cookieTokenName);
+  refreshToken.value = await getCookie(cookieTokenRefName);
 
   if (!token.value || !refreshToken.value) router.push("/sso");
 
@@ -189,8 +203,8 @@ onMounted(async () => {
     .then(async (res: any) => {
       if (res.status === 200) {
         if (res.data.access_token) {
-          setCookie(cookieTokenName.value, res.data.access_token, 1);
-          setCookie(cookieTokenRefName.value, res.data.refresh_token, 1);
+          setCookie(cookieTokenName, res.data.access_token, 1);
+          setCookie(cookieTokenRefName, res.data.refresh_token, 1);
 
           token.value = await res.data.access_token;
           refreshToken.value = await res.data.refresh_token;
@@ -198,8 +212,8 @@ onMounted(async () => {
           // ยิง log เข้าระบบ
           await postSaveLog("เข้าสู่ระบบ", res.data.access_token);
         } else if (res.data.isLogin) {
-          token.value = await getCookie(cookieTokenName.value);
-          refreshToken.value = await getCookie(cookieTokenRefName.value);
+          token.value = await getCookie(cookieTokenName);
+          refreshToken.value = await getCookie(cookieTokenRefName);
         }
 
         const systemkey = route.query.system as string;
@@ -331,48 +345,6 @@ onMounted(async () => {
       </div>
     </div>
   </div>
-
-  <!-- <div class="q-ma-md">
-    <div class="row">
-      {{ fullname }}
-      <q-btn @click="logout()" class="btn_logout">
-        ออกจากระบบ <i class="mdi mdi-logout"></i>
-      </q-btn>
-    </div>
-    <div class="row">
-      <div class="col-4">
-        <img src="@/assets/screen1.png" style="width: 100%" />
-        <div class="h-100 py-3">
-          <a @click="goPage('user', urlUser)" class="link">
-            ระบบบริการเจ้าของข้อมูล
-          </a>
-        </div>
-      </div>
-
-      <div class="col-4">
-        <img src="@/assets/screen2.png" style="width: 100%" />
-        <div class="h-100 py-3">
-          <a @click="goPage('checkin', urlCheckin)" class="link">
-            ระบบลงเวลาปฏิบัติราชการ
-          </a>
-        </div>
-      </div>
-
-      <div class="col-4">
-        <img src="@/assets/screen3.png" style="width: 100%" />
-        <div class="h-100 py-3">
-          <a @click="goPage('mgt', urlMgt)" class="link"> ระบบบริหารจัดการ </a>
-        </div>
-      </div>
-
-      <div class="col-4">
-        <img src="@/assets/screen4.png" style="width: 100%" />
-        <div class="h-100 py-3">
-          <a @click="goPage('admin', urlAdmin)" class="link"> ระบบแอดมิน </a>
-        </div>
-      </div>
-    </div>
-  </div> -->
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/views/logoutPage.vue b/src/views/logoutPage.vue
new file mode 100644
index 0000000..005b9e9
--- /dev/null
+++ b/src/views/logoutPage.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { onMounted } from "vue";
+
+import config from "@/app.config";
+import {
+  deleteCookie,
+  cookieTokenName,
+  cookieTokenRefName,
+} from "@/plugins/cookie";
+
+onMounted(async () => {
+  try {
+    // Clear cookies related to authentication
+    await Promise.all([
+      deleteCookie(cookieTokenName),
+      deleteCookie(cookieTokenRefName),
+    ]);
+  } catch (error) {
+    console.error("Error during logout:", error);
+  } finally {
+    // Redirect to SSO URL
+    window.location.href = `${config.API.URL_SSO}`;
+  }
+});
+</script>
+<template>
+  <div class="bg-img h-50 fixed-top" style="z-index: -1">
+    <img
+      alt=""
+      src="https://bma-sso.frappet.synology.me/images/line2.png"
+      class="img_absolute_line"
+    />
+  </div>
+  <div class="fullscreen flex flex-center">
+    <q-card bordered class="my-card">
+      <q-card-section>
+        <q-icon name="logout" color="primary" size="56px" />
+        <div class="text-h6 q-mt-md q-mb-xs">กำลังออกจากระบบ...</div>
+        <q-spinner-dots color="primary" size="48px" class="q-mt-sm" />
+      </q-card-section>
+    </q-card>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.my-card {
+  width: 40%;
+  border: 1px solid rgb(255, 255, 255);
+  border-radius: 12px; /* มุมโค้งมน */
+}
+
+.img_absolute_line {
+  position: absolute;
+  height: 100%;
+  width: auto;
+  left: 0;
+  bottom: 0;
+}
+
+.bg-img {
+  background: rgb(30, 50, 49);
+  background: linear-gradient(
+    90deg,
+    rgba(30, 50, 49, 1) 0%,
+    rgba(20, 120, 99, 1) 100%
+  );
+  min-height: 480px;
+}
+</style>