From 57e202798506fbda91380a7a9b8dd7fdadfae546 Mon Sep 17 00:00:00 2001
From: Hubert depesz Lubaczewski <depesz@depesz.com>
Date: Tue, 21 May 2019 10:33:57 +0200
Subject: [PATCH] Show info when calculating contact nonce prefix

---
 public/css/style.css                 |  4 +++
 public/js/contact.js                 |  6 ++--
 templates/controller/contact.html.ep | 48 ++++++++++++++++------------
 3 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index 2d65ff9..b17c9e8 100755
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -425,3 +425,7 @@ div.plea { float: right; color: #666; }
 
 .user-history div.date              {background:#ddd;text-align:center;font-style:italic;color:#333;}
 
+#contactForm { display: none; }
+#contactWait { border: 2px solid #00f; padding: 0.5em; text-align: center; background: #006; margin: 1em; padding: 1em;}
+#contactWait p { font-weight: bold; font-size: 2em; color: #ccc; padding: 0; margin: 0; margin-bottom: 1em; }
+#contactWait p.hint { font-weight: normal; font-size: 1.5em; margin-bottom: 0em; }
diff --git a/public/js/contact.js b/public/js/contact.js
index c0b0b9a..e5e04fd 100644
--- a/public/js/contact.js
+++ b/public/js/contact.js
@@ -1,7 +1,4 @@
 ( function( $ ) {
-    var submit = $('#send_email');
-    submit.hide();
-
     // MD5 function taken from
     // https://stackoverflow.com/questions/14733374/how-to-generate-md5-file-hash-on-javascript
     var MD5 = function(d){result = M(V(Y(X(d),8*d.length)));return result.toLowerCase()};function M(d){for(var _,m="0123456789ABCDEF",f="",r=0;r<d.length;r++)_=d.charCodeAt(r),f+=m.charAt(_>>>4&15)+m.charAt(15&_);return f}function X(d){for(var _=Array(d.length>>2),m=0;m<_.length;m++)_[m]=0;for(m=0;m<8*d.length;m+=8)_[m>>5]|=(255&d.charCodeAt(m/8))<<m%32;return _}function V(d){for(var _="",m=0;m<32*d.length;m+=8)_+=String.fromCharCode(d[m>>5]>>>m%32&255);return _}function Y(d,_){d[_>>5]|=128<<_%32,d[14+(_+64>>>9<<4)]=_;for(var m=1732584193,f=-271733879,r=-1732584194,i=271733878,n=0;n<d.length;n+=16){var h=m,t=f,g=r,e=i;f=md5_ii(f=md5_ii(f=md5_ii(f=md5_ii(f=md5_hh(f=md5_hh(f=md5_hh(f=md5_hh(f=md5_gg(f=md5_gg(f=md5_gg(f=md5_gg(f=md5_ff(f=md5_ff(f=md5_ff(f=md5_ff(f,r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+0],7,-680876936),f,r,d[n+1],12,-389564586),m,f,d[n+2],17,606105819),i,m,d[n+3],22,-1044525330),r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+4],7,-176418897),f,r,d[n+5],12,1200080426),m,f,d[n+6],17,-1473231341),i,m,d[n+7],22,-45705983),r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+8],7,1770035416),f,r,d[n+9],12,-1958414417),m,f,d[n+10],17,-42063),i,m,d[n+11],22,-1990404162),r=md5_ff(r,i=md5_ff(i,m=md5_ff(m,f,r,i,d[n+12],7,1804603682),f,r,d[n+13],12,-40341101),m,f,d[n+14],17,-1502002290),i,m,d[n+15],22,1236535329),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+1],5,-165796510),f,r,d[n+6],9,-1069501632),m,f,d[n+11],14,643717713),i,m,d[n+0],20,-373897302),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+5],5,-701558691),f,r,d[n+10],9,38016083),m,f,d[n+15],14,-660478335),i,m,d[n+4],20,-405537848),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+9],5,568446438),f,r,d[n+14],9,-1019803690),m,f,d[n+3],14,-187363961),i,m,d[n+8],20,1163531501),r=md5_gg(r,i=md5_gg(i,m=md5_gg(m,f,r,i,d[n+13],5,-1444681467),f,r,d[n+2],9,-51403784),m,f,d[n+7],14,1735328473),i,m,d[n+12],20,-1926607734),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+5],4,-378558),f,r,d[n+8],11,-2022574463),m,f,d[n+11],16,1839030562),i,m,d[n+14],23,-35309556),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+1],4,-1530992060),f,r,d[n+4],11,1272893353),m,f,d[n+7],16,-155497632),i,m,d[n+10],23,-1094730640),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+13],4,681279174),f,r,d[n+0],11,-358537222),m,f,d[n+3],16,-722521979),i,m,d[n+6],23,76029189),r=md5_hh(r,i=md5_hh(i,m=md5_hh(m,f,r,i,d[n+9],4,-640364487),f,r,d[n+12],11,-421815835),m,f,d[n+15],16,530742520),i,m,d[n+2],23,-995338651),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+0],6,-198630844),f,r,d[n+7],10,1126891415),m,f,d[n+14],15,-1416354905),i,m,d[n+5],21,-57434055),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+12],6,1700485571),f,r,d[n+3],10,-1894986606),m,f,d[n+10],15,-1051523),i,m,d[n+1],21,-2054922799),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+8],6,1873313359),f,r,d[n+15],10,-30611744),m,f,d[n+6],15,-1560198380),i,m,d[n+13],21,1309151649),r=md5_ii(r,i=md5_ii(i,m=md5_ii(m,f,r,i,d[n+4],6,-145523070),f,r,d[n+11],10,-1120210379),m,f,d[n+2],15,718787259),i,m,d[n+9],21,-343485551),m=safe_add(m,h),f=safe_add(f,t),r=safe_add(r,g),i=safe_add(i,e)}return Array(m,f,r,i)}function md5_cmn(d,_,m,f,r,i){return safe_add(bit_rol(safe_add(safe_add(_,d),safe_add(f,i)),r),m)}function md5_ff(d,_,m,f,r,i,n){return md5_cmn(_&m|~_&f,d,_,r,i,n)}function md5_gg(d,_,m,f,r,i,n){return md5_cmn(_&f|m&~f,d,_,r,i,n)}function md5_hh(d,_,m,f,r,i,n){return md5_cmn(_^m^f,d,_,r,i,n)}function md5_ii(d,_,m,f,r,i,n){return md5_cmn(m^(_|~f),d,_,r,i,n)}function safe_add(d,_){var m=(65535&d)+(65535&_);return(d>>16)+(_>>16)+(m>>16)<<16|65535&m}function bit_rol(d,_){return d<<_|d>>>32-_}
@@ -29,6 +26,7 @@
     if (found) {
         $('#nonceprefix').val(prefix);
 
-        submit.show();
+        $('#contactWait').hide();
+        $('#contactForm').show();
     }
 } )( jQuery );
diff --git a/templates/controller/contact.html.ep b/templates/controller/contact.html.ep
index f7eb2b3..cd4a4c3 100755
--- a/templates/controller/contact.html.ep
+++ b/templates/controller/contact.html.ep
@@ -23,31 +23,37 @@
 </div>
 % }
 
-<form id="contact" method="post" action="<%= url_for 'contact_post' %>">
-    <input type="hidden" id='nonce' name="nonce" value="<%= stash 'nonce' %>"/>
-    <input type="hidden" id='nonceprefix' name="nonceprefix"/>
+<div id="contactWait">
+    <p>Checking if you can send contact form...</p>
+    <p class="hint">If you're seeing this message for over 10 seconds, something is wrong.</p>
+</div>
 
-    <div class="fe fe-first fe_name">
-        <label for="name">Your name</label>
-        <input type="text" class="text" id="name" name="name" value="<%= param 'name' =%>" />
-    </div>
+<div id="contactForm">
+    <form id="contact" method="post" action="<%= url_for 'contact_post' %>">
+        <input type="hidden" id='nonce' name="nonce" value="<%= stash 'nonce' %>"/>
+        <input type="hidden" id='nonceprefix' name="nonceprefix"/>
 
-    <div class="fe fe_email">
-        <label for="email">Your email <sup class="fe-required">*</sup></label></dt>
-        <input type="text" class="text" id="email" name="email" value="<%= param 'email' =%>" />
-    </div>
+        <div class="fe fe-first fe_name">
+            <label for="name">Your name</label>
+            <input type="text" class="text" id="name" name="name" value="<%= param 'name' =%>" />
+        </div>
 
-    <div class="fe fe_message">
-        <label for="message">Message <sup class="fe-required">*</sup></label>
-        <textarea id="message" name="message"><%= param 'message' =%></textarea>
-    </div>
+        <div class="fe fe_email">
+            <label for="email">Your email <sup class="fe-required">*</sup></label></dt>
+            <input type="text" class="text" id="email" name="email" value="<%= param 'email' =%>" />
+        </div>
 
-    <div class="fe fe-last fe-buttons">
-        <button type="submit" id="send_email" name="send_email"><span>Send</span></button>
-    </div>
+        <div class="fe fe_message">
+            <label for="message">Message <sup class="fe-required">*</sup></label>
+            <textarea id="message" name="message"><%= param 'message' =%></textarea>
+        </div>
 
-    <p>Or you can simply mail me at <a href="mailto:depesz@depesz.com">depesz@depesz.com</a></p>
+        <div class="fe fe-last fe-buttons">
+            <button type="submit" id="send_email" name="send_email"><span>Send</span></button>
+        </div>
 
-    <p class="nfo-required">All fields marked by <sup class="fe-required">*</sup> are required.</p>
+        <p class="nfo-required">All fields marked by <sup class="fe-required">*</sup> are required.</p>
+    </form>
+</div>
 
-</form>
+<p>Alternatively, you can simply mail me at <a href="mailto:depesz@depesz.com">depesz@depesz.com</a>.</p>