Merge pull request #37 from opotonniee/explorer

Add Web Explorer
pull/39/head
Tim Cappalli 2024-02-20 10:36:29 -05:00 committed by GitHub
commit 124f440aaf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 262 additions and 0 deletions

View File

@ -0,0 +1,127 @@
html,
body {
margin: 0;
}
body {
margin: 0;
padding: 15px;
font-family: sans-serif;
background-color: whitesmoke;
}
h1 {
font-weight: bold;
text-overflow: ellipsis;
vertical-align: middle;
width: 100%;
margin: -15px 0 15px -15px;
padding: 15px;
background-color: lightsteelblue;
border-bottom: 1px solid black;
box-shadow: 0 2px 2px 1px #888;
}
h2 {
width: 100%;
margin: 10px 0 10px -15px;
padding: 5px;
background-color: lightgray;
border-bottom: 1px solid black;
border-top: 1px solid rgb(186, 186, 186);
box-shadow: 0 2px 2px 1px #888;
}
/* for 480px or less */
@media screen and (max-width: 480px) {
h1 {
font-size: 24px;
}
h2 {
font-size: 18px;
}
}
pre {
white-space: pre-wrap;
/* css-3 */
white-space: -moz-pre-wrap;
/* Mozilla, since 1999 */
white-space: -pre-wrap;
/* Opera 4-6 */
white-space: -o-pre-wrap;
/* Opera 7 */
word-wrap: break-word;
/* Internet Explorer 5.5+ */
}
#about {
float: right;
}
#about img {
max-width: 32px;
}
#main,
#loading-error {
display: none;
margin: 10px;
}
#aaguids {
border-collapse: collapse;
}
#aaguids td,
#aaguids th {
border: black 1px solid;
padding: 10px;
vertical-align: top;
}
a {
color: cadetblue;
text-decoration: none;
}
#aaguids td.icon {
text-align: center;
}
#aaguids img {
max-width: 100px;
max-width: 50;
}
#aaguids td.dark,
#aaguids th.dark {
background-color: #555;
color: white;
}
#aaguids th {
background-color: #DDD;
}
#aaguids th:last-of-type {
background-color: #333;
}
#aaguids th:nth-of-type(1) {
min-width: 19em;
}
#aaguids th:nth-of-type(2) {
min-width: 20em;
}
#filter {
width: 80%;
}
footer {
color: grey;
font-size: 80%;
text-align: left;
margin-top: 10px;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

View File

@ -0,0 +1 @@
<svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#24292f"/></svg>

After

Width:  |  Height:  |  Size: 963 B

View File

@ -0,0 +1,37 @@
<head>
<meta charset='utf-8'>
<meta http-equiv="x-ua-compatible" content="IE=edge">
<link rel="shortcut icon" href="img/favicon.ico"/>
<meta name="viewport" content="width=device-width,height=device-height, user-scalable=no" />
<title>Passkey AAGUIDs Explorer</title>
<meta name="description" content="View the Passkey AAGUIDs community repository">
<link rel="stylesheet" href="css/aaguids-explorer.css" />
</head>
<body>
<h1>
Passkey AAGUIDs Explorer
<span id="about">
<a href="https://github.com/passkeydeveloper/passkey-authenticator-aaguids">
<span class="icon"><img src="img/github-mark.svg"/></span>
</a>
</span>
</h1>
<div id="loading">Loading...</div>
<div id="loading-error" class="error">
<h2>Error</h2>
Failed to load the AAGUIDs data :(
</div>
<div id="main">
<div><a id="switch-json"></a></div>
<table id="aaguids">
</table>
</div>
<script src="js/aaguids-explorer.js"></script>
<footer>
This is a community-driven list of known passkey provider AAGUIDs to assist with naming passkeys in end user passkey management interfaces (e.g. account settings). It is not intended to be used for any other purpose and could go away at any time.<br>
This does not replace <a href="https://fidoalliance.org/metadata/">FIDO's Metadata Service (MDS)</a>, which should continue to be used for all authoritative security details about FIDO authenticators. Some AAGUIDs in this list may not appear in FIDO MDS.
</footer>
</body>

View File

@ -0,0 +1,97 @@
'use strict';
function imageTag(src) {
return src ? "<img src='" + src + "'/>" : "";
}
function $(query) {
return document.querySelector(query);
}
function $toggle(query, show) {
return $(query).style.display = (show ? 'block' : 'none');
}
function $$(query) {
return document.querySelectorAll(query);
}
function appendRow(table, html) {
const row = document.createElement("tr");
row.innerHTML = html;
table.appendChild(row);
}
document.onreadystatechange = async () => {
if (document.readyState == "complete") {
try {
let file, switchJsonUrl, switchJsonText;
if (location.search === "?combined") {
file = "combined_aaguid.json";
switchJsonUrl = ".";
switchJsonText = "Exclude MDS authenticators"
} else {
file = "aaguid.json";
switchJsonUrl = "./?combined";
switchJsonText = "Include MDS authenticators"
}
$("#switch-json").setAttribute("href", switchJsonUrl);
$("#switch-json").innerText = switchJsonText;
const response = await fetch("../" + file);
const json = await response.json();
$toggle("#loading", false);
$toggle("#main", true);
const table = $("#aaguids");
appendRow(table, `
<tr>
<th>AAGUID <br/></th>
<th>Name <br/>
<input id="filter" type="text" placeholder="Filter by name..."/>
<a id="clear-filter" href="#" title="clear">X</a>
</th>
<th>Icon light</th>
<th class="dark">Icon dark</th>
</tr>
`);
for (const aaguid in json) {
if (Object.hasOwnProperty.call(json, aaguid)) {
appendRow(table, `
<tr>
<td>${aaguid}</td>
<td class="name">${json[aaguid].name}</td>
<td class="icon">${imageTag(json[aaguid].icon_light)}</td>
<td class="icon dark">${imageTag(json[aaguid].icon_dark)}</td>
</tr>
`);
}
}
function applyFilter(filter) {
$$("#aaguids tr").forEach( (row) => {
const name = row.querySelector("td.name")?.innerText?.toLowerCase();
const show = !filter || (!name || name.indexOf(filter.toLowerCase()) >= 0);
row.style.display = (show ? 'table-row' : 'none');
});
}
$("#filter").addEventListener("keyup", () => {
applyFilter($("#filter").value);
});
$("#clear-filter").addEventListener("click", (event) => {
$("#filter").value = "";
applyFilter();
event.preventDefault();
});
} catch (err) {
$toggle("#loading-error", true);
console.error(err);
}
}
}