hrms-bangkok/hrms-mgt
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

remove keycloak use cookie auth

Browse source
This commit is contained in:
Warunee Tamkoo 2024-08-28 15:29:09 +07:00
parent 035db71697
commit 5a5e37c12d
27 changed files with 501 additions and 440 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/main.ts
View file

@ -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");

14
src/modules/00_support/store/Main.ts
View file

@ -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,

13
src/modules/03_recruiting/components/Information.vue
View file

@ -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();

13
src/modules/04_registry/components/Profile.vue
View file

@ -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");

8
src/modules/05_placement/components/Other/Detail.vue
View file

@ -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();
});

7
src/modules/05_placement/components/PersonalList/Detail.vue
View file

@ -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();

7
src/modules/05_placement/components/PersonalList/Table.vue
View file

@ -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 = [

1
src/modules/05_placement/components/Relocation/RelocationbyId.vue
View file

@ -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";

7
src/modules/05_placement/components/Transfer/transferRegistry.vue
View file

@ -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();
});

7
src/modules/06_retirement/components/Discharged/dischargedRegistry.vue
View file

@ -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();
});

13
src/modules/06_retirement/components/DismissOrder/outRegistry.vue
View file

@ -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

1
src/modules/06_retirement/components/ExitInterview/EditQuestion.vue
View file

@ -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";

20
src/modules/06_retirement/components/ExitInterview/exitRegistry.vue
View file

@ -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

8
src/modules/06_retirement/components/Expulsion/expulsionRegistry.vue
View file

@ -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();
});

11
src/modules/06_retirement/components/resign/ResignByid.vue
View file

@ -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) {

20
src/modules/09_leave/components/2_Leave/Calendar.vue
View file

@ -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>

26
src/modules/11_discipline/components/7_ListSuspend/DetailPage.vue
View file

@ -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

451
src/modules/14_KPI/views/mainDetail.vue
View file

@ -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 {

71
src/plugins/auth.ts Normal file
View file

@ -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 };

33
src/plugins/axios.ts
View file

@ -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;

8
src/plugins/http.ts
View file

@ -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")
}

13
src/router/index.ts
View file

@ -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();
}

10
src/stores/mixin.ts
View file

@ -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);

63
src/stores/roleUser.ts
View file

@ -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,
};
});
return {
fetchroleUser,
insignia1Role,
insignia2Role,
caregiverRole,
chairmanRole,
commanderRole,
admin2Role,
adminRole,
};
});

22
src/views/MainLayout.vue
View file

@ -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();

11
src/views/auth.vue
View file

@ -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>

53
src/views/login.vue
View file

@ -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: {