Add countdown timer to invoice and access token.

static/countdown.js

@@ -0,0 +1,21 @@
+(function(){
+
+  document.querySelectorAll('[data-countdown-to]').forEach(el => {
+    var parent  = el.parentNode
+      , expires = +el.dataset.countdownTo
+
+    function update() {
+      var left = expires - (+new Date()/1000|0)
+      if (left > 0) el.innerHTML = 'in ' + formatDur(left)
+      else location.reload()
+    }
+    update()
+    setInterval(update, 1000)
+  })
+
+  function formatDur(x) {
+    var h=x/3600|0, m=x%3600/60|0, s=x%60
+    return ''+(h>0?h+':':'')+(m<10&&h>0?'0':'')+m+':'+(s<10?'0':'')+s
+  }
+
+})()

static/style.styl

@@ -65,6 +65,3 @@ pre
       max-width 100%
     @media (max-width:575px)
       margin-top 1rem
-
-  .btn-primary
-    margin-bottom 1rem

views/_access.pug

@@ -9,5 +9,8 @@ p
   = ' '
   a.btn.btn-secondary(href=view_url) View
 
-p.text-muted Your access will expire #{ new Date(access.expiry*1000).toUTCString() }.
-p.text-muted Until then, you can return to this page to access the file #[a(href=token_url) using this link].
+p.text-muted.
+  Your access will expire #[span(data-countdown-to=access.expiry) at #{ new Date(access.expiry*1000).toUTCString() }].
+  Until then, you can return to this page to access the file #[a(href=token_url) using this link].
+
+script(src='_assets/countdown.js')

views/_checkout.pug

@@ -4,18 +4,16 @@
   .row
     .pay.col-sm-8
       pre= invoice.payreq
-      p
-        a.btn.btn-lg.btn-primary(href=`lightning:${invoice.payreq}`) Pay now
 
-    .qr.col-sm-4: img(src=qruri('lightning:'+invoice.payreq, { mode: 'alphanumeric', margin: 0 }))
+      p.small.text-muted
+        noscript Your browser has JavaScript turned off. Please refresh the page manually after making the payment.
+        span.yesscript #[img(src='_assets/loader.gif', alt='loading')] Awaiting payment.
+        |  The invoice expires #[span(data-countdown-to=invoice.expires_at) at #{ new Date(invoice.expires_at*1000).toUTCString() }].
 
-  noscript
-    p Your browser has JavaScript turned off. Please refresh the page manually after making the payment.
+      p: a.btn.btn-lg.btn-primary(href=`lightning:${invoice.payreq}`) Pay now
 
-  .yesscript
-    p #[img(src='_assets/loader.gif', alt='loading')] Awaiting payment... #[span.text-muted (the page will be updated automatically)]
+    .qr.col-sm-4.mb-3: img(src=qruri('lightning:'+invoice.payreq, { mode: 'alphanumeric', margin: 0 }))
 
-    //- long-pull payment updates via <img> reloading hack. not the prettiest, but extremely terse, and it works
-    img.d-none(src='_invoice/'+invoice.id+'/longpoll.png', onerror='this.src=this.src', onload='location.reload()')
-
-  p.expiry.text-muted Invoice valid until #{ new Date(invoice.expires_at*1000).toUTCString() }.
+//- long-pull payment updates via <img> reloading hack. not the prettiest, but extremely terse, and it works
+img.d-none(src='_invoice/'+invoice.id+'/longpoll.png', onerror='this.src=this.src', onload='location.reload()')
+script(src='_assets/countdown.js')