Add authentication providers management with audit log

AUTH_PROVIDER_FEATURES.md

@@ -0,0 +1,242 @@
+# Authentication Provider Management Features
+
+## Overview
+A comprehensive authentication provider management system with multi-step wizards, permission management, usage analytics, and audit logging.
+
+## Features Implemented
+
+### 1. Multi-Step Provider Setup Wizard (`/providers/new`)
+
+**Step 1: Select Provider Type**
+- Choose from Azure AD, Google Workspace, GitHub, or SAML 2.0
+- Visual cards with provider icons and descriptions
+- Popular providers highlighted
+
+**Step 2: External Application Registration**
+- Provider-specific step-by-step registration guides
+- Direct links to provider consoles (Azure Portal, Google Cloud Console, GitHub Settings)
+- Detailed instructions for:
+  - App registration
+  - Client secret creation
+  - API permission configuration
+  - Required values to collect
+- Links to official documentation
+
+**Step 3: OAuth Configuration**
+- Form fields for:
+  - Client ID (required)
+  - Client Secret (required, password-masked)
+  - Tenant ID (Azure AD only)
+  - Redirect URI (pre-filled, editable)
+  - OAuth Scopes (optional)
+- Security notice about credential handling
+- Form validation
+
+**Step 4: Permission Assignment**
+- Interactive checkboxes for:
+  - Individual users
+  - Teams
+- Split view showing users and teams side-by-side
+- Note about ability to modify later
+
+**Step 5: Review & Create**
+- Comprehensive summary showing:
+  - Provider information
+  - OAuth configuration (client secret masked)
+  - Permission assignments (users and teams with labels)
+  - Security reminders
+- Final confirmation before creation
+
+### 2. Provider List View (`/providers`)
+
+**Features:**
+- Card-based grid layout (responsive)
+- Search functionality
+- Provider status indicators (Active/Inactive)
+- For each provider:
+  - Provider type icon
+  - Name and type
+  - Status badge
+  - Usage statistics (total logins, active users, success rate)
+  - Permission summary (user count, team count)
+- Quick actions:
+  - Add Provider button
+  - View Audit Log button
+- Empty state for first-time setup
+
+### 3. Enhanced Provider Details Page (`/providers/:id`)
+
+**Overview Tab:**
+- Provider header with:
+  - Type icon and name
+  - Creation date
+  - Status badge
+  - Enable/Disable button
+  - Delete button
+- Configuration section showing OAuth settings
+- Permissions section:
+  - Authorized users (with labels)
+  - Authorized teams (with labels)
+  - Edit button for modifying permissions
+- Usage statistics sidebar:
+  - Total logins
+  - Active users
+  - Success rate
+- Quick links to audit events
+
+**Recent Activity Tab:**
+- Table of recent audit events
+- Columns: Timestamp, User, Action, Status, Details
+- Link to full audit log
+- Color-coded action and status labels
+
+**Interactive Features:**
+- Edit permissions modal with checkboxes
+- Delete confirmation modal with warning
+- Toggle provider status (enable/disable)
+- All actions create audit log entries
+
+### 4. Audit Log Page (`/audit-log`)
+
+**Features:**
+- Searchable audit events
+- Search by user, provider, action, or status
+- Pagination controls (top and bottom)
+- Event details table:
+  - Timestamp (with hover tooltip)
+  - User
+  - Action (color-coded label)
+  - Provider name (clickable link)
+  - Status (color-coded label)
+  - Details
+- Clear all filters button
+- Event counter badge
+- Empty state handling
+
+**Sample Events Tracked:**
+- Provider Created
+- Provider Modified
+- Provider Disabled/Enabled
+- Provider Deleted
+- User Login (Success/Failed)
+- Permission Changed
+
+### 5. Data Persistence
+
+**Storage:**
+- localStorage used for demo purposes
+- Two data stores:
+  - `authProviders` - Provider configurations
+  - `auditLogs` - Audit event history
+
+**Sample Data:**
+- Pre-populated with 4 sample providers
+- Pre-populated with 8 sample audit events
+- Automatically generated if not present
+
+## Navigation Structure
+
+```
+Home (/)
+├── Auth Providers (/providers)
+│   ├── Add Provider (/providers/new) - Multi-step wizard
+│   └── Provider Details (/providers/:id)
+├── Audit Log (/audit-log)
+├── Dashboard (/dashboard) - Demo
+├── Table Demo (/table-demo) - Demo
+├── Form Demo (/form-demo) - Demo
+└── Details Demo (/details-demo) - Demo
+```
+
+## Component Features
+
+### Security Features
+- Client secrets masked in display
+- Security warnings throughout wizard
+- Delete confirmation modals
+- Audit logging for all actions
+- Permission-based access control
+
+### UX Features
+- Consistent PatternFly design system
+- Responsive layout (mobile, tablet, desktop)
+- Loading and empty states
+- Color-coded status indicators
+- Icon-based visual hierarchy
+- Hover tooltips for timestamps
+- Inline help text and descriptions
+
+### Data Visualization
+- Usage statistics with large numbers
+- Success rate percentages
+- Color-coded labels for status
+- Badge counters
+- Visual provider type icons
+
+## Provider Types Supported
+
+1. **Azure Active Directory**
+   - Microsoft enterprise authentication
+   - Requires: Client ID, Tenant ID, Client Secret
+   - Icon: Microsoft logo
+
+2. **Google Workspace**
+   - Google OAuth authentication
+   - Requires: Client ID, Client Secret
+   - Icon: Google magnifying glass
+
+3. **GitHub**
+   - GitHub OAuth authentication
+   - Requires: Client ID, Client Secret
+   - Icon: GitHub logo
+
+4. **SAML 2.0**
+   - Generic SAML identity provider
+   - Requires: SSO URL, Entity ID, Certificate
+   - Icon: Lock emoji
+
+## Usage Instructions
+
+### To Add a New Provider:
+1. Click "Add Provider" from the providers list
+2. Follow the 5-step wizard
+3. Complete external registration in provider console
+4. Enter OAuth credentials
+5. Assign permissions
+6. Review and create
+
+### To View Provider Details:
+1. Click on any provider card in the list
+2. View configuration, permissions, and statistics
+3. Switch to "Recent Activity" tab for audit events
+
+### To Edit Permissions:
+1. Open provider details
+2. Click "Edit" in the Permissions section
+3. Check/uncheck users and teams
+4. Click "Save Changes"
+
+### To View Audit Log:
+1. Click "Audit Log" in navigation
+2. Use search and filters to find specific events
+3. Click provider name to view details
+
+## Technical Stack
+
+- **Framework:** React with React Router
+- **UI Library:** PatternFly 5
+- **Icons:** PatternFly Icons
+- **Storage:** localStorage (demo)
+- **Styling:** PatternFly CSS
+
+## Future Enhancements (Not Implemented)
+
+- Backend API integration
+- Real authentication testing
+- Export audit logs
+- Email notifications
+- Role-based access control
+- Multi-factor authentication setup
+- Provider health monitoring
+- Advanced analytics dashboard
+

package.json

@@ -11,7 +11,7 @@
     "test:ui": "playwright test --ui"
   },
   "dependencies": {
-    "@ansible/ansible-ui-framework": "^2.4.0",
+    "@ansible/ansible-ui-framework": "^2.4.2735",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^7.9.5"

src/App.jsx

@@ -5,6 +5,10 @@ import DashboardDemo from './pages/DashboardDemo'
 import TableDemo from './pages/TableDemo'
 import FormDemo from './pages/FormDemo'
 import DetailsDemo from './pages/DetailsDemo'
+import ProvidersList from './pages/ProvidersList'
+import ProviderDetails from './pages/ProviderDetails'
+import ProviderWizard from './pages/ProviderWizard'
+import AuditLog from './pages/AuditLog'
 import '@patternfly/react-core/dist/styles/base.css'
 
 function App() {
@@ -13,6 +17,10 @@ function App() {
       <AppNavigation>
         <Routes>
           <Route path="/" element={<HomePage />} />
+          <Route path="/providers" element={<ProvidersList />} />
+          <Route path="/providers/new" element={<ProviderWizard />} />
+          <Route path="/providers/:id" element={<ProviderDetails />} />
+          <Route path="/audit-log" element={<AuditLog />} />
           <Route path="/dashboard" element={<DashboardDemo />} />
           <Route path="/table-demo" element={<TableDemo />} />
           <Route path="/form-demo" element={<FormDemo />} />

src/Navigation.jsx

@@ -19,18 +19,16 @@ export function AppNavigation({ children }) {
 
   const navigation = [
     { name: 'Home', path: '/' },
-    { name: 'Dashboard', path: '/dashboard' },
-    { name: 'Table Demo', path: '/table-demo' },
-    { name: 'Form Demo', path: '/form-demo' },
-    { name: 'Details Demo', path: '/details-demo' },
+    { name: 'Authentication Providers', path: '/providers' },
+    { name: 'Audit Log', path: '/audit-log' },
   ]
 
   const Header = (
     <Masthead>
       <MastheadMain>
         <MastheadBrand>
           <Title headingLevel="h1" size="2xl">
-            Ansible UI Framework Prototypes
+            Auth Provider Management
           </Title>
         </MastheadBrand>
       </MastheadMain>