informar el delay para enviar el formulario

This commit is contained in:
f 2021-04-13 19:26:09 -03:00
parent fe682d22c1
commit 2908d93043
3 changed files with 49 additions and 1 deletions

View file

@ -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 -%}

View file

@ -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] }}" />

View file

@ -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})`
}
}