Adds captcha to the contact form.

3 files changed, 74 insertions, 7 deletions

diff --git a/layouts/contact/single.html b/layouts/contact/single.html
index 4be3a1b..852446c 100644
--- a/layouts/contact/single.html
+++ b/layouts/contact/single.html
@@ -16,19 +16,39 @@
 		    </div>
 		  </div>
 		  <input type="text" class="hp" value="" name="gotit">
-		  <label for="message">message</label>
-		  <textarea class="u-full-width" placeholder="type your message here …" id="message" name="message"></textarea>
+		  <div class="row">
+		  	<div class="twelve columns">
+		    	  <label for="message">message</label>
+		    	  <textarea class="u-full-width" placeholder="type your message here …" id="message" name="message"></textarea>
+		  	</div>
+		  </div>
 		  <!--label class="example-send-yourself-copy">
 		    <input type="checkbox">
 		    <span class="label-body">Send a copy to yourself</span>
 		  </label-->
-		<input class="button-primary contactform-button" value="submit" type="submit">
-		<a style="margin-left: 10px;" class="button" href="../" title="back to index">cancel</a>
+		  <div class="row">
+		  	<div class="six columns">
+		    	  <label>captcha</label>
+		    	  <img id="captcha-img" src="#" alt="captcha image" width=240 height=80>
+		  	  <input id="captcha-id" type="hidden" name="captchaid" required>
+		  	</div>
+		  	<div class="six columns">
+		    	  <label for="captcha-solution">verification</label>
+		  	  <input class="u-full-width" id="captcha-solution" type="text" name="captchaanswer" placeholder="enter the code displayed in the image" required>
+		  	</div>
+		  </div>
+		  <div class="row margin-top">
+		  	<div class="twelve columns">
+			  <input class="button-primary contactform-button" value="submit" type="submit">
+			  <a class="button margin-left-extra-small" href="../" title="back to index">cancel</a>
+		  	</div>
+		  </div>
 		</form>
-	<div/>
-<div/>
+	</div>
+</div>
 <div class="row center">
 	<p class="twelve columns">
 	</p>
 </div>
+<script src="/captcha.js" defer async></script>
 {{partial "footer.tmpl" .}}
diff --git a/static/captcha.js b/static/captcha.js
new file mode 100644
index 0000000..6b895bb
--- /dev/null
+++ b/static/captcha.js
@@ -0,0 +1,31 @@
+function loadJSON(path, success, error)
+{
+    var xhr = new XMLHttpRequest();
+    xhr.onreadystatechange = function()
+    {
+        if (xhr.readyState === XMLHttpRequest.DONE) {
+            if (xhr.status === 200) {
+                if (success)
+                    success(JSON.parse(xhr.responseText));
+            } else {
+                if (error)
+                    error(xhr);
+            }
+        }
+    };
+    xhr.open("GET", path, true);
+    xhr.send();
+};
+loadJSON('http://127.0.0.1:3333/json/newcaptcha',
+	 function(data){
+		 console.log("success", data);
+		 var captcha = document.getElementById('captcha-img');
+		 captcha.src = "http://127.0.0.1:3333/captcha/" + data.captcha_id + ".png";
+		 var captcha_input = document.getElementById('captcha-id');
+		 captcha_input.value = data.captcha_id; 
+	},
+	function(data) {
+		 console.log("error", data);
+		console.log(data);
+	}
+);
diff --git a/static/custom.css b/static/custom.css
index 807ab55..5dbbc64 100644
--- a/static/custom.css
+++ b/static/custom.css
@@ -100,6 +100,15 @@ a:hover {
 .margin-top-small {
 	margin-top: 10px;
 }
+.margin-left{
+	margin-left: 20px;
+}
+.margin-left-small {
+	margin-left: 10px;
+}
+.margin-left-extra-small {
+	margin-left: 5px;
+}
 
 /* Für projects/, damit der Text nicht überlappt, aber nah beieinander steht. */
 @media (min-width: 755px) {
@@ -141,8 +150,9 @@ a:hover {
 	color: #1f1f1f !important;
         text-shadow: 0 0 1px #1f1f1f;
         transition: text-shadow 1s;
-  */
 	color: #3f3f3f !important;
+  */
+	color: #1f1f1f !important;
 }
 .contactform-button:hover {
 	text-decoration: underline;
@@ -167,3 +177,9 @@ select:focus {
 .hp {
 	display: none;
 }
+#captcha-img {
+	background-color: #efefef;
+	background: #efefef;
+	/*box-shadow: 0 0 2px #ddd !important;*/
+	border-radius: 4px;
+}