Afiq
379eb17246
- Updated nuxt.config.js to include Authentik configuration and public keys for client-side access. - Introduced a new composable, useAuth.js, for handling authentication logic with Authentik, including user validation, login, and logout functionalities. - Enhanced documentation to reflect the simplified RBAC structure and the integration of Authentik, emphasizing user-centric design and streamlined permission management. - Refactored middleware for authentication checks and improved error handling during user validation. - Created new pages for login and dashboard, ensuring proper routing and user experience. - Removed obsolete Metabase integration and unnecessary complexity from the project structure.
135 lines
4.6 KiB
Vue
135 lines
4.6 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-gray-50">
|
|
<nav class="bg-white shadow">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between h-16">
|
|
<div class="flex items-center">
|
|
<h1 class="text-xl font-semibold text-gray-900">
|
|
CorradAF RBAC Dashboard
|
|
</h1>
|
|
</div>
|
|
<div class="flex items-center space-x-4">
|
|
<span v-if="user" class="text-sm text-gray-700">
|
|
Welcome, {{ user.name || user.email }}
|
|
</span>
|
|
<button
|
|
@click="handleLogout"
|
|
class="bg-red-600 hover:bg-red-700 text-white px-3 py-2 rounded-md text-sm font-medium"
|
|
>
|
|
Logout
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
|
|
<div class="px-4 py-6 sm:px-0">
|
|
<div class="border-4 border-dashed border-gray-200 rounded-lg p-8">
|
|
<div v-if="pending">
|
|
<p class="text-gray-500">Loading user information...</p>
|
|
</div>
|
|
|
|
<div v-else-if="user" class="space-y-6">
|
|
<div>
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-4">
|
|
🎉 Authentication Successful!
|
|
</h2>
|
|
<p class="text-gray-600 mb-6">
|
|
You are now logged into the CorradAF RBAC system as the master provider.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg shadow p-6">
|
|
<h3 class="text-lg font-medium text-gray-900 mb-4">
|
|
User Information
|
|
</h3>
|
|
<dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-500">Name</dt>
|
|
<dd class="mt-1 text-sm text-gray-900">{{ user.name || 'N/A' }}</dd>
|
|
</div>
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-500">Email</dt>
|
|
<dd class="mt-1 text-sm text-gray-900">{{ user.email }}</dd>
|
|
</div>
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-500">Username</dt>
|
|
<dd class="mt-1 text-sm text-gray-900">{{ user.preferred_username || 'N/A' }}</dd>
|
|
</div>
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-500">User ID</dt>
|
|
<dd class="mt-1 text-sm text-gray-900">{{ user.sub }}</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
|
|
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
|
<h4 class="text-sm font-medium text-blue-800 mb-2">
|
|
Next Steps
|
|
</h4>
|
|
<ul class="text-sm text-blue-700 space-y-1">
|
|
<li>• You can now create and manage other applications</li>
|
|
<li>• Add users and assign them to applications</li>
|
|
<li>• Create roles and permissions</li>
|
|
<li>• Manage groups and access control</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="flex space-x-4">
|
|
<NuxtLink
|
|
to="/applications"
|
|
class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium"
|
|
>
|
|
Manage Applications
|
|
</NuxtLink>
|
|
<NuxtLink
|
|
to="/users"
|
|
class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md text-sm font-medium"
|
|
>
|
|
Manage Users
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="text-center">
|
|
<p class="text-red-600">Failed to load user information</p>
|
|
<NuxtLink
|
|
to="/login"
|
|
class="mt-4 inline-block bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium"
|
|
>
|
|
Login Again
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
// Require authentication for this page
|
|
definePageMeta({
|
|
middleware: 'auth'
|
|
});
|
|
|
|
// Use the auth composable
|
|
const { logout } = useAuth();
|
|
|
|
// Get user information with proper error handling
|
|
const { data: user, pending } = await useFetch('/api/auth/me', {
|
|
default: () => null,
|
|
server: false // Client-side only to handle redirects properly
|
|
});
|
|
|
|
// If not authenticated, redirect to login
|
|
watchEffect(() => {
|
|
if (!pending.value && !user.value) {
|
|
navigateTo('/login');
|
|
}
|
|
});
|
|
|
|
const handleLogout = async () => {
|
|
await logout();
|
|
};
|
|
</script> |