more hacking...somewhat usable

_includes/create_form.html

@@ -9,11 +9,15 @@
     </div>
     <div class="form-input">
       <input type="text" id="secret-expiration" placeholder="Expiration Date/Time"/>
+      <div class="checkbox">
+        <input type="checkbox" id="secret-expire-on-read">
+        <label for="secret-expire-on-read">Expire on Read</label>
+      </div>
     </div>
     <div class="form-submit">
       <input type="submit" id="secret-submit" value="Create Secret" />
     </div>
   </form>
-  <p id="secret-response"></p>
+
   <a href="/retrieve/"><button class="switch_context">Retrieve Secret -></button></a>
 </div>

_includes/response.html

@@ -0,0 +1,6 @@
+<div id="secret-response" class="hidden">
+  <label for="response-username">Username</label><p id="response-username"></p>
+  <label for="response-password">Password</label><p id="response-password"></p>
+  <label for="response-message">Message</label><p id="response-message"></p>
+  <label for="response-expiration">Expiration</label><p id="response-expiration"></p>
+</div>

_includes/retrieve_form.html

@@ -8,7 +8,6 @@
     </div>
   </form>
   <div>
-    <p id="secret-response"></p>
     <a href="/"><button class="switch_context">Create Secret -></button></a>
   </div>
 </div>

assets/css/main.css

@@ -1193,8 +1193,8 @@ input, select, textarea {
 		@media screen and (max-width: 1680px) {
 
 			#footer {
-				bottom: 3.5em;
-				left: 3.5em;
+				bottom: 2em;
+				left: 2em;
 			}
 
 		}
@@ -1229,7 +1229,6 @@ input, select, textarea {
 		}
 
 
-/* Switch Context */
 .switch_context {
 	font-size: 1em;
 	position: absolute;
@@ -1240,5 +1239,24 @@ input, select, textarea {
 }
 
 #secret-response {
-	width: 51%;
+	width: 70%;
+	overflow: auto;
+	border-radius: 8px;
+	border: 1px solid white;
+	background-color: rgb(153, 153, 153, .2);
+	margin-left: .5em;
+	margin-bottom: 2em;
+}
+
+#secret-response p, #secret-response label {
+	margin: 0 !important;
+}
+
+.checkbox {
+	padding: .5em 0 0 1em;
+}
+
+.hidden {
+	visibility: hidden;
+	transition: opacity 2s ease-in-out;
 }

assets/js/main.js

@@ -2,77 +2,11 @@
 # front matter in order to pull in the api endpoint from config
 ---
 
-/*
-	Eventually by HTML5 UP
-	html5up.net | @ajlkn
-	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-*/
 
-(function() {
-
-	"use strict";
-
-	var	$body = document.querySelector('body');
-
-	// Methods/polyfills.
-
-		// classList | (c) @remy | github.com/remy/polyfills | rem.mit-license.org
-			!function(){function t(t){this.el=t;for(var n=t.className.replace(/^\s+|\s+$/g,"").split(/\s+/),i=0;i<n.length;i++)e.call(this,n[i])}function n(t,n,i){Object.defineProperty?Object.defineProperty(t,n,{get:i}):t.__defineGetter__(n,i)}if(!("undefined"==typeof window.Element||"classList"in document.documentElement)){var i=Array.prototype,e=i.push,s=i.splice,o=i.join;t.prototype={add:function(t){this.contains(t)||(e.call(this,t),this.el.className=this.toString())},contains:function(t){return-1!=this.el.className.indexOf(t)},item:function(t){return this[t]||null},remove:function(t){if(this.contains(t)){for(var n=0;n<this.length&&this[n]!=t;n++);s.call(this,n,1),this.el.className=this.toString()}},toString:function(){return o.call(this," ")},toggle:function(t){return this.contains(t)?this.remove(t):this.add(t),this.contains(t)}},window.DOMTokenList=t,n(Element.prototype,"classList",function(){return new t(this)})}}();
-
-		// canUse
-			window.canUse=function(p){if(!window._canUse)window._canUse=document.createElement("div");var e=window._canUse.style,up=p.charAt(0).toUpperCase()+p.slice(1);return p in e||"Moz"+up in e||"Webkit"+up in e||"O"+up in e||"ms"+up in e};
-
-		// window.addEventListener
-			(function(){if("addEventListener"in window)return;window.addEventListener=function(type,f){window.attachEvent("on"+type,f)}})();
-
-	// Play initial animations on page load.
-		window.addEventListener('load', function() {
-			window.setTimeout(function() {
-				$body.classList.remove('is-preload');
-			}, 100);
+$( document ).ready(function(){
+    $('body').removeClass('is-preload');
 });
 
-
-	// (function() {
-	//
-	// })
-
-
-	// Form handling
-		(function() {
-
-			// Vars.
-				var $form = document.querySelectorAll('.secret-form')[0],
-					$message;
-
-			// Bail if addEventListener isn't supported.
-				if (!('addEventListener' in $form))
-					return;
-
-
-				$('#retrieve-secret').on('submit', function(event) {
-					var token = $('#secret-token').val()
-					event.stopPropagation();
-					event.preventDefault();
-					window.setTimeout(function() {
-						$.ajax({
-							method: 'GET',
-							url: '{{ site.secret_endpoint }}?token=' + token,
-							crossDomain: 'true',
-							contentType: 'application/json',
-							success: function (res){
-								$('#retrieve-secret').trigger('reset');
-								$('#secret-response').html('Secret token: ' + JSON.stringify(res));
-							},
-							error: function (res){
-								console.log(res);
-								$('#secret-response').html('failure Something went wrong. Please try again.' + res);
-							}
-						})
-					}, 750)
-				})
-
-			// Events
 $('#create-secret').on('submit', function(event) {
 	event.stopPropagation();
 	event.preventDefault();
@@ -82,7 +16,8 @@
 			username: $('#secret-username').val(),
 			password: $('#secret-password').val(),
 			message: $('#secret-message').val(),
-								expiration: $('#secret-expiration').val()
+			expiration: $('#secret-expiration').val(),
+			expire_on_read: $('#secret-expire-on-read')[0].checked
 		}
 
 		$.ajax({
@@ -94,19 +29,38 @@
 			success: function (res){
 				$('#create-secret').trigger('reset');
 				$('#secret-response').html('Secret token: ' + res['token']);
-									// $submit.disabled = true;
+				$('#secret-response').removeClass('hidden');
 			},
 			error: function (res){
-									console.log(res);
-									$message._show('failure', 'Something went wrong. Please try again.');
+				$('#secret-response').html('Something went wrong: ' + JSON.stringify(res.responseJSON));
 			}
 		});
-
-
 	}, 750);
-
 });
 
-		})();
+$('#retrieve-secret').on('submit', function(event) {
+	event.stopPropagation();
+	event.preventDefault();
+	window.setTimeout(function() {
+
+		var token = $('#secret-token').val();
 		
-})();
+		$.ajax({
+			method: 'GET',
+			url: '{{ site.secret_endpoint }}?token=' + token,
+			crossDomain: 'true',
+			contentType: 'application/json',
+			success: function (res){
+				$('#retrieve-secret').trigger('reset');
+				$('#secret-response').removeClass('hidden');
+				$('#response-username').html(res['username']);
+				$('#response-password').html(res['password']);
+				$('#response-message').html(res['message']);
+				$('#response-expiration').html(res['expiration']);
+			},
+			error: function (res){
+				$('#secret-response').html('Something went wrong: ' + JSON.stringify(res.responseJSON));
+			}
+		})
+	}, 750);
+});

index.html

@@ -9,6 +9,7 @@ description: Generate a new secret using the form below.
 		<div id="bg"></div>
 		{% include header.html %}
 		{% include create_form.html %}
+		{% include response.html %}
 		{% include footer.html %}
 		{% include scripts.html %}
 	</body>

retrieve.html

@@ -10,6 +10,7 @@ description: Retrieve an existing secret with your token.
 		<div id="bg"></div>
 		{% include header.html %}
 		{% include retrieve_form.html %}
+		{% include response.html %}
 		{% include footer.html %}
 		{% include scripts.html %}
 	</body>