[tor-commits] [bridgedb/master] Rewrite captcha.html template.

[isis at torproject.org]

commit e4e9e62b1c2be979df39fc7c97aecc899341b9b5
Author: Isis Lovecruft <isis at torproject.org>
Date:   Fri Apr 11 11:48:40 2014 +0000

    Rewrite captcha.html template.
---
 lib/bridgedb/templates/captcha.html |   79 +++++++++++++++++++++++++----------
 1 file changed, 58 insertions(+), 21 deletions(-)

diff --git a/lib/bridgedb/templates/captcha.html b/lib/bridgedb/templates/captcha.html
index 74866ce..23b9772 100644
--- a/lib/bridgedb/templates/captcha.html
+++ b/lib/bridgedb/templates/captcha.html
@@ -1,24 +1,61 @@
 ## -*- coding: utf-8 -*-
 <%inherit file="base.html"/>
-<div class="captcha">
-  <form action="" method="POST">
-    <input type="hidden"
-           name="captcha_challenge_field"
-           id="captcha_challenge_field"
-           value="${challenge_field}">
-    <img width="300"
-         height="57"
-         alt=${_("Your browser is not displaying images properly.")}
-         src="${imgstr}">
-    <div class="captcha_input_area">
-      <label for="captcha_response_field">${_("Type the word")}</label></div>
-    <input name="captcha_response_field"
-           id="captcha_response_field"
-           type="text"
-           autocomplete="off">
-    <input class="btn btn-primary"
-           type="submit"
-           name="submit"
-           value=${_("Submit")}>
-  </form>
+
+<div class="container-narrow"
+     id="captchaSubmissionContainer"
+     style="width: 90%; align: center; margin: auto;">
+  <div class="container-fluid"
+       style="width: 100%; align: center; padding: 5%">
+    <div class="box" style="padding: 5% 15% 5% 15%;">
+      <p style="align: center;">
+        <img width="400" height="125"
+             alt="${_('Your browser is not displaying images properly.')}"
+             src="${imgstr}" />
+      </p>
+
+    <div class="box"
+         style="align: center; width: 50% margin: auto;">
+      <form class="bs-component"
+            id="captchaSubmission"
+            action=""
+            method="POST">
+        <fieldset>
+          <div class="form-group">
+               <!--style="width: 100%; align: center;">-->
+            <div class="input-group" style="height: 60%;">
+              <input type="hidden"
+                     form="captchaSubmission"
+                     name="captcha_challenge_field"
+                     id="captcha_challenge_field"
+                     value="${challenge_field}"></input>
+              <input class="form-control"
+                     form="captchaSubmission"
+                     name="captcha_response_field"
+                     id="captcha_response_field"
+                     value=""
+                     autocomplete="off"
+                     type="text"
+                     placeholder="${_('Enter the characters from the image above...')}"
+                     accesskey="t" autofocus ></input>
+              <span class="input-group-btn">
+                <button class="btn btn-primary"
+                        form="captchaSubmission"
+                        type="submit"
+                        name="submit"
+                        value="submit"
+                        accesskey="s">
+                  <i class="icon-level-down icon-rotate-90"></i>
+              </button></span>
+                        <!--formaction=""
+                        formmethod="post"
+                        formenctype="text/plain"-->
+                  <!--${_("%sS%submit") % ("""<u>""", """</u>""")}-->
+            </div>
+          </div>
+        </fieldset>
+      </form>
+    </div>
+    </div>
+  </div>
 </div>
+<hr />