FULL WORKING V 1.0

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

frontend/upload.js

@@ -93,34 +93,124 @@ function showVerofyMapIdInput() {
       <p style="color: green; font-weight: bold; margin-bottom: 15px;">
         Your files have passed QC!
       </p>
-      <p style="margin-bottom: 10px;">Please provide VerofyMapID:</p>
-      <input type="number" id="verofyMapId" placeholder="Enter Map ID"
-             style="padding: 8px; width: 200px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px;" />
-      <br/>
+      <p style="margin-bottom: 15px; font-size: 14px;">
+        Please provide your Verofy credentials and Map ID to upload:
+      </p>
+
+      <div style="margin-bottom: 10px;">
+        <label style="display: block; margin-bottom: 5px; font-weight: bold;">Verofy Email:</label>
+        <input type="email" id="verofyEmail" placeholder="your.email@example.com"
+               style="padding: 8px; width: 300px; border: 1px solid #ccc; border-radius: 4px;" />
+      </div>
+
+      <div style="margin-bottom: 10px;">
+        <label style="display: block; margin-bottom: 5px; font-weight: bold;">Verofy Password:</label>
+        <input type="password" id="verofyPassword" placeholder="Your password"
+               style="padding: 8px; width: 300px; border: 1px solid #ccc; border-radius: 4px;" />
+      </div>
+
+      <div style="margin-bottom: 15px;">
+        <label style="display: block; margin-bottom: 5px; font-weight: bold;">Verofy Map ID:</label>
+        <input type="number" id="verofyMapId" placeholder="Enter Map ID (e.g., 15685)"
+               style="padding: 8px; width: 300px; border: 1px solid #ccc; border-radius: 4px;" />
+      </div>
+
       <button onclick="submitMapId()"
               style="padding: 10px 20px; background: #007BFF; color: white; border: none; border-radius: 5px; cursor: pointer;">
-        Submit
+        Upload to Verofy
       </button>
     </div>
   `
 }
 
-function submitMapId() {
+async function submitMapId() {
+  const emailInput = document.getElementById('verofyEmail')
+  const passwordInput = document.getElementById('verofyPassword')
   const mapIdInput = document.getElementById('verofyMapId')
+
+  const email = emailInput.value
+  const password = passwordInput.value
   const mapId = mapIdInput.value
 
-  if (!mapId || mapId.trim() === '') {
-    alert('Please enter a VerofyMapID')
+  // Validate inputs
+  if (!email || email.trim() === '') {
+    alert('Please enter your Verofy email')
     return
   }
 
-  // Update the drop area to show success message
+  if (!password || password.trim() === '') {
+    alert('Please enter your Verofy password')
+    return
+  }
+
+  if (!mapId || mapId.trim() === '') {
+    alert('Please enter a Verofy Map ID')
+    return
+  }
+
+  // Show uploading status
   dropArea.innerHTML = `
-    <p style="color: green; font-weight: bold;">
-      Success! VerofyMapID ${mapId} received.
+    <p style="color: blue; font-weight: bold;">
+      Uploading to Verofy (Map ID: ${mapId})...<br/>
+      Please wait, this may take a few minutes.
     </p>
   `
 
+  // Send credentials and mapid to backend to trigger Verofy upload
+  try {
+    const response = await fetch('http://localhost:8000/push-to-verofy', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        mapId: parseInt(mapId),
+        verofyEmail: email,
+        verofyPassword: password
+      })
+    })
+
+    const data = await response.json()
+
+    if (response.ok && data.success) {
+      // Upload successful - show success message
+      dropArea.innerHTML = `
+        <p style="color: green; font-weight: bold;">
+          Success! Uploaded to Verofy Map ID ${mapId}.
+        </p>
+        <p style="font-size: 14px; margin-top: 10px;">
+          ${JSON.stringify(data.uploaded, null, 2)}
+        </p>
+      `
+
+      // Show celebration overlay
+      showCelebration()
+    } else {
+      // Upload failed
+      dropArea.innerHTML = `
+        <p style="color: red; font-weight: bold;">
+          Failed to upload to Verofy
+        </p>
+        <p style="font-size: 14px; margin-top: 10px;">
+          Error: ${data.error || 'Unknown error'}
+        </p>
+        ${data.details ? `<p style="font-size: 12px; margin-top: 5px;">${JSON.stringify(data.details)}</p>` : ''}
+      `
+    }
+  } catch (error) {
+    console.error('Upload error:', error)
+    dropArea.innerHTML = `
+      <p style="color: red; font-weight: bold;">
+        Upload failed. Check console for details.
+      </p>
+      <p style="font-size: 14px; margin-top: 10px;">
+        ${error.message}
+      </p>
+    `
+  }
+}
+
+function showCelebration() {
   // Create overlay with celebration image
   const overlay = document.createElement('div')
   overlay.id = 'celebrationOverlay'