From d840b05da2322bae2e8bf27a3667bfec3c58b2e4 Mon Sep 17 00:00:00 2001
From: Jan <jan.weber@avatic.de>
Date: Tue, 28 Oct 2025 18:01:21 +0100
Subject: [PATCH] Enhanced OAuth2 API Tester tool, updated validation and
 improved CORS configuration:

- Improved OAuth2 Tester UI/UX: added support for multiple HTTP methods, query parameters, request body validation, collapsible result sections, and dynamic input handling.
- Enhanced `UserController` with validation annotations for `UserDTO` in API requests.
- Updated `UserDTO` to include stricter validation constraints (`@NotNull`, `@NotBlank`, `@Email`).
- Adjusted CORS configuration to allow all origins for OAuth endpoints.
---
 .../java/de/avatic/lcc/config/CorsConfig.java |   2 +-
 .../lcc/controller/users/UserController.java  |   3 +-
 .../java/de/avatic/lcc/dto/users/UserDTO.java |  10 +-
 tools/oauth2-tester/index.html                | 387 ++++++++++++++----
 4 files changed, 323 insertions(+), 79 deletions(-)

diff --git a/src/main/java/de/avatic/lcc/config/CorsConfig.java b/src/main/java/de/avatic/lcc/config/CorsConfig.java
index 102fff3..f4d7ea7 100644
--- a/src/main/java/de/avatic/lcc/config/CorsConfig.java
+++ b/src/main/java/de/avatic/lcc/config/CorsConfig.java
@@ -67,7 +67,7 @@ public class CorsConfig implements WebMvcConfigurer {
 
             // OAuth endpoints
             registry.addMapping("/oauth/**")
-                    .allowedOriginPatterns(allowedCors)
+                    .allowedOriginPatterns("*")
                     .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                     .allowedHeaders("*")
                     .allowCredentials(true);
diff --git a/src/main/java/de/avatic/lcc/controller/users/UserController.java b/src/main/java/de/avatic/lcc/controller/users/UserController.java
index 4ffe3e4..77026c7 100644
--- a/src/main/java/de/avatic/lcc/controller/users/UserController.java
+++ b/src/main/java/de/avatic/lcc/controller/users/UserController.java
@@ -4,6 +4,7 @@ package de.avatic.lcc.controller.users;
 import de.avatic.lcc.dto.users.UserDTO;
 import de.avatic.lcc.repositories.pagination.SearchQueryResult;
 import de.avatic.lcc.service.users.UserService;
+import jakarta.validation.Valid;
 import jakarta.validation.constraints.Min;
 import org.springframework.http.ResponseEntity;
 import org.springframework.security.access.prepost.PreAuthorize;
@@ -60,7 +61,7 @@ public class UserController {
      */
     @PutMapping({"/", ""})
     @PreAuthorize("hasRole('RIGHT-MANAGEMENT')")
-    public ResponseEntity<Void> updateUser(@RequestParam UserDTO user) {
+    public ResponseEntity<Void> updateUser(@Valid @RequestBody UserDTO user) {
         userService.updateUser(user);
         return ResponseEntity.ok().build();
     }
diff --git a/src/main/java/de/avatic/lcc/dto/users/UserDTO.java b/src/main/java/de/avatic/lcc/dto/users/UserDTO.java
index c645b9d..e9029cf 100644
--- a/src/main/java/de/avatic/lcc/dto/users/UserDTO.java
+++ b/src/main/java/de/avatic/lcc/dto/users/UserDTO.java
@@ -2,28 +2,36 @@ package de.avatic.lcc.dto.users;
 
 
 import com.fasterxml.jackson.annotation.JsonProperty;
+import jakarta.validation.Valid;
+import jakarta.validation.constraints.*;
 
 import java.util.List;
 
 public class UserDTO {
 
+    @NotNull
     @JsonProperty("firstname")
     private String firstName;
 
+    @NotNull
     @JsonProperty("lastname")
     private String lastName;
 
+    @Email
     @JsonProperty("mail")
     private String email;
 
+    @NotNull
     @JsonProperty("workday_id")
     private String workdayId;
 
     @JsonProperty("is_active")
     private boolean isActive;
 
+    @NotNull
+    @Size(min = 1)
     @JsonProperty("groups")
-    private List<String> groups;
+    private List<@NotBlank String> groups;
 
     public String getFirstName() {
         return firstName;
diff --git a/tools/oauth2-tester/index.html b/tools/oauth2-tester/index.html
index d1c8e98..a94962f 100644
--- a/tools/oauth2-tester/index.html
+++ b/tools/oauth2-tester/index.html
@@ -57,7 +57,7 @@
             font-size: 14px;
         }
 
-        input {
+        input, textarea {
             width: 100%;
             padding: 12px;
             border: 2px solid #e0e0e0;
@@ -67,6 +67,12 @@
             transition: border-color 0.3s;
         }
 
+        textarea {
+            min-height: 100px;
+            resize: vertical;
+            font-family: 'Courier New', monospace;
+        }
+
         select {
             width: 100%;
             padding: 12px;
@@ -80,11 +86,23 @@
         }
 
         input:focus,
-        select:focus {
+        select:focus,
+        textarea:focus {
             outline: none;
             border-color: #667eea;
         }
 
+        .method-selector {
+            display: grid;
+            grid-template-columns: 120px 1fr;
+            gap: 10px;
+            align-items: start;
+        }
+
+        .method-select {
+            width: 100%;
+        }
+
         button {
             width: 100%;
             padding: 14px;
@@ -158,7 +176,7 @@
 
         .result-box {
             background: #f8f9fa;
-            border: 1px solid #e0e0e0;
+            border: none;
             border-radius: 6px;
             padding: 15px;
             max-height: 400px;
@@ -175,14 +193,14 @@
         }
 
         .error {
-            color: #d32f2f;
-            background: #ffebee;
-            border-color: #ef9a9a;
+            color: #333;
+            background-color: #f8f9fa;
+            border-color: #BC2B72;
         }
 
         .success {
-            color: #388e3c;
-            background: #e8f5e9;
+            color: #333;
+            background-color: #f8f9fa;
             border-color: #81c784;
         }
 
@@ -222,8 +240,8 @@
         }
 
         .status-error {
-            background: #ffebee;
-            color: #d32f2f;
+            background-color: #BC2B72;
+            color: #ffffff;
         }
 
         .error-summary {
@@ -240,83 +258,195 @@
         }
 
         .error-summary strong {
-            color: #002F54;
             font-weight: 600;
         }
 
         .details-button {
-            width: 100%;
+            display: none;
+        }
+
+        .result-box-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
             padding: 10px;
+            background: #e9ecef;
+            border-radius: 6px 6px 0 0;
+            cursor: pointer;
+            user-select: none;
+            margin: -15px -15px 10px -15px;
+        }
+
+        .result-box-header:hover {
+            background: #dee2e6;
+        }
+
+        .result-box-title {
+            font-weight: 500;
+            color: #333;
+            font-size: 14px;
+        }
+
+        .toggle-icon {
+            font-size: 18px;
+            color: #666;
+            transition: transform 0.3s;
+        }
+
+        .toggle-icon.collapsed {
+            transform: rotate(-90deg);
+        }
+
+        .section-divider {
+            border-top: 2px solid #e0e0e0;
+            margin: 30px 0;
+        }
+
+        .section-title {
+            font-size: 18px;
+            color: #333;
+            margin-bottom: 15px;
+            font-weight: 600;
+        }
+
+        .params-section {
+            background: #f8f9fa;
+            padding: 15px;
+            border-radius: 6px;
+            margin-bottom: 20px;
+        }
+
+        .param-row {
+            display: grid;
+            grid-template-columns: 1fr 1fr auto;
+            gap: 10px;
+            margin-bottom: 10px;
+        }
+
+        .param-input {
+            padding: 8px;
+            border: 1px solid #e0e0e0;
+            border-radius: 4px;
+            font-size: 13px;
+        }
+
+        .param-remove {
+            padding: 8px 12px;
+            background-color: #BC2B72;
+            color: #ffffff;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 13px;
+        }
+
+        .param-remove:hover {
+            background-color: #a02460;
+        }
+
+        .param-add {
+            padding: 8px 16px;
             background-color: #002F54;
             color: #ffffff;
             border: none;
-            border-radius: 6px;
-            font-size: 14px;
-            font-weight: 500;
-            font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            border-radius: 4px;
             cursor: pointer;
-            margin-bottom: 15px;
-            transition: opacity 0.3s;
+            font-size: 13px;
+            font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            width: auto;
+            margin-top: 5px;
         }
 
-        .details-button:hover {
-            opacity: 0.8;
+        .param-add:hover {
+            background-color: #001a30;
+        }
+
+        .body-section {
+            display: none;
+        }
+
+        .body-section.active {
+            display: block;
+        }
+
+        .helper-text {
+            font-size: 12px;
+            color: #666;
+            margin-top: 5px;
         }
     </style>
 </head>
 <body>
     <div class="container">
         <h1>OAuth2 API Tester</h1>
-        <p class="subtitle">Teste deine OAuth2 Client Credentials API-Integration</p>
-
+        <p class="subtitle">Testen Sie APIs mit OAuth2-Authentifizierung</p>
+        
         <div class="info-section">
-            <h3>Hinweis</h3>
-            <p>Diese Anwendung verwendet den OAuth2 Client Credentials Flow. Stelle sicher, dass deine API diesen Flow unterstützt und CORS für diese Domain aktiviert ist.</p>
+            <h3>Funktionen:</h3>
+            <p>
+                • Unterstützt alle HTTP-Methoden (GET, POST, PUT, DELETE, PATCH)<br>
+                • Query-Parameter für alle Methoden<br>
+                • Request-Body für POST, PUT und PATCH<br>
+                • OAuth2 Client Credentials Flow
+            </p>
         </div>
 
         <form id="testForm">
+            <!-- OAuth2 Konfiguration -->
+            <div class="section-title">OAuth2 Konfiguration</div>
+            
             <div class="form-group">
-                <label for="tokenUrl">Token URL (OAuth2 Endpoint)</label>
-                <input 
-                    type="url" 
-                    id="tokenUrl" 
-                    placeholder="https://deine-app.de/oauth/token"
-                    required
-                >
+                <label for="tokenUrl">Token-URL</label>
+                <input type="url" id="tokenUrl" required placeholder="z.B. https://api.example.com/oauth/token">
             </div>
 
             <div class="form-group">
                 <label for="clientId">Client ID</label>
-                <input 
-                    type="text" 
-                    id="clientId" 
-                    placeholder="deine-client-id"
-                    required
-                >
+                <input type="text" id="clientId" required placeholder="Ihre Client ID">
             </div>
 
             <div class="form-group">
                 <label for="clientSecret">Client Secret</label>
-                <input 
-                    type="text" 
-                    id="clientSecret" 
-                    placeholder="dein-client-secret"
-                    required
-                >
+                <input type="text" id="clientSecret" required placeholder="Ihr Client Secret">
             </div>
 
+            <div class="section-divider"></div>
+
+            <!-- API Request Konfiguration -->
+            <div class="section-title">API Request Konfiguration</div>
+
             <div class="form-group">
-                <label for="apiUrl">API Endpoint URL (zu testende Ressource)</label>
-                <input 
-                    type="url" 
-                    id="apiUrl" 
-                    placeholder="https://deine-app.de/api/resource"
-                    required
-                >
+                <label for="httpMethod">HTTP-Methode und Endpoint</label>
+                <div class="method-selector">
+                    <select id="httpMethod" class="method-select">
+                        <option value="GET">GET</option>
+                        <option value="POST">POST</option>
+                        <option value="PUT">PUT</option>
+                        <option value="DELETE">DELETE</option>
+                        <option value="PATCH">PATCH</option>
+                    </select>
+                    <input type="url" id="apiUrl" required placeholder="z.B. https://api.example.com/v1/resource">
+                </div>
+            </div>
+
+            <!-- Query-Parameter -->
+            <div class="form-group">
+                <label>Query-Parameter (optional)</label>
+                <div class="params-section">
+                    <div id="queryParams"></div>
+                    <button type="button" class="param-add" onclick="addQueryParam()">+ Parameter hinzufügen</button>
+                </div>
+            </div>
+
+            <!-- Request Body (nur für POST, PUT, PATCH) -->
+            <div class="form-group body-section" id="bodySection">
+                <label for="requestBody">Request-Body (JSON)</label>
+                <textarea id="requestBody" placeholder='z.B. {"key": "value", "number": 123}'></textarea>
+                <div class="helper-text">Geben Sie valides JSON ein</div>
             </div>
 
             <button type="submit" id="submitBtn">
-                API Zugriff Testen
+                API testen
             </button>
         </form>
 
@@ -333,8 +463,11 @@
                 </div>
             </div>
             <div id="errorSummary" class="error-summary"></div>
-            <button id="detailsButton" class="details-button" style="display: none;"></button>
             <div class="result-box" id="resultBox">
+                <div class="result-box-header" id="toggleHeader" style="display: none;">
+                    <span class="result-box-title">Details anzeigen</span>
+                    <span class="toggle-icon" id="toggleIcon">▼</span>
+                </div>
                 <pre id="resultContent"></pre>
             </div>
         </div>
@@ -342,14 +475,100 @@
 
     <script>
         let accessToken = null;
+        let queryParamCount = 0;
 
+        // HTTP-Methode Änderung Handler
+        document.getElementById('httpMethod').addEventListener('change', function() {
+            const method = this.value;
+            const bodySection = document.getElementById('bodySection');
+            
+            // Zeige Body-Section nur für POST, PUT, PATCH
+            if (method === 'POST' || method === 'PUT' || method === 'PATCH') {
+                bodySection.classList.add('active');
+            } else {
+                bodySection.classList.remove('active');
+            }
+        });
+
+        // Query-Parameter Funktionen
+        function addQueryParam() {
+            const container = document.getElementById('queryParams');
+            const row = document.createElement('div');
+            row.className = 'param-row';
+            row.id = `param-${queryParamCount}`;
+            row.innerHTML = `
+                <input type="text" class="param-input" placeholder="Parameter-Name" data-param-key="${queryParamCount}">
+                <input type="text" class="param-input" placeholder="Wert" data-param-value="${queryParamCount}">
+                <button type="button" class="param-remove" onclick="removeQueryParam(${queryParamCount})">×</button>
+            `;
+            container.appendChild(row);
+            queryParamCount++;
+        }
+
+        function removeQueryParam(id) {
+            const row = document.getElementById(`param-${id}`);
+            if (row) {
+                row.remove();
+            }
+        }
+
+        function getQueryParams() {
+            const params = {};
+            const keys = document.querySelectorAll('[data-param-key]');
+            const values = document.querySelectorAll('[data-param-value]');
+            
+            keys.forEach((keyInput, index) => {
+                const key = keyInput.value.trim();
+                const value = values[index].value.trim();
+                if (key) {
+                    params[key] = value;
+                }
+            });
+            
+            return params;
+        }
+
+        function buildUrlWithParams(baseUrl, params) {
+            if (Object.keys(params).length === 0) {
+                return baseUrl;
+            }
+            
+            const url = new URL(baseUrl);
+            Object.entries(params).forEach(([key, value]) => {
+                url.searchParams.append(key, value);
+            });
+            
+            return url.toString();
+        }
+
+        // Form Submit Handler
         document.getElementById('testForm').addEventListener('submit', async (e) => {
             e.preventDefault();
             
             const tokenUrl = document.getElementById('tokenUrl').value;
             const clientId = document.getElementById('clientId').value;
             const clientSecret = document.getElementById('clientSecret').value;
-            const apiUrl = document.getElementById('apiUrl').value;
+            const httpMethod = document.getElementById('httpMethod').value;
+            const baseApiUrl = document.getElementById('apiUrl').value;
+            const queryParams = getQueryParams();
+            const apiUrl = buildUrlWithParams(baseApiUrl, queryParams);
+            
+            let requestBody = null;
+            if (httpMethod === 'POST' || httpMethod === 'PUT' || httpMethod === 'PATCH') {
+                const bodyText = document.getElementById('requestBody').value.trim();
+                if (bodyText) {
+                    try {
+                        requestBody = JSON.parse(bodyText);
+                    } catch (e) {
+                        displayResult({
+                            phase: 'validation',
+                            message: 'Ungültiger Request-Body',
+                            error: 'Der Request-Body muss valides JSON sein: ' + e.message
+                        }, false);
+                        return;
+                    }
+                }
+            }
             
             // UI Updates
             document.getElementById('loading').classList.add('active');
@@ -373,7 +592,7 @@
                 accessToken = tokenResponse.access_token;
                 
                 // Schritt 2: API Endpoint aufrufen
-                const apiResponse = await callApi(apiUrl, accessToken);
+                const apiResponse = await callApi(apiUrl, accessToken, httpMethod, requestBody);
                 
                 if (!apiResponse.success) {
                     displayResult({
@@ -452,15 +671,25 @@
             }
         }
 
-        async function callApi(apiUrl, token) {
+        async function callApi(apiUrl, token, method = 'GET', body = null) {
             try {
-                const response = await fetch(apiUrl, {
-                    method: 'GET',
-                    headers: {
-                        'Authorization': `Bearer ${token}`,
-                        'Accept': 'application/json'
-                    }
-                });
+                const headers = {
+                    'Authorization': `Bearer ${token}`,
+                    'Accept': 'application/json'
+                };
+
+                const options = {
+                    method: method,
+                    headers: headers
+                };
+
+                // Body nur für POST, PUT, PATCH hinzufügen
+                if (body && (method === 'POST' || method === 'PUT' || method === 'PATCH')) {
+                    headers['Content-Type'] = 'application/json';
+                    options.body = JSON.stringify(body);
+                }
+                
+                const response = await fetch(apiUrl, options);
                 
                 const contentType = response.headers.get('content-type');
                 let data;
@@ -507,7 +736,9 @@
                 statusBadge.className = 'status-badge status-success';
                 
                 errorSummary.style.display = 'none';
-                detailsButton.style.display = 'none';
+                
+                // Verstecke Toggle-Header bei Erfolg
+                document.getElementById('toggleHeader').style.display = 'none';
                 
                 // Stelle sicher, dass resultBox und resultContent sichtbar sind
                 resultBox.style.display = 'block';
@@ -527,33 +758,37 @@
                 } else if (result.phase === 'api') {
                     phaseText = 'API-Aufruf';
                     statusBadge.textContent = 'Fehler beim API-Aufruf';
+                } else if (result.phase === 'validation') {
+                    phaseText = 'Validierung';
+                    statusBadge.textContent = 'Validierungsfehler';
                 } else {
                     phaseText = 'Unbekannt';
                     statusBadge.textContent = 'Fehler';
                 }
                 statusBadge.className = 'status-badge status-error';
                 
-                // Zeige Fehler-Zusammenfassung
-                errorSummary.style.display = 'block';
-                errorSummary.innerHTML = `
-                    <strong>Phase:</strong> ${phaseText}<br>
-                    <strong>Fehler:</strong> ${result.message || 'Unbekannter Fehler'}<br>
-                    <strong>Details:</strong> ${result.error || 'Keine Details verfügbar'}
-                `;
+                // Verstecke Fehler-Zusammenfassung
+                errorSummary.style.display = 'none';
                 
-                // Details-Button
-                resultBox.style.display = 'block';
-                detailsButton.style.display = 'block';
-                detailsButton.onclick = function() {
+                // Zeige Toggle-Header
+                const toggleHeader = document.getElementById('toggleHeader');
+                const toggleIcon = document.getElementById('toggleIcon');
+                toggleHeader.style.display = 'flex';
+                
+                // Toggle-Funktion
+                toggleHeader.onclick = function() {
                     const isHidden = resultContent.style.display === 'none';
                     resultContent.style.display = isHidden ? 'block' : 'none';
-                    detailsButton.textContent = isHidden ? 'Details verbergen' : 'Vollständige Details anzeigen';
+                    toggleIcon.classList.toggle('collapsed');
+                    toggleHeader.querySelector('.result-box-title').textContent = 
+                        isHidden ? 'Details verbergen' : 'Details anzeigen';
                 };
                 
                 // Verstecke Details initial
+                resultBox.style.display = 'block';
                 resultContent.style.display = 'none';
                 resultContent.textContent = JSON.stringify(result, null, 2);
-                detailsButton.textContent = 'Vollständige Details anzeigen';
+                toggleIcon.classList.add('collapsed');
             }
         }
     </script>