214 lines
5.3 KiB
Markdown
214 lines
5.3 KiB
Markdown
# 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:
|
|
```bash
|
|
git clone <repository-url>
|
|
cd kms-frontend
|
|
```
|
|
|
|
2. Install dependencies:
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
3. Configure environment variables:
|
|
```bash
|
|
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:
|
|
```bash
|
|
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:
|
|
```bash
|
|
npm test
|
|
```
|
|
|
|
## Production Deployment
|
|
|
|
1. Build the application:
|
|
```bash
|
|
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
|