109 lines
No EOL
2.7 KiB
Vue
109 lines
No EOL
2.7 KiB
Vue
<script setup>
|
|
import { onMounted, ref } from 'vue'
|
|
import { useAuth } from '~/composables/useAuth.js'
|
|
|
|
const {
|
|
isAuthenticated,
|
|
isInitialized,
|
|
userProfile,
|
|
exchangeCodeForToken,
|
|
verifySession,
|
|
silentRefresh,
|
|
logout
|
|
} = useAuth()
|
|
|
|
const route = useRoute()
|
|
|
|
const recentLogins = ref([
|
|
{ user: 'admin_user', time: '2 mins ago', ip: '192.168.1.10' }
|
|
])
|
|
|
|
const handleLogout = () => {
|
|
logout()
|
|
}
|
|
|
|
const handleNavigate = (path) => {
|
|
navigateTo(path)
|
|
}
|
|
|
|
onMounted(async () => {
|
|
const code = route.query.code
|
|
|
|
if (code) {
|
|
const success = await exchangeCodeForToken(code)
|
|
if (!success) {
|
|
navigateTo('/oauth')
|
|
}
|
|
} else if (isAuthenticated.value) {
|
|
const valid = await verifySession()
|
|
if (!valid) {
|
|
navigateTo('/oauth')
|
|
}
|
|
} else {
|
|
const success = await silentRefresh()
|
|
if (!success) {
|
|
navigateTo('/oauth')
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div v-if="!isInitialized" class="global-loader-wrapper">
|
|
<div class="spinner lg"></div>
|
|
<p style="color: #8b949e; margin-top: 1rem; font-size: 0.95rem;">
|
|
Connecting to Keycloak...
|
|
</p>
|
|
</div>
|
|
|
|
<div v-else-if="isAuthenticated" class="settings-container">
|
|
<Header
|
|
:user-profile="userProfile"
|
|
active-tab="welcome"
|
|
@logout="handleLogout"
|
|
@navigate="handleNavigate"
|
|
/>
|
|
|
|
<main class="settings-main-content">
|
|
<section class="settings-panel">
|
|
<div class="panel-header archivo-black">
|
|
<span>PORTAL OVERVIEW</span>
|
|
</div>
|
|
|
|
<div class="panel-body grid-layout">
|
|
<div class="welcome-left-col">
|
|
<div class="image-wrapper">
|
|
<img
|
|
src="/welcome7.png"
|
|
alt="Welcome to Mod Portal"
|
|
class="welcome-image"
|
|
/>
|
|
</div>
|
|
<h2 class="welcome-text">
|
|
Welcome to the <em>new</em> mod portal!
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="logins-right-col">
|
|
<div class="logins-card">
|
|
<div class="logins-header archivo-black">
|
|
RECENT LOGINS
|
|
</div>
|
|
<ul class="logins-list">
|
|
<li v-for="(log, idx) in recentLogins" :key="idx" class="login-item">
|
|
<div class="login-user">{{ log.user }}</div>
|
|
<div class="login-details">
|
|
<span>{{ log.ip }}</span> •
|
|
<span class="login-time">{{ log.time }}</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</template> |