Phase 2: Administration - User & Role Management - Frontend Implementation #99

New issue

Closed

opened 2025-10-02 10:02:54 +00:00 by rwachters · 0 comments

rwachters commented

2025-10-02 10:02:54 +00:00

(Migrated from github.com)

Phase 2: Administration - User & Role Management - Frontend Implementation

Overview

This issue covers the frontend implementation for Phase 2, Task 3 of the User Accounts feature. The backend authentication infrastructure (Phase 1) and backend administration APIs (Phase 2 Tasks 1-2) are complete and ready for frontend integration.

Status

✅ Phase 1: Authentication Infrastructure (Complete)
✅ Phase 2 Task 1: Backend Authorization Service (Complete)
✅ Phase 2 Task 2: Admin API Endpoints (Complete)
🚀 Phase 2 Task 3: Frontend User Management UI (Ready to Start)

Objectives

Implement frontend components for admin user management functionality, following existing architectural patterns in the codebase.

Implementation Steps

Step 1: API Client Layer (1-2 days)

Create the frontend API client interface and implementation for user management operations:

UserApi Interface (app/src/commonMain/kotlin/eu/torvian/chatbot/app/service/api/UserApi.kt)
- Define contract for user management operations
- Methods: getAllUsers(), getUserById(), updateUser(), deleteUser(), getUserRoles(), assignRole(), revokeRole(), changeUserPassword()
- Follow existing patterns from ModelApi, ProviderApi
- Use Either<ApiResourceError, T> return types
- All operations require admin permissions
DefaultUserApi Implementation (app/src/commonMain/kotlin/eu/torvian/chatbot/app/service/api/DefaultUserApi.kt)
- HTTP client implementation using existing AuthenticatedHttpClient
- Request/response mapping with proper error handling
- Follow patterns from DefaultModelApi, DefaultProviderApi

Step 2: Repository Layer (1-2 days)

Create repository layer for user management state and caching:

UserRepository Interface (app/src/commonMain/kotlin/eu/torvian/chatbot/app/service/repository/UserRepository.kt)
- State management for user list, roles, and management operations
- Caching layer following existing patterns
- State flows for reactive UI updates
DefaultUserRepository Implementation
- User list caching and state management
- Role assignment/revocation operations
- Integration with UserApi
- Follow patterns from existing repository implementations

Step 3: ViewModel Layer (1-2 days)

Create ViewModels for user management screens:

UserManagementViewModel
- User list management with search/filtering
- Role assignment/revocation operations
- User creation/deletion with confirmation dialogs
- Error handling and loading states
- Follow existing ViewModel patterns
UserDetailsViewModel (if needed)
- Individual user detail management
- Role management for specific users
- Password change operations

Step 4: UI Components (2-3 days)

Create Compose UI components for user management:

UserManagementScreen
- Admin-only screen accessible from main navigation
- User list with search/filter capabilities
- Add new user functionality
- Edit/delete user actions
User Management Dialogs
- Add/Edit User Dialog
- Role Assignment Dialog
- Confirmation dialogs for user deletion
- Password change dialog
Navigation Integration
- Add "User Management" to main navigation (admin-only)
- Route configuration and navigation setup

Technical Requirements

API Integration

All endpoints documented in backend /api/v1/users/* routes
Proper error handling with Either<ApiResourceError, T>
JWT authentication via existing AuthenticatedHttpClient
Admin permission enforcement on frontend

Data Models

Required models should already exist in common/ module:

User (id, username, email, createdAt, lastLogin)
Role (id, name, description)
AssignRoleRequest, UpdateUserRequest, ChangePasswordRequest

UI/UX Guidelines

Follow existing Material 3 design patterns
Admin-only functionality (check user permissions)
Confirmation dialogs for destructive actions
Loading states and error handling
Responsive design for desktop application

Security Considerations

Admin permission checks before showing UI elements
Secure password change workflow
Prevent deletion of last admin user
Proper error messages without exposing sensitive information

Definition of Done

UserApi interface and implementation complete
UserRepository with proper state management
UserManagementViewModel with full functionality
UserManagementScreen with complete UI
All dialogs and confirmation prompts implemented
Navigation integration (admin-only access)
Error handling and loading states
Manual testing of all user management operations
Code follows existing architectural patterns

Dependencies

Backend authentication infrastructure (✅ Complete)
Backend authorization service (✅ Complete)
Admin API endpoints /api/v1/users/* (✅ Complete)
Frontend authentication UI (✅ Complete)

Estimated Timeline

Total: 5-7 days

API Client Layer: 1-2 days
Repository Layer: 1-2 days
ViewModel Layer: 1-2 days
UI Components: 2-3 days

Notes

This excludes Compose UI implementation details (focusing on architecture and API integration)
Follow existing patterns from ModelApi/ProviderApi implementations
All backend APIs are ready and tested
Frontend authentication system is complete and ready for integration

# Phase 2: Administration - User & Role Management - Frontend Implementation ## Overview This issue covers the frontend implementation for Phase 2, Task 3 of the User Accounts feature. The backend authentication infrastructure (Phase 1) and backend administration APIs (Phase 2 Tasks 1-2) are complete and ready for frontend integration. ## Status - ✅ Phase 1: Authentication Infrastructure (Complete) - ✅ Phase 2 Task 1: Backend Authorization Service (Complete) - ✅ Phase 2 Task 2: Admin API Endpoints (Complete) - 🚀 **Phase 2 Task 3: Frontend User Management UI (Ready to Start)** ## Objectives Implement frontend components for admin user management functionality, following existing architectural patterns in the codebase. ## Implementation Steps ### Step 1: API Client Layer (1-2 days) Create the frontend API client interface and implementation for user management operations: - **UserApi Interface** (`app/src/commonMain/kotlin/eu/torvian/chatbot/app/service/api/UserApi.kt`) - Define contract for user management operations - Methods: `getAllUsers()`, `getUserById()`, `updateUser()`, `deleteUser()`, `getUserRoles()`, `assignRole()`, `revokeRole()`, `changeUserPassword()` - Follow existing patterns from `ModelApi`, `ProviderApi` - Use `Either<ApiResourceError, T>` return types - All operations require admin permissions - **DefaultUserApi Implementation** (`app/src/commonMain/kotlin/eu/torvian/chatbot/app/service/api/DefaultUserApi.kt`) - HTTP client implementation using existing `AuthenticatedHttpClient` - Request/response mapping with proper error handling - Follow patterns from `DefaultModelApi`, `DefaultProviderApi` ### Step 2: Repository Layer (1-2 days) Create repository layer for user management state and caching: - **UserRepository Interface** (`app/src/commonMain/kotlin/eu/torvian/chatbot/app/service/repository/UserRepository.kt`) - State management for user list, roles, and management operations - Caching layer following existing patterns - State flows for reactive UI updates - **DefaultUserRepository Implementation** - User list caching and state management - Role assignment/revocation operations - Integration with `UserApi` - Follow patterns from existing repository implementations ### Step 3: ViewModel Layer (1-2 days) Create ViewModels for user management screens: - **UserManagementViewModel** - User list management with search/filtering - Role assignment/revocation operations - User creation/deletion with confirmation dialogs - Error handling and loading states - Follow existing ViewModel patterns - **UserDetailsViewModel** (if needed) - Individual user detail management - Role management for specific users - Password change operations ### Step 4: UI Components (2-3 days) Create Compose UI components for user management: - **UserManagementScreen** - Admin-only screen accessible from main navigation - User list with search/filter capabilities - Add new user functionality - Edit/delete user actions - **User Management Dialogs** - Add/Edit User Dialog - Role Assignment Dialog - Confirmation dialogs for user deletion - Password change dialog - **Navigation Integration** - Add "User Management" to main navigation (admin-only) - Route configuration and navigation setup ## Technical Requirements ### API Integration - All endpoints documented in backend `/api/v1/users/*` routes - Proper error handling with `Either<ApiResourceError, T>` - JWT authentication via existing `AuthenticatedHttpClient` - Admin permission enforcement on frontend ### Data Models Required models should already exist in `common/` module: - `User` (id, username, email, createdAt, lastLogin) - `Role` (id, name, description) - `AssignRoleRequest`, `UpdateUserRequest`, `ChangePasswordRequest` ### UI/UX Guidelines - Follow existing Material 3 design patterns - Admin-only functionality (check user permissions) - Confirmation dialogs for destructive actions - Loading states and error handling - Responsive design for desktop application ### Security Considerations - Admin permission checks before showing UI elements - Secure password change workflow - Prevent deletion of last admin user - Proper error messages without exposing sensitive information ## Definition of Done - [ ] UserApi interface and implementation complete - [ ] UserRepository with proper state management - [ ] UserManagementViewModel with full functionality - [ ] UserManagementScreen with complete UI - [ ] All dialogs and confirmation prompts implemented - [ ] Navigation integration (admin-only access) - [ ] Error handling and loading states - [ ] Manual testing of all user management operations - [ ] Code follows existing architectural patterns ## Dependencies - Backend authentication infrastructure (✅ Complete) - Backend authorization service (✅ Complete) - Admin API endpoints `/api/v1/users/*` (✅ Complete) - Frontend authentication UI (✅ Complete) ## Estimated Timeline **Total: 5-7 days** - API Client Layer: 1-2 days - Repository Layer: 1-2 days - ViewModel Layer: 1-2 days - UI Components: 2-3 days ## Notes - This excludes Compose UI implementation details (focusing on architecture and API integration) - Follow existing patterns from `ModelApi`/`ProviderApi` implementations - All backend APIs are ready and tested - Frontend authentication system is complete and ready for integration