Captcha stuff, #862

builds/appchan-x.meta.js

@@ -11,6 +11,7 @@
 // @match        *://sys.4chan.org/*
 // @match        *://a.4cdn.org/*
 // @match        *://i.4cdn.org/*
+// @match        *://www.google.com/recaptcha/api/fallback?k=6Ld9lQATAAAAAN6ZHhqB_oOjm7jat0swNdi0mmCs
 // @exclude      *://blog.4chan.org/*
 // @exclude      *://dis.4chan.org/*
 // @grant        GM_getValue

builds/crx/manifest.json

@@ -10,7 +10,7 @@
   },
   "content_scripts": [{
     "js": ["script.js"],
-    "matches": ["*://*.4chan.org/*","*://boards.4chan.org/*","*://sys.4chan.org/*","*://a.4cdn.org/*","*://i.4cdn.org/*"],
+    "matches": ["*://*.4chan.org/*","*://boards.4chan.org/*","*://sys.4chan.org/*","*://a.4cdn.org/*","*://i.4cdn.org/*","*://www.google.com/recaptcha/api/fallback?k=6Ld9lQATAAAAAN6ZHhqB_oOjm7jat0swNdi0mmCs"],
     "all_frames": true,
     "run_at": "document_start"
   }],

package.json

@@ -8,7 +8,7 @@
     "repo": "https://github.com/zixaphir/appchan-x/",
     "page": "http://zixaphir.github.com/appchan-x/",
     "faq":  "https://github.com/zixaphir/appchan-x/wiki/Frequently-Asked-Questions",
-    "recaptchaKey": "6Ldp2bsSAAAAAAJ5uyx_lx34lJeEpTLVkP5k04qc",
+    "recaptchaKey": "6Ld9lQATAAAAAN6ZHhqB_oOjm7jat0swNdi0mmCs",
     "youtubeAPIKey": "AIzaSyCrvwsT3ub8sDl3S5APhok2eY-OzRcCK5U",
     "buildsPath": "builds/",
     "mainBranch": "master",
@@ -17,7 +17,8 @@
       "*://boards.4chan.org/*",
       "*://sys.4chan.org/*",
       "*://a.4cdn.org/*",
-      "*://i.4cdn.org/*"
+      "*://i.4cdn.org/*",
+      "*://www.google.com/recaptcha/api/fallback?k=6Ld9lQATAAAAAN6ZHhqB_oOjm7jat0swNdi0mmCs"
     ],
     "excludes": [
       "*://blog.4chan.org/*",

src/General/css/layout.css

@@ -1820,18 +1820,48 @@ input:checked + .rice {
 .textarea-resize-none #qr textarea {
   resize: none;
 }
-.captcha-img div {
-  margin: 1px 0 0;
+/* Noscript Recaptcha */
+.captcha-img {
+  margin: 1px 0px 0px;
   text-align: center;
-  line-height: 0;
-  background-color: #fff;
+  background-image: #fff;
+  font-size: 0px;
+  min-height: 59px;
+  min-width: 302px;
 }
-.captcha-img img {
-  width: 246px;
+.captcha-input{
+  width: 100%;
+  margin: 1px 0 0;
 }
-.captcha-img,
-.captcha-img img {
-  height: 4em;
+.captcha-input.error:focus {
+  border-color: rgb(255,0,0) !important;
+}
+#qr-captcha-iframe {
+  display: none;
+}
+/* Recaptcha v2 */
+#qr .captcha-root {
+  position: relative;
+}
+#qr .captcha-container > div > div {
+  margin: auto;
+}
+#qr .captcha-counter {
+  display: block;
+  width: 100%;
+  text-align: center;
+  pointer-events: none;
+}
+#qr.captcha-open .captcha-counter {
+  position: absolute;
+  bottom: 3px;
+}
+#qr .captcha-counter > a {
+  pointer-events: auto;
+}
+#qr:not(.captcha-open) .captcha-counter > a {
+  display: block;
+  width: 100%;
 }
 .captcha-input {
   width: 100%;

src/General/css/theme.css

@@ -52,7 +52,8 @@ html {
   background: #{backgroundC};
   border-color: #{theme["Reply Border"]};
 }
-.captcha-filter .captcha-img div {
+.captcha-filter .captcha-img,
+.captcha-root iframe {
   <%= filter %>: url('<% if (type === 'userscript') { %>data:image/svg+xml,#{Style.svgs.captchafilter.replace /(\'|\")/g, '%22'}<% } %>#captcha-filter');
 }
 .silhouettize-mascots #mascot img,

src/General/lib/connection.class

@@ -1,11 +1,11 @@
 class Connection
   constructor: (@target, @origin, @cb) ->
-    $.on window, 'message', @onMessage.bind @
+    $.on window, 'message', @onMessage
 
-  send: (data) ->
+  send: (data) =>
     @target.postMessage "#{g.NAMESPACE}#{JSON.stringify data}", @origin
 
-  onMessage: (e) ->
+  onMessage: (e) =>
     return unless e.source is @target and
       e.origin is @origin and
       typeof e.data is 'string' and

src/Posting/Captcha.noscript.coffee

@@ -1,5 +1,5 @@
 Captcha.noscript =
-  lifetime: 2 * $.MINUTE
+  lifetime:  2 * $.MINUTE
   iframeURL: '//www.google.com/recaptcha/api/fallback?k=<%= meta.recaptchaKey %>'
 
   init: ->
@@ -9,6 +9,7 @@ Captcha.noscript =
     container = $.el 'div',
       className: 'captcha-img'
       title: 'Reload reCAPTCHA'
+
     input = $.el 'input',
       className: 'captcha-input field'
       title: 'Verification'
@@ -103,7 +104,7 @@ Captcha.noscript =
     $.off input, 'focus click', @cb.focus
 
     if QR.nodes.el.getBoundingClientRect().bottom > doc.clientHeight
-      QR.nodes.el.style.top    = null
+      QR.nodes.el.style.top    = ''
       QR.nodes.el.style.bottom = '0px'
 
   destroy: ->