User Management

backend/app/models/ppr.py

@@ -14,9 +14,9 @@ class PPRStatus(str, Enum):
 
 
 class UserRole(str, Enum):
-    ADMINISTRATOR = "administrator"
-    OPERATOR = "operator"
-    READ_ONLY = "read_only"
+    ADMINISTRATOR = "ADMINISTRATOR"
+    OPERATOR = "OPERATOR"
+    READ_ONLY = "READ_ONLY"
 
 
 class PPRRecord(Base):

backend/app/schemas/ppr.py

@@ -14,9 +14,9 @@ class PPRStatus(str, Enum):
 
 
 class UserRole(str, Enum):
-    ADMINISTRATOR = "administrator"
-    OPERATOR = "operator"
-    READ_ONLY = "read_only"
+    ADMINISTRATOR = "ADMINISTRATOR"
+    OPERATOR = "OPERATOR"
+    READ_ONLY = "READ_ONLY"
 
 
 class PPRBase(BaseModel):

web/admin.html

@@ -577,6 +577,9 @@
             <button class="btn btn-success" onclick="openNewPPRModal()">
                 ➕ New PPR Entry
             </button>
+            <button class="btn btn-warning" onclick="openUserManagementModal()" id="user-management-btn" style="display: none;">
+                👥 User Management
+            </button>
         </div>
         <div class="menu-right">
             <button class="btn btn-primary" onclick="loadPPRs()">
@@ -802,6 +805,92 @@
         </div>
     </div>
 
+    <!-- User Management Modal -->
+    <div id="userManagementModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2>User Management</h2>
+                <button class="close" onclick="closeUserManagementModal()">&times;</button>
+            </div>
+            <div class="modal-body">
+                <div class="quick-actions" style="margin-bottom: 1rem;">
+                    <button class="btn btn-success" onclick="openUserCreateModal()">
+                        ➕ Create New User
+                    </button>
+                </div>
+
+                <div id="users-loading" class="loading">
+                    <div class="spinner"></div>
+                    Loading users...
+                </div>
+
+                <div id="users-table-content" style="display: none;">
+                    <table>
+                        <thead>
+                            <tr>
+                                <th>Username</th>
+                                <th>Role</th>
+                                <th>Created</th>
+                                <th>Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody id="users-table-body">
+                        </tbody>
+                    </table>
+                </div>
+
+                <div id="users-no-data" class="no-data" style="display: none;">
+                    <h3>No users found</h3>
+                    <p>No users are configured in the system.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- User Create/Edit Modal -->
+    <div id="userModal" class="modal">
+        <div class="modal-content" style="max-width: 500px;">
+            <div class="modal-header">
+                <h2 id="user-modal-title">Create User</h2>
+                <button class="close" onclick="closeUserModal()">&times;</button>
+            </div>
+            <div class="modal-body">
+                <form id="user-form">
+                    <input type="hidden" id="user-id" name="id">
+                    
+                    <div class="form-grid">
+                        <div class="form-group full-width">
+                            <label for="user-username">Username *</label>
+                            <input type="text" id="user-username" name="username" required>
+                        </div>
+                        <div class="form-group full-width">
+                            <label for="user-password">Password *</label>
+                            <input type="password" id="user-password" name="password" required>
+                            <small style="color: #666; font-size: 0.8rem;">Leave blank when editing to keep current password</small>
+                        </div>
+                        <div class="form-group full-width">
+                            <label for="user-role">Role *</label>
+                            <select id="user-role" name="role" required>
+                                <option value="READ_ONLY">Read Only - View only access</option>
+                                <option value="OPERATOR">Operator - PPR management access</option>
+                                <option value="ADMINISTRATOR">Administrator - Full access</option>
+                            </select>
+                        </div>
+                    </div>
+
+                    <div class="form-actions">
+                        <button type="button" class="btn btn-primary" onclick="closeUserModal()">
+                            Cancel
+                        </button>
+                        <button type="submit" class="btn btn-success">
+                            💾 Save User
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+
     <!-- Success Notification -->
     <div id="notification" class="notification"></div>
 
@@ -917,7 +1006,7 @@
         });
 
         // Authentication management
-        function initializeAuth() {
+        async function initializeAuth() {
             // Try to get cached token
             const cachedToken = localStorage.getItem('ppr_access_token');
             const cachedUser = localStorage.getItem('ppr_username');
@@ -930,6 +1019,7 @@
                     accessToken = cachedToken;
                     currentUser = cachedUser;
                     document.getElementById('current-user').textContent = cachedUser;
+                    await updateUserRole(); // Update role-based UI
                     connectWebSocket(); // Connect WebSocket for real-time updates
                     loadPPRs();
                     return;
@@ -1022,6 +1112,7 @@
                     document.getElementById('current-user').textContent = username;
                     
                     hideLogin();
+                    await updateUserRole(); // Update role-based UI
                     connectWebSocket(); // Connect WebSocket for real-time updates
                     loadPPRs();
                 } else {
@@ -1190,8 +1281,13 @@
                         <span class="tooltip-text">${ppr.notes}</span>
                      </span>` : '';
                 
+                // Display callsign as main item if present, registration below; otherwise show registration
+                const aircraftDisplay = ppr.ac_call && ppr.ac_call.trim() ? 
+                    `<strong>${ppr.ac_call}</strong><br><span style="font-size: 0.8em; color: #666; font-style: italic;">${ppr.ac_reg}</span>` : 
+                    `<strong>${ppr.ac_reg}</strong>`;
+                
                 row.innerHTML = `
-                    <td><strong>${ppr.ac_reg}</strong>${notesIndicator}</td>
+                    <td>${aircraftDisplay}${notesIndicator}</td>
                     <td>${ppr.ac_type}</td>
                     <td>${ppr.in_from}</td>
                     <td>${formatTimeOnly(ppr.eta)}</td>
@@ -1236,8 +1332,13 @@
                         <span class="tooltip-text">${ppr.notes}</span>
                      </span>` : '';
                 
+                // Display callsign as main item if present, registration below; otherwise show registration
+                const aircraftDisplay = ppr.ac_call && ppr.ac_call.trim() ? 
+                    `<strong>${ppr.ac_call}</strong><br><span style="font-size: 0.8em; color: #666; font-style: italic;">${ppr.ac_reg}</span>` : 
+                    `<strong>${ppr.ac_reg}</strong>`;
+                
                 row.innerHTML = `
-                    <td><strong>${ppr.ac_reg}</strong>${notesIndicator}</td>
+                    <td>${aircraftDisplay}${notesIndicator}</td>
                     <td>${ppr.ac_type}</td>
                     <td>${ppr.out_to || '-'}</td>
                     <td>${ppr.etd ? formatTimeOnly(ppr.etd) : '-'}</td>
@@ -1639,10 +1740,246 @@
             }
         }
 
+        // User Management Functions
+        let currentUserRole = null;
+        let isNewUser = false;
+        let currentUserId = null;
+
+        async function openUserManagementModal() {
+            if (!accessToken) return;
+
+            document.getElementById('userManagementModal').style.display = 'block';
+            await loadUsers();
+        }
+
+        function closeUserManagementModal() {
+            document.getElementById('userManagementModal').style.display = 'none';
+        }
+
+        async function loadUsers() {
+            if (!accessToken) return;
+
+            document.getElementById('users-loading').style.display = 'block';
+            document.getElementById('users-table-content').style.display = 'none';
+            document.getElementById('users-no-data').style.display = 'none';
+
+            try {
+                const response = await authenticatedFetch('/api/v1/auth/users');
+
+                if (!response.ok) {
+                    throw new Error('Failed to fetch users');
+                }
+
+                const users = await response.json();
+                displayUsers(users);
+            } catch (error) {
+                console.error('Error loading users:', error);
+                if (error.message !== 'Session expired. Please log in again.') {
+                    showNotification('Error loading users', true);
+                }
+            }
+
+            document.getElementById('users-loading').style.display = 'none';
+        }
+
+        function displayUsers(users) {
+            const tbody = document.getElementById('users-table-body');
+            
+            if (users.length === 0) {
+                document.getElementById('users-no-data').style.display = 'block';
+                return;
+            }
+
+            tbody.innerHTML = '';
+            document.getElementById('users-table-content').style.display = 'block';
+
+            users.forEach(user => {
+                const row = document.createElement('tr');
+                
+                // Format role for display
+                const roleDisplay = {
+                    'ADMINISTRATOR': 'Administrator',
+                    'OPERATOR': 'Operator', 
+                    'READ_ONLY': 'Read Only'
+                }[user.role] || user.role;
+
+                // Format created date
+                const createdDate = user.created_at ? formatDateTime(user.created_at) : '-';
+
+                row.innerHTML = `
+                    <td><strong>${user.username}</strong></td>
+                    <td>${roleDisplay}</td>
+                    <td>${createdDate}</td>
+                    <td>
+                        <button class="btn btn-warning btn-icon" onclick="event.stopPropagation(); openUserEditModal(${user.id})" title="Edit User">
+                            ✏️
+                        </button>
+                    </td>
+                `;
+                
+                tbody.appendChild(row);
+            });
+        }
+
+        function openUserCreateModal() {
+            isNewUser = true;
+            currentUserId = null;
+            document.getElementById('user-modal-title').textContent = 'Create New User';
+            
+            // Clear form
+            document.getElementById('user-form').reset();
+            document.getElementById('user-id').value = '';
+            document.getElementById('user-password').required = true;
+            
+            // Show password help text
+            const passwordHelp = document.querySelector('#user-password + small');
+            if (passwordHelp) passwordHelp.style.display = 'none';
+            
+            document.getElementById('userModal').style.display = 'block';
+            
+            // Auto-focus on username field
+            setTimeout(() => {
+                document.getElementById('user-username').focus();
+            }, 100);
+        }
+
+        async function openUserEditModal(userId) {
+            if (!accessToken) return;
+
+            isNewUser = false;
+            currentUserId = userId;
+            document.getElementById('user-modal-title').textContent = 'Edit User';
+
+            try {
+                const response = await authenticatedFetch(`/api/v1/auth/users/${userId}`);
+
+                if (!response.ok) {
+                    throw new Error('Failed to fetch user details');
+                }
+
+                const user = await response.json();
+                populateUserForm(user);
+                
+                document.getElementById('userModal').style.display = 'block';
+            } catch (error) {
+                console.error('Error loading user details:', error);
+                showNotification('Error loading user details', true);
+            }
+        }
+
+        function populateUserForm(user) {
+            document.getElementById('user-id').value = user.id;
+            document.getElementById('user-username').value = user.username;
+            document.getElementById('user-password').value = ''; // Don't populate password
+            document.getElementById('user-role').value = user.role;
+            
+            // Make password optional for editing
+            document.getElementById('user-password').required = false;
+            
+            // Show password help text
+            const passwordHelp = document.querySelector('#user-password + small');
+            if (passwordHelp) passwordHelp.style.display = 'block';
+        }
+
+        function closeUserModal() {
+            document.getElementById('userModal').style.display = 'none';
+            currentUserId = null;
+            isNewUser = false;
+        }
+
+        // User form submission
+        document.getElementById('user-form').addEventListener('submit', async function(e) {
+            e.preventDefault();
+            
+            if (!accessToken) return;
+
+            const formData = new FormData(this);
+            const userData = {};
+            
+            formData.forEach((value, key) => {
+                if (key !== 'id' && value.trim() !== '') {
+                    userData[key] = value;
+                }
+            });
+
+            try {
+                let response;
+                if (isNewUser) {
+                    response = await fetch('/api/v1/auth/users', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'Authorization': `Bearer ${accessToken}`
+                        },
+                        body: JSON.stringify(userData)
+                    });
+                } else {
+                    response = await fetch(`/api/v1/auth/users/${currentUserId}`, {
+                        method: 'PUT',
+                        headers: {
+                            'Content-Type': 'application/json',
+                            'Authorization': `Bearer ${accessToken}`
+                        },
+                        body: JSON.stringify(userData)
+                    });
+                }
+
+                if (!response.ok) {
+                    const errorData = await response.json().catch(() => ({}));
+                    throw new Error(errorData.detail || 'Failed to save user');
+                }
+
+                const wasNewUser = isNewUser;
+                closeUserModal();
+                await loadUsers(); // Refresh user list
+                showNotification(wasNewUser ? 'User created successfully!' : 'User updated successfully!');
+            } catch (error) {
+                console.error('Error saving user:', error);
+                showNotification(`Error saving user: ${error.message}`, true);
+            }
+        });
+
+        // Update user role detection and UI visibility
+        async function updateUserRole() {
+            console.log('updateUserRole called'); // Debug log
+            if (!accessToken) {
+                console.log('No access token, skipping role update'); // Debug log
+                return;
+            }
+
+            try {
+                const response = await authenticatedFetch('/api/v1/auth/test-token', {
+                    method: 'POST'
+                });
+                
+                if (response.ok) {
+                    const userData = await response.json();
+                    currentUserRole = userData.role;
+                    console.log('User role from API:', currentUserRole); // Debug log
+                    
+                    // Show user management button only for administrators
+                    const userManagementBtn = document.getElementById('user-management-btn');
+                    if (currentUserRole && currentUserRole.toUpperCase() === 'ADMINISTRATOR') {
+                        userManagementBtn.style.display = 'inline-block';
+                        console.log('Showing user management button'); // Debug log
+                    } else {
+                        userManagementBtn.style.display = 'none';
+                        console.log('Hiding user management button, current role:', currentUserRole); // Debug log
+                    }
+                }
+            } catch (error) {
+                console.error('Error updating user role:', error);
+                // Hide user management by default on error
+                document.getElementById('user-management-btn').style.display = 'none';
+            }
+        }
+
         // Close modal when clicking outside
         window.onclick = function(event) {
             const pprModal = document.getElementById('pprModal');
             const timestampModal = document.getElementById('timestampModal');
+            const userManagementModal = document.getElementById('userManagementModal');
+            const userModal = document.getElementById('userModal');
             
             if (event.target === pprModal) {
                 closePPRModal();
@@ -1650,6 +1987,12 @@
             if (event.target === timestampModal) {
                 closeTimestampModal();
             }
+            if (event.target === userManagementModal) {
+                closeUserManagementModal();
+            }
+            if (event.target === userModal) {
+                closeUserModal();
+            }
         }
 
         // Aircraft Lookup Functions

web/index.html

@@ -254,11 +254,16 @@
 
         // Create PPR item HTML
         function createPPRItem(ppr) {
+            // Display callsign as main item if present, registration below; otherwise show registration
+            const aircraftDisplay = ppr.ac_call && ppr.ac_call.trim() ? 
+                `${ppr.ac_call}<br><span style="font-size: 0.85em; color: #888; font-style: italic;">${ppr.ac_reg}</span>` : 
+                ppr.ac_reg;
+            
             return `
                 <div class="ppr-item">
                     <div class="ppr-field">
                         <strong>Aircraft</strong>
-                        <span>${ppr.ac_reg}</span>
+                        <span>${aircraftDisplay}</span>
                     </div>
                     <div class="ppr-field">
                         <strong>Type</strong>