Merge branch 'develop' into devTee

src/main.ts

@@ -3,9 +3,10 @@ import App from "./App.vue";
 import router from "./router";
 import { Dialog, Notify, Quasar, Loading } from "quasar";
 import "./quasar-user-options";
+import keycloak from "@/plugins/keycloak";
 
-import qDraggableTable from 'quasar-ui-q-draggable-table';
-import 'quasar-ui-q-draggable-table/dist/index.css';
+import qDraggableTable from "quasar-ui-q-draggable-table";
+import "quasar-ui-q-draggable-table/dist/index.css";
 
 import "quasar/src/css/index.sass";
 import th from "quasar/lang/th";
@@ -81,4 +82,40 @@ app.component(
 
 app.config.globalProperties.$http = http;
 
+// authen with keycloak client
+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;
+}
+
+const kcToken = getCookie("BMAHRIS_KEYCLOAK_IDENTITY");
+const kcRefreshToken = getCookie("BMAHRIS_KEYCLOAK_REFRESH");
+
+if (kcToken && kcRefreshToken) {
+  keycloak
+    .init({
+      // onLoad: 'login-required',
+      checkLoginIframe: false,
+      token: kcToken,
+      refreshToken: kcRefreshToken,
+    })
+    .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/plugins/http.ts

@@ -10,7 +10,7 @@ const http = Axios.create({
 
 http.interceptors.request.use(
   async function (config: AxiosRequestConfig<any>) {
-    await keycloak.updateToken(1);
+    // await keycloak.updateToken(1);
     config.headers = config.headers ?? {};
     const token = keycloak.token;
     // const token = localStorage.getItem("access_token")

src/plugins/keycloak.ts

@@ -1,23 +1,37 @@
-/**
- * front connect to keycloak
- */
+// /**
+//  * front connect to keycloak
+//  */
+// import Keycloak from "keycloak-js";
+// // import config from "../app.config";
+// // import http from "../shared/http";
+// // import router from "../router";
+
+// const initOptions = {
+//   realm: import.meta.env.VITE_REALM_KEYCLOAK,
+//   clientId: import.meta.env.VITE_CLIENTID_KEYCLOAK,
+//   url: import.meta.env.VITE_URL_KEYCLOAK,
+//   //   realm: "bma-ehr",
+//   //   clientId: "bma-ehr-vue3",
+//   //   url: "https://id.frappet.synology.me/",
+// }; //option keycloak ที่จะ connect
+
+// const keycloak = Keycloak(initOptions);
+
+// keycloak.onAuthSuccess = () => {}; //เพิ่มlogin สำเร็จจะมาทำฟังก์ชันนี้
+
+// await keycloak.init({ onLoad: "check-sso", checkLoginIframe: false }); //ทำการ connect keycloak
+// export default keycloak;
+
+// authen with keycloak client
 import Keycloak from "keycloak-js";
-// import config from "../app.config";
-// import http from "../shared/http";
-// import router from "../router";
 
-const initOptions = {
-  realm: import.meta.env.VITE_REALM_KEYCLOAK,
-  clientId: import.meta.env.VITE_CLIENTID_KEYCLOAK,
-  url: import.meta.env.VITE_URL_KEYCLOAK,
-  //   realm: "bma-ehr",
-  //   clientId: "bma-ehr-vue3",
-  //   url: "https://id.frappet.synology.me/",
-}; //option keycloak ที่จะ connect
+const keycloakConfig = {
+  url: "https://id.frappet.synology.me",
+  realm: "bma-ehr",
+  clientId: "gettoken",
+  clientSecret: "qsFwDb5anVoXKKwoeivrByIn9VYWQNRn",
+};
 
-const keycloak = Keycloak(initOptions);
-
-keycloak.onAuthSuccess = () => {}; //เพิ่มlogin สำเร็จจะมาทำฟังก์ชันนี้
-
-await keycloak.init({ onLoad: "check-sso", checkLoginIframe: false }); //ทำการ connect keycloak
+const keycloak = new Keycloak(keycloakConfig);
 export default keycloak;
+export { keycloakConfig };

src/router/index.ts

@@ -3,6 +3,7 @@ import { createRouter, createWebHistory } from "vue-router";
 const MainLayout = () => import("@/views/MainLayout.vue");
 const Dashboard = () => import("@/views/Dashboard.vue");
 const Error404NotFound = () => import("@/views/Error404NotFound.vue");
+const loginView = () => import("@/views/login.vue");
 
 import ModuleMetadata from "@/modules/01_metadata/router";
 import ModuleMetadataNew from "@/modules/01_metadataNew/router";
@@ -79,6 +80,17 @@ const router = createRouter({
       path: "/:pathMatch(.*)*",
       component: Error404NotFound,
     },
+
+    // authen with keycloak client
+    {
+      path: "/login",
+      name: "loginMain",
+      component: loginView,
+      meta: {
+        Auth: false,
+        Key: [7],
+      },
+    },
   ],
 
   scrollBehavior(to, from, savedPosition) {
@@ -93,31 +105,16 @@ const router = createRouter({
   },
 });
 
+// authen with keycloak client
 router.beforeEach((to, from, next) => {
   if (to.meta.Auth) {
-    if (!keycloak.authenticated) {
-      keycloak.login({
-        redirectUri: `${window.location.protocol}//${window.location.host}${to.path}`,
-        locale: "th",
-      });
-    } else {
-      //   keycloak.updateToken(60);
-      const role = keycloak.tokenParsed?.role;
-
-      // ถ้าเป็นคนกรอกข้อมูล
-      if (role.includes("keyregistry") && to.meta.Role != "registry") {
-        next({ path: "/registry" });
-      } else if (role.includes(to.meta.Role)) {
-        next();
-      } else {
-        next({ path: "" });
-        // next();
-      }
+    if (keycloak.authenticated === undefined && to.meta.Auth) {
+      window.location.href = "/login";
     }
   } else {
     next();
   }
-  //   next();
+  next();
 });
 
 export default router;

src/views/MainLayout.vue

@@ -409,12 +409,21 @@ const tagClickPlacement = (tag: string) => {
 const doLogout = () => {
   dialogConfirm(
     $q,
-    () => keycloak.logout(),
+    async () => {
+      await deleteCookie("BMAHRIS_KEYCLOAK_IDENTITY");
+      await deleteCookie("BMAHRIS_KEYCLOAK_REFRESH");
+      window.location.href = "/login";
+    },
+    //  keycloak.logout(),
     "ยืนยันการออกจากระบบ",
     "ต้องการออกจากระบบใช่หรือไม่?"
   );
 };
 
+function deleteCookie(name: string) {
+  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
+}
+
 /**
  * ดิงชื่อผู้ใช้งานจาก keycloak
  */

src/views/login.vue

@@ -0,0 +1,327 @@
+<!-- authen with keycloak client -->
+<script setup lang="ts">
+import { ref } from 'vue'
+import axios from 'axios'
+import { keycloakConfig } from '@/plugins/keycloak'
+import { useRouter } from 'vue-router'
+import { useQuasar } from 'quasar'
+import { useCounterMixin } from '@/stores/mixin'
+
+const router = useRouter()
+const mixin = useCounterMixin()
+const $q = useQuasar() //ใช้ noti quasar
+
+const { showLoader, hideLoader, messageError } = mixin
+
+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=/'
+}
+
+const username = ref<string>('')
+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',
+        },
+      }
+    )
+    .then(async (res) => {
+      await setCookie('BMAHRIS_KEYCLOAK_IDENTITY', res.data.access_token, 1)
+      await setCookie('BMAHRIS_KEYCLOAK_REFRESH', res.data.refresh_token, 1)
+      window.location.href = '/'
+    })
+    .catch((err) => {
+      messageError($q, err, 'ชื่อผู้ใช้หรือรหัสผ่านไม่ถูกต้อง')
+    })
+    .finally(() => {
+      hideLoader()
+    })
+
+  // if (response.status !== 200) {
+  //   messageError($q, err)
+  // } else {
+  //   await setCookie('BMAHRIS_KEYCLOAK_IDENTITY', response.data.access_token, 1)
+  //   await setCookie('BMAHRIS_KEYCLOAK_REFRESH', response.data.refresh_token, 1)
+  //   router.push('/')
+  // }
+}
+</script>
+
+<template>
+  <div class="bg-image">
+    <div class="login-pf-page">
+      <div id="kc-logo">
+        <div id="myimage"></div>
+        <div class="text-logo">
+          ระบบ<span style="color: #02a998">บริหารทรัพยากรบุคคล</span>
+        </div>
+        <div class="subtext-logo">ของกรุงเทพมหานคร</div>
+      </div>
+
+      <div class="card-pf">
+        <div class="login-pf-header">
+          <h1 id="kc-page-title">เข้าใช้งานระบบ</h1>
+        </div>
+        <q-form
+          greedy
+          @submit.prevent
+          @validation-success="onSubmit"
+          style="max-width: 100%; min-width: 30%"
+        >
+          <div class="row">
+            <div class="col-12 form-group">
+              <label
+                for="username"
+                class="pf-c-form__label pf-c-form__label-text"
+                >ชื่อผู้ใช้งาน</label
+              >
+              <q-input
+                v-model="username"
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อผู้ใช้งาน'}`,]"
+              ></q-input>
+            </div>
+            <div class="col-12 form-group">
+              <label
+                for="username"
+                class="pf-c-form__label pf-c-form__label-text"
+                >รหัสผ่าน</label
+              >
+              <q-input
+                v-model="password"
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                type="password"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกรหัสผ่าน'}`,]"
+              ></q-input>
+            </div>
+            <div class="col-12 form-group">
+              <div class="row justify-between">
+                <div id="kc-form-options">
+                  <div class="row items-center">
+                    <input
+                      tabindex="3"
+                      id="rememberMe"
+                      name="rememberMe"
+                      type="checkbox"
+                    />
+                    <label class=""> ล็อคอินค้างไว้ </label>
+                  </div>
+                </div>
+                <div>
+                  <span
+                    ><a
+                      tabindex="5"
+                      href="/realms/bma-ehr/login-actions/reset-credentials?client_id=bma-ehr-vue3&amp;tab_id=gg77yQ7AeAI"
+                      class="link"
+                      >ลืมรหัสผ่าน</a
+                    ></span
+                  >
+                </div>
+              </div>
+            </div>
+            <div class="col-12">
+              <q-btn
+                unelevated
+                color="teal-5"
+                class="full-width"
+                label="เข้าระบบ"
+                style="font-size: 16px; border-radius: 8px"
+                type="submit"
+              >
+              </q-btn>
+            </div>
+          </div>
+        </q-form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.link {
+  text-decoration: none;
+  color: #cc0004;
+}
+
+.link:hover {
+  color: #ff0004;
+  text-decoration: underline;
+}
+.checkbox,
+.radio {
+  position: relative;
+  display: block;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+
+input[type='checkbox'],
+input[type='radio'] {
+  margin: 1px 3px 0 0;
+  line-height: normal;
+}
+.checkbox label,
+.radio label {
+  min-height: 20px;
+  margin-bottom: 0;
+  font-weight: 400;
+  cursor: pointer;
+}
+.form-group {
+  margin-bottom: 15px;
+  text-align: left;
+}
+#kc-content {
+  width: 100%;
+}
+#kc-content-wrapper {
+  margin-top: 20px;
+}
+#kc-form-options .checkbox {
+  margin-top: 0;
+  color: #72767b;
+}
+#kc-logo {
+  max-width: 25vw;
+  position: absolute;
+  margin-left: 5%;
+  /* margin-top: 5%; */
+  z-index: 1 !important;
+}
+.bg-image {
+  font-family: 'Noto Sans Thai', sans-serif;
+  font-family: 'Noto Sans Thai', sans-serif;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: url(@/assets/keycloak-bg.png) no-repeat center center fixed;
+  background-size: cover;
+  height: 100vh;
+  font-size: 12px;
+  line-height: 1.66666667;
+  color: #363636;
+}
+
+.login-pf-page {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding-top: 0px;
+}
+
+#myimage {
+  width: 70px;
+  height: 70px;
+  border-radius: 50%;
+  object-position: center;
+  background-repeat: no-repeat;
+  background-size: 100% !important;
+  background: white url(@/assets/keycloak-logo-poc.png) no-repeat center center;
+  margin-bottom: 7%;
+}
+.text-logo {
+  color: white;
+  font-weight: 800;
+  font-size: 1.6rem;
+}
+
+.subtext-logo {
+  color: white;
+  font-weight: 200;
+  font-size: 1.4rem;
+}
+
+.card-pf {
+  margin: 0 auto;
+  box-shadow: 0 1px 1px rgba(3, 3, 3, 0.175);
+  padding: 20px;
+  max-width: 400px;
+  min-width: 30%;
+  /* border-top: 4px solid; */
+  position: relative;
+  z-index: 10 !important;
+  border-radius: 10px;
+  /* border-color: var(--pf-global--primary-color--100); */
+  background: #fff;
+  border-top: 2px solid transparent;
+}
+
+.login-pf-page .login-pf-header {
+  margin-bottom: 20px;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.login-pf-page .login-pf-header h1 {
+  flex-wrap: wrap;
+  display: flex;
+  justify-content: start;
+}
+
+h1#kc-page-title {
+  margin-top: 10px;
+  font-weight: 800;
+  font-size: 1.3rem;
+  line-height: 1.1;
+}
+
+.login-pf-page .login-pf-header h1 {
+  font-size: 16px;
+}
+.login-pf-page .login-pf-header h1 {
+  text-align: center;
+}
+@media (max-width: 767px) {
+  #kc-logo {
+    display: none;
+  }
+  .login-pf-page .login-pf-header {
+    margin-bottom: 20px;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+@media (min-width: 768px) {
+  .login-pf-page .login-pf-header {
+    margin-bottom: 10px;
+  }
+  .login-pf-page .login-pf-header h1 {
+    font-size: 24px;
+  }
+  .login-pf-page .card-pf {
+    padding: 20px 40px 30px 40px;
+  }
+}
+</style>