Add pre-send check and warning (attempt 2) (#300)

* Add pre-send check and warning

* Use RegEx

UNTESTED

* Add more and improve RegEx patterns

* Add more and improve RegEx patterns 2

* Revamp code, add link on punishment description

* Improve RegEx patterns

* Disable JS-side sanitization

It is sanitized on Hugo already

Author: Hans5958

i18n/en.yaml

@@ -161,7 +161,17 @@ FeedbackPage:
   ContentPlaceholder: Please provide as much detail as you can.
   SendEnabled: Send list of my currently enabled addons (recommended)
   SubmitButton: Send
-
+  PreSendWarning:
+    Warning: "Warning:"
+    Override: If you are really sure to send this feedback, you can press the "Send" button again.
+    Variations:
+      NotST:
+        Heading: We are not the Scratch Team.
+        Description: Keep in mind that Scratch Addons is not affiliated with the Scratch website or the organizations that maintain it. You are still welcome to give ideas to improve your experience on Scratch with Scratch Addons.
+      Punishment:
+        Heading: We can't punish people. We are not the Scratch Team. <br>
+        Description: "Scratch Addons is not affiliated with the Scratch website or the organizations that maintain it. We have no control of the content and the moderation on the Scratch website. {{ .Tag1Start }}There are many ways that you can report on the Scratch website.{{ .Tag1End }}"
+    
 # Strings used for /scratch-messaging-transition
 SMTPage:
   ScratchMessagingLogoAlt: Scratch Messaging Extension logo

layouts/shortcodes/specifics/feedback-form.html

@@ -1,12 +1,29 @@
+{{ $ts := now.UnixMilli }}
+
 <script>
 	window.i18nStrings = {
 		statusSending: '{{ T "FeedbackPage.Status.Sending" }}',
 		statusSuccess: '{{ T "FeedbackPage.Status.Success" }}',
 		statusFailed: '{{ T "FeedbackPage.Status.Failed" }}',
 		statusOffline: '{{ T "FeedbackPage.Status.Offline" }}',
 		noAddonsList: '{{ T "FeedbackPage.NoAddonsList" }}',
-		submitButton: '{{ T "FeedbackPage.SubmitButton" }}',
+		preSendWarning: {
+			warning: '{{ T "FeedbackPage.PreSendWarning.Warning" }}',
+			override: '{{ T "FeedbackPage.PreSendWarning.Override" }}',
+			variations: {
+				notST: {
+					heading: '{{ T "FeedbackPage.PreSendWarning.Variations.NotST.Heading" }}',
+					description: '{{ T "FeedbackPage.PreSendWarning.Variations.NotST.Description" | htmlEscape }}',
+				},
+				punishment: {
+					heading: '{{ T "FeedbackPage.PreSendWarning.Variations.Punishment.Heading" }}',
+					description: '{{ T "FeedbackPage.PreSendWarning.Variations.Punishment.Description" ( dict "Tag1Start" (add $ts 1) "Tag1End" (add $ts 2) ) | htmlEscape }}',
+				}
+			}
+		},
+		submitButton: '{{ T "FeedbackPage.SubmitButton" }}'
 	}
+	window.i18nTimestamp = Number('{{ $ts }}')
 </script>
 <script defer src="/assets/js/feedback.js"></script>
 

static/assets/js/feedback.js

@@ -1,3 +1,22 @@
+const variations = {
+    notST: [
+        /\bscratch\s*team\b/i,
+        /\bst\b/,
+    ],
+    punishment: [
+        /\bban(ing|ned)?\b/,
+        /\bunban(ing|ned)?\b/,
+        /\bkick(ing|ed)?\b/,
+        /\bpunish(ing|ed|ment)?\b/,
+        /\b(please|pl[sz])\s*block(ing|ed)?\b/,
+        /\b(please|pl[sz])\s*mut(ed?|ing)\b/,
+        /\b(please|pl[sz])\s*unmut(ed?|ing)\b/,
+        /\bblock(ing|ed)?\s*(please|pl[sz])\b/,
+        /\bmut(ed?|ing)\s*(please|pl[sz])\b/,
+        /\bunmut(ed?|ing)\s*(please|pl[sz])\b/,
+    ]
+}
+
 const i18n = window.i18nStrings
 let lastFeedbackRequestTime = localStorage.getItem("lastFeedbackRequestTime") 
 let wakeUpTimeout = setTimeout(() => {}, 0)
@@ -7,6 +26,8 @@ const usernameField = form.querySelector('#feedback-username')
 const contentField = form.querySelector("#feedback-content")
 const submitButton = form.querySelector("#feedback-submit")
 const addonsListCheckbox = form.querySelector("#feedback-addons-list")
+const statusEl = document.querySelector('#feedback-status')
+let hasWarnedContent = false
 
 const version = new URL(location.href).searchParams.get("ext_version") || new URL(location.href).searchParams.get("version")
 
@@ -21,7 +42,6 @@ if (location.hash.length && /[0-9A-Fa-f]/g.test(location.hash.substring(2))) {
 }
 
 const setStatus = (statusText, status) => {
-    const statusEl = document.querySelector('#feedback-status')
     statusEl.textContent = statusText
     statusEl.hidden = false
     statusEl.classList.remove([...statusEl.classList].filter(className => /alert-/.exec(className))[0])
@@ -80,13 +100,61 @@ const holdSendButton = seconds => {
     step()
 }
 
+const setPreSendWarning = (heading, description) => {
+    setStatus("", "warning")
+    const headingEl = document.createElement('p')
+    headingEl.textContent = heading
+    statusEl.appendChild(headingEl)
+    headingEl.insertAdjacentHTML('afterbegin', `<b>${i18n.preSendWarning.warning}</b> `)
+    const descriptionEl = document.createElement('p')
+    descriptionEl.innerHTML = description
+    statusEl.appendChild(descriptionEl)
+    const overrideEl = document.createElement('p')
+    overrideEl.textContent = i18n.preSendWarning.override
+    overrideEl.classList.add('mb-0')
+    statusEl.appendChild(overrideEl)
+    holdSendButton(5)
+}
+
+for (const variation in variations) {
+    const variationObj = i18n.preSendWarning.variations[variation]
+    // for (const key in variationObj) {
+    //     variationObj[key] = DOMPurify.sanitize(variationObj[key])
+    // }
+}
+const punishment = i18n.preSendWarning.variations.punishment
+punishment.description = punishment.description.replace(window.i18nTimestamp + 1, '<a href="https://en.scratch-wiki.info/wiki/Report">').replace(window.i18nTimestamp + 2, '</a>')
+
+const preSendCheck = content => {
+    content = content.toLowerCase()
+    let warningText = false
+    for (var variation in variations) {
+        if (variations[variation].some(el => content.search(el) + 1)) {
+            warningText = [i18n.preSendWarning.variations[variation].heading, i18n.preSendWarning.variations[variation].description]
+            break
+        }
+    }
+    if (warningText) {
+        if (hasWarnedContent && hasWarnedContent === content) {
+            hasWarnedContent = ""
+            return true
+        } else {
+            hasWarnedContent = content
+            setPreSendWarning(...warningText)
+            return false    
+        }
+    } else {
+        return true
+    }
+}
+// preSendCheck('I hate this guy please ban him')
+
 form.addEventListener("submit", async event => {
     event.preventDefault()
     setStatus(i18n.statusSending, "primary")
 
     usernameField.readOnly = true
     contentField.readOnly = true
-    submitButton.disabled = true
 
     // document.querySelector("#sending").style.display = "block";
 
@@ -99,19 +167,20 @@ form.addEventListener("submit", async event => {
         enabledAddons: addonsListCheckbox.checked ? enabledAddons : null
     }
 
-    try {
-        lastFeedbackRequestTime = Date.now()
-        localStorage.setItem("lastFeedbackRequestTime", lastFeedbackRequestTime)    
-        const res = await fetch("https://scratchaddons-feedback.glitch.me/send", {
-            method: "POST", 
-            body: JSON.stringify(body)
-        })
-        if (!res.ok) throw "";
-        holdSendButton(10)
-        setStatus(i18n.statusSuccess, "success")
-    } catch(err) {
-        setStatus(i18n.statusFailed, "danger")
-        submitButton.disabled = false
+    if (preSendCheck(contentField.value)) {
+        try {
+            lastFeedbackRequestTime = Date.now()
+            localStorage.setItem("lastFeedbackRequestTime", lastFeedbackRequestTime)    
+            const res = await fetch("https://scratchaddons-feedback.glitch.me/send", {
+                method: "POST", 
+                body: JSON.stringify(body)
+            })
+            if (!res.ok) throw "";
+            holdSendButton(10)
+            setStatus(i18n.statusSuccess, "success")
+        } catch(err) {
+            setStatus(i18n.statusFailed, "danger")
+        }
     }
 
     usernameField.readOnly = false