add a simple browser based demo

Signed-off-by: hrj <harshad.rj@gmail.com>
This commit is contained in:
hrj 2021-04-19 13:14:36 +05:30
parent f38d6ee191
commit 6189ffce89
3 changed files with 82 additions and 2 deletions

View File

@ -24,7 +24,8 @@ The sample CAPTCHAs are also just that, samples. They have not been tested again
1. Download the `jar` file from the latest release
2. Type `mkdir data/`.
(The data directory is used to store a config file that you can tweak, and for storing the Database)
2. Type `java -jar LibreCaptcha.jar`
3. Type `java -jar LibreCaptcha.jar`
4. Open [localhost:8888/demo/index.html](http://localhost:8888/demo/index.html) in browser
We recommend a Java 11+ runtime as that's what we compile the code with.
@ -32,6 +33,7 @@ Alternatively,
1. Install [sbt](https://www.scala-sbt.org/)
2. Clone this repository
3. Type `sbt run` within the repository
4. Open [localhost:8888/demo/index.html](http://localhost:8888/demo/index.html) in browser
## Quick start with Docker
@ -51,7 +53,9 @@ docker run -v lcdata:/lc-core/data librecaptcha/lc-core:latest
A default `config.json` is automatically created in the mounted volume.
## Quick test
To test the installation, try:
Open [localhost:8888/demo/index.html](http://localhost:8888/demo/index.html) in browser.
Alternatively, on the command line, try:
```
> $ curl -d '{"media":"image/png","level":"easy","input_type":"text"}' localhost:8888/v1/captcha

View File

@ -0,0 +1,69 @@
<html>
<style>
body {background-color: #e7f7f7;}
button {background-color: #b4ffff; font-size:1.66em;}
input[type=text] {font-size:1.66em;}
div.inputGroup {margin: 1em}
div.section {border: .33em solid #0b6767; margin:1em; padding: 1em}
</style>
<script>
async function loadCaptcha() {
const levelInput = document.getElementById("levelInput").value
const mediaInput = document.getElementById("mediaInput").value
const typeInput = document.getElementById("typeInput").value
const resp = await fetch("/v1/captcha", {
method: 'POST',
body: JSON.stringify({level: levelInput, media: mediaInput, "input_type" : typeInput})
})
const respJson = await resp.json()
const id = respJson.id
const resultDiv = document.getElementById("result")
const result = `
<p>Id: ${id}</p>
<p><img src="/v1/media?id=${id}" /> </p>
<input type="text" id="answerInput" />
<button onClick="submitAnswer('${id}')">Submit</button>
<div id="answerResult" />
`
resultDiv.innerHTML = result;
}
async function submitAnswer(id) {
const ans = document.getElementById("answerInput").value;
const resp = await fetch("/v1/answer", {
method: 'POST',
body: JSON.stringify({id: id, answer: ans})
})
const respJson = await resp.json()
const resultDiv = document.getElementById("answerResult")
const result = `
<p>${JSON.stringify(respJson)}</p>
`
resultDiv.innerHTML = result;
}
</script>
<body>
<div class="section">
<div class="inputGroup">
<span>Level</span>
<input type="text" id="levelInput" value="easy"/>
</div>
<div class="inputGroup">
<span>Media</span>
<input type="text" id="mediaInput" value="image/png" />
</div>
<div class="inputGroup">
<span>Input Type</span>
<input type="text" id="typeInput" value="text" />
</div>
<div class="inputGroup">
<button onClick="loadCaptcha()">Get New CAPTCHA</button>
</div>
</div>
<div class="section">
<div id="result">...</div>
</div>
</body>
</html>

View File

@ -7,6 +7,8 @@ import lc.core.{Parameters, Id, Answer, Error, ByteConvert}
import lc.core.Config.formats
import org.limium.picoserve
import org.limium.picoserve.Server.ByteResponse
import scala.io.Source
import org.limium.picoserve.Server.StringResponse
class Server(port: Int) {
val server: picoserve.Server = picoserve.Server.builder()
@ -35,6 +37,11 @@ class Server(port: Int) {
val result = Captcha.checkAnswer(answer)
getResponse(result)
})
.GET("/demo/index.html", (_) => {
val resStream = getClass().getResourceAsStream("/index.html")
val str = Source.fromInputStream(resStream).mkString
new StringResponse(200, str)
})
.build()
private def getResponse(response: Either[Error, ByteConvert]): ByteResponse = {