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.
58 lines
1.8 KiB
Vue
58 lines
1.8 KiB
Vue
<template>
|
|
<div class="min-h-screen flex items-center justify-center bg-gray-50">
|
|
<div class="max-w-md w-full space-y-8">
|
|
<div>
|
|
<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
|
|
CorradAF RBAC System
|
|
</h2>
|
|
<p class="mt-2 text-center text-sm text-gray-600">
|
|
Sign in to manage applications and users
|
|
</p>
|
|
</div>
|
|
|
|
<div class="rounded-md shadow-sm -space-y-px">
|
|
<button
|
|
@click="loginWithAuthentik"
|
|
:disabled="isLoading"
|
|
class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
|
|
>
|
|
<span v-if="!isLoading">Sign in with Authentik</span>
|
|
<span v-else>Redirecting...</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<p class="text-xs text-gray-500">
|
|
This will redirect you to Authentik for secure authentication
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
// Redirect authenticated users to dashboard
|
|
definePageMeta({
|
|
middleware: 'dashboard'
|
|
});
|
|
|
|
const isLoading = ref(false);
|
|
|
|
const loginWithAuthentik = async () => {
|
|
isLoading.value = true;
|
|
|
|
try {
|
|
// Redirect to our auth endpoint which handles Authentik OAuth2
|
|
await navigateTo('/api/auth/login', { external: true });
|
|
} catch (error) {
|
|
console.error('Login error:', error);
|
|
isLoading.value = false;
|
|
}
|
|
};
|
|
|
|
// Redirect if already authenticated
|
|
onMounted(() => {
|
|
// Check if user is already authenticated (you can implement this later)
|
|
// For now, just show the login page
|
|
});
|
|
</script> |