Make the Stimulus controller to expire links using the expiration in …

…the query string.

CHANGELOG.md

@@ -5,6 +5,8 @@
 * Add a Stimulus controller to disable expired links.
 * Add `temporary_url_autoexpire` Twig function.
 * Add expiration in the query string of the resulting URL.
+* Make the Stimulus controller to expire links using the expiration in the
+  query string.
 
 ## 1.2.1
 

assets/dist/autoexpire.js

@@ -4,13 +4,30 @@ import { Controller } from '@hotwired/stimulus';
 export default class extends Controller {
   connect() {
     let element = this.element;
+    let href = element.getAttribute('href');
+    if (!href) {
+      return;
+    }
+    let url = new URL(href, 'http://example.com/');
+    if (!url) {
+      return;
+    }
+    let expiration = parseInt(url.searchParams.get('expiration'));
+    let secondsToExpiration = 1800;
+    if (expiration) {
+      let now = new Date().getTime() / 1000;
+      secondsToExpiration = expiration - now;
+    }
+    if (secondsToExpiration < 0) {
+      secondsToExpiration = 1;
+    }
     setTimeout(function () {
       element.classList.add('disabled');
       element.setAttribute('disabled', 'disabled');
       element.setAttribute('tabindex', '-1');
       element.setAttribute('aria-disabled', 'true');
       element.setAttribute('title', 'This link has expired. Please refresh the page, and try again.');
       element.href = '#';
-    }, 1800000);
+    }, secondsToExpiration * 1000);
   }
 }

assets/src/autoexpire.js

@@ -1,16 +1,40 @@
-'use strict';
+'use strict'
+
+import { Controller } from '@hotwired/stimulus'
 
-import { Controller } from '@hotwired/stimulus';
 export default class extends Controller {
-  connect() {
-    let element = this.element;
-    setTimeout(function () {
-      element.classList.add('disabled');
-      element.setAttribute('disabled', 'disabled');
-      element.setAttribute('tabindex', '-1');
-      element.setAttribute('aria-disabled', 'true');
-      element.setAttribute('title', 'This link has expired. Please refresh the page, and try again.');
-      element.href = '#';
-    }, 1800000);
-  }
+    connect() {
+        let element = this.element
+
+        let href = element.getAttribute('href')
+        if (!href) {
+            return;
+        }
+
+        let url = new URL(href, 'http://example.com/')
+        if (!url) {
+          return;
+        }
+
+        let expiration = parseInt(url.searchParams.get('expiration'))
+        let secondsToExpiration = 1800
+
+        if (expiration) {
+            let now = new Date().getTime() / 1000
+            secondsToExpiration = expiration - now
+        }
+
+        if (secondsToExpiration < 0) {
+            secondsToExpiration = 1
+        }
+
+        setTimeout(function () {
+            element.classList.add('disabled')
+            element.setAttribute('disabled', 'disabled')
+            element.setAttribute('tabindex', '-1')
+            element.setAttribute('aria-disabled', 'true')
+            element.setAttribute('title', 'This link has expired. Please refresh the page, and try again.')
+            element.href = '#'
+        }, secondsToExpiration * 1000)
+    }
 }