<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="/webapp/favicon.png">
<title>
Cratery -- Tokens management
</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<header style="position: sticky; top: 0;">
<nav class="bg-white border-gray-200 px-4 lg:px-6 py-2.5 dark:bg-gray-800">
<div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl">
<a href="/webapp/index.html" class="flex items-center">
<picture>
<source srcset="./logo-white.svg" media="(prefers-color-scheme: dark)" />
<source srcset="./logo-black.svg" media="(prefers-color-scheme: light)" />
<img src="./logo-white.svg" class="mr-3 h-6 sm:h-9" style="min-width: 200px;" alt="Cratery Logo" />
</picture>
</a>
<div class="flex items-center lg:order-2">
<a id="link-admin" href="/webapp/admin.html" style="cursor: pointer;" class="text-gray-800 dark:text-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800">Admin</a>
<a id="link-account" href="/webapp/account.html" style="cursor: pointer;" class="text-gray-800 dark:text-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800">My Account</a>
<a onclick="doLogout()" style="cursor: pointer;" class="text-gray-800 dark:text-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800">Logout</a>
</div>
</div>
</nav>
</header>
<body onload="doPageLoad()" class="bg-white dark:bg-gray-800">
<section class="bg-white dark:bg-gray-900">
<div class="p-2 flex flex-row flex-wrap">
<a href="/webapp/admin.html" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6" style="display: inline-block;">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
</svg>
Back to admin
</a>
</div>
<div class="py-4 lg:py-4 px-4 mx-auto max-w-screen-xxl">
<h2 class="mb-4 text-4xl tracking-tight font-extrabold text-center text-gray-900 dark:text-white">Global tokens</h2>
<div class="relative overflow-x-auto space-y-8">
<button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800" onclick="onOpenCreateToken()">Create new token</button>
<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="px-6 py-3">
Token name
</th>
<th scope="col" class="px-6 py-3">
Last used
</th>
<th scope="col" class="px-6 py-3">
Accesses
</th>
<th scope="col" class="px-6 py-3">
Revoke
</th>
</tr>
</thead>
<tbody id="tokens">
</tbody>
</table>
</div>
</div>
</section>
<div id="modal-create-token" tabindex="-1" class="overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full" style="display: none;">
<div class="overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-51 w-full md:inset-0 h-modal md:h-full" style="background-color: black; opacity: 0.75;"></div>
<div class="relative" style="margin: auto; margin-top: 10%; width: 800px;">
<div class="relative p-4 bg-white rounded-lg shadow dark:bg-gray-800 md:p-8">
<div class="mb-4 text-sm font-light text-gray-500 dark:text-gray-400">
<h3 class="mb-3 text-2xl font-bold text-gray-900 dark:text-white">Create new token</h3>
</div>
<form class="mb-3 space-y-8">
<div>
<label for="new-token-name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Token name</label>
<input type="text" id="new-token-name" class="block p-3 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 shadow-sm focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light">
</div>
</form>
<div class="justify-between items-center pt-0 space-y-4 sm:flex sm:space-y-0">
<div class="items-center space-y-4 sm:space-x-4 sm:flex sm:space-y-0">
<button id="modal-create-token-close" type="button" class="py-2 px-4 w-full text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-200 sm:w-auto hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-primary-300 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">Cancel</button>
<button id="modal-create-token-confirm" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Confirm</button>
</div>
</div>
</div>
</div>
</div>
<div id="modal-token-created" tabindex="-1" class="overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full" style="display: none;">
<div class="overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-51 w-full md:inset-0 h-modal md:h-full" style="background-color: black; opacity: 0.75;"></div>
<div class="relative" style="margin: auto; margin-top: 10%; width: 800px;">
<div class="relative p-4 bg-white rounded-lg shadow dark:bg-gray-800 md:p-8">
<div class="mb-4 text-sm font-light text-gray-500 dark:text-gray-400">
<h3 class="mb-3 text-2xl font-bold text-gray-900 dark:text-white">New created token</h3>
</div>
<div class="mb-3 space-y-8">
<p class="text-base text-gray-900 dark:text-white">
To use this token, it needs to be configured for git in <kbd>~/.git-credentials</kbd>
</p>
<textarea id="modal-token-created-git-cred" rows="2" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" style="font-family: monospace;" disabled></textarea>
<p class="text-base text-gray-900 dark:text-white">
It also needs to appear in <kbd>~/.cargo/credentials.toml</kbd>:
</p>
<textarea id="modal-token-created-cargo-cred" rows="4" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" style="font-family: monospace;" disabled></textarea>
<p class="text-base text-gray-900 dark:text-white">
Finally, the registry must be declared in <kbd>~/.cargo/config.toml</kbd>:
</p>
<textarea id="modal-token-created-cargo-reg" rows="5" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" style="font-family: monospace;" disabled></textarea>
</div>
<div class="justify-between items-center pt-0 space-y-4 sm:flex sm:space-y-0">
<div class="items-center space-y-4 sm:space-x-4 sm:flex sm:space-y-0">
<button id="modal-token-created-confirm" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Ok</button>
</div>
</div>
</div>
</div>
</div>
<div id="modal-revoke-token" tabindex="-1" class="overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full" style="display: none;">
<div class="overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-51 w-full md:inset-0 h-modal md:h-full" style="background-color: black; opacity: 0.75;"></div>
<div class="relative" style="margin: auto; margin-top: 10%; width: 800px;">
<div class="relative p-4 bg-white rounded-lg shadow dark:bg-gray-800 md:p-8">
<div class="mb-4 text-sm font-light text-gray-500 dark:text-gray-400">
<h3 class="mb-3 text-2xl font-bold text-gray-900 dark:text-white">Revoke this token?</h3>
</div>
<form class="mb-3 space-y-8">
<div>
<label for="revoke-token-name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Token name</label>
<input type="text" id="revoke-token-name" class="block p-3 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 shadow-sm focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500 dark:shadow-sm-light" disabled>
</div>
</form>
<div class="justify-between items-center pt-0 space-y-4 sm:flex sm:space-y-0">
<div class="items-center space-y-4 sm:space-x-4 sm:flex sm:space-y-0">
<button id="modal-revoke-token-close" type="button" class="py-2 px-4 w-full text-sm font-medium text-gray-500 bg-white rounded-lg border border-gray-200 sm:w-auto hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-primary-300 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">Cancel</button>
<button id="modal-revoke-token-confirm" type="button" class="focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900">Revoke</button>
</div>
</div>
</div>
</div>
</div>
</body>
<footer class="p-4 bg-white md:p-8 lg:p-10 dark:bg-gray-800">
<div class="mx-auto max-w-screen-xl text-center">
<span class="text-sm text-gray-500 sm:text-center dark:text-gray-400">Version <span id="version"></span>, Copyright © <span id="year"></span> <a href="https://cenotelie.fr/" target="_blank" class="hover:underline">Cénotélie</a>. All Rights Reserved.</span>
</div>
</footer>
<link href="/webapp/index.css" rel="stylesheet" />
<script src="/webapp/api.js"></script>
<script src="/webapp/index.js"></script>
<script>
function doPageLoad() {
onPageLoad().then((_user) => {
apiGetRegistryInformation().then((registryInformation) => {
window.localStorage.setItem("cratery-registry-name", registryInformation.registryName);
});
apiGetGlobalTokens().then((tokens) => {
const table = document.getElementById("tokens");
for (const token of tokens) {
table.appendChild(renderToken(token));
}
});
});
}
function renderToken(token) {
const row = document.createElement("tr");
row.className = "bg-white border-b dark:bg-gray-800 dark:border-gray-700";
const cell1 = document.createElement("th");
cell1.setAttribute("scope", "row");
cell1.className = "px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white";
cell1.appendChild(document.createTextNode(token.name));
const cell2 = document.createElement("td");
cell2.className = "px-6 py-4";
cell2.appendChild(document.createTextNode(serializeDateTime(token.lastUsed)));
const cell3 = document.createElement("td");
cell3.className = "px-6 py-4";
cell3.appendChild(document.createTextNode("read-only"));
const cell4 = document.createElement("td");
cell4.className = "px-6 py-4";
const button = document.createElement("button");
button.className = "focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900";
button.type = "button";
button.appendChild(document.createTextNode("Revoke"));
button.addEventListener("click", () => {
openRevokeTokenModal(token);
});
cell4.appendChild(button);
row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);
row.appendChild(cell4);
return row;
}
function onOpenCreateToken() {
const modalEl = document.getElementById('modal-create-token');
modalEl.style.display = "unset";
const newTokenNameEl = document.getElementById("new-token-name");
newTokenNameEl.value = "";
newTokenNameEl.focus();
const closeEl = document.getElementById('modal-create-token-close');
closeEl.addEventListener('click', function() {
modalEl.style.display = "none";
});
const confirmEl = document.getElementById('modal-create-token-confirm');
confirmEl.addEventListener('click', function() {
const name = newTokenNameEl.value;
if (name.length === 0) {
return;
}
newTokenNameEl.disabled = true;
closeEl.disabled = true;
confirmEl.disabled = true;
apiCreateGlobalToken(name).then((tokenData) => {
modalEl.style.display = "none";
openTokenCreatedModal(tokenData);
}).finally(() => {
newTokenNameEl.disabled = false;
newTokenNameEl.value = "";
closeEl.disabled = false;
confirmEl.disabled = false;
});
});
}
function openTokenCreatedModal(tokenData) {
const user = JSON.parse(window.localStorage.getItem("cratery-user"));
const regName = window.localStorage.getItem("cratery-registry-name");
const gitCredEl = document.getElementById("modal-token-created-git-cred");
gitCredEl.value = `${window.location.protocol}//${tokenData.name}:${tokenData.secret}@${window.location.hostname}`;
const cargoCredEl = document.getElementById("modal-token-created-cargo-cred");
cargoCredEl.value = `[registries.${regName}]\ntoken = "Basic ${btoa(`${tokenData.name}:${tokenData.secret}`)}"`;
const cargoRegEl = document.getElementById("modal-token-created-cargo-reg");
cargoRegEl.value = `[registries]\n${regName} = { index = "sparse+${window.location.protocol}//${window.location.hostname}/" }\n\n[registry]\nglobal-credential-providers = ["cargo:token"]`;
const modalEl = document.getElementById('modal-token-created');
modalEl.style.display = "unset";
const confirmEl = document.getElementById('modal-token-created-confirm');
confirmEl.addEventListener('click', function() {
modalEl.style.display = "none";
window.location.reload();
});
}
function openRevokeTokenModal(token) {
const modalEl = document.getElementById('modal-revoke-token');
modalEl.style.display = "unset";
const tokenNameEl = document.getElementById("revoke-token-name");
tokenNameEl.value = token.name;
const closeEl = document.getElementById('modal-revoke-token-close');
closeEl.addEventListener('click', function() {
modalEl.style.display = "none";
});
const confirmEl = document.getElementById('modal-revoke-token-confirm');
confirmEl.addEventListener('click', function() {
closeEl.disabled = true;
confirmEl.disabled = true;
apiRevokeGlobalToken(token.id).then((_) => {
window.location.reload();
}).finally(() => {
closeEl.disabled = false;
confirmEl.disabled = false;
});
});
}
</script>
</html>
