custom reCAPTCHA theme - Githubissues

GoogleCodeExporter commented 9 years ago

This is an enhancement request to replace the current Google generated theme by 
a custom theme.

There are several reasons to make this change:

- the Google generated reCAPTCHA theme is not easily customizable via CSS. If 
you require a different look and feel of PWM there is no easy way to customize 
the captcha
- the Google generated reCAPTCHA theme is not suited for display on Smartphones 
(i.e. Galaxy S2), because the width of the captcha is too large
- A customized reCAPTCHA makes it possible to change the functionality of the 
captcha (i.e. hide audio button).
- A customizated reCAPTCHA makes it possible to customize any of the text 
labels that are necessary for the captcha (i.e. also for languages that are not 
supported by Google).

Too overcome these limitation I have adjusted the captcha.jsp and added some 
CSS against trunk. Attached a screenshot of my current implementation. I'll 
share my code example if this is of interest to PWM.

Original issue reported on code.google.com by sebastia...@gmail.com on 26 Jun 2013 at 2:02

Attachments:

custom-captcha.png

GoogleCodeExporter commented 9 years ago

This sounds good, a patch would be welcomed.

Original comment by jrivard on 30 Jun 2013 at 6:48

GoogleCodeExporter commented 9 years ago

Ok, great. I'll need to find some spare time to adjust the CSS to the PWM 
default theme. I'll post a patch somewhere next week.

Original comment by sebastia...@gmail.com on 2 Jul 2013 at 6:50

GoogleCodeExporter commented 9 years ago

I had some spare time to make a patch. A couple of remarks:

- I've adjusted the CSS to match the default PWM theme. Feel free to tweak it 
further
- the bottom icons are scalable vector icons by Font Awesome. This is licensed 
under MIT License, so I'm not sure wether this fits PWM licensing.
- I've made the CSS modular so that it logical grouped. Feel free to merge it 
into style.css
- I haven't found a really nice way to display the Wait Dialog. Currently I'm 
using the background image property of the captcha div for the Wait Dialog. It 
looks visually ok, but the image remains behind the captcha.

Original comment by sebastia...@gmail.com on 2 Jul 2013 at 2:23

Attachments:

pwm-issue-411.diff

GoogleCodeExporter commented 9 years ago

Added in revision 581.  Made a few minor organizational changes to the patch, 
please let me know if you see any issues.  Thanks for the patch, and font 
awesome looks pretty useful!

Original comment by jrivard on 27 Jul 2013 at 12:24

GoogleCodeExporter commented 9 years ago

Original comment by jrivard on 27 Jul 2013 at 12:24

Changed state: Fixed

GoogleCodeExporter commented 9 years ago

Original comment by jrivard on 27 Jul 2013 at 12:25

Added labels: Type-Enhancement
Removed labels: Type-Defect

GoogleCodeExporter commented 9 years ago

Thanks for accepting my patch. It looks pretty good, except for the way the 
captcha CSS is included. The captcha CSS is included in the captcha.jsp after 
the inclusion of the header.jsp. This results in the captcha CSS overruling the 
theme CSS.

Therefore you currently cannot style the captcha via a CSS theme.

Original comment by sebastia...@gmail.com on 2 Aug 2013 at 8:48

GoogleCodeExporter commented 9 years ago

see revision 582.  moved the captcha css into main style css, I had trouble 
doing this originally for some reason but it seems okay now.  This should allow 
styling via theme?

Original comment by jrivard on 8 Aug 2013 at 5:42

Changed state: NeedInfo

GoogleCodeExporter commented 9 years ago

My build and tests always used an import for the captcha css from the main 
style.css. I havent seen any issues with that. Including it in in the header 
should be fine. This also brings new possibilies to style alle buttons of PWM 
with Font Awesome.

However revision 582 seems to be missing 
/public/resources/font/font-awesome.css.

Original comment by sebastia...@gmail.com on 8 Aug 2013 at 7:14

GoogleCodeExporter commented 9 years ago

Revision 583 added font-awesome.css, whoops :).  Since then the icons have are 
being used in other places in pwm.  Please re-open if there is still any 
lingering issues.

Original comment by jrivard on 17 Aug 2013 at 12:53

Changed state: Fixed

GoogleCodeExporter commented 9 years ago

Thanks for fixing. FontAewsome is pretty cool in my opinion: no overhead on 
images, but you do get the look and feel if images.

If you are interested in styling the menu buttons just let me know. In my 
custom theme I've added FontAwsome icons with the pseudo CSS element :before to 
give them a slick look and feel.

Original comment by sebastia...@gmail.com on 17 Aug 2013 at 8:39

gandres / pwm

custom reCAPTCHA theme #411