Allow users to input an API Key to search into private data

This commit is contained in:
Kerollmops 2020-05-29 10:48:56 +02:00
parent 5ee4a1e954
commit 1370b19402
No known key found for this signature in database
GPG Key ID: 92ADA4E935E71FA4

View File

@ -94,6 +94,17 @@
<h2 class="subtitle"> <h2 class="subtitle">
This dashboard will help you check the search results with ease. This dashboard will help you check the search results with ease.
</h2> </h2>
<div class="field">
<!-- API Key -->
<div class="field">
<div class="control">
<input id="apiKey" class="input is-small" type="password" placeholder="API key (optional)">
<div class="help">At least a private API key is required for the dashboard to access the indexes list.</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</section> </section>
@ -158,13 +169,33 @@
return str; return str;
} }
function httpGet(theUrl) { function httpGet(theUrl, apiKey) {
var xmlHttp = new XMLHttpRequest(); var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", theUrl, false); // false for synchronous request xmlHttp.open("GET", theUrl, false); // false for synchronous request
if (apiKey) {
xmlHttp.setRequestHeader("x-Meili-API-Key", apiKey);
}
xmlHttp.send(null); xmlHttp.send(null);
return xmlHttp.responseText; return xmlHttp.responseText;
} }
function refreshIndexList() {
// TODO we must not block here
let result = JSON.parse(httpGet(`${baseUrl}/indexes`, localStorage.getItem('apiKey')));
if (!Array.isArray(result)) { return }
let select = document.getElementById("index");
select.innerHTML = '';
for (index of result) {
const option = document.createElement('option');
option.value = index.uid;
option.innerHTML = index.name;
select.appendChild(option);
}
}
let lastRequest = undefined; let lastRequest = undefined;
function triggerSearch() { function triggerSearch() {
@ -178,6 +209,11 @@
lastRequest = new XMLHttpRequest(); lastRequest = new XMLHttpRequest();
lastRequest.open("GET", theUrl, true); lastRequest.open("GET", theUrl, true);
if (localStorage.getItem('apiKey')) {
lastRequest.setRequestHeader("x-Meili-API-Key", localStorage.getItem('apiKey'));
}
lastRequest.onload = function (e) { lastRequest.onload = function (e) {
if (lastRequest.readyState === 4 && lastRequest.status === 200) { if (lastRequest.readyState === 4 && lastRequest.status === 200) {
let sanitizedResponseText = sanitizeHTMLEntities(lastRequest.responseText); let sanitizedResponseText = sanitizeHTMLEntities(lastRequest.responseText);
@ -250,18 +286,18 @@
lastRequest.send(null); lastRequest.send(null);
} }
let baseUrl = window.location.origin; if (!apiKey.value) {
// TODO we must not block here apiKey.value = localStorage.getItem('apiKey');
let result = JSON.parse(httpGet(`${baseUrl}/indexes`));
let select = document.getElementById("index");
for (index of result) {
const option = document.createElement('option');
option.value = index.uid;
option.innerHTML = index.name;
select.appendChild(option);
} }
apiKey.addEventListener('input', function(e) {
localStorage.setItem('apiKey', apiKey.value);
refreshIndexList();
}, false);
let baseUrl = window.location.origin;
refreshIndexList();
search.oninput = triggerSearch; search.oninput = triggerSearch;
select.onchange = triggerSearch; select.onchange = triggerSearch;