Display election ID in the response and insert voters in a goroutine

ui/create-election.html

@@ -61,6 +61,17 @@
             </div>
         </form>
 
+        <div v-if="createdElectionId > 0" class="election-info">
+            <h2>Election Created Successfully</h2>
+            <div class="info-container">
+                <span class="info-label">Election ID:</span>
+                <span class="info-value">{{ createdElectionId }}</span>
+                <button @click="copyElectionId" class="copy-btn">
+                    Copy
+                </button>
+            </div>
+        </div>
+
         <div v-if="voterIdentities.length > 0" class="voter-codes">
             <h2>Voter Access Codes</h2>
             <div class="codes-container">
@@ -95,6 +106,7 @@
                     expiresAt: "",
                     choices: ["", ""] // Start with two empty choices
                 },
+                createdElectionId: 0,
                 voterIdentities: []
             };
         },
@@ -138,7 +150,12 @@
                     },
                     body: JSON.stringify(payload)
                 })
-                    .then(response => response.json())
+                    .then(response => {
+                        const locationHeader = response.headers.get('Location');
+                        this.createdElectionId = locationHeader.replace('/election/', '');
+
+                        return response.json();
+                    })
                     .then(data => {
                         this.voterIdentities = data.voterIdentities;
                     })

ui/static/css/styles.css

@@ -147,6 +147,35 @@ button:hover {
     margin-top: 1rem;
 }
 
+.election-info {
+    margin-top: 2rem;
+}
+
+.election-info h2 {
+    margin-bottom: 1.5rem;
+    color: var(--text-color);
+    font-size: 1.5rem;
+}
+
+.info-container {
+    display: flex;
+    align-items: center;
+    padding: 0.75rem;
+    background: var(--background-color);
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+}
+
+.info-label {
+    font-weight: 500;
+    margin-right: 1rem;
+}
+
+.info-value {
+    font-family: monospace;
+    flex: 1;
+}
+
 @media (max-width: 640px) {
     .container {
         padding: 0;