Mirroristas/pow-captcha
2
0
Fork 0
mirror of https://github.com/sequentialread/pow-captcha.git synced 2025-10-13 16:49:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

add font size info to DOM API

Browse Source
This commit is contained in:
forest 2021-02-25 17:36:09 -06:00
parent d9a8eae5e9
commit 1cf6734f3f
1 changed files with 3 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@ -216,6 +216,8 @@ When `captcha.js` runs, if it finds an element with `data-sqr-captcha-challenge`
⚠️ **NOTE** that the element with the `sqr-captcha` data properties **MUST** be placed **inside a form element**. This is required, to allow the captcha to know which input elements it needs to trigger on. We only want the captcha to trigger when the user actually intends to submit the form; otherwise we are wasting a lot of their CPU cycles for no reason!
> 💬 *INFO* the element with the `sqr-captcha` data properties should probably be styled to have a very small font size. When I was designing the css for the captcha element, I made everything scale based on the font size (by using `em`). But because the page I was testing it on had a small font by default, I accidentally made it huge when it is rendered on a default HTML page. So for now you will want to make the font size of the element which contains it fairly small, like `10px` or `11px`.
# Running the example app
The `example` folder in this repository contains an example app that demonstrates how to implement the 💥PoW! Captcha
@ -374,8 +376,7 @@ There are two main important parts, the form and the javascript at the bottom:
⚠️ **NOTE** that the element with the `sqr-captcha` data properties is placed **inside a form element**. This is required, to allow the captcha to know which input elements it needs to trigger on. We only want the captcha to trigger when the user actually intends to submit the form; otherwise we are wasting a lot of their CPU cycles for no reason!
> 💬 *INFO* The double curly brace elements like `{{ .Challenge }}` are Golang string template interpolations.
They will place values, usually strings, that are passed into the template from the application.
> 💬 *INFO* The double curly brace elements like `{{ .Challenge }}` are Golang string template interpolations. They are specific to the example app & how it renders the page.
When the page loads, the `captcha.js` script will execute, querying the page for all elements with the `data-sqr-captcha-challenge`
property. It will then validate each element to make sure it also has the `data-sqr-captcha-url` and `data-sqr-captcha-callback` properties. For each element it found, it will locate the `<form>` parent/grandparent enclosing the element. If none are found, it will throw an error. Otherwise, it will set up an event listener on every input element inside that form, so that as soon as the user starts filling out the form, the captcha display will pop up and the Proof of Work will begin.