Merge branch 'b-7.3.x-captcha-improvments-OXDEV-8662' into b-7.3.x

Author: TitaKoleva

README.md

@@ -23,6 +23,12 @@
     flex-direction: row;
     align-items: center;
 }
+.captcha-img {
+    transition: transform .2s;
+}
+.captcha-img:hover {
+    transform: scale(2);
+}
 
 .image-captcha .col-md-6 {
     flex: 1;

assets/out/src/css/captcha-form.css

@@ -34,17 +34,15 @@ document.querySelectorAll('.password-toggle').forEach((el) => {
 });
 
 document.querySelectorAll('.captcha-reload').forEach((el) => {
-    el.addEventListener('click', function() {
-        new CaptchaRefresh({
-            url: document.getElementById('captcha').getAttribute('data-url')
-        })
-    });
+    new CaptchaRefresh({
+        url: document.getElementById('captcha').getAttribute('data-url'),
+        fieldTarget: el
+    })
 });
 
 document.querySelectorAll('.captcha-play').forEach((el) => {
-    el.addEventListener('click', function() {
-        new CaptchaAudio({
-            url: document.getElementById('captcha').getAttribute('data-url-audio')
-        })
-    });
+    new CaptchaAudio({
+        url: document.getElementById('captcha').getAttribute('data-url-audio'),
+        fieldTarget: el
+    })
 });

assets/out/src/js/index.js

@@ -6,8 +6,23 @@
 export class CaptchaAudio {
     constructor(options) {
         this.url = options.url;
+        this.fieldTarget = options.fieldTarget;
+        this.delayInMilliseconds = 1000;
 
-        this.ajaxRequest();
+        this.registerEvents();
+    }
+
+    registerEvents() {
+        let self = this;
+        let requestDelayTimeout;
+
+        this.fieldTarget.addEventListener('click', function() {
+            if (typeof requestDelayTimeout === 'undefined' || requestDelayTimeout < Date.now()) {
+                self.ajaxRequest();
+
+                requestDelayTimeout = Date.now() + self.delayInMilliseconds;
+            }
+        });
     }
 
     ajaxRequest() {

assets/out/src/js/module/captcha-audio.js

@@ -6,15 +6,37 @@
 export class CaptchaRefresh {
     constructor(options) {
         this.url = options.url;
+        this.fieldTarget = options.fieldTarget;
+        this.delayInMilliseconds = 1000;
 
-        this.ajaxRequest();
+        this.registerEvents();
+    }
+
+    registerEvents() {
+        let self = this;
+        let requestDelayTimeout;
+
+        this.fieldTarget.addEventListener('click', function() {
+            if (self.signal) {
+                self.controller.abort();
+            }
+
+            if (typeof requestDelayTimeout === 'undefined' || requestDelayTimeout < Date.now()) {
+                self.ajaxRequest();
+
+                requestDelayTimeout = Date.now() + self.delayInMilliseconds;
+            }
+        });
     }
 
     ajaxRequest() {
         let self = this;
+        self.controller = new AbortController();
+        self.signal = self.controller.signal;
 
         fetch(this.url, {
-            method: "GET"
+            method: "GET",
+            signal: self.signal,
         }).then(function(response) {
             return response.text();
         }).then(function(data) {