mirror of
https://github.com/arx-research/libhalo.git
synced 2026-01-10 13:48:08 -05:00
130 lines
5.9 KiB
HTML
130 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>LibHaLo Demo</title>
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
|
|
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
|
|
|
|
<script type="text/javascript">
|
|
// ensure the library is always fully reloaded
|
|
document.write('<script src="../dist/libhalo.js?_v=' + (Math.random() + '') + '"></scr' + 'ipt>');
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="container mt-3 mb-5">
|
|
<h1>LibHaLo Demo</h1>
|
|
|
|
<div class="mb-4">
|
|
<div class="mb-2">
|
|
<strong>Options:</strong>
|
|
</div>
|
|
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="legacySignCommand">
|
|
<label class="form-check-label" for="legacySignCommand">
|
|
Version C1-C3 compatibility (<code>command.legacySignCommand</code>)
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<strong>Message digest to be signed:</strong>
|
|
<input type="text" class="form-control" id="digest" value="0101010101010101010101010101010101010101010101010101010101010101">
|
|
<p class="text-muted">The message digest must be exactly 32 bytes, hex encoded.</p>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<strong>Target key slot:</strong>
|
|
<select class="form-select" id="keyNo">
|
|
<option value="1">Key #1</option>
|
|
<option value="3">Key #3</option>
|
|
</select>
|
|
</div>
|
|
|
|
<strong>Status text:</strong>
|
|
<pre id="statusText" style="white-space: pre-wrap; word-break: break-all;">Please click on one of the buttons below.</pre>
|
|
|
|
<button class="btn btn-primary" onclick="btnExecuteNFC(null);" id="btn-auto">
|
|
Sign using auto-detected method
|
|
</button>
|
|
<button class="btn btn-secondary" onclick="btnExecuteNFC('credential');" id="btn-credential">
|
|
Sign using Credential API
|
|
</button>
|
|
<button class="btn btn-secondary" onclick="btnExecuteNFC('webnfc');" id="btn-webnfc">
|
|
Sign using WebNFC
|
|
</button>
|
|
|
|
<script type="text/javascript">
|
|
function btnExecuteNFC(method) {
|
|
document.getElementById('btn-auto').disabled = true;
|
|
document.getElementById('btn-credential').disabled = true;
|
|
document.getElementById('btn-webnfc').disabled = true;
|
|
document.getElementById('statusText').style.color = 'green';
|
|
|
|
let legacySignCommand = document.getElementById('legacySignCommand').checked;
|
|
|
|
let digest = document.getElementById('digest').value;
|
|
let keyNo = document.getElementById('keyNo').value;
|
|
|
|
// all options are optional, you can use them to increase user's experience
|
|
let options = {
|
|
method: method,
|
|
statusCallback: (cause) => {
|
|
if (cause === "init") {
|
|
// explicitly ask the user to tap the tag
|
|
document.getElementById('statusText').innerText = 'Tap the tag to the back of your smartphone and hold it for a while.';
|
|
} else if (cause === "retry") {
|
|
// this callback is invoked when there is a communication error
|
|
// the executeNFCCommand() call will be still running and the frontend
|
|
// should ask the user to just try to tap the tag again
|
|
document.getElementById('statusText').innerText = 'Failed to scan the tag. Please try to tap it again. (' + cause + ').';
|
|
} else if (cause === "scanned") {
|
|
// everything is done on the NFC part, but we need a tiny bit of time to compute the result on the client-side
|
|
// the frontend should instruct the user that he can take the tag away already
|
|
document.getElementById('statusText').style.color = 'orange';
|
|
document.getElementById('statusText').innerText = 'Tag was scanned. Please wait until we compute the result...';
|
|
}
|
|
}
|
|
};
|
|
|
|
let command = {
|
|
name: "write_latch",
|
|
latchNo: 2,
|
|
data: digest
|
|
};
|
|
|
|
execHaloCmdWeb(command, options)
|
|
.then((res) => {
|
|
// operation succeeded, display the result to the user
|
|
document.getElementById('statusText').style.color = 'black';
|
|
document.getElementById('statusText').innerText = JSON.stringify(res, null, 4);
|
|
|
|
document.getElementById('btn-auto').disabled = false;
|
|
document.getElementById('btn-credential').disabled = false;
|
|
document.getElementById('btn-webnfc').disabled = false;
|
|
})
|
|
.catch((e) => {
|
|
console.error(e);
|
|
|
|
if (e instanceof NFCAbortedError) {
|
|
// in case of multiple calls to executeNFCCommand(), for example when somebody is mashing
|
|
// a button, all calls except one will fail by throwing NFCAbortedError
|
|
// this exception should be ignored on the frontend
|
|
} else {
|
|
// the operation has failed, display the reason to the user
|
|
document.getElementById('statusText').style.color = 'black';
|
|
document.getElementById('statusText').innerText = e;
|
|
|
|
document.getElementById('btn-auto').disabled = false;
|
|
document.getElementById('btn-credential').disabled = false;
|
|
document.getElementById('btn-webnfc').disabled = false;
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</div>
|
|
</body>
|
|
</html>
|