add a simple browser based demo
Signed-off-by: hrj <harshad.rj@gmail.com>
This commit is contained in:
parent
f38d6ee191
commit
6189ffce89
|
@ -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
|
||||
|
|
|
@ -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>
|
|
@ -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 = {
|
||||
|
|
Loading…
Reference in New Issue