From 07927d12f7ca2f8697fdd794f82392c043d3f1d6 Mon Sep 17 00:00:00 2001
From: jab <jab@math.brown.edu>
Date: Sun, 4 Oct 2015 20:09:58 +0000
Subject: [PATCH 1/7] proof of concept

---
 demo/index.html       | 21 +++++++++++++++++++--
 google-recaptcha.html | 25 +++++++++++++++++++++++--
 2 files changed, 42 insertions(+), 4 deletions(-)
diff --git a/demo/index.html b/demo/index.html
index b00056c..6c5efc5 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -18,6 +18,7 @@
   </style>
   <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
   <link rel="import" href="../google-recaptcha.html">
+  <link rel="import" href="../iron-form/iron-form.html">
   <script type="text/javascript">
     window.addEventListener('WebComponentsReady', function(e) {
       var rec = document.querySelector('google-recaptcha');
@@ -40,11 +41,27 @@
 <body>
   <p>Default re-captcha</p>
   <google-recaptcha sitekey="6LdRcP4SAAAAAJ4Dq1gXcD9AyhzuG77iz7E2Dmu4"></google-recaptcha>
+
+  <p>Event message (working with the first captcha)</p>
+  <p id="eventMessage"></p>
+
+  <hr>
+
   <p>Dark re-captcha</p>
   <google-recaptcha theme="dark" sitekey="6LdRcP4SAAAAAJ4Dq1gXcD9AyhzuG77iz7E2Dmu4"></google-recaptcha>
+
+  <hr>
+
   <p>Audio re-captcha</p>
   <google-recaptcha type="audio" sitekey="6LdRcP4SAAAAAJ4Dq1gXcD9AyhzuG77iz7E2Dmu4"></google-recaptcha>
-  <p>Event message (working with the first captcha)</p>
-  <p id="eventMessage"></p>
+
+  <hr>
+
+  <form is="iron-form" style="outline: thin solid #ccc; padding: .5rem 2rem;">
+    <h2>Demo within an iron-form</h2>
+    <google-recaptcha required sitekey="6LdRcP4SAAAAAJ4Dq1gXcD9AyhzuG77iz7E2Dmu4"></google-recaptcha>
+    <button type="submit" >Submit</button>
+  </form>
+
 </body>
 </html>
diff --git a/google-recaptcha.html b/google-recaptcha.html
index 671210b..b5ff0a1 100644
--- a/google-recaptcha.html
+++ b/google-recaptcha.html
@@ -4,6 +4,8 @@
  license that can be found in the LICENSE file.
 -->
 <link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
+<link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.html">
 
 <!--
 Polymer element for Google reCAPTCHA
@@ -26,6 +28,9 @@
     :host {
       display: block;
     }
+    :host.invalid {
+      outline: 1px solid red;
+    }
   </style>
   <template><content></content></template>
 </dom-module>
@@ -43,6 +48,18 @@
       _containerId:'',
       _captchaId:'',
 
+      _invalid: true,
+
+      behaviors: [
+        Polymer.IronFormElementBehavior,
+        Polymer.IronValidatableBehavior
+      ],
+
+      _getValidity: function () {
+        this.toggleClass('invalid', this._invalid);
+        return !this._invalid;
+      },
+
       properties: {
         /**
          * The total time (in milliseconds) to wait for API loading
@@ -95,10 +112,10 @@
       },
 
       observers: [
-        '_validate(theme, type, timeout)'
+        '_validateAttrs(theme, type, timeout)'
       ],
 
-      _validate:function () {
+      _validateAttrs: function () {
         if(this.theme!='dark' && this.theme!='light'){
           this.theme='light';
         }
@@ -217,6 +234,8 @@
        *  @param {String} response response to store
        */
       _responseHandler: function (response) {
+        this._invalid = false;
+        this.toggleClass('invalid', this._invalid);
         this.response=response;
         this.fire('captcha-response',{response:response});
       },
@@ -232,6 +251,8 @@
        * The `expiredHandler` method fires the captcha-expired event.
        */
       _expiredHandler: function () {
+        this._invalid = true;
+        this.toggleClass('invalid', this._invalid);
         this.fire('captcha-expired');
       }
     });

From f1a04f8f92c12092f0a3a85721d1d27cfbdd2781 Mon Sep 17 00:00:00 2001
From: jab <jab@math.brown.edu>
Date: Tue, 6 Oct 2015 18:15:59 +0000
Subject: [PATCH 2/7] add iron-form integration deps to bower.json

---
 bower.json | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/bower.json b/bower.json
index c718b73..5c28346 100644
--- a/bower.json
+++ b/bower.json
@@ -13,7 +13,10 @@
   ],
   "main": "google-recaptcha.html",
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.0.0"
+    "iron-form": "PolymerElements/iron-form#^1.0.9",
+    "polymer": "Polymer/polymer#^1.0.0",
+    "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#~1.0.4",
+    "iron-validatable-behavior": "PolymerElements/iron-validatable-behavior#~1.0.4"
   },
   "devDependencies": {
     "web-component-tester": "*",

From eb8961848c34d56ab39b79c76a70d5496d19b0ea Mon Sep 17 00:00:00 2001
From: jab <jab@math.brown.edu>
Date: Tue, 6 Oct 2015 18:16:49 +0000
Subject: [PATCH 3/7] improve styling for invalid state

---
 demo/index.html       | 7 ++++---
 google-recaptcha.html | 3 ++-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 6c5efc5..7c5266e 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -57,10 +57,11 @@
 
   <hr>
 
-  <form is="iron-form" style="outline: thin solid #ccc; padding: .5rem 2rem;">
+  <form is="iron-form" style="border: 1px solid #ccc; padding: 0 25px 25px;">
     <h2>Demo within an iron-form</h2>
-    <google-recaptcha required sitekey="6LdRcP4SAAAAAJ4Dq1gXcD9AyhzuG77iz7E2Dmu4"></google-recaptcha>
-    <button type="submit" >Submit</button>
+    <google-recaptcha required sitekey="6LdRcP4SAAAAAJ4Dq1gXcD9AyhzuG77iz7E2Dmu4"
+      style="display: inline-block; padding-top: 2px; padding-left: 2px;"></google-recaptcha>
+    <div><button type="submit">Submit</button></div>
   </form>
 
 </body>
diff --git a/google-recaptcha.html b/google-recaptcha.html
index b5ff0a1..bc301d5 100644
--- a/google-recaptcha.html
+++ b/google-recaptcha.html
@@ -29,7 +29,8 @@
       display: block;
     }
     :host.invalid {
-      outline: 1px solid red;
+      border: 1px solid red;
+      border-radius: 3px;
     }
   </style>
   <template><content></content></template>

From f85d80cf403b5fd842c688856b621b429e24fbbf Mon Sep 17 00:00:00 2001
From: jab <jab@math.brown.edu>
Date: Tue, 6 Oct 2015 18:24:18 +0000
Subject: [PATCH 4/7] s/_validateAttrs/_changeOptions

---
 google-recaptcha.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/google-recaptcha.html b/google-recaptcha.html
index bc301d5..304ea69 100644
--- a/google-recaptcha.html
+++ b/google-recaptcha.html
@@ -113,10 +113,10 @@
       },
 
       observers: [
-        '_validateAttrs(theme, type, timeout)'
+        '_checkOptions(theme, type, timeout)'
       ],
 
-      _validateAttrs: function () {
+      _checkOptions: function () {
         if(this.theme!='dark' && this.theme!='light'){
           this.theme='light';
         }

From 1bb40836801250e6d2978337a2dc776238d131c5 Mon Sep 17 00:00:00 2001
From: jab <jab@math.brown.edu>
Date: Wed, 7 Oct 2015 23:46:03 +0000
Subject: [PATCH 5/7] default to required, use invalid attr instead of class

---
 demo/index.html       |  3 +--
 google-recaptcha.html | 56 ++++++++++++++++++++++++++++---------------
 2 files changed, 38 insertions(+), 21 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 7c5266e..bb45c39 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -59,8 +59,7 @@
 
   <form is="iron-form" style="border: 1px solid #ccc; padding: 0 25px 25px;">
     <h2>Demo within an iron-form</h2>
-    <google-recaptcha required sitekey="6LdRcP4SAAAAAJ4Dq1gXcD9AyhzuG77iz7E2Dmu4"
-      style="display: inline-block; padding-top: 2px; padding-left: 2px;"></google-recaptcha>
+    <google-recaptcha sitekey="6LdRcP4SAAAAAJ4Dq1gXcD9AyhzuG77iz7E2Dmu4"></google-recaptcha>
     <div><button type="submit">Submit</button></div>
   </form>
 
diff --git a/google-recaptcha.html b/google-recaptcha.html
index 304ea69..b4d3640 100644
--- a/google-recaptcha.html
+++ b/google-recaptcha.html
@@ -24,16 +24,18 @@
 @demo demo/index.html
 -->
 <dom-module id="google-recaptcha">
-  <style>
-    :host {
-      display: block;
-    }
-    :host.invalid {
-      border: 1px solid red;
-      border-radius: 3px;
-    }
-  </style>
-  <template><content></content></template>
+  <template class="foo">
+    <style>
+      :host {
+        display: inline-block;
+        padding: 2px 0 0 2px;
+      }
+      :host[invalid]:not([pristine]) {
+        border: 1px solid red;
+        border-radius: 3px;
+      }
+    </style>
+  </template>
 </dom-module>
 
 <script>
@@ -49,19 +51,38 @@
       _containerId:'',
       _captchaId:'',
 
-      _invalid: true,
-
       behaviors: [
         Polymer.IronFormElementBehavior,
         Polymer.IronValidatableBehavior
       ],
 
       _getValidity: function () {
-        this.toggleClass('invalid', this._invalid);
-        return !this._invalid;
+        this.pristine = false;
+        return !this.invalid;
       },
 
       properties: {
+        /**
+         * Whether a captcha in an iron-form is a required input.
+         */
+        required: {
+          type: Boolean,
+          reflectToAttribute: true,
+          value: true
+        },
+
+        invalid: {
+          type: Boolean,
+          reflectToAttribute: true,
+          value: true
+        },
+
+        pristine: {
+          type: Boolean,
+          reflectToAttribute: true,
+          value: true
+        },
+
         /**
          * The total time (in milliseconds) to wait for API loading
          */
@@ -153,7 +174,6 @@
         return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
       },
       ready: function () {
-
       },
       attached: function () {
         if(this.sitekey===''){
@@ -235,8 +255,7 @@
        *  @param {String} response response to store
        */
       _responseHandler: function (response) {
-        this._invalid = false;
-        this.toggleClass('invalid', this._invalid);
+        this.invalid = false;
         this.response=response;
         this.fire('captcha-response',{response:response});
       },
@@ -252,8 +271,7 @@
        * The `expiredHandler` method fires the captcha-expired event.
        */
       _expiredHandler: function () {
-        this._invalid = true;
-        this.toggleClass('invalid', this._invalid);
+        this.invalid = true;
         this.fire('captcha-expired');
       }
     });

From a93bfb9109a88bcc5509e48131404d6adcf0793b Mon Sep 17 00:00:00 2001
From: jab <jab@math.brown.edu>
Date: Thu, 8 Oct 2015 13:35:49 +0000
Subject: [PATCH 6/7] rm stray class=foo

---
 google-recaptcha.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/google-recaptcha.html b/google-recaptcha.html
index b4d3640..0d4662a 100644
--- a/google-recaptcha.html
+++ b/google-recaptcha.html
@@ -24,7 +24,7 @@
 @demo demo/index.html
 -->
 <dom-module id="google-recaptcha">
-  <template class="foo">
+  <template>
     <style>
       :host {
         display: inline-block;

From 1c7f9519f6e2f18ffe0e2b990b1bd1e05f200ff3 Mon Sep 17 00:00:00 2001
From: jab <jab@math.brown.edu>
Date: Thu, 8 Oct 2015 13:53:54 +0000
Subject: [PATCH 7/7] set pristine=false in response/expired handlers

---
 google-recaptcha.html | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/google-recaptcha.html b/google-recaptcha.html
index 0d4662a..91dbd17 100644
--- a/google-recaptcha.html
+++ b/google-recaptcha.html
@@ -255,6 +255,7 @@
        *  @param {String} response response to store
        */
       _responseHandler: function (response) {
+        this.pristine = false;
         this.invalid = false;
         this.response=response;
         this.fire('captcha-response',{response:response});
@@ -271,6 +272,7 @@
        * The `expiredHandler` method fires the captcha-expired event.
        */
       _expiredHandler: function () {
+        this.pristine = false;
         this.invalid = true;
         this.fire('captcha-expired');
       }
