Afiq
bb98dc0262
- Changed logout link in Header.vue from "/logout" to "/api/auth/logout" to align with the new Authentik API structure. - Enhanced implementation status documentation to reflect the completion of the backend authentication system, including OAuth2 integration, session management, and middleware setup. - Updated the implementation plan to outline the completed authentication foundation and next steps for RBAC database and API development. - Added a new document detailing the authentication implementation, including server API endpoints, middleware, and composable usage for a comprehensive overview of the authentication system.
59 lines
1.8 KiB
Vue
59 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',
|
|
layout: "empty"
|
|
});
|
|
|
|
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> |