corrad-af-2024/docs/07_APPLICATION_MANAGEMENT.md

Application Management with Native Authentik Integration

Overview

The CorradAF RBAC system includes comprehensive application management capabilities that are natively integrated with Authentik. This feature allows administrators to create, manage, and configure applications with sophisticated access control and resource management, designed as a native frontend for Authentik's SSO system.

✅ FEATURES IMPLEMENTED

🏢 Application Management Interface (/applications)

Overview Dashboard

• Real-time Statistics:
  • Total applications count
  • Active applications
  • Total application users (across all apps)
• Advanced Data Table: Full RsTable functionality with search, sort, filter
• Application Status Tracking: Active, Development, Inactive states
• Provider Type Support: OAuth2/OIDC, SAML, Proxy
• Enhanced Navigation: Hierarchical menu structure with sub-items

Application Creation (/applications/create)

• Step-by-Step Wizard:
  • Step 1: Basic Information (name, slug, description, URL)
  • Step 2: Configuration Method (quick setup vs custom)
  • Step 3: Access Control (group selection)
• Quick Setup Types: ✅ Enhanced
  • 🌐 Web Application (OAuth2, recommended)
  • 🔌 API Service (OAuth2, strict policies)
  • 🏢 Enterprise Application (SAML SSO)
  • ⚙️ Custom Configuration (manual setup)
• Smart Features:
  • Auto-slug generation from name
  • OAuth2 credential generation
  • Real-time form validation
  • Progressive disclosure for advanced settings
• Form Standardization: FormKit with :actions="false" for custom button implementation

📋 Application Resources Management (/applications/resources) ✅ NEW

Multi-tab Resource Interface

• Menus Tab: Manage hardcoded menu permissions for applications
• Components Tab: Manage component access permissions
• Features Tab: Manage feature-level permissions

Resource Management Features

• FormKit Forms: Create new resources with auto-generated keys
• Application Scoping: Resources can be scoped to specific applications
• Auto-Generation: Resource keys auto-generated from names for consistency
• Data Tables: Display existing resources with delete functionality
• Responsive Design: Dark mode support and mobile-friendly interface

Resource Types

1. Menu Resources:

   • Define navigational menu permissions
   • Path-based access control
   • Hierarchical menu structure support

2. Component Resources:

   • Individual component access permissions
   • UI element-level security
   • Action-based permissions (view, edit, delete)

3. Feature Resources:

   • High-level feature toggles
   • Business logic permissions
   • Advanced functionality controls

🔗 Native Authentik Integration ✅ Major Update

Native Frontend Approach

• Direct Integration: System designed as native Authentik frontend
• No Manual Sync: Removed all sync buttons, checkboxes, and status indicators
• Backend Connectivity: Assumes direct database/API integration with Authentik
• Simplified UX: Clean interface focused on core functionality

Provider Types Supported

1. OAuth2/OIDC: Modern authentication for web applications
2. SAML: Enterprise SSO integration
3. Proxy Provider: Forward authentication proxy

🛡️ Access Control Integration

Group-Based Authorization

• Group Selection: Multi-select interface for application access
• User Statistics: Display user counts for each group
• Access Policies: Simple ANY/ALL group membership evaluation
• Visual Interface: Intuitive click-to-select group assignment

Policy Engine Configuration

• Simple Modes: ANY (user needs access to any selected group) or ALL (user needs access to all selected groups)
• Visual Feedback: Clear indication of selected groups
• Real-time Updates: Immediate feedback on access control changes

🚀 TECHNICAL IMPLEMENTATION

Enhanced Form Architecture

FormKit Integration

<!-- Standardized FormKit Implementation -->
<FormKit 
  type="form" 
  @submit="handleSubmit"
  :actions="false"
>
  <!-- Form fields -->
</FormKit>

<!-- Custom action buttons -->
<div class="flex space-x-3">
  <rs-button @click="resetForm" variant="primary-outline">
    Reset Form
  </rs-button>
  <rs-button @click="submitForm" :disabled="!isFormValid">
    Create Application
  </rs-button>
</div>

Progressive Disclosure Pattern

<!-- Quick Setup (Primary) -->
<div class="setup-types">
  <div v-for="type in setupTypes" :key="type.id">
    <!-- Setup type selection -->
  </div>
</div>

<!-- Advanced Configuration (Hidden by default) -->
<rs-card v-if="showAdvancedConfig">
  <template #header>
    <Icon name="ph:gear" class="text-orange-600" />
    <h3>Advanced Configuration</h3>
    <rs-badge variant="warning">Expert Mode</rs-badge>
  </template>
  <!-- Advanced settings -->
</rs-card>

Resource Management Data Structure

Resource Model

const resourceSchema = {
  // Menu Resources
  menus: [{
    id: String,
    name: String,           // Display name
    key: String,            // Auto-generated from name  
    path: String,           // Menu path
    applicationId: String,  // Scoped to application
    createdAt: Date
  }],
  
  // Component Resources  
  components: [{
    id: String,
    name: String,           // Display name
    key: String,            // Auto-generated from name
    description: String,    // Component description
    applicationId: String,  // Scoped to application
    createdAt: Date
  }],
  
  // Feature Resources
  features: [{
    id: String,
    name: String,           // Display name
    key: String,            // Auto-generated from name
    description: String,    // Feature description
    applicationId: String,  // Scoped to application
    createdAt: Date
  }]
}

Application Navigation Structure

Hierarchical Menu Implementation

// navigation/index.js
{
  name: 'Applications',
  path: '/applications',
  icon: 'ph:app-window',
  children: [
    {
      name: 'Application List',
      path: '/applications'
    },
    {
      name: 'Resources',
      path: '/applications/resources'
    }
  ]
}

📱 USER INTERFACE FEATURES

Application Listing Page (/applications) ✅ Updated

Simplified Statistics Dashboard

• Total Applications: Count of all registered applications
• Active Applications: Production-ready applications
• Total App Users: Aggregate user count across applications

Enhanced Filtering

• Search: Global search across name, description, publisher
• Status Filter: Active, Development, Inactive
• Provider Filter: OAuth2/OIDC, SAML, Proxy
• Real-time Updates: Filters update results immediately

Clean Action Interface

• View Details: Navigate to application details page
• Edit Application: Modify application settings
• Delete Application: Remove application (with confirmation)
• Removed: All sync-related buttons and status indicators

Application Creation Page (/applications/create) ✅ Enhanced

Template-First Approach

• Quick Setup Types: Pre-configured templates with smart defaults
• Progressive Disclosure: Advanced options hidden by default
• Visual Selection: Card-based setup type selection
• Expert Mode: Advanced configuration for power users

Smart Wizard Features

• Step Validation: Prevent progression without required fields
• Auto-generation: Intelligent default values based on selections
• Visual Progress: Clear step progression indicator
• Form Persistence: Maintain form state across steps

Resources Management Page (/applications/resources) ✅ NEW

Centralized Resource Control

• Single Interface: Manage all resource types from one location
• Tab Organization: Clear separation of resource types
• Application Scoping: Filter resources by application
• Bulk Operations: Efficient resource management

Resource Creation Interface

• Auto-Key Generation: Consistent resource key generation
• Form Validation: Real-time validation with error feedback
• Immediate Updates: Resources appear in tables instantly
• Delete Confirmation: Safe resource deletion with confirmation

🎨 USER EXPERIENCE IMPROVEMENTS

Template-First Design Philosophy ✅ NEW

• Reduce Complexity: Hide advanced options behind progressive disclosure
• Smart Defaults: Intelligent configuration based on use case
• Expert Access: Advanced users can access full configuration
• Guided Experience: Step-by-step process for common tasks

Resource Management UX ✅ NEW

• Centralized Control: Single location for all resource management
• Visual Organization: Tab-based separation of resource types
• Consistent Patterns: Same interaction patterns across resource types
• Application Context: Clear application scoping for resources

Simplified Integration UX ✅ Major Update

• No Manual Sync: Removed confusing sync options and status displays
• Native Feel: Interface feels like part of Authentik ecosystem
• Focus on Functionality: Emphasis on actual configuration vs sync management
• Clean Interface: Removed technical implementation details from user view

📊 IMPLEMENTATION STATUS

Completed Features ✅

Feature	Status	Notes
Application List	✅ Complete	Enhanced navigation, removed sync UI
Application Creation	✅ Complete	Step-by-step wizard, template-first
Resource Management	✅ Complete	New centralized interface
Form Standardization	✅ Complete	All forms use :actions="false"
Navigation Enhancement	✅ Complete	Hierarchical menu structure
UX Improvements	✅ Complete	Progressive disclosure, smart defaults
Native Integration	✅ Complete	Removed manual sync functionality

Resource Management Capabilities ✅ NEW

Resource Type	Create	Read	Delete	Auto-Key Generation
Menus	✅	✅	✅	✅
Components	✅	✅	✅	✅
Features	✅	✅	✅	✅

Form Standards Applied ✅

Page	FormKit Actions	Custom Buttons	Validation
/applications/create	:actions="false"	✅ Custom	✅ Complete
/applications/resources	:actions="false"	✅ Custom	✅ Complete

🔧 CONFIGURATION & SETUP

Environment Configuration

// nuxt.config.ts
export default {
  // Native Authentik integration
  runtimeConfig: {
    authentikApiUrl: process.env.AUTHENTIK_API_URL,
    authentikToken: process.env.AUTHENTIK_TOKEN,
    
    public: {
      authentikDomain: process.env.AUTHENTIK_DOMAIN
    }
  }
}

Resource Management Setup

// composables/useResources.js
export const useResources = () => {
  const createResource = async (type, data, applicationId) => {
    // Auto-generate key from name
    const key = data.name
      .toLowerCase()
      .replace(/[^a-z0-9]/g, '-')
      .replace(/-+/g, '-')
      .replace(/^-|-$/g, '')
    
    return await $fetch('/api/resources', {
      method: 'POST',
      body: {
        ...data,
        key,
        type,
        applicationId
      }
    })
  }
  
  return { createResource }
}

🎯 NEXT STEPS

Backend Integration (Priority 1)

• API Development: Create backend endpoints for resource management
• Database Schema: Implement resource storage in database
• Authentik API: Direct integration with Authentik's API endpoints
• Real-time Updates: Implement live data synchronization

Advanced Features (Priority 2)

• Resource Validation: Validate resource usage across applications
• Import/Export: Bulk resource management capabilities
• Resource Dependencies: Track relationships between resources
• Audit Trail: Log all resource management activities

Performance Optimization (Priority 3)

• Caching: Implement resource caching strategies
• Lazy Loading: Optimize large resource lists
• Search Enhancement: Advanced resource search capabilities

---

Status: Application management system complete with native Authentik integration approach, comprehensive resource management, and enhanced UX patterns. Ready for backend API integration.