Revert "Make AlpineJS CSP friendly (#6442)"

This reverts commit 6a15bb0.

kitsune/sumo/static/sumo/js/alpine.js

@@ -1,7 +1,5 @@
-import Alpine from "@alpinejs/csp";
+import Alpine from 'alpinejs';
 import trackEvent from "sumo/js/analytics";
-// we need to import surveyForm here so it's available to Alpine components
-import surveyForm from "sumo/js/survey_form";
 
 window.Alpine = Alpine;
 // Add trackEvent to the window object so it's available to Alpine components

kitsune/wiki/jinja2/wiki/includes/survey_form.html

@@ -1,13 +1,51 @@
-<div class="survey-container" x-data="surveyForm" data-survey-type="{{ survey_type }}">
+<div class="survey-container" x-data="{
+         selectedReason: '',
+         comment: '',
+         maxLength: 600,
+         hasError: false,
+         responseMessage: null,
+         validateForm() {
+             this.hasError = this.selectedReason === 'other' && !this.comment.trim();
+             return !this.hasError;
+         },
+         handleSubmit() {
+             if (this.validateForm()) {
+                 trackEvent('article_survey_submitted', { 
+                     survey_type: '{{ survey_type }}',
+                     reason: this.selectedReason 
+                 });
+                 return true;  // Allow HTMX to proceed with submission
+             }
+             return false;
+         },
+         closeSurvey() {
+             const surveyType = '{{ survey_type }}'.trim();
+             if (surveyType) {
+                 trackEvent('article_survey_closed', { survey_type: surveyType });
+             }
+             document.querySelector('.document-vote').remove();
+         }
+     }" x-init="
+         const surveyType = '{{ survey_type }}'.trim();
+         if (surveyType) {
+             trackEvent('article_survey_opened', { survey_type: surveyType });
+         }
+         responseMessage = $refs.messageData.value;
+         if (responseMessage) {
+             setTimeout(() => {
+                 closeSurvey();
+             }, 5000);
+         }
+     ">
   <input type="hidden" x-ref="messageData" value="{{ response_message if response_message else '' }}">
   <template x-if="responseMessage">
     <div class="survey-message">
       <p x-text="responseMessage"></p>
     </div>
   </template>
 
-  <template x-if="formVisible">
-    <form hx-post="{{ action_url }}" hx-target=".survey-container" hx-trigger="submit">
+  <template x-if="!responseMessage">
+    <form hx-post="{{ action_url }}" hx-target=".survey-container" @submit.prevent="handleSubmit()" hx-trigger="submit">
       {% csrf_token %}
       <input type="hidden" name="vote_id" value="{{ vote_id }}" />
       <input type="hidden" name="revision_id" value="{{ revision_id }}" />
@@ -18,22 +56,22 @@ <h3 class="sumo-card-heading text-center">
       <ul id="{{ survey_type }}-contents">
         {% for option in survey_options %}
         <li class="field is-condensed radio">
-          <input type="radio" 
-                 name="{{ survey_type }}-reason" 
-                 value="{{ option.value }}"
-                 id="{{ survey_type }}_{{ loop.index }}" />
+          <input type="radio" name="{{ survey_type }}-reason" value="{{ option.value }}"
+            id="{{ survey_type }}_{{ loop.index }}" x-model="selectedReason" />
           <label for="{{ survey_type }}_{{ loop.index }}">{{ option.text }}</label>
         </li>
         {% endfor %}
       </ul>
       <p class="comments-label align-start">
         {{ _('Comments') }}
-        <span x-show="isOtherSelected" class="required-text">{{ _('Required') }}</span>
+        <span x-show="selectedReason === 'other'" class="required-text">{{ _('Required') }}</span>
       </p>
       <textarea name="comment"
-        placeholder="{{ _('To protect your privacy, please do not include any personal information.') }}"></textarea>
+        placeholder="{{ _('To protect your privacy, please do not include any personal information.') }}"
+        x-model="comment" :required="selectedReason === 'other'" :disabled="selectedReason !== 'other'"
+        @input="if (comment.length > maxLength) comment = comment.slice(0, maxLength)"></textarea>
       <p class="character-counter">
-        <span x-text="remainingChars"></span> {{ _('characters remaining.') }}
+        <span x-text="maxLength - comment.length"></span> {{ _('characters remaining.') }}
       </p>
       <p class="error-text" x-show="hasError" style="display: none; color: red;">{{ _('Please provide more details.') }}
       </p>
@@ -42,7 +80,7 @@ <h3 class="sumo-card-heading text-center">
           {{ _('Cancel') }}
         </button>
         <button class="sumo-button button-sm primary-button" type="submit"
-          x-bind:disabled="isSubmitDisabled">
+          :disabled="!selectedReason || (selectedReason === 'other' && !comment.trim())">
           {{ _('Submit') }}
         </button>
       </div>

package.json

@@ -34,9 +34,9 @@
   },
   "license": "MPL-2.0",
   "dependencies": {
-    "@alpinejs/csp": "^3.14.8",
     "@babel/runtime": "^7.20.13",
     "@urql/svelte": "^3.0.3",
+    "alpinejs": "^3.14.7",
     "codemirror": "^5.65.11",
     "d3": "^3.5.17",
     "graphql": "^16.8.1",