From 2908d93043e91d2456e538fa4e8a9bfb52d92eb3 Mon Sep 17 00:00:00 2001
From: f <f@sutty.nl>
Date: Tue, 13 Apr 2021 19:26:09 -0300
Subject: [PATCH] informar el delay para enviar el formulario

---
 _includes/contact.html                   |  2 ++
 _includes/submit.html                    |  6 +++-
 _packs/controllers/contact_controller.js | 42 ++++++++++++++++++++++++
 3 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 _packs/controllers/contact_controller.js

diff --git a/_includes/contact.html b/_includes/contact.html
index 860b3bc..58aa20d 100644
--- a/_includes/contact.html
+++ b/_includes/contact.html
@@ -9,6 +9,8 @@ envío del formulario.
   encuentra en _data/forms/contacto.yml
 {% endcomment %}
 <form
+  data-controller="contact"
+  data-delay="60"
   action="https://api.sutty.nl/v1/sites/{{ site.hostname }}/contact/{{ include.name }}"
   method="post">
   {%- for field in include.form -%}
diff --git a/_includes/submit.html b/_includes/submit.html
index 5032564..6f82e96 100644
--- a/_includes/submit.html
+++ b/_includes/submit.html
@@ -1 +1,5 @@
-<input type="submit" class="btn btn-success" value="{{ include.field[1].label[site.locale] }}" />
+<input
+  data-target="contact.submit"
+  type="submit"
+  class="btn btn-success"
+  value="{{ include.field[1].label[site.locale] }}" />
diff --git a/_packs/controllers/contact_controller.js b/_packs/controllers/contact_controller.js
new file mode 100644
index 0000000..108119d
--- /dev/null
+++ b/_packs/controllers/contact_controller.js
@@ -0,0 +1,42 @@
+import { Controller } from 'stimulus'
+
+/*
+ * Sólo permite enviar el formulario de contacto después de unos
+ * segundos, para evitar el spam.
+ */
+export default class extends Controller {
+  static targets = [ 'submit' ]
+
+  connect () {
+    if (!this.hasSubmitTarget) return
+
+    this.submitTarget.disabled = true
+
+    this._value = this.submitTarget.value
+
+    // Esperar un minuto desde que se carga la página hasta que se
+    // permite enviar.
+    this._interval = setInterval(() => {
+      const delay = this.delay
+
+      if (this.delay == 0) {
+        clearInterval(this._interval)
+        this.submitTarget.disabled = false
+        this.submitTarget.value = this._value
+      } else {
+        this.delay = delay - 1
+      }
+    }, 1000)
+  }
+
+  get delay () {
+    const delay = parseInt(this.element.dataset.delay)
+
+    return isNaN(delay) ? 0 : delay
+  }
+
+  set delay (value) {
+    this.element.dataset.delay = value
+    this.submitTarget.value = `${this._value} (${value})`
+  }
+}