fail2ban-ui/pkg/web/static/js/auth.js

// Authentication functions for Fail2ban UI
"use strict";

let authEnabled = false;
let isAuthenticated = false;
let currentUser = null;

// Check authentication status on page load
async function checkAuthStatus() {
  // Immediately hide main content to prevent flash
  const mainContent = document.getElementById('mainContent');
  const nav = document.querySelector('nav');
  if (mainContent) {
    mainContent.style.display = 'none';
  }
  if (nav) {
    nav.style.display = 'none';
  }
  
  try {
    const response = await fetch('/auth/status', {
      headers: serverHeaders()
    });
    
    if (!response.ok) {
      throw new Error('Failed to check auth status');
    }
    
    const data = await response.json();
    authEnabled = data.enabled || false;
    isAuthenticated = data.authenticated || false;
    
    if (authEnabled) {
      if (isAuthenticated && data.user) {
        currentUser = data.user;
        showAuthenticatedUI();
      } else {
        showLoginPage();
      }
    } else {
      // OIDC not enabled, show main content
      showMainContent();
    }
    
    return { enabled: authEnabled, authenticated: isAuthenticated, user: currentUser };
  } catch (error) {
    console.error('Error checking auth status:', error);
    // If auth check fails and we're on a protected route, show login
    if (authEnabled) {
      showLoginPage();
    } else {
      showMainContent();
    }
    return { enabled: false, authenticated: false, user: null };
  }
}

// Get current user info
async function getUserInfo() {
  try {
    const response = await fetch('/auth/user', {
      headers: serverHeaders()
    });
    
    if (!response.ok) {
      if (response.status === 401) {
        isAuthenticated = false;
        currentUser = null;
        showLoginPage();
        return null;
      }
      throw new Error('Failed to get user info');
    }
    
    const data = await response.json();
    if (data.authenticated && data.user) {
      currentUser = data.user;
      isAuthenticated = true;
      return data.user;
    }
    
    return null;
  } catch (error) {
    console.error('Error getting user info:', error);
    return null;
  }
}

// Handle login - redirect to login endpoint with action parameter
function handleLogin() {
  const loginLoading = document.getElementById('loginLoading');
  const loginError = document.getElementById('loginError');
  const loginErrorText = document.getElementById('loginErrorText');
  const loginButton = event?.target?.closest('button');
  
  // Show loading state
  if (loginLoading) loginLoading.classList.remove('hidden');
  if (loginButton) {
    loginButton.disabled = true;
    loginButton.classList.add('opacity-75', 'cursor-not-allowed');
  }
  
  // Hide error if shown
  if (loginError) {
    loginError.classList.add('hidden');
    if (loginErrorText) loginErrorText.textContent = '';
  }
  
  // Redirect to login endpoint with action=redirect to trigger OIDC redirect
  window.location.href = '/auth/login?action=redirect';
}

// Handle logout - use direct redirect instead of fetch to avoid CORS issues
function handleLogout() {
  // Clear local state
  isAuthenticated = false;
  currentUser = null;
  
  // Direct redirect to logout endpoint (server will handle redirect to provider)
  // Using window.location.href instead of fetch to avoid CORS issues with redirects
  window.location.href = '/auth/logout';
}

// Show login page
function showLoginPage() {
  const loginPage = document.getElementById('loginPage');
  const mainContent = document.getElementById('mainContent');
  const nav = document.querySelector('nav');
  
  // Hide main content and nav immediately
  if (mainContent) {
    mainContent.style.display = 'none';
    mainContent.classList.add('hidden');
  }
  if (nav) {
    nav.style.display = 'none';
    nav.classList.add('hidden');
  }
  
  // Show login page
  if (loginPage) {
    loginPage.style.display = 'flex';
    loginPage.classList.remove('hidden');
  }
}

// Show main content (when authenticated or OIDC disabled)
function showMainContent() {
  const loginPage = document.getElementById('loginPage');
  const mainContent = document.getElementById('mainContent');
  const nav = document.querySelector('nav');
  
  // Hide login page immediately
  if (loginPage) {
    loginPage.style.display = 'none';
    loginPage.classList.add('hidden');
  }
  
  // Show main content and nav
  if (mainContent) {
    mainContent.style.display = '';
    mainContent.classList.remove('hidden');
  }
  if (nav) {
    nav.style.display = '';
    nav.classList.remove('hidden');
  }
}

// Toggle user menu dropdown
function toggleUserMenu() {
  const dropdown = document.getElementById('userMenuDropdown');
  if (dropdown) {
    dropdown.classList.toggle('hidden');
  }
}

// Close user menu when clicking outside
document.addEventListener('click', function(event) {
  const userMenuButton = document.getElementById('userMenuButton');
  const userMenuDropdown = document.getElementById('userMenuDropdown');
  
  if (userMenuButton && userMenuDropdown && 
      !userMenuButton.contains(event.target) && 
      !userMenuDropdown.contains(event.target)) {
    userMenuDropdown.classList.add('hidden');
  }
});

// Show authenticated UI (update header with user info)
function showAuthenticatedUI() {
  showMainContent();
  
  const userInfoContainer = document.getElementById('userInfoContainer');
  const userDisplayName = document.getElementById('userDisplayName');
  const userMenuDisplayName = document.getElementById('userMenuDisplayName');
  const userMenuEmail = document.getElementById('userMenuEmail');
  const mobileUserInfoContainer = document.getElementById('mobileUserInfoContainer');
  const mobileUserDisplayName = document.getElementById('mobileUserDisplayName');
  const mobileUserEmail = document.getElementById('mobileUserEmail');
  
  if (userInfoContainer && currentUser) {
    userInfoContainer.classList.remove('hidden');
    
    const displayName = currentUser.name || currentUser.username || currentUser.email;
    
    if (userDisplayName) {
      userDisplayName.textContent = displayName;
    }
    
    if (userMenuDisplayName) {
      userMenuDisplayName.textContent = displayName;
    }
    
    if (userMenuEmail && currentUser.email) {
      userMenuEmail.textContent = currentUser.email;
    }
  }
  
  // Update mobile menu
  if (mobileUserInfoContainer && currentUser) {
    mobileUserInfoContainer.classList.remove('hidden');
    
    const displayName = currentUser.name || currentUser.username || currentUser.email;
    
    if (mobileUserDisplayName) {
      mobileUserDisplayName.textContent = displayName;
    }
    
    if (mobileUserEmail && currentUser.email) {
      mobileUserEmail.textContent = currentUser.email;
    }
  }
}

// Handle 401/403 responses from API
function handleAuthError(response) {
  if (response.status === 401 || response.status === 403) {
    if (authEnabled) {
      isAuthenticated = false;
      currentUser = null;
      showLoginPage();
      return true;
    }
  }
  return false;
}