Skip to content

dtd / civitas.ui

Go to a project
Commit 704d29ca by Samuel Taniel Mulyadi
Options

done token

1 parent a364264c
Expand all
Inline Side-by-side
Showing with 622 additions and 482 deletions
components/beranda/UserJadwal.vue
...@@ -14,19 +14,16 @@ const currentTime = ref(new Date()) ...@@ -14,19 +14,16 @@ const currentTime = ref(new Date())
// Function to check if the current time is within a schedule item range // Function to check if the current time is within a schedule item range
const { api } = useCivitasApi()
async function getData() { async function getData() {
loading.value = true loading.value = true
schedule.value = [] schedule.value = []
try { try {
const response = await fetch('https://api.ui.ac.id/my/ac', { const { response, error } = await api.user.getRiwayatAkademik()
headers: { Authorization: `Bearer ${keycloakStore.accessToken}` },
})
if (!response.ok)
throw new Error(`Error: ${response.statusText}`)
const data = await response.json() const data = response.value?.value // ✅ UNWRAP the inner ref
if (keycloakStore.civitas === 'mahasiswa') { if (keycloakStore.civitas === 'mahasiswa') {
// Get the latest semester // Get the latest semester
......
components/beranda/UserLib.vue
<script setup lang="ts"> <script setup lang="ts">
import { useKeycloakStore } from "@/@core/stores/keycloakStore"; import { computed, onMounted, ref } from 'vue'
import { ref, computed, onMounted } from "vue"; import { useKeycloakStore } from '@/@core/stores/keycloakStore'
// Store Keycloak // Store Keycloak
const keycloakStore = useKeycloakStore(); const keycloakStore = useKeycloakStore()
// Data dan state // Data dan state
const items = ref<any[]>([]); const items = ref<any[]>([])
const loading = ref(false); const loading = ref(false)
const searchQuery = ref(""); const searchQuery = ref('')
// Header tabel // Header tabel
const logHeaders = [ const logHeaders = [
{ title: "KOLEKSI", key: "koleksi" }, { title: 'KOLEKSI', key: 'koleksi' },
{ title: "TANGGAL PEMINJAMAN", key: "tglpinjam" }, { title: 'TANGGAL PEMINJAMAN', key: 'tglpinjam' },
{ title: "TANGGAL PENGEMBALIAN", key: "tglkembali" }, { title: 'TANGGAL PENGEMBALIAN', key: 'tglkembali' },
{ title: "DIPINJAM", key: "dipinjam" }, { title: 'DIPINJAM', key: 'dipinjam' },
{ title: "PERPANJANGAN", key: "perpanjangan" }, { title: 'PERPANJANGAN', key: 'perpanjangan' },
{ title: "DENDA", key: "denda" }, { title: 'DENDA', key: 'denda' },
{ title: "DENDA TOTAL", key: "dendatotal" }, { title: 'DENDA TOTAL', key: 'dendatotal' },
]; ]
const { api } = useCivitasApi()
// Fungsi ambil data // Fungsi ambil data
async function getData() { async function getData() {
loading.value = true; loading.value = true
try { try {
const apiEndpoint = "https://api.ui.ac.id/my/lib"; const { response, error } = await api.user.getLib()
const response = await fetch(apiEndpoint, { const dataku = response.value?.value // ✅ UNWRAP the inner ref
headers: {
Authorization: `Bearer ${keycloakStore.accessToken}`,
},
});
if (!response.ok) throw new Error("Gagal mengambil data");
const dataku = await response.json();
// dataku adalah array, tiap elemen punya properti root-level // dataku adalah array, tiap elemen punya properti root-level
const requiredKeys = [ const requiredKeys = [
"denda", 'denda',
"dendatotal", 'dendatotal',
"dipinjam", 'dipinjam',
"koleksi", 'koleksi',
"perpanjangan", 'perpanjangan',
"tglkembali", 'tglkembali',
"tglpinjam", 'tglpinjam',
"username", 'username',
]; ]
// ambil hanya objek yang memiliki semua key di root // ambil hanya objek yang memiliki semua key di root
items.value = Array.isArray(dataku) items.value = Array.isArray(dataku)
? dataku.filter((r: any) => requiredKeys.every(k => k in r)) ? dataku.filter((r: any) => requiredKeys.every(k => k in r))
: []; : []
} catch (err) { }
console.error("Gagal mengambil data:", err); catch (err) {
} finally { console.error('Gagal mengambil data:', err)
loading.value = false; }
finally {
loading.value = false
} }
} }
// Panggil saat komponen mount // Panggil saat komponen mount
onMounted(() => { onMounted(() => {
getData(); getData()
}); })
// Filter hasil pencarian // Filter hasil pencarian
const filteredItems = computed(() => { const filteredItems = computed(() => {
if (!searchQuery.value) return items.value; if (!searchQuery.value)
const q = searchQuery.value.toLowerCase(); return items.value
const q = searchQuery.value.toLowerCase()
return items.value.filter(item => return items.value.filter(item =>
logHeaders.some( logHeaders.some(
h => item[h.key] && String(item[h.key]).toLowerCase().includes(q) h => item[h.key] && String(item[h.key]).toLowerCase().includes(q),
) ),
); )
}); })
</script> </script>
<template> <template>
<AppCardActions <AppCardActions
:title="`Status Peminjaman Buku`" title="Status Peminjaman Buku"
class="jadwalShift" class="jadwalShift"
action-collapsed action-collapsed
action-remove action-remove
...@@ -104,9 +104,7 @@ const filteredItems = computed(() => { ...@@ -104,9 +104,7 @@ const filteredItems = computed(() => {
item-value="tglpinjam" item-value="tglpinjam"
:sort-by="['tglpinjam']" :sort-by="['tglpinjam']"
:sort-asc="[true]" :sort-asc="[true]"
></VDataTable> />
</AppCardActions> </AppCardActions>
</template> </template>
...@@ -153,4 +151,4 @@ const filteredItems = computed(() => { ...@@ -153,4 +151,4 @@ const filteredItems = computed(() => {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
} }
</style> </style>
\ No newline at end of file
components/beranda/UserLog.vue
<script lang="ts" setup> <script lang="ts" setup>
import { useKeycloakStore } from "@core/stores/keycloakStore"; import { useKeycloakStore } from '@core/stores/keycloakStore'
const keycloakStore = useKeycloakStore(); const keycloakStore = useKeycloakStore()
const isAuthenticated = computed(() => keycloakStore.authenticated); const isAuthenticated = computed(() => keycloakStore.authenticated)
interface ShiftData { interface ShiftData {
shift_date: string; shift_date: string
shift_start: string; shift_start: string
shift_end: string; shift_end: string
shift: string; shift: string
start_time?: string; start_time?: string
end_time?: string; end_time?: string
} }
const shifts = ref<ShiftData[]>([]); const shifts = ref<ShiftData[]>([])
const loading = ref(false); const loading = ref(false)
const error = ref(""); const error = ref('')
const searchQuery = ref(""); const searchQuery = ref('')
const headersShift = [ const headersShift = [
{ title: "Tanggal", key: "shift_date", sortable: true }, { title: 'Tanggal', key: 'shift_date', sortable: true },
{ title: "Nama Hari", key: "day_name", sortable: false }, { title: 'Nama Hari', key: 'day_name', sortable: false },
{ title: "Shift", key: "shift", sortable: false }, { title: 'Shift', key: 'shift', sortable: false },
{ title: "Jadwal Shift", key: "shift_schedule", sortable: false }, { title: 'Jadwal Shift', key: 'shift_schedule', sortable: false },
{ title: "Mulai Aktual", key: "start_time", sortable: false }, { title: 'Mulai Aktual', key: 'start_time', sortable: false },
{ title: "Selesai Aktual", key: "end_time", sortable: false }, { title: 'Selesai Aktual', key: 'end_time', sortable: false },
{ title: "Status", key: "status", sortable: false }, { title: 'Status', key: 'status', sortable: false },
]; ]
const { api } = useCivitasApi()
async function fetchShiftData() { async function fetchShiftData() {
loading.value = true; loading.value = true
error.value = ""; error.value = ''
try { try {
const apiEndpoint = `https://api.ui.ac.id/my/hr/attendance`; // const apiEndpoint = `https://api.ui.ac.id/my/hr/attendance`;
const response = await fetch(apiEndpoint, { // const response = await fetch(apiEndpoint, {
headers: { // headers: {
Authorization: `Bearer ${keycloakStore.accessToken}`, // Authorization: `Bearer ${keycloakStore.accessToken}`,
}, // },
}); // });
if (!response.ok) { // if (!response.ok) {
throw new Error("Gagal fetch data"); // throw new Error("Gagal fetch data");
} // }
const data = await response.json(); const { response, error } = await api.user.getAttendance()
const data = response.value?.value // ✅ UNWRAP the inner ref
shifts.value = data shifts.value = data
.map((item: any) => ({ .map((item: any) => ({
...item, ...item,
shift_start: `${item.shift_date} ${item.shift_start || "00:00"}`, shift_start: `${item.shift_date} ${item.shift_start || '00:00'}`,
shift_end: `${item.shift_date} ${item.shift_end || "00:00"}`, shift_end: `${item.shift_date} ${item.shift_end || '00:00'}`,
})) }))
.sort((a, b) => new Date(b.shift_date).getTime() - new Date(a.shift_date).getTime()); .sort((a, b) => new Date(b.shift_date).getTime() - new Date(a.shift_date).getTime())
} catch (err: any) { }
error.value = err.message || "Terjadi kesalahan saat mengambil data"; catch (err: any) {
} finally { error.value = err.message || 'Terjadi kesalahan saat mengambil data'
loading.value = false; }
finally {
loading.value = false
} }
} }
function getDayName(date: string) { function getDayName(date: string) {
const days = ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"]; const days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu']
const dayIndex = new Date(date).getDay(); const dayIndex = new Date(date).getDay()
return days[dayIndex];
return days[dayIndex]
} }
const resolveDayColor = (day: string) => { const resolveDayColor = (day: string) => {
if (day === "Sabtu" || day === "Minggu") return "error"; if (day === 'Sabtu' || day === 'Minggu')
}; return 'error'
}
function getHour(time: string | undefined) { function getHour(time: string | undefined) {
if (!time) return "-"; if (!time)
const parts = time.split(" "); return '-'
return parts.length === 2 ? parts[1] : time; const parts = time.split(' ')
return parts.length === 2 ? parts[1] : time
} }
function getStatus(start: string | undefined, end: string | undefined) { function getStatus(start: string | undefined, end: string | undefined) {
if (!start && !end) return "Tidak Ada"; if (!start && !end)
if (!start || !end) return "Belum Hitung"; return 'Tidak Ada'
return "On Time"; if (!start || !end)
return 'Belum Hitung'
return 'On Time'
} }
const resolveStatusColor = (status: string) => { const resolveStatusColor = (status: string) => {
if (status === "On Time") return "success"; if (status === 'On Time')
if (status === "Belum Hitung") return "primary"; return 'success'
if (status === "Tidak Ada") return "error"; if (status === 'Belum Hitung')
}; return 'primary'
if (status === 'Tidak Ada')
return 'error'
}
const filteredShifts = computed(() => { const filteredShifts = computed(() => {
if (!searchQuery.value) return shifts.value; if (!searchQuery.value)
return shifts.value
return shifts.value.filter((shift) => { return shifts.value.filter(shift => {
const dayName = getDayName(shift.shift_date); const dayName = getDayName(shift.shift_date)
const status = getStatus(shift.start_time, shift.end_time); const status = getStatus(shift.start_time, shift.end_time)
return ( return (
shift.shift_date.toLowerCase().includes(searchQuery.value.toLowerCase()) || shift.shift_date.toLowerCase().includes(searchQuery.value.toLowerCase())
dayName.toLowerCase().includes(searchQuery.value.toLowerCase()) || || dayName.toLowerCase().includes(searchQuery.value.toLowerCase())
shift.shift.toLowerCase().includes(searchQuery.value.toLowerCase()) || || shift.shift.toLowerCase().includes(searchQuery.value.toLowerCase())
shift.start_time?.toLowerCase().includes(searchQuery.value.toLowerCase()) || || shift.start_time?.toLowerCase().includes(searchQuery.value.toLowerCase())
shift.end_time?.toLowerCase().includes(searchQuery.value.toLowerCase()) || || shift.end_time?.toLowerCase().includes(searchQuery.value.toLowerCase())
status.toLowerCase().includes(searchQuery.value.toLowerCase()) || status.toLowerCase().includes(searchQuery.value.toLowerCase())
); )
}); })
}); })
onMounted(() => { onMounted(() => {
fetchShiftData(); fetchShiftData()
}); })
</script> </script>
<template> <template>
<AppCardActions <AppCardActions
:title="`Log Absen`" title="Log Absen"
class="jadwalShift" class="jadwalShift"
action-collapsed action-collapsed
action-remove action-remove
......
components/beranda/UserRiwayat.vue
...@@ -38,6 +38,7 @@ function resolveStatusColor(status: string) { ...@@ -38,6 +38,7 @@ function resolveStatusColor(status: string) {
default: return 'default' default: return 'default'
} }
} }
const { api } = useCivitasApi()
async function getData() { async function getData() {
loading.value = true loading.value = true
...@@ -45,15 +46,8 @@ async function getData() { ...@@ -45,15 +46,8 @@ async function getData() {
items.value = [] items.value = []
try { try {
const res = await fetch('https://api.ui.ac.id/my/ac', { const { response, error } = await api.user.getRiwayatAkademik()
headers: { const raw = response.value?.value // ✅ UNWRAP the inner ref
Authorization: `Bearer ${keycloakStore.accessToken}`,
},
})
if (!res.ok)
throw new Error('Gagal mengambil data')
const raw = await res.json()
items.value = raw.map((item: any, idx: number) => { items.value = raw.map((item: any, idx: number) => {
const expandedFiltered = Object.values(item.IRS || {}) const expandedFiltered = Object.values(item.IRS || {})
......
composables/useApi.ts
import { defu } from 'defu' import type { Ref } from 'vue'
import type { UseFetchOptions } from 'nuxt/app' import { useKeycloakStore } from '@/@core/stores/keycloakStore'
import { useAuthFetch } from '@/composables/useAuthFetch'
import keycloakInstance from '@/keycloak'
export const useApi: typeof useFetch = <T>(url: MaybeRefOrGetter<string>, options: UseFetchOptions<T> = {}) => { const BASE_URL = 'https://api.ui.ac.id'
const config = useRuntimeConfig() const keycloakStore = useKeycloakStore()
const accessToken = useCookie('accessToken')
const defaults: UseFetchOptions<T> = { // --- Interface Definitions ---
baseURL: config.public.apiBaseUrl,
key: toValue(url), interface PasswordPayload {
headers: accessToken.value ? { Authorization: `Bearer ${accessToken.value}` } : {}, oldPassword: string
} newPassword: string
}
// for nice deep defaults, please use unjs/defu interface ApiErrorDetail {
const params = defu(options, defaults) message: string
details?: any
}
return useFetch(url, params) interface ApiErrorResponse {
success: false
code: number
error: ApiErrorDetail
message?: string
} }
// import { defu } from 'defu' export function useCivitasApi() {
// import { destr } from 'destr' const loading = ref(false)
// import type { UseFetchOptions } from 'nuxt/app' const error: Ref<string | null> = ref(null)
const errorResponse: Ref<ApiErrorResponse | null> = ref(null)
// export const useApi = <T>(url: MaybeRefOrGetter<string>, options: UseFetchOptions<T> = {}) => {
// const config = useRuntimeConfig() const fetchWithAuth = async <T = any>(
// const accessToken = useCookie('accessToken') endpoint: string,
options: Record<string, any> = {},
// const defaults: UseFetchOptions<T> = { ) => {
// baseURL: config.public.apiBaseUrl || '/api', loading.value = true
// key: toValue(url), error.value = null
// headers: { errorResponse.value = null
// Accept: 'application/json',
// ...(accessToken.value ? { Authorization: `Bearer ${accessToken.value}` } : {}), const url = `${BASE_URL}${
// }, endpoint.startsWith('/') ? endpoint : `/${endpoint}`
// onResponse({ response }) { }`
// // Parse response with destr (like Vite version)
// try { const responseData: Ref<T | null> = ref(null)
// response._data = destr(response._data) const errorRef: Ref<any | null> = ref(null)
// }
// catch (error) { const currentTime = Math.floor(Date.now() / 1000) // Current time in seconds
// console.error('Failed to parse response:', error) const tokenExp = keycloakInstance.tokenParsed?.exp ?? 0 // Token expiration time in seconds
// }
// }, const timeRemaining = tokenExp - currentTime // Time remaining in seconds
// onRequest({ options }) {
// // Similar to `beforeFetch` if (timeRemaining < 5) {
// if (accessToken.value) { console.log('Token hampir expired, mencoba refresh...')
// options.headers = { await keycloakStore.updateToken() // Refresh the token if it's about to expire
// ...options.headers, }
// Authorization: `Bearer ${accessToken.value}`,
// } try {
// } const { data, error: fetchError } = await useAuthFetch<
// }, T | ApiErrorResponse
// } >(url, options)
// // Merge user options with defaults responseData.value = data as Ref<T | null>
// const params = defu(options, defaults) errorRef.value = fetchError
// return useFetch<T>(url, params) // so up until this is work
// }
if (fetchError.value) {
const errorData = fetchError.value.data as ApiErrorResponse
errorResponse.value = errorData
if (errorData?.error?.message) {
error.value = errorData.error.message
}
else if (errorData?.message) {
error.value = errorData.message
}
else {
error.value
= fetchError.value.message || 'An error occurred during fetch'
}
console.error('API call error details:', fetchError.value)
}
}
catch (err: any) {
error.value
= err.message || 'An unexpected network or setup error occurred'
console.error('API call exception:', err)
errorResponse.value = {
success: false,
code: 0,
error: { message: error.value || 'Unknown error' },
}
errorRef.value = { message: error.value }
}
finally {
loading.value = false
}
return {
response: responseData,
error: errorRef,
fetchError: error,
errorResponse,
}
}
// Grouped API endpoints
const api = {
staf: {
getStafData: (stafNIP: number) =>
fetchWithAuth(`/staf/${stafNIP}`),
},
dosen: {
getListDosen: () =>
fetchWithAuth('/listdosen'),
},
user: {
getRiwayatAkademik: () => fetchWithAuth('/my/ac'),
getProfile: () => fetchWithAuth('/me'),
getParkirAktif: () => fetchWithAuth('/my/parkir/aktif'),
getAttendance: () => fetchWithAuth('/my/hr/attendance'),
getLib: () => fetchWithAuth('/my/lib'),
changePassword: (payload: PasswordPayload) =>
fetchWithAuth('/my/pw', {
method: 'POST',
body: JSON.stringify(payload),
headers: {
'Content-Type': 'application/json',
},
}),
// getPublicPhoto: (kodeIdentitas: number) =>
// fetchWithAuth(`/public/photo/${kodeIdentitas}.jpg`),
},
}
return {
api,
loading,
error,
errorResponse,
}
}
composables/useAuthFetch.ts
import { useKeycloakStore } from '@/@core/stores/keycloakStore' import { useKeycloakStore } from '@/@core/stores/keycloakStore'
export async function useAuthFetch<T>(url: string, options?: RequestInit): Promise<T> { import { useFetch } from '#app'
const keycloakStore = useKeycloakStore()
// Ensure token is valid before making the request export function useAuthFetch<T>(url: string, options?: any) {
if (keycloakStore.isTokenExpired) { const keycloakStore = useKeycloakStore()
console.log('Token hampir expired, mencoba refresh...')
await keycloakStore.updateToken()
}
const response = await fetch(url, { return useFetch<T>(url, {
...options, ...options,
headers: { headers: {
...(options?.headers || {}), ...(options?.headers || {}),
'Authorization': `Bearer ${keycloakStore.accessToken}`, Authorization: `Bearer ${keycloakStore.accessToken}`,
'Content-Type': 'application/json',
}, },
}) async beforeRequest({ options }: { options: any }) {
// Cek apakah token hampir expired (less than 5 seconds remaining)
const currentTime = Math.floor(Date.now() / 1000) // Current time in seconds
const tokenExp = keycloakStore.keycloakInstance.tokenParsed?.exp ?? 0 // Token expiration time in seconds
if (!response.ok) const timeRemaining = tokenExp - currentTime // Time remaining in seconds
throw new Error(`HTTP error! Status: ${response.status}`)
return response.json() as Promise<T> if (timeRemaining < 5) {
console.log('Token hampir expired, mencoba refresh...')
await keycloakStore.updateToken() // Refresh the token if it's about to expire
}
// Set ulang Authorization header setelah refresh token
options.headers = {
...options.headers,
Authorization: `Bearer ${keycloakStore.accessToken}`,
}
},
})
} }
layouts/components/NavbarTokenExpiredTime.vue
...@@ -7,15 +7,10 @@ const keycloakStore = useKeycloakStore() ...@@ -7,15 +7,10 @@ const keycloakStore = useKeycloakStore()
const authenticated = computed(() => keycloakStore.authenticated) const authenticated = computed(() => keycloakStore.authenticated)
const now = ref(Math.floor(Date.now() / 1000)) const now = ref(Math.floor(Date.now() / 1000))
const tokenLifetime = ref(0)
let timer: ReturnType<typeof setInterval> let timer: ReturnType<typeof setInterval>
onMounted(() => { onMounted(() => {
// Set tokenLifetime only once
if (keycloakInstance.tokenParsed?.exp && keycloakInstance.tokenParsed?.iat)
tokenLifetime.value = keycloakInstance.refreshTokenParsed.exp - keycloakInstance.refreshTokenParsed.iat
timer = setInterval(() => { timer = setInterval(() => {
now.value = Math.floor(Date.now() / 1000) now.value = Math.floor(Date.now() / 1000)
}, 1000) }, 1000)
...@@ -27,11 +22,17 @@ onUnmounted(() => { ...@@ -27,11 +22,17 @@ onUnmounted(() => {
const computedExpIn = computed(() => { const computedExpIn = computed(() => {
return authenticated.value && keycloakInstance.refreshTokenParsed?.exp return authenticated.value && keycloakInstance.refreshTokenParsed?.exp
? Math.max(keycloakInstance.refreshTokenParsed.exp - now.value, 0) ? keycloakInstance.refreshTokenParsed.exp - now.value
: 0 : null
}) })
const formattedExpIn = computed(() => { const formattedExpIn = computed(() => {
if (computedExpIn.value === null)
return '--:--'
if (computedExpIn.value < 0)
return 'Expired'
const minutes = Math.floor(computedExpIn.value / 60) const minutes = Math.floor(computedExpIn.value / 60)
const seconds = computedExpIn.value % 60 const seconds = computedExpIn.value % 60
......
nuxt.config.ts
...@@ -88,6 +88,7 @@ export default defineNuxtConfig({ ...@@ -88,6 +88,7 @@ export default defineNuxtConfig({
'@themeConfig': ['../themeConfig.ts'], '@themeConfig': ['../themeConfig.ts'],
'@layouts/*': ['../@layouts/*'], '@layouts/*': ['../@layouts/*'],
'@layouts': ['../@layouts'], '@layouts': ['../@layouts'],
'@composables': ['../@composables'],
'@core/*': ['../@core/*'], '@core/*': ['../@core/*'],
'@core': ['../@core'], '@core': ['../@core'],
'@images/*': ['../assets/images/*'], '@images/*': ['../assets/images/*'],
......
pages/login-v4.vue
...@@ -98,16 +98,16 @@ const onSubmit = () => { ...@@ -98,16 +98,16 @@ const onSubmit = () => {
} }
// Watch perubahan accessToken, panggil ulang useAuthFetch // Watch perubahan accessToken, panggil ulang useAuthFetch
watchEffect(async () => { // watchEffect(async () => {
if (!keycloakStore.accessToken) // if (!keycloakStore.accessToken)
return // Hindari fetch jika token masih kosong // return // Hindari fetch jika token masih kosong
console.log('Fetching data dengan token baru...') // console.log('Fetching data dengan token baru...')
const { data: newData, error: newError } = await useAuthFetch('https://api.ui.ac.id/my/ac/st') // const { data: newData, error: newError } = await useAuthFetch('https://api.ui.ac.id/my/ac/st')
data.value = newData.value || null // data.value = newData.value || null
error.value = newError.value || null // error.value = newError.value || null
}) // })
</script> </script>
<template> <template>
......
pages/login-v5.vue
<script setup lang="ts"> <script setup lang="ts">
import { useKeycloakStore } from '@/@core/stores/keycloakStore' import { useKeycloakStore } from '@/@core/stores/keycloakStore'
import AuthProvider from '@/views/pages/authentication/AuthProvider.vue' import AuthProvider from '@/views/dstipro/beranda/authentication/AuthProvider.vue'
import authLoginBg from '/assets/images/naput/bg-blue-yellow.png' import authLoginBg from '/assets/images/naput/bg-blue-yellow.png'
import authLoginLogo from '/assets/images/naput/illust-login.png' import authLoginLogo from '/assets/images/naput/illust-login.png'
......
pages/login-v6.vue
<script setup lang="ts"> <script setup lang="ts">
import type { VForm } from 'vuetify/components/VForm'
import { VForm } from 'vuetify/components/VForm'
import authV2MaskDark from '@images/pages/mask-v2-dark.png' import authV2MaskDark from '@images/pages/mask-v2-dark.png'
import authV2MaskLight from '@images/pages/mask-v2-light.png' import authV2MaskLight from '@images/pages/mask-v2-light.png'
import { useKeycloakStore } from "@/@core/stores/keycloakStore" import { useKeycloakStore } from '@/@core/stores/keycloakStore'
import AuthProvider from '@/views/pages/authentication/AuthProvider.vue' import AuthProvider from '@/views/dstipro/beranda/authentication/AuthProvider.vue'
import authLoginLogo from "/assets/images/naput/illust-login.png" import authLoginLogo from '/assets/images/naput/illust-login.png'
import authLoginBg from "/assets/images/naput/rektorat-bg.png" import authLoginBg from '/assets/images/naput/rektorat-bg.png'
const authThemeImg = authLoginLogo
const authThemeImg = authLoginLogo; const authThemeBg = authLoginBg
const authThemeBg = authLoginBg; const keycloakStore = useKeycloakStore()
const data = ref<Record<string, any> | null>(null)
const keycloakStore = useKeycloakStore(); const error = ref<Record<string, any> | null>(null)
const data = ref<Record<string, any> | null>(null);
const error = ref<Record<string, any> | null>(null);
const { signIn, data: sessionData } = useAuth() const { signIn, data: sessionData } = useAuth()
...@@ -51,97 +47,92 @@ const credentials = ref({ ...@@ -51,97 +47,92 @@ const credentials = ref({
}) })
const rememberMe = ref(false) const rememberMe = ref(false)
</script> </script>
<template> <template>
<div class="container"> <div class="container">
<div class="left"></div> <div class="left" />
<div class="right"> <div class="right">
<img src="/assets/images/naput/logo-ui-hitam.png" alt="Logo UI" class="logo" /> <img
src="/assets/images/naput/logo-ui-hitam.png"
alt="Logo UI"
class="logo"
>
<VCol <VCol
cols="5" cols="5"
class="text-center" class="text-center"
> >
<AuthProvider/> <AuthProvider />
</VCol> </VCol>
</div> </div>
</div> </div>
</template> </template>
<style scoped> <style scoped>
.login-button { .login-button {
margin-top: 20px;
background-color: #FFD700;
padding: 12px 24px;
font-size: 18px;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
background-color: #ffd700;
color: white;
cursor: pointer; cursor: pointer;
font-size: 18px;
font-weight: bold; font-weight: bold;
margin-block-start: 20px;
padding-block: 12px;
padding-inline: 24px;
transition: background-color 0.2s; transition: background-color 0.2s;
color: white;
} }
.container { .container {
display: flex; display: flex;
height: 100vh;
margin: 0;
padding: 0;
box-sizing: border-box; box-sizing: border-box;
padding: 0;
margin: 0;
block-size: 100vh;
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
} }
/* Left Side */ /* Left Side */
.left { .left {
flex: 1; flex: 1;
background: url(/assets/images/naput/rbg.png) no-repeat center center; background: url("/assets/images/naput/rbg.png") no-repeat center center;
background-size: cover; background-size: cover;
} }
/* Right Side */ /* Right Side */
.right { .right {
flex: 1;
background-color: #FDF8E7;
display: flex; display: flex;
flex: 1;
flex-direction: column; flex-direction: column;
justify-content: center;
align-items: center; align-items: center;
padding-top: 240px; justify-content: center;
background-color: #fdf8e7;
gap: 20px; /* Menambah jarak antar elemen */ gap: 20px; /* Menambah jarak antar elemen */
padding-block-start: 240px;
} }
/* Logo */ /* Logo */
.logo { .logo {
width: 120px; inline-size: 120px;
margin-bottom: 20px; margin-block-end: 20px;
} }
/* Title */ /* Title */
h1 { h1 {
font-size: 24px;
color: #000; color: #000;
font-size: 24px;
text-align: center; text-align: center;
} }
.login-button:hover { .login-button:hover {
background-color: #E6C200; background-color: #e6c200;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.container { .container {
justify-content: center;
align-items: center; align-items: center;
background: url(/assets/images/naput/rektorat-ipad-bg.png) no-repeat center center; justify-content: center;
background: url("/assets/images/naput/rektorat-ipad-bg.png") no-repeat center center;
background-size: cover; background-size: cover;
} }
...@@ -150,36 +141,33 @@ h1 { ...@@ -150,36 +141,33 @@ h1 {
} }
.right { .right {
background-color: rgba(253, 248, 231, 0.9);
padding: 40px;
border-radius: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
max-width: 350px;
width: 90%;
height: auto;
display: flex; display: flex;
justify-content: center;
align-items: center; align-items: center;
justify-content: center;
padding: 40px;
border-radius: 20px;
background-color: rgba(253, 248, 231, 90%);
block-size: auto;
box-shadow: 0 4px 10px rgba(0, 0, 0, 10%);
inline-size: 90%;
max-inline-size: 350px;
} }
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.container { .container {
background: url(/assets/images/naput/rektorat-iphone-bg.png) no-repeat center center; background: url("/assets/images/naput/rektorat-iphone-bg.png") no-repeat center center;
background-size: cover; background-size: cover;
} }
.right { .right {
padding: 30px; padding: 30px;
max-width: 320px; inline-size: 90%;
width: 90%; max-inline-size: 320px;
} }
.logo { .logo {
width: 90px; inline-size: 90px;
} }
} }
</style> </style>
pages/login.vue
...@@ -5,7 +5,7 @@ import ImgLight from '@images/dstipro/auth-bg-light.png' ...@@ -5,7 +5,7 @@ import ImgLight from '@images/dstipro/auth-bg-light.png'
import authV2LoginLogoLight from '@images/dstipro/ui-logo-light.png' import authV2LoginLogoLight from '@images/dstipro/ui-logo-light.png'
import authV2LoginBgDark from '@images/naput/header-bg-dark.png' import authV2LoginBgDark from '@images/naput/header-bg-dark.png'
import authV2LoginBgLight from '@images/naput/header-bg.png' import authV2LoginBgLight from '@images/naput/header-bg.png'
import AuthProvider from '@/views/pages/authentication/AuthProvider.vue' import AuthProvider from '@/views/dstipro/beranda/authentication/AuthProvider.vue'
const authThemeImg = useGenerateImageVariant( const authThemeImg = useGenerateImageVariant(
authV2LoginLogoLight, authV2LoginLogoLight,
......
pages/pages/authentication/login-v1.vue
<script setup lang="ts"> <script setup lang="ts">
import AuthProvider from '@/views/pages/authentication/AuthProvider.vue'
import { VNodeRenderer } from '@layouts/components/VNodeRenderer' import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
import { themeConfig } from '@themeConfig' import { themeConfig } from '@themeConfig'
...@@ -7,6 +6,7 @@ import miscMaskDark from '@images/misc/misc-mask-dark.png' ...@@ -7,6 +6,7 @@ import miscMaskDark from '@images/misc/misc-mask-dark.png'
import miscMaskLight from '@images/misc/misc-mask-light.png' import miscMaskLight from '@images/misc/misc-mask-light.png'
import tree1 from '@images/misc/tree1.png' import tree1 from '@images/misc/tree1.png'
import tree3 from '@images/misc/tree3.png' import tree3 from '@images/misc/tree3.png'
import AuthProvider from '@/views/dstipro/beranda/authentication/AuthProvider.vue'
const authThemeMask = useGenerateImageVariant(miscMaskLight, miscMaskDark) const authThemeMask = useGenerateImageVariant(miscMaskLight, miscMaskDark)
......
pages/pages/authentication/login-v2.vue
<script setup lang="ts"> <script setup lang="ts">
import AuthProvider from '@/views/pages/authentication/AuthProvider.vue'
import { VNodeRenderer } from '@layouts/components/VNodeRenderer' import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
import { themeConfig } from '@themeConfig' import { themeConfig } from '@themeConfig'
...@@ -10,6 +9,7 @@ import authV2LoginIllustrationDark from '@images/pages/auth-v2-login-illustratio ...@@ -10,6 +9,7 @@ import authV2LoginIllustrationDark from '@images/pages/auth-v2-login-illustratio
import authV2LoginIllustrationLight from '@images/pages/auth-v2-login-illustration-light.png' import authV2LoginIllustrationLight from '@images/pages/auth-v2-login-illustration-light.png'
import authV2MaskDark from '@images/pages/mask-v2-dark.png' import authV2MaskDark from '@images/pages/mask-v2-dark.png'
import authV2MaskLight from '@images/pages/mask-v2-light.png' import authV2MaskLight from '@images/pages/mask-v2-light.png'
import AuthProvider from '@/views/dstipro/beranda/authentication/AuthProvider.vue'
const authThemeImg = useGenerateImageVariant( const authThemeImg = useGenerateImageVariant(
authV2LoginIllustrationLight, authV2LoginIllustrationLight,
......
plugins/keycloak.ts
...@@ -8,7 +8,7 @@ export default defineNuxtPlugin(async nuxtApp => { ...@@ -8,7 +8,7 @@ export default defineNuxtPlugin(async nuxtApp => {
const authenticated = await keycloakInstance.init({ const authenticated = await keycloakInstance.init({
onLoad: 'check-sso', onLoad: 'check-sso',
checkLoginIframe: true, checkLoginIframe: true,
checkLoginIframeInterval: 5, // seconds checkLoginIframeInterval: 5,
}) })
keycloakStore.authenticated = authenticated keycloakStore.authenticated = authenticated
...@@ -17,36 +17,22 @@ export default defineNuxtPlugin(async nuxtApp => { ...@@ -17,36 +17,22 @@ export default defineNuxtPlugin(async nuxtApp => {
keycloakStore.refresh() keycloakStore.refresh()
console.log('User is authenticated') console.log('User is authenticated')
setInterval(async () => { setInterval(() => {
const now = Math.floor(Date.now() / 1000) const now = Math.floor(Date.now() / 1000)
const accessTokenExp = keycloakInstance.tokenParsed?.exp ?? 0 const tokenExp = keycloakInstance.refreshTokenParsed?.exp ?? 0
const refreshTokenExp = keycloakInstance.refreshTokenParsed?.exp ?? 0 const tokenParsed = keycloakInstance.tokenParsed?.exp ?? 0
if (refreshTokenExp <= now) { if (tokenExp <= now) {
console.warn('Refresh token expired. Logging out...') console.warn('Token expired. Logging out...')
await keycloakInstance.logout({ redirectUri: `${window.location.origin}/login` }) keycloakInstance.logout({
redirectUri: `${window.location.origin}/`,
return })
} }
else {
// Refresh the token if the access token is close to expiring (e.g., within 60 seconds) console.log('Token expires in:', tokenParsed - now, 'seconds')
if (accessTokenExp - now < 60) { console.log('Token expires in:', tokenExp - now, 'seconds')
try {
const refreshed = await keycloakInstance.updateToken(60)
if (refreshed) {
console.log('Access token refreshed')
keycloakStore.refresh() // update store data if necessary
}
else {
console.log('Access token still valid, no need to refresh')
}
}
catch (err) {
console.error('Failed to refresh token', err)
await keycloakInstance.logout({ redirectUri: `${window.location.origin}/login` })
}
} }
}, 10_000) // check every 10 seconds }, 10_000)
} }
else { else {
console.log('User is not authenticated') console.log('User is not authenticated')
......
views/dstipro/beranda/UserProfileHeader.vue
<script lang="ts" setup> <script lang="ts" setup>
import type { ProfileHeader } from '@db/dstipro/profile/types' import type { ProfileHeader } from '@db/dstipro/profile/types'
import profileImg from '@images/avatars/avatar-1.png' import profileImg from '@images/avatars/avatar-1.png'
// import coverImg from '@images/pages/user-profile-header-bg.png' // import coverImg from '@images/pages/user-profile-header-bg.png'
import coverImgLight from '@images/naput/header-bg.png'
import coverImgDark from '@images/naput/header-bg-dark.png' import coverImgDark from '@images/naput/header-bg-dark.png'
import coverImgLight from '@images/naput/header-bg.png'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import duration from 'dayjs/plugin/duration' import duration from 'dayjs/plugin/duration'
import PersonAvatar from '@/layouts/components/PersonAvatar.vue' import PersonAvatar from '@/layouts/components/PersonAvatar.vue'
...@@ -16,7 +17,6 @@ const profileHeaderData = ref<ProfileHeader | null>(null) ...@@ -16,7 +17,6 @@ const profileHeaderData = ref<ProfileHeader | null>(null)
const coverImg = useGenerateImageVariant(coverImgLight, coverImgDark) const coverImg = useGenerateImageVariant(coverImgLight, coverImgDark)
// const userImg = computed(() => profileHeaderData.profileImg || profileImg) // const userImg = computed(() => profileHeaderData.profileImg || profileImg)
const keycloakStore = useKeycloakStore() const keycloakStore = useKeycloakStore()
...@@ -45,44 +45,73 @@ const loading = ref(false) ...@@ -45,44 +45,73 @@ const loading = ref(false)
const errordata = ref('') const errordata = ref('')
const isBirthday = ref(false) const isBirthday = ref(false)
const parkirItems = ref(null) const parkirItems = ref(null)
const { api } = useCivitasApi()
async function getData() { async function getData() {
loading.value = true loading.value = true
errordata.value = '' errordata.value = ''
try { try {
const apiEndpoints = [ const { response: profileResponse, error: profileError } = await api.user.getProfile()
'https://api.ui.ac.id/me', const { response: parkirResponse, error: parkirError } = await api.user.getParkirAktif()
'https://api.ui.ac.id/my/parkir/aktif',
] // Unwrap actual values using consistent helper
const profileData = unwrapResponseJson(profileResponse)
const responses = await Promise.all(apiEndpoints.map(endpoint => const parkirData = unwrapResponseJson(parkirResponse)
fetch(endpoint, {
headers: {
Authorization: `Bearer ${keycloakStore.accessToken}`,
},
}),
))
for (const response of responses) {
if (!response.ok)
throw new Error('Gagal mengambil data')
}
const [dataku, parkirData] = await Promise.all(responses.map(res => res.json())) if (profileData)
items.value = profileData
else
throw new Error('Data profil tidak ditemukan')
items.value = dataku // Assuming parkirData.data is a reactive array
if (Array.isArray(parkirData?.data) && parkirData.data.length === 0)
parkirItems.value = null // Set to null if the array is empty
else
parkirItems.value = parkirData?.data || null // If not empty, set the data, otherwise null
// parkirItems.value = parkirData.data || {} // Store parkir data separately console.log(parkirItems.value) // Check the result
parkirItems.value = parkirData.data && Object.keys(parkirData.data).length ? parkirData.data : null
} }
catch (err) { catch (err: any) {
errordata.value = err.message || 'Terjadi kesalahan saat mengambil data' errordata.value = err?.message || 'Terjadi kesalahan saat mengambil data'
console.error('Gagal mengambil data:', errordata.value)
} }
finally { finally {
loading.value = false loading.value = false
} }
} }
function unwrapResponseJson(refObj: any) {
// Check if the object is a Vue ref and unwrap its value if it is
const isRef = (val: any) => val && typeof val === 'object' && val.__v_isRef
let data = refObj
while (isRef(data))
data = data.value
// Try parsing if the result is a string JSON
if (typeof data === 'string') {
try {
return JSON.parse(data)
}
catch {
throw new Error('Format string JSON tidak valid')
}
}
// If it's an object, we return it after removing any potential circular references
if (typeof data === 'object') {
// If data is an empty object or array, return null
if (Object.keys(data).length === 0)
return null
return JSON.parse(JSON.stringify(data)) // Avoid Vue reactivity here if needed
}
// If data is not valid or recognized, throw an error
throw new Error('Data tidak ditemukan atau format tidak dikenali')
}
const daysLeft = computed(() => { const daysLeft = computed(() => {
if (!parkirItems.value) if (!parkirItems.value)
return 0 return 0
...@@ -220,14 +249,13 @@ function openDialog() { ...@@ -220,14 +249,13 @@ function openDialog() {
> >
<div class="d-flex h-0"> <div class="d-flex h-0">
<VAvatar <VAvatar
rounded="circle" rounded="circle"
size="130" size="130"
:image="profileHeaderData.profileImg" :image="profileHeaderData.profileImg"
class="user-profile-avatar mx-auto" class="user-profile-avatar mx-auto"
> >
<PersonAvatar style="block-size: 120px; inline-size: 120px;" /> <PersonAvatar style="block-size: 120px; inline-size: 120px;" />
</VAvatar> </VAvatar>
</div> </div>
<div class="user-profile-info w-100 mt-16 pt-6 pt-sm-0 mt-sm-0"> <div class="user-profile-info w-100 mt-16 pt-6 pt-sm-0 mt-sm-0">
...@@ -384,19 +412,23 @@ function openDialog() { ...@@ -384,19 +412,23 @@ function openDialog() {
</div> </div>
<!-- tombol test aksi ultah --> <!-- tombol test aksi ultah -->
<!-- <div class="d-flex align-center gap-x-2"> <!--
<div class="d-flex align-center gap-x-2">
<VBtn @click="isBirthday = true"> <VBtn @click="isBirthday = true">
<VIcon <VIcon
size="24" size="24"
icon="ri-hand-heart-line" icon="ri-hand-heart-line"
/> />
</VBtn> </VBtn>
</div> --> </div>
-->
</div> </div>
<!-- <VBtn prepend-icon="ri-user-follow-line"> <!--
<VBtn prepend-icon="ri-user-follow-line">
Connected Connected
</VBtn> --> </VBtn>
-->
<VBtn <VBtn
class="bg-error" class="bg-error"
...@@ -409,80 +441,82 @@ function openDialog() { ...@@ -409,80 +441,82 @@ function openDialog() {
</div> </div>
</VCardText> </VCardText>
<!-- <VCardText <!--
<VCardText
v-else v-else
class="d-flex align-bottom flex-sm-row flex-column justify-center gap-x-6" class="d-flex align-bottom flex-sm-row flex-column justify-center gap-x-6"
> >
<div class="d-flex h-0"> <div class="d-flex h-0">
<VAvatar <VAvatar
rounded rounded
size="130" size="130"
:image="profileHeaderData.profileImg" :image="profileHeaderData.profileImg"
class="user-profile-avatar mx-auto" class="user-profile-avatar mx-auto"
> >
<VImg <VImg
:src="profileHeaderData.profileImg" :src="profileHeaderData.profileImg"
height="120" height="120"
width="120" width="120"
/> />
</VAvatar> </VAvatar>
</div> </div>
<div class="user-profile-info w-100 mt-16 pt-6 pt-sm-0 mt-sm-0"> <div class="user-profile-info w-100 mt-16 pt-6 pt-sm-0 mt-sm-0">
<h4 class="text-h4 text-center text-sm-start mb-2"> <h4 class="text-h4 text-center text-sm-start mb-2">
{{ profileHeaderData.fullName }} {{ profileHeaderData.fullName }}
</h4> </h4>
<div class="d-flex align-center justify-center justify-sm-space-between flex-wrap gap-4"> <div class="d-flex align-center justify-center justify-sm-space-between flex-wrap gap-4">
<div class="d-flex flex-wrap justify-center justify-sm-start flex-grow-1 gap-6"> <div class="d-flex flex-wrap justify-center justify-sm-start flex-grow-1 gap-6">
<div class="d-flex align-center gap-x-2"> <div class="d-flex align-center gap-x-2">
<VIcon <VIcon
size="24" size="24"
icon="ri-palette-line" icon="ri-palette-line"
/> />
<div class="text-body-1 font-weight-medium"> <div class="text-body-1 font-weight-medium">
{{ profileHeaderData.designation }} {{ profileHeaderData.designation }}
</div> </div>
</div> </div>
<div class="d-flex align-center gap-x-2">
<VIcon
size="24"
icon="ri-map-pin-line"
/>
<div class="text-body-1 font-weight-medium">
{{ profileHeaderData.location }}
</div>
</div>
<div class="d-flex align-center gap-x-2"> <div class="d-flex align-center gap-x-2">
<VIcon <VIcon
size="24" size="24"
icon="ri-calendar-line" icon="ri-map-pin-line"
/> />
<div class="text-body-1 font-weight-medium"> <div class="text-body-1 font-weight-medium">
{{ profileHeaderData.joiningDate }} {{ profileHeaderData.location }}
</div> </div>
</div> </div>
</div>
<VBtn <div class="d-flex align-center gap-x-2">
class="bg-error" <VIcon
prepend-icon="ri-user-follow-line" size="24"
> icon="ri-calendar-line"
Not Connected />
</VBtn> <div class="text-body-1 font-weight-medium">
{{ profileHeaderData.joiningDate }}
</div>
</div>
</div>
<VBtn <VBtn
class="bg-warning" class="bg-error"
prepend-icon="ri-login-box-line" prepend-icon="ri-user-follow-line"
@click="login" >
> Not Connected
Login </VBtn>
</VBtn>
</div> <VBtn
class="bg-warning"
prepend-icon="ri-login-box-line"
@click="login"
>
Login
</VBtn>
</div>
</div> </div>
</VCardText> --> </VCardText>
-->
</VCard> </VCard>
</template> </template>
......
views/dstipro/beranda/authentication/AuthProvider.vue
<script setup lang="ts"> <script setup lang="ts">
import { useTheme } from 'vuetify' import { onMounted } from 'vue'
import { useRouter } from 'vue-router' // Import Vue Router
import keycloakInstance from '@/keycloak' import keycloakInstance from '@/keycloak'
const router = useRouter() // Inisialisasi router
function login() { function login() {
keycloakInstance.login({ keycloakInstance.login({
redirectUri: `${window.location.origin}/profile`, redirectUri: `${window.location.origin}/profile`,
}) })
} }
function loginGoogle() {
keycloakInstance.login({
redirectUri: `${window.location.origin}/profile`, idpHint: 'google',
})
}
// Cek apakah user sudah login saat komponen dimuat
onMounted(() => { onMounted(() => {
if (keycloakInstance.authenticated) if (keycloakInstance.authenticated)
router.push('/profile') router.push('/profile')
}) })
const { global } = useTheme()
const authProviders = [
{
icon: 'bxl-facebook',
color: '#4267b2',
colorInDark: '#4267b2',
},
{
icon: 'bxl-twitter',
color: '#1da1f2',
colorInDark: '#1da1f2',
},
{
icon: 'bxl-github',
color: '#272727',
colorInDark: '#fff',
},
{
icon: 'bxl-google',
color: '#db4437',
colorInDark: '#db4437',
},
]
</script> </script>
<template> <template>
<VBtn <VBtn
v-for="link in authProviders" class="sso-btn font-weight-medium"
:key="link.icon" color="#3d3d3d"
:icon="link.icon" prepend-icon="ri-key-fill"
variant="text" block
size="small" type="submit"
:color="global.name.value === 'dark' ? link.colorInDark : link.color" rounded="xl"
/>
<VBtn
color="warning"
@click="login" @click="login"
> >
<VIcon Single Sign On
start </VBtn>
icon="ri-login-box-line"
/> Login SSO <VBtn
class="google-btn font-weight-medium"
color="#3d3d3d"
prepend-icon="ri-google-fill"
block
type="submit"
rounded="xl"
variant="outlined"
style="margin-block-start: 5px;"
@click="loginGoogle"
>
Sign in with Google
</VBtn> </VBtn>
</template> </template>
<style scoped>
/* Use :deep() correctly to apply styles to the Vuetify button */
.v-btn.sso-btn {
background-color: #535666 !important; /* semi-transparent dark */
transition: background-color 0.3s ease, transform 0.2s ease;
}
.v-btn.sso-btn:hover {
background-color: #3d3e50 !important;
transform: translateY(-2px);
}
/* Google button */
.v-btn.google-btn {
border: 2px solid #a3a3a3;
background-color: rgba(255, 255, 255, 80%) !important;
transition: background-color 0.3s ease, transform 0.2s ease;
}
.v-btn.google-btn:hover {
background-color: rgba(61, 61, 61, 100%);
transform: translateY(-2px);
}
</style>
views/dstipro/beranda/keamanan/index.vue
...@@ -92,6 +92,8 @@ function toBase64(str: string) { ...@@ -92,6 +92,8 @@ function toBase64(str: string) {
return btoa(unescape(encodeURIComponent(str))) return btoa(unescape(encodeURIComponent(str)))
} }
const { api } = useCivitasApi()
// Set Password // Set Password
async function setPassword() { async function setPassword() {
isSubmitting.value = true isSubmitting.value = true
...@@ -135,16 +137,18 @@ async function setPassword() { ...@@ -135,16 +137,18 @@ async function setPassword() {
try { try {
// Panggil API untuk mengganti password // Panggil API untuk mengganti password
const apiEndpoint = 'https://api.ui.ac.id/my/pw' // const apiEndpoint = 'https://api.ui.ac.id/my/pw'
const response = await fetch(apiEndpoint, { // const response = await fetch(apiEndpoint, {
method: 'POST', // method: 'POST',
headers: { // headers: {
'Content-Type': 'application/json', // 'Content-Type': 'application/json',
'Authorization': `Bearer ${keycloakStore.accessToken}`, // 'Authorization': `Bearer ${keycloakStore.accessToken}`,
}, // },
body: JSON.stringify(requestData), // body: JSON.stringify(requestData),
}) // })
const { response } = await api.user.changePassword(requestData)
// Check for HTTP status code 401 which indicates old password is incorrect // Check for HTTP status code 401 which indicates old password is incorrect
if (response.status === 401) if (response.status === 401)
......
views/dstipro/beranda/riwayat/index.vue
...@@ -8,7 +8,8 @@ const isAuthenticated = computed(() => keycloakStore.authenticated) ...@@ -8,7 +8,8 @@ const isAuthenticated = computed(() => keycloakStore.authenticated)
const items = ref<any[]>([]) const items = ref<any[]>([])
const expandedRows = ref<any[]>([]) const expandedRows = ref<any[]>([])
const loading = ref(false) const loading = ref(false)
const error = ref('')
// const error = ref('')
const searchQuery = ref('') const searchQuery = ref('')
// Headers // Headers
...@@ -39,21 +40,23 @@ function resolveStatusColor(status: string) { ...@@ -39,21 +40,23 @@ function resolveStatusColor(status: string) {
} }
} }
const { api } = useCivitasApi()
async function getData() { async function getData() {
loading.value = true loading.value = true
error.value = '' error.value = ''
items.value = [] items.value = []
try { try {
const res = await fetch('https://api.ui.ac.id/my/ac', { // const response = await fetch('https://api.ui.ac.id/my/ac', {
headers: { // headers: {
Authorization: `Bearer ${keycloakStore.accessToken}`, // Authorization: `Bearer ${keycloakStore.accessToken}`,
}, // },
}) // })
const { response, error } = await api.user.getProfile()
if (!res.ok) const raw = response.value?.value // ✅ UNWRAP the inner ref
throw new Error('Gagal mengambil data')
const raw = await res.json()
items.value = raw.map((item: any, idx: number) => { items.value = raw.map((item: any, idx: number) => {
const expandedFiltered = Object.values(item.IRS || {}) const expandedFiltered = Object.values(item.IRS || {})
...@@ -75,7 +78,7 @@ async function getData() { ...@@ -75,7 +78,7 @@ async function getData() {
}).filter(item => item.expanded.length > 0) // Optionally remove parent rows with no expanded items }).filter(item => item.expanded.length > 0) // Optionally remove parent rows with no expanded items
} }
catch (err: any) { catch (err: any) {
error.value = err.message || 'Terjadi kesalahan saat mengambil data' err.value = err.message || 'Terjadi kesalahan saat mengambil data'
} }
finally { finally {
loading.value = false loading.value = false
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!