fix contrib form

2025-07-25 17:34:42 +02:00
parent 78dc47d218
commit d80a4d85eb
5 changed files with 582 additions and 233 deletions
--- a/src/pages/api/contribute/tool.ts
+++ b/src/pages/api/contribute/tool.ts
@@ -175,17 +175,6 @@ export const POST: APIRoute = async ({ request }) => {
        const errorMessages = error.errors.map(err => 
          `${err.path.join('.')}: ${err.message}`
        );
-        // BEFORE: Manual validation error response (7 lines)
-        // return new Response(JSON.stringify({ 
-        //   success: false, 
-        //   error: 'Validation failed',
-        //   details: errorMessages
-        // }), {
-        //   status: 400,
-        //   headers: { 'Content-Type': 'application/json' }
-        // });
-
-        // AFTER: Single line with consolidated helper
        return apiError.validation('Validation failed', errorMessages);
      }
      
@@ -208,46 +197,35 @@ export const POST: APIRoute = async ({ request }) => {
      }
    };

-    // Submit contribution via Git
-    const gitManager = new GitContributionManager();
-    const result = await gitManager.submitContribution(contributionData);
+    // CRITICAL FIX: Enhanced error handling for Git operations
+    try {
+      const gitManager = new GitContributionManager();
+      const result = await gitManager.submitContribution(contributionData);

-    if (result.success) {
-      // Log successful contribution
-      console.log(`[CONTRIBUTION] ${validatedData.action} "${validatedData.tool.name}" by ${userEmail} - PR: ${result.prUrl}`);
+      if (result.success) {
+        // Log successful contribution
+        console.log(`[CONTRIBUTION SUCCESS] ${validatedData.action} "${validatedData.tool.name}" by ${userEmail} - PR: ${result.prUrl}`);
+        
+        // ENSURE proper success response
+        return apiResponse.created({
+          success: true,
+          message: result.message,
+          prUrl: result.prUrl,
+          branchName: result.branchName
+        });
+      } else {
+        // Log failed contribution
+        console.error(`[CONTRIBUTION FAILED] ${validatedData.action} "${validatedData.tool.name}" by ${userEmail}: ${result.message}`);
+        
+        return apiServerError.internal(`Contribution failed: ${result.message}`);
+      }
+    } catch (gitError) {
+      // CRITICAL: Handle Git operation errors properly
+      console.error(`[GIT ERROR] ${validatedData.action} "${validatedData.tool.name}" by ${userEmail}:`, gitError);
      
-      // BEFORE: Manual success response (7 lines)
-      // return new Response(JSON.stringify({
-      //   success: true,
-      //   message: result.message,
-      //   prUrl: result.prUrl,
-      //   branchName: result.branchName
-      // }), {
-      //   status: 200,
-      //   headers: { 'Content-Type': 'application/json' }
-      // });
-
-      // AFTER: Single line with consolidated helper
-      return apiResponse.created({
-        message: result.message,
-        prUrl: result.prUrl,
-        branchName: result.branchName
-      });
-    } else {
-      // Log failed contribution
-      console.error(`[CONTRIBUTION FAILED] ${validatedData.action} "${validatedData.tool.name}" by ${userEmail}: ${result.message}`);
-      
-      // BEFORE: Manual error response (7 lines)
-      // return new Response(JSON.stringify({
-      //   success: false,
-      //   error: result.message
-      // }), {
-      //   status: 500,
-      //   headers: { 'Content-Type': 'application/json' }
-      // });
-
-      // AFTER: Single line with consolidated helper
-      return apiServerError.internal(`Contribution failed: ${result.message}`);
+      // Return proper error response
+      const errorMessage = gitError instanceof Error ? gitError.message : 'Git operation failed';
+      return apiServerError.internal(`Git operation failed: ${errorMessage}`);
    }

  }, 'Contribution processing failed');
--- a/src/pages/contribute/index.astro
+++ b/src/pages/contribute/index.astro
@@ -50,37 +50,68 @@ const { authenticated, userEmail, userId } = authResult;
  "
 >

-  <!-- Tools, Methods & Concepts -->
-  <div class="card" 
-       style="padding: 2rem; border-left: 4px solid var(--color-primary); cursor: pointer; transition: var(--transition-fast);
-              display:flex; flex-direction:column;" 
-       onclick="window.location.href='/contribute/tool'">
-    <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;">
-      <div style="width: 48px; height: 48px; background-color: var(--color-primary); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center;">
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
-          <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
+  <!-- src/pages/contribute/index.astro - Replace the Tools/Methods/Concepts card -->
+
+<!-- Tools, Methods & Concepts - IMPROVED UX -->
+<div class="card" 
+     style="padding: 2rem; border-left: 4px solid var(--color-primary); transition: var(--transition-fast);
+            display:flex; flex-direction:column;">
+  <div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem;">
+    <div style="width: 48px; height: 48px; background-color: var(--color-primary); border-radius: 0.5rem; display: flex; align-items: center; justify-content: center;">
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
+        <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
+      </svg>
+    </div>
+    <h3 style="margin: 0; color: var(--color-primary); font-size: 1.25rem;">Software, Methoden oder Konzepte</h3>
+  </div>
+  
+  <p style="margin-bottom: 1.5rem; line-height: 1.6;">
+    Ergänzt Software/Tools, forensische Methoden und relevante Konzepte zu unserer Datenbank.
+    Füllt einfach ein kurzes Formular aus!
+  </p>
+  
+  <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem;">
+    <span class="badge" style="background-color: var(--color-primary); color: white;">Software/Tools</span>
+    <span class="badge" style="background-color: var(--color-method); color: white;">Methoden</span>
+    <span class="badge" style="background-color: var(--color-concept); color: white;">Konzepte</span>
+  </div>
+  
+  <div style="margin-top:auto; display:flex; flex-direction: column; gap:1rem;">
+    <a href="/contribute/tool" class="btn btn-primary" style="width: 100%;">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
+        <line x1="12" y1="5" x2="12" y2="19"/>
+        <line x1="5" y1="12" x2="19" y2="12"/>
+      </svg>
+      Neuer Eintrag
+    </a>
+    
+    <!-- IMPROVED: Clear guidance instead of confusing button -->
+    <div style="background-color: var(--color-bg-secondary); padding: 1.25rem; border-radius: 0.5rem; border-left: 3px solid var(--color-accent);">
+      <div style="display: flex; align-items: start; gap: 0.75rem;">
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="2" style="flex-shrink: 0; margin-top: 0.125rem;">
+          <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
+          <path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
        </svg>
+        <div>
+          <h4 style="margin: 0 0 0.5rem 0; color: var(--color-accent); font-size: 0.9375rem;">Existierenden Eintrag bearbeiten</h4>
+          <p style="margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--color-text-secondary);">
+            Suchen Sie das Tool/Methode/Konzept auf der <a href="/" style="color: var(--color-primary); text-decoration: underline;">Hauptseite</a>, 
+            öffnen Sie die Details und klicken Sie den <strong style="color: var(--color-text);">Edit</strong>-Button.
+          </p>
+          <div style="margin-top: 0.75rem;">
+            <a href="/" class="btn btn-secondary" style="font-size: 0.8125rem; padding: 0.5rem 1rem;">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.375rem;">
+                <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
+                <polyline points="9,22 9,12 15,12 15,22"/>
+              </svg>
+              Zur Hauptseite
+            </a>
+          </div>
+        </div>
      </div>
-      <h3 style="margin: 0; color: var(--color-primary); font-size: 1.25rem;">Software, Methoden oder Konzepte</h3>
-    </div>
-    
-    <p style="margin-bottom: 1.5rem; line-height: 1.6;">
-      Ergänzt Software/Tools, forensische Methoden und relevante Konzepte zu unserer Datenbank.
-      Füllt einfach ein kurzes Formular aus!
-    </p>
-    
-    <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem;">
-      <span class="badge" style="background-color: var(--color-primary); color: white;">Software/Tools</span>
-      <span class="badge" style="background-color: var(--color-method); color: white;">Methoden</span>
-      <span class="badge" style="background-color: var(--color-concept); color: white;">Konzepte</span>
-    </div>
-    
-    <div style="margin-top:auto; display:flex; gap:1rem;">
-      <a href="/contribute/tool" class="btn btn-primary" style="flex: 1;">Neuer Eintrag</a>
-      <a href="/contribute/tool?mode=browse" class="btn btn-secondary" style="flex: 1;">Existierenden Bearbeiten</a>
    </div>
  </div>
-
+</div>
  <!-- Knowledgebase Articles -->
  <div class="card" 
       style="padding: 2rem; border-left: 4px solid var(--color-accent); cursor: pointer; transition: var(--transition-fast);
--- a/src/pages/contribute/tool.astro
+++ b/src/pages/contribute/tool.astro
@@ -71,7 +71,7 @@ const title = isEdit ? `Edit ${editTool?.name}` : 'Beitrag erstellen';
          </div>

          <!-- Basic Information -->
-          <div style="display: grid; grid-template-columns: 1fr; gap: 1rem;">
+          <div style="display: flex; flex-direction: column; gap: 1.5rem;">
            <!-- Tool Name -->
            <div>
              <label for="tool-name" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">
@@ -129,37 +129,39 @@ const title = isEdit ? `Edit ${editTool?.name}` : 'Beitrag erstellen';
          </div>

          <!-- Categories -->
-          <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
+          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem;">
            <!-- Domains -->
            <div>
-              <label for="tool-domains" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">
+              <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">
                Forensische Domänen
              </label>
-              <select id="tool-domains" name="domains" multiple size="4">
+              <div id="tool-domains" style="display: grid; gap: 0.25rem; font-size: 0.875rem;">
                {domains.map(domain => (
-                  <option value={domain.id} 
-                          selected={editTool?.domains?.includes(domain.id)}>
-                    {domain.name}
-                  </option>
+                  <label class="checkbox-wrapper">
+                    <input type="checkbox" name="domains" value={domain.id} 
+                          checked={editTool?.domains?.includes(domain.id)} />
+                    <span>{domain.name}</span>
+                  </label>
                ))}
-              </select>
-              <div class="field-help">Strg gedrückt halten, um mehrere zu selektieren. Freilassen, wenn es zu keiner Domäne passt.</div>
+              </div>
+              <div class="field-help">Mehrfachauswahl erlaubt</div>
            </div>

            <!-- Phases -->
            <div>
-              <label for="tool-phases" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">
+              <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">
                Ermittlungsphasen
              </label>
-              <select id="tool-phases" name="phases" multiple size="4">
+              <div id="tool-phases" style="display: grid; gap: 0.25rem; font-size: 0.875rem;">
                {phases.map(phase => (
-                  <option value={phase.id}
-                          selected={editTool?.phases?.includes(phase.id)}>
-                    {phase.name}
-                  </option>
+                  <label class="checkbox-wrapper">
+                    <input type="checkbox" name="phases" value={phase.id} 
+                          checked={editTool?.phases?.includes(phase.id)} />
+                    <span>{phase.name}</span>
+                  </label>
                ))}
-              </select>
-              <div class="field-help">Zutreffende auswählen</div>
+              </div>
+              <div class="field-help">Mehrfachauswahl erlaubt</div>
            </div>
          </div>

@@ -287,23 +289,25 @@ const title = isEdit ? `Edit ${editTool?.name}` : 'Beitrag erstellen';
            </div>
          </div>

-          <!-- Related Concepts (for software/methods) -->
+          <!-- Related Concepts -->
          <div id="related-concepts-field" style="display: none;">
-            <label for="related-concepts" style="display: block; margin-bottom: 0.5rem; font-weight: 600;">
+            <label style="display: block; margin-bottom: 0.5rem; font-weight: 600;">
              Related Concepts
            </label>
-            <select id="related-concepts" name="relatedConcepts" multiple size="3">
+            <div id="related-concepts" style="display: grid; gap: 0.25rem; font-size: 0.875rem;">
              {existingTools.filter(tool => tool.type === 'concept').map(concept => (
-                <option value={concept.name} 
-                        selected={editTool?.related_concepts?.includes(concept.name)}>
-                  {concept.name}
-                </option>
+                <label class="checkbox-wrapper">
+                  <input type="checkbox" name="relatedConcepts" value={concept.name} 
+                        checked={editTool?.related_concepts?.includes(concept.name)} />
+                  <span>{concept.name}</span>
+                </label>
              ))}
-            </select>
+            </div>
            <div class="field-help">
-              Select concepts that users should understand when using this tool/method
+              Wählt Konzepte, die hilfreich sind für das Verständnis dieses Tools oder dieser Methode
            </div>
          </div>
+        </div>

          <!-- Contribution Reason -->
          <div>
@@ -323,9 +327,6 @@ const title = isEdit ? `Edit ${editTool?.name}` : 'Beitrag erstellen';
          <div>
            <div style="display: flex; justify-content: between; align-items: center; margin-bottom: 0.5rem;">
              <label style="font-weight: 600;">YAML Preview</label>
-              <button type="button" id="refresh-preview" class="btn btn-secondary" style="padding: 0.25rem 0.75rem; font-size: 0.8125rem;">
-                Refresh Preview
-              </button>
            </div>
            <pre id="yaml-preview" style="background-color: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: 0.375rem; padding: 1rem; font-size: 0.8125rem; overflow-x: auto; max-height: 300px;">
 # YAML preview will appear here
@@ -364,7 +365,6 @@ const title = isEdit ? `Edit ${editTool?.name}` : 'Beitrag erstellen';
        </div>
      </div>
    </div>
-
  </section>
 </BaseLayout>

@@ -418,6 +418,7 @@ const title = isEdit ? `Edit ${editTool?.name}` : 'Beitrag erstellen';

 document.addEventListener('DOMContentLoaded', () => {
  const form = document.getElementById('contribution-form');
+  if (!form) console.error('[INIT ERROR] Form not found');
  const typeSelect = document.getElementById('tool-type');
  const submitBtn = document.getElementById('submit-btn');
  const submitText = document.getElementById('submit-text');
@@ -619,10 +620,6 @@ related_concepts: [${toolData.related_concepts.map(c => `"${c}"`).join(', ')}]`
    typeSelect.addEventListener('change', updateFieldVisibility);
  }
  
-  if (refreshPreviewBtn) {
-    refreshPreviewBtn.addEventListener('click', updateYAMLPreview);
-  }
-  
  // Update preview on form changes
  if (form) {
    form.addEventListener('input', debounce(updateYAMLPreview, 500));
@@ -631,8 +628,9 @@ related_concepts: [${toolData.related_concepts.map(c => `"${c}"`).join(', ')}]`

  // Form submission
  if (form) {
-    form.addEventListener('submit', async (e) => {
+    form?.addEventListener('submit', async (e) => {
      e.preventDefault();
+      console.log('[DEBUG] Submit button clicked');
      
      const errors = validateForm();
      if (errors.length > 0) {