Skip to content
This repository has been archived by the owner on Sep 10, 2022. It is now read-only.

proof of concept demo with iron-form #12

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

proof of concept demo with iron-form #12

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
07927d1
proof of concept
jab Oct 4, 2015
f1a04f8
add iron-form integration deps to bower.json
jab Oct 6, 2015
eb89618
improve styling for invalid state
jab Oct 6, 2015
f85d80c
s/_validateAttrs/_changeOptions
jab Oct 6, 2015
1bb4083
default to required, use invalid attr instead of class
jab Oct 7, 2015
a93bfb9
rm stray class=foo
jab Oct 8, 2015
1c7f951
set pristine=false in response/expired handlers
jab Oct 8, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 19 additions & 2 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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>
25 changes: 23 additions & 2 deletions google-recaptcha.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -26,6 +28,9 @@
:host {
display: block;
}
:host.invalid {
outline: 1px solid red;
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This just puts a red box around the google-recaptcha element when it has the "invalid" class. Ideally we would be able to toggle the rc-anchor-error class on the .rc-anchor element inside the iframe (to get the checkbox inside the captcha to be rendered in red), but not sure if we can access that element due to cross-origin policy.

}
</style>
<template><content></content></template>
</dom-module>
Expand All @@ -43,6 +48,18 @@
_containerId:'',
_captchaId:'',

_invalid: true,

behaviors: [
Polymer.IronFormElementBehavior,
Polymer.IronValidatableBehavior
],

_getValidity: function () {
this.toggleClass('invalid', this._invalid);
return !this._invalid;
},
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@cbalit wrote:

i wonder why you call toggle class in _getValidity method ?

a google-recaptcha element's _getValidity method now gets called when you submit an iron-form that contains it. Without this toggleClass call, the red border would not appear around an invalid recaptcha upon attempting to submit the form.


properties: {
/**
* The total time (in milliseconds) to wait for API loading
Expand Down Expand Up @@ -95,10 +112,10 @@
},

observers: [
'_validate(theme, type, timeout)'
'_validateAttrs(theme, type, timeout)'
],

_validate:function () {
_validateAttrs: function () {
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Calling this _validate is confusing once support for form validation logic is added so I propose renaming it. Let me know if something else (maybe that doesn't even have the word validate in it -- maybe checkOptions?) would be better.

if(this.theme!='dark' && this.theme!='light'){
this.theme='light';
}
Expand Down Expand Up @@ -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});
},
Expand All @@ -232,6 +251,8 @@
* The `expiredHandler` method fires the captcha-expired event.
*/
_expiredHandler: function () {
this._invalid = true;
this.toggleClass('invalid', this._invalid);
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure if we should be modifying the dom imperatively like this rather than achieving this via a declarative binding, but just wanted to get something working.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(something like this and this is what I meant by "achieving this via a declarative binding")

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(i.e. invalid="{{_invalid}}" or some such. Is that possible/preferable?)

this.fire('captcha-expired');
}
});
Expand Down