login

src/views/MainLayout.vue

@@ -91,14 +91,22 @@ const fetchlistNotification = async (index: number, type: string) => {
 const doLogout = () => {
   dialogConfirm(
     $q,
-    () => {
-      keycloak.logout();
+    async () => {
+      // keycloak.logout();
+      // authen with keycloak client
+      await deleteCookie("BMAHRIS_KEYCLOAK_IDENTITY");
+      await deleteCookie("BMAHRIS_KEYCLOAK_REFRESH");
+      window.location.href = "/login";
     },
     "ยืนยันการออกจากระบบ",
     "ต้องการออกจากระบบใช่หรือไม่"
   );
 };
 
+function deleteCookie(name: string) {
+  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
+}
+
 const clickDelete = async (id: string, index: number) => {
   dialogRemove($q, async () => {
     // showLoader();

src/views/login.vue

@@ -1,11 +1,75 @@
+<!-- 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>("");
-const holdLogin = ref<boolean>(false);
-function onSubmit() {}
+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">
@@ -102,7 +166,7 @@ function onSubmit() {}
   </div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
 .link {
   text-decoration: none;
   color: #cc0004;
@@ -134,6 +198,7 @@ input[type="radio"] {
 }
 .form-group {
   margin-bottom: 15px;
+  text-align: left;
 }
 #kc-content {
   width: 100%;
@@ -158,7 +223,7 @@ input[type="radio"] {
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  background: url(/src/style/keycloak-bg.png) no-repeat center center fixed;
+  background: url(@/assets/keycloak-bg.png) no-repeat center center fixed;
   background-size: cover;
   height: 100vh;
   font-size: 12px;
@@ -180,8 +245,7 @@ input[type="radio"] {
   object-position: center;
   background-repeat: no-repeat;
   background-size: 100% !important;
-  background: white url(/src/style/keycloak-logo-poc.png) no-repeat center
-    center;
+  background: white url(@/assets/keycloak-logo-poc.png) no-repeat center center;
   margin-bottom: 7%;
 }
 .text-logo {