lc-core/src/main/resources/index.html
hrj 9b978212dc show errors in demo
Signed-off-by: hrj <harshad.rj@gmail.com>
2021-04-19 18:05:59 +05:30

82 lines
2.5 KiB
HTML

<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>
function showError(errMessage) {
const resultDiv = document.getElementById("result")
const result = `
<p>Error: ${errMessage}</p>
`
resultDiv.innerHTML = result;
}
async function loadCaptcha() {
const levelInput = document.getElementById("levelInput").value
const mediaInput = document.getElementById("mediaInput").value
const typeInput = document.getElementById("typeInput").value
fetch("/v1/captcha", {
method: 'POST',
body: JSON.stringify({level: levelInput, media: mediaInput, "input_type" : typeInput})
}).then(async function(resp) {
const respJson = await resp.json()
if (resp.ok) {
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;
} else {
showError("Failed with response code: " + resp.status + " response: " + JSON.stringify(respJson))
}
}).catch(showError)
}
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>