Fix: prevent multiple contest submissions and fix alert z-index (#151)

- Add loading state to prevent duplicate contest creation on multiple
clicks
- Disable all form inputs and buttons during submission
- Show spinner and 'Creating...' text on submit button while processing
- Add early return in handleSubmit if already in loading state
- Ensure loading state is reset in finally block for error handling

These changes ensure users can only submit once per click and alerts
are visible above the modal dialog during contest creation.

Author: GauriGupta21

frontend/src/components/CreateContestModal.vue

@@ -6,40 +6,44 @@
         <!-- Modal header with Wikipedia primary color -->
         <div class="modal-header">
           <h5 class="modal-title">Create New Contest</h5>
-          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" :disabled="loading"></button>
         </div>
         <div class="modal-body">
           <form @submit.prevent="handleSubmit">
             <!-- Basic contest information: name and project -->
             <div class="row">
               <div class="col-md-6 mb-3">
                 <label for="contestName" class="form-label">Contest Name *</label>
-                <input type="text" class="form-control" id="contestName" v-model="formData.name" required />
+                <input type="text" class="form-control" id="contestName" v-model="formData.name" required
+                  :disabled="loading" />
               </div>
               <div class="col-md-6 mb-3">
                 <label for="projectName" class="form-label">Project Name *</label>
-                <input type="text" class="form-control" id="projectName" v-model="formData.project_name" required />
+                <input type="text" class="form-control" id="projectName" v-model="formData.project_name" required
+                  :disabled="loading" />
               </div>
             </div>
 
             <!-- Contest description field -->
             <div class="mb-3">
               <label for="contestDescription" class="form-label">Description</label>
-              <textarea class="form-control" id="contestDescription" rows="3" v-model="formData.description"></textarea>
+              <textarea class="form-control" id="contestDescription" rows="3" v-model="formData.description"
+                :disabled="loading"></textarea>
             </div>
 
             <!-- Contest rules - required field -->
             <div class="mb-3">
               <label for="contestRules" class="form-label">Contest Rules *</label>
               <textarea class="form-control" id="contestRules" rows="4"
-                placeholder="Write rules about how articles must be submitted." v-model="formData.rules_text"
-                required></textarea>
+                placeholder="Write rules about how articles must be submitted." v-model="formData.rules_text" required
+                :disabled="loading"></textarea>
             </div>
 
             <!-- Submission type selector: new, expansion, or both -->
             <div class="mb-3">
               <label for="allowedType" class="form-label">Allowed Submission Type</label>
-              <select id="allowedType" class="form-control" v-model="formData.allowed_submission_type">
+              <select id="allowedType" class="form-control" v-model="formData.allowed_submission_type"
+                :disabled="loading">
                 <option value="new">New Article Only</option>
                 <option value="expansion">Improved Article Only</option>
                 <option value="both">Both(New Article + Improved Article)</option>
@@ -50,11 +54,13 @@
             <div class="row">
               <div class="col-md-6 mb-3">
                 <label for="startDate" class="form-label">Start Date *</label>
-                <input type="date" class="form-control" id="startDate" v-model="formData.start_date" required />
+                <input type="date" class="form-control" id="startDate" v-model="formData.start_date" required
+                  :disabled="loading" />
               </div>
               <div class="col-md-6 mb-3">
                 <label for="endDate" class="form-label">End Date *</label>
-                <input type="date" class="form-control" id="endDate" v-model="formData.end_date" required />
+                <input type="date" class="form-control" id="endDate" v-model="formData.end_date" required
+                  :disabled="loading" />
               </div>
             </div>
 
@@ -75,16 +81,18 @@
                   <!-- Simple Scoring Option -->
                   <div class="col-md-6">
                     <label :class="{ 'active': !enableMultiParameterScoring }">
-                      <input type="radio" name="scoringMode" :value="false" v-model="enableMultiParameterScoring" />
-                        <h6>Simple Scoring</h6>
+                      <input type="radio" name="scoringMode" :value="false" v-model="enableMultiParameterScoring"
+                        :disabled="loading" />
+                      <h6>Simple Scoring</h6>
                     </label>
                   </div>
 
                   <!-- Multi-Parameter Scoring Option -->
                   <div class="col-md-6">
                     <label :class="{ 'active': enableMultiParameterScoring }">
-                      <input type="radio" name="scoringMode" :value="true" v-model="enableMultiParameterScoring" />
-                      <div >
+                      <input type="radio" name="scoringMode" :value="true" v-model="enableMultiParameterScoring"
+                        :disabled="loading" />
+                      <div>
                         <h6>Multi-Parameter Scoring</h6>
                       </div>
                     </label>
@@ -102,7 +110,7 @@
                     <div class="col-md-6 mb-3">
                       <label for="marksAccepted" class="form-label">Points for Accepted Submissions *</label>
                       <input type="number" class="form-control" id="marksAccepted"
-                        v-model.number="formData.marks_setting_accepted" min="0" required />
+                        v-model.number="formData.marks_setting_accepted" min="0" required :disabled="loading" />
                       <small class="form-text text-muted">
                         Maximum points that can be awarded. Jury can assign points from 0 up to this value for accepted
                         submissions.
@@ -111,7 +119,7 @@
                     <div class="col-md-6 mb-3">
                       <label for="marksRejected" class="form-label">Points for Rejected Submissions *</label>
                       <input type="number" class="form-control" id="marksRejected"
-                        v-model.number="formData.marks_setting_rejected" min="0" required />
+                        v-model.number="formData.marks_setting_rejected" min="0" required :disabled="loading" />
                       <small class="form-text text-muted">
                         Fixed points awarded automatically for rejected submissions (usually 0 or negative).
                       </small>
@@ -132,14 +140,14 @@
                     <div class="col-md-6">
                       <label class="form-label">Maximum Score (Accepted Submissions) *</label>
                       <input type="number" class="form-control" v-model.number="maxScore" min="1" max="100"
-                        placeholder="0" required />
+                        placeholder="0" required :disabled="loading" />
                       <small class="text-muted">Final calculated score will be scaled to this value</small>
                     </div>
 
                     <div class="col-md-6">
                       <label class="form-label">Minimum Score (Rejected Submissions) *</label>
                       <input type="number" class="form-control" v-model.number="minScore" min="0" max="100"
-                        placeholder="0" required />
+                        placeholder="0" required :disabled="loading" />
                       <small class="text-muted">Score for rejected submissions</small>
                     </div>
                   </div>
@@ -158,22 +166,22 @@
                         <div class="row align-items-center">
                           <div class="col-md-3">
                             <input type="text" class="form-control" v-model="param.name" placeholder="Parameter name"
-                              required />
+                              required :disabled="loading" />
                           </div>
                           <div class="col-md-3">
                             <div class="input-group">
                               <input type="number" class="form-control" v-model.number="param.weight" min="0" max="100"
-                                placeholder="Weight" required />
+                                placeholder="Weight" required :disabled="loading" />
                               <span class="input-group-text">%</span>
                             </div>
                           </div>
                           <div class="col-md-5">
                             <input type="text" class="form-control" v-model="param.description"
-                              placeholder="Description (optional)" />
+                              placeholder="Description (optional)" :disabled="loading" />
                           </div>
                           <div class="col-md-1 text-end">
                             <button type="button" class="btn btn-sm btn-outline-danger" @click="removeParameter(index)"
-                              :disabled="scoringParameters.length <= 1">
+                              :disabled="scoringParameters.length <= 1 || loading">
                               <i class="fas fa-times"></i>
                             </button>
                           </div>
@@ -182,7 +190,8 @@
                       </div>
                     </div>
 
-                    <button type="button" class="btn btn-sm btn-outline-primary mt-2" @click="addParameter">
+                    <button type="button" class="btn btn-sm btn-outline-primary mt-2" @click="addParameter"
+                      :disabled="loading">
                       <i class="fas fa-plus me-1"></i>Add Parameter
                     </button>
 
@@ -201,7 +210,8 @@
                   </div>
 
                   <!-- Reset to default parameters -->
-                  <button type="button" class="btn btn-sm btn-outline-secondary" @click="loadDefaultParameters">
+                  <button type="button" class="btn btn-sm btn-outline-secondary" @click="loadDefaultParameters"
+                    :disabled="loading">
                     <i class="fas fa-redo me-1"></i>Load Default Parameters
                   </button>
                 </div>
@@ -227,7 +237,7 @@
               <!-- Organizer search input with autocomplete dropdown -->
               <div style="position: relative;">
                 <input type="text" class="form-control" v-model="organizerSearchQuery" @input="searchOrganizers"
-                  placeholder="Type username to add additional organizers..." autocomplete="off" />
+                  placeholder="Type username to add additional organizers..." autocomplete="off" :disabled="loading" />
 
                 <!-- Autocomplete results dropdown -->
                 <div v-if="organizerSearchResults.length > 0 && organizerSearchQuery.length >= 2"
@@ -277,7 +287,7 @@
               <!-- Jury search input with autocomplete dropdown -->
               <div style="position: relative;">
                 <input type="text" class="form-control" id="juryInput" v-model="jurySearchQuery" @input="searchJury"
-                  placeholder="Type username to search..." autocomplete="off" />
+                  placeholder="Type username to search..." autocomplete="off" :disabled="loading" />
                 <!-- Autocomplete results with self-selection warning -->
                 <div v-if="jurySearchResults.length > 0 && jurySearchQuery.length >= 2"
                   class="jury-autocomplete position-absolute w-100 border rounded-bottom"
@@ -304,15 +314,15 @@
             <div class="mb-3">
               <label for="minByteCount" class="form-label">Minimum Byte Count *</label>
               <input type="number" class="form-control" id="minByteCount" v-model.number="formData.min_byte_count"
-                min="0" placeholder="e.g., 1000" required />
+                min="0" placeholder="e.g., 1000" required :disabled="loading" />
               <small class="form-text text-muted">Articles must have at least this many bytes</small>
             </div>
 
             <!-- Minimum reference/citation requirement -->
             <div class="mb-3">
               <label for="minReferenceCount" class="form-label">Minimum Reference Count</label>
               <input type="number" class="form-control" id="minReferenceCount"
-                v-model.number="formData.min_reference_count" min="0" placeholder="e.g., 5" />
+                v-model.number="formData.min_reference_count" min="0" placeholder="e.g., 5" :disabled="loading" />
               <small class="form-text text-muted">
                 Articles must have at least this many references (external links). Leave as 0 for no requirement.
               </small>
@@ -329,15 +339,15 @@
                 <div class="input-group">
                   <input type="url" class="form-control" v-model="formData.categories[index]"
                     :placeholder="index === 0 ? 'https://en.wikipedia.org/wiki/Category:Example' : 'Add another category URL'"
-                    required />
+                    required :disabled="loading" />
                   <button v-if="formData.categories.length > 1" type="button" class="btn btn-outline-danger"
-                    @click="removeCategory(index)" title="Remove category">
+                    @click="removeCategory(index)" title="Remove category" :disabled="loading">
                     <i class="fas fa-times"></i>
                   </button>
                 </div>
               </div>
 
-              <button type="button" class="btn btn-outline-primary btn-sm" @click="addCategory">
+              <button type="button" class="btn btn-outline-primary btn-sm" @click="addCategory" :disabled="loading">
                 <i class="fas fa-plus me-1"></i>Add Category
               </button>
 
@@ -353,7 +363,7 @@
                 <span class="badge bg-secondary ms-1">Optional</span>
               </label>
               <input type="url" class="form-control" id="templateLink" v-model="formData.template_link"
-                placeholder="https://en.wikipedia.org/wiki/Template:YourContestTemplate" />
+                placeholder="https://en.wikipedia.org/wiki/Template:YourContestTemplate" :disabled="loading" />
               <small class="form-text text-muted d-block mt-2">
                 <i class="fas fa-info-circle me-1"></i>
                 If set, this template will be automatically added to submitted articles that don't already have it.
@@ -366,8 +376,14 @@
 
         <!-- Modal footer with action buttons -->
         <div class="modal-footer">
-          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
-          <button type="submit" class="btn btn-primary" @click="handleSubmit">Create Contest</button>
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" :disabled="loading">Cancel</button>
+          <button type="submit" class="btn btn-primary" @click="handleSubmit" :disabled="loading">
+            <span v-if="loading">
+              <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
+              Creating...
+            </span>
+            <span v-else>Create Contest</span>
+          </button>
         </div>
       </div>
     </div>
@@ -694,6 +710,11 @@ export default {
 
     // Validate and submit contest creation form
     const handleSubmit = async () => {
+      // Prevent multiple submissions
+      if (loading.value) {
+        return
+      }
+
       // Basic validation
       if (!formData.name.trim()) {
         showAlert('Contest name is required', 'warning')
@@ -792,7 +813,9 @@ export default {
         }
       }
 
+      // Set loading state to prevent multiple submissions
       loading.value = true
+
       try {
         // Build scoring parameters payload
         let scoringParametersPayload = null
@@ -855,13 +878,17 @@ export default {
         if (result.success) {
           showAlert('Contest created successfully!', 'success')
           emit('created')
+
+          // Wait a bit for alert to show
           await new Promise(resolve => setTimeout(resolve, 100))
+
           // Close modal programmatically
           const modalElement = document.getElementById('createContestModal')
           const modal = bootstrap.Modal.getInstance(modalElement)
           if (modal) {
             modal.hide()
           }
+
           // Reset form
           resetForm()
         } else {
@@ -870,6 +897,7 @@ export default {
       } catch (error) {
         showAlert('Failed to create contest: ' + error.message, 'danger')
       } finally {
+        // Always reset loading state
         loading.value = false
       }
     }