Skip to content

Commit

Permalink
Add new API keys to UI without reloading, add small animation, remove…
Browse files Browse the repository at this point in the history 
… html_users.tmpl originaly from unpublished branch
  • Loading branch information
@Forceu
Forceu committed Dec 18, 2024
1 parent aebd5a4 commit e4fe145
Show file tree
Hide file tree
Showing 6 changed files with 120 additions and 145 deletions.
15 changes: 15 additions & 0 deletions internal/webserver/web/static/css/cover.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -220,6 +220,16 @@ td.newItem {
}
}


@keyframes subtleHighlightNewApiKey {
0% {
background-color: green; /* Pale green for new items */
}
100% {
background-color: transparent;
}
}

/* Apply the animation to the updated table cells */
.updatedDownloadCount {
animation: subtleHighlight 0.5s ease-out;
Expand All @@ -230,4 +240,9 @@ td.newItem {
animation: subtleHighlightNewItem 0.5s ease-out;
}

.newApiKey {
animation: subtleHighlightNewApiKey 0.7s ease-out;
}



2 changes: 1 addition & 1 deletion internal/webserver/web/static/css/min/gokapi.min.3.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

144 changes: 95 additions & 49 deletions internal/webserver/web/static/js/admin_ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -278,52 +278,6 @@ function requestFileInfo(fileId, uid) {
}


function addFriendlyNameChange() {
document.querySelectorAll(".apiname").forEach(function(node) {
node.onclick = function() {
if (this.classList.contains("isBeingEdited"))
return;
this.classList.add("isBeingEdited");
var val = this.innerHTML;
var input = document.createElement("input");
input.size = 5;
input.value = val;
let row = this;
let allowEdit = true;

let submitEntry = function() {
if (!allowEdit)
return;
allowEdit = false;
var newName = input.value;
input.parentNode.innerHTML = newName;

row.classList.remove("isBeingEdited");

apiAuthFriendlyName(row.id, newName)
.catch(error => {
alert("Unable to save name: " + error);
console.error('Error:', error);
});
};

input.onblur = submitEntry;
input.addEventListener("keyup", function(event) {
// Enter
if (event.keyCode === 13) {
event.preventDefault();
submitEntry();
}
});
this.innerHTML = "";
this.appendChild(input);
input.focus();
};
});
}



function parseProgressStatus(eventData) {
let container = document.getElementById(`us-container-${eventData.chunk_id}`);
if (container == null) {
Expand Down Expand Up @@ -601,12 +555,11 @@ function deleteApiKey(apiKey) {


function newApiKey() {

document.getElementById("button-newapi").disabled = true;

apiAuthCreate()
.then(data => {
location.reload();
addRowApi(data.Id);
document.getElementById("button-newapi").disabled = false;
})
.catch(error => {
alert("Unable to create API key: " + error);
Expand All @@ -615,6 +568,99 @@ function newApiKey() {
}




function addFriendlyNameChange(apiKey) {
let cell = document.getElementById("friendlyname-" + apiKey);
if (cell.classList.contains("isBeingEdited"))
return;
cell.classList.add("isBeingEdited");
let currentName = cell.innerHTML;
let input = document.createElement("input");
input.size = 5;
input.value = currentName;
let allowEdit = true;

let submitEntry = function() {
if (!allowEdit)
return;
allowEdit = false;
let newName = input.value;
cell.innerHTML = newName;

cell.classList.remove("isBeingEdited");

apiAuthFriendlyName(apiKey, newName)
.catch(error => {
alert("Unable to save name: " + error);
console.error('Error:', error);
});
};

input.onblur = submitEntry;
input.addEventListener("keyup", function(event) {
// Enter
if (event.keyCode === 13) {
event.preventDefault();
submitEntry();
}
});
cell.innerHTML = "";
cell.appendChild(input);
input.focus();
}




function addRowApi(apiKey) {

let table = document.getElementById("apitable");
let row = table.insertRow(0);
row.id = "row-" + apiKey;
let cellFriendlyName = row.insertCell(0);
let cellId = row.insertCell(1);
let cellLastUsed = row.insertCell(2);
let cellPermissions = row.insertCell(3);
let cellButtons = row.insertCell(4);
let cellEmpty = row.insertCell(5);

cellFriendlyName.classList.add("newApiKey");
cellId.classList.add("newApiKey");
cellLastUsed.classList.add("newApiKey");
cellPermissions.classList.add("newApiKey");
cellButtons.classList.add("newApiKey");
cellEmpty.classList.add("newApiKey");


cellFriendlyName.innerText = "Unnamed key";
cellFriendlyName.id = "friendlyname-" + apiKey;
cellFriendlyName.onclick = function() {
addFriendlyNameChange(apiKey);
};
cellId.innerText = apiKey;
cellLastUsed.innerText = "Never";
cellButtons.innerHTML = '<button type="button" data-clipboard-text="' + apiKey + '" onclick="showToast()" title="Copy API Key" class="copyurl btn btn-outline-light btn-sm"><i class="bi bi-copy"></i></button> <button id="delete-' + apiKey + '" type="button" class="btn btn-outline-danger btn-sm" onclick="deleteApiKey(\'' + apiKey + '\')" title="Delete"><i class="bi bi-trash3"></i></button>';
cellPermissions.innerHTML = `
<i id="perm_view_` + apiKey + `" class="bi bi-eye apiperm-granted" title="List Uploads" onclick='changeApiPermission("` + apiKey + `","PERM_VIEW", "perm_view_` + apiKey + `");'></i>
<i id="perm_upload_` + apiKey + `" class="bi bi-file-earmark-arrow-up apiperm-granted" title="Upload" onclick='changeApiPermission("` + apiKey + `","PERM_UPLOAD", "perm_upload_` + apiKey + `");'></i>
<i id="perm_edit_` + apiKey + `" class="bi bi-pencil apiperm-granted" title="Edit Uploads" onclick='changeApiPermission("` + apiKey + `","PERM_EDIT", "perm_edit_` + apiKey + `");'></i>
<i id="perm_delete_` + apiKey + `" class="bi bi-trash3 apiperm-granted" title="Delete Uploads" onclick='changeApiPermission("` + apiKey + `","PERM_DELETE", "perm_delete_` + apiKey + `");'></i>
<i id="perm_replace_` + apiKey + `" class="bi bi-recycle apiperm-notgranted" title="Replace Uploads" onclick='changeApiPermission("` + apiKey + `","PERM_REPLACE", "perm_replace_` + apiKey + `");'></i>
<i id="perm_api_` + apiKey + `" class="bi bi-sliders2 apiperm-notgranted" title="Manage API Keys" onclick='changeApiPermission("` + apiKey + `","PERM_API_MOD", "perm_api_` + apiKey + `");'></i>`;

setTimeout(() => {
cellFriendlyName.classList.remove("newApiKey");
cellId.classList.remove("newApiKey");
cellLastUsed.classList.remove("newApiKey");
cellPermissions.classList.remove("newApiKey");
cellButtons.classList.remove("newApiKey");
cellEmpty.classList.remove("newApiKey");
}, 700);

}


function deleteFile(id) {

document.getElementById("button-delete-" + id).disabled = true;
Expand Down
8 changes: 7 additions & 1 deletion internal/webserver/web/static/js/min/admin.min.7.js
View file

Large diffs are not rendered by default.

5 changes: 2 additions & 3 deletions internal/webserver/web/templates/html_api.tmpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,11 @@
<th scope="col"><button id="button-newapi" type="button" class="btn btn-outline-light btn-sm" onclick="newApiKey()"><i class="bi bi-plus-circle-fill"></i> New Key</button></th>
</tr>
</thead>
<tbody>
<tbody id="apitable">
{{ range .ApiKeys }}
{{ if not .IsSystemKey }}
<tr id="row-{{ .Id }}">
<td scope="col" id="{{ .Id }}" class="apiname">{{ .FriendlyName }}</td>
<td scope="col" id="friendlyname-{{ .Id }}" onClick="addFriendlyNameChange('{{ .Id }}')">{{ .FriendlyName }}</td>
<td scope="col">{{ .Id }}</td>
<td scope="col">{{ .GetReadableDate }}</td>
<td scope="col">
Expand All @@ -52,7 +52,6 @@
</div>
<script src="./js/min/admin.min.{{ template "js_admin_version"}}.js"></script>
<script>
addFriendlyNameChange();
var systemKey = "{{.SystemKey}}";
</script>
{{ template "footer" true }}
Expand Down
91 changes: 0 additions & 91 deletions internal/webserver/web/templates/html_users.tmpl
View file

This file was deleted.

0 comments on commit e4fe145

Please sign in to comment.