skybridge/kms/kms-frontend

KMS Frontend - Key Management System

A modern React frontend for the Key Management System (KMS) API, built with TypeScript and Ant Design.

Features

• Dashboard: System overview with health status and statistics
• Application Management: Create, view, edit, and delete applications
• Token Management: Create and manage static tokens with permissions
• User Management: Handle user authentication and token operations
• Audit Logging: Monitor system activities and security events
• Responsive Design: Mobile-friendly interface with Ant Design components

Technology Stack

• React 18 with TypeScript
• Ant Design for UI components
• Axios for API communication
• React Router for navigation
• Day.js for date handling

Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm or yarn
• KMS API server running on http://localhost:8080

Installation

1. Clone the repository:

git clone <repository-url>
cd kms-frontend

2. Install dependencies:

npm install

3. Configure environment variables:

cp .env.example .env

Edit .env to match your API configuration:

REACT_APP_API_URL=http://localhost:8080
REACT_APP_APP_NAME=KMS Frontend
REACT_APP_VERSION=1.0.0

4. Start the development server:

npm start

The application will be available at http://localhost:3000.

Project Structure

src/
├── components/          # React components
│   ├── Applications.tsx # Application management
│   ├── Audit.tsx       # Audit logging
│   ├── Dashboard.tsx   # Main dashboard
│   ├── Login.tsx       # Authentication
│   ├── Tokens.tsx      # Token management
│   └── Users.tsx       # User management
├── contexts/           # React contexts
│   └── AuthContext.tsx # Authentication context
├── services/           # API services
│   └── apiService.ts   # KMS API client
├── App.tsx            # Main application component
├── App.css            # Custom styles
└── index.tsx          # Application entry point

API Integration

The frontend integrates with the KMS API and supports:

• Health Checks: Monitor API availability
• Application CRUD: Full application lifecycle management
• Token Operations: Create, verify, and manage tokens
• User Authentication: Login and token renewal flows
• Audit Trails: View system activity logs

Authentication

The application uses a demo authentication system for development:

1. Enter any valid email address on the login screen
2. The system will simulate authentication and grant permissions
3. In production, integrate with your identity provider (OAuth2, SAML, etc.)

Available Scripts

• npm start - Start development server
• npm run build - Build for production
• npm test - Run tests
• npm run eject - Eject from Create React App

Configuration

Environment Variables

• REACT_APP_API_URL - KMS API base URL
• REACT_APP_APP_NAME - Application name
• REACT_APP_VERSION - Application version

API Configuration

The API service automatically includes the X-User-Email header for authentication. Configure your KMS API to accept this header for demo purposes.

Features Overview

Dashboard

• System health monitoring
• Application and token statistics
• Quick action shortcuts

Applications

• Create new applications with configuration
• View application details and security settings
• Edit application properties
• Delete applications and associated tokens

Tokens

• Create static tokens with specific permissions
• View token details and metadata
• Verify token validity and permissions
• Delete tokens when no longer needed

Users

• Current user information display
• Initiate user authentication flows
• Renew user tokens
• Authentication method documentation

Audit Log

• Comprehensive activity tracking
• Filter by date, user, action, and status
• Detailed event information
• Timeline view of recent activities

Security Considerations

• All API communications should use HTTPS in production
• Tokens are displayed only once during creation
• Sensitive information is masked in the UI
• Audit logging tracks all user actions

Development

Adding New Features

1. Create new components in src/components/
2. Add API methods to src/services/apiService.ts
3. Update routing in src/App.tsx
4. Add navigation items to the sidebar menu

Styling

The application uses Ant Design's theming system with custom CSS overrides in App.css. Follow Ant Design's design principles for consistency.

Testing

Run the test suite with:

npm test

Production Deployment

1. Build the application:

npm run build

2. Deploy the build/ directory to your web server
3. Configure your web server to serve the React app
4. Ensure the KMS API is accessible from your production domain
5. Update environment variables for production

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

This project is licensed under the MIT License.

Support

For issues and questions:

• Check the KMS API documentation
• Review the Ant Design documentation
• Create an issue in the repository