85 lines
2.3 KiB
Vue
85 lines
2.3 KiB
Vue
|
<script setup>
|
||
|
|
import { onMounted } from 'vue'
|
||
|
|
|
||
|
|
const { isAuthenticated, userProfile, isInitialized, initKeycloak, logout } = useKeycloak()
|
||
|
|
|
||
|
|
//stub
|
||
|
|
const recentLogins = ref([
|
||
|
|
{ user: 'admin_user', time: '2 mins ago', ip: '192.168.1.10' }
|
||
|
|
])
|
||
|
|
|
||
|
|
onMounted(async () => {
|
||
|
|
const auth = await initKeycloak()
|
||
|
|
if (!auth) {
|
||
|
|
navigateTo('/oauth')
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
const handleLogout = () => {
|
||
|
|
logout()
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleNavigate = (path) => {
|
||
|
|
navigateTo(path)
|
||
|
|
}
|
||
|
|
</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>
|