List the tokens from the WebUI

virtweb_frontend/src/widgets/BaseAuthenticatedPage.tsx

@@ -1,4 +1,5 @@
 import {
+  mdiApi,
   mdiBoxShadow,
   mdiDisc,
   mdiHome,
@@ -72,6 +73,11 @@ export function BaseAuthenticatedPage(): React.ReactElement {
             uri="/iso"
             icon={<Icon path={mdiDisc} size={1} />}
           />
+          <NavLink
+            label="API tokens"
+            uri="/tokens"
+            icon={<Icon path={mdiApi} size={1} />}
+          />
           <NavLink
             label="Sysinfo"
             uri="/sysinfo"

virtweb_frontend/src/widgets/TimeWidget.tsx

@@ -0,0 +1,64 @@
+import { Tooltip } from "@mui/material";
+import date from "date-and-time";
+
+export function formatDate(time: number): string {
+  const t = new Date();
+  t.setTime(1000 * time);
+  return date.format(t, "DD/MM/YYYY HH:mm:ss");
+}
+
+export function timeDiff(a: number, b: number): string {
+  let diff = b - a;
+
+  if (diff === 0) return "now";
+  if (diff === 1) return "1 second";
+
+  if (diff < 60) {
+    return `${diff} seconds`;
+  }
+
+  diff = Math.floor(diff / 60);
+
+  if (diff === 1) return "1 minute";
+  if (diff < 24) {
+    return `${diff} minutes`;
+  }
+
+  diff = Math.floor(diff / 60);
+
+  if (diff === 1) return "1 hour";
+  if (diff < 24) {
+    return `${diff} hours`;
+  }
+
+  const diffDays = Math.floor(diff / 24);
+
+  if (diffDays === 1) return "1 day";
+  if (diffDays < 31) {
+    return `${diffDays} days`;
+  }
+
+  diff = Math.floor(diffDays / 31);
+
+  if (diff < 12) {
+    return `${diff} month`;
+  }
+
+  const diffYears = Math.floor(diffDays / 365);
+
+  if (diffYears === 1) return "1 year";
+  return `${diffYears} years`;
+}
+
+export function timeDiffFromNow(time: number): string {
+  return timeDiff(time, Math.floor(new Date().getTime() / 1000));
+}
+
+export function TimeWidget(p: { time?: number }): React.ReactElement {
+  if (!p.time) return <></>;
+  return (
+    <Tooltip title={formatDate(p.time)}>
+      <span>{timeDiffFromNow(p.time)}</span>
+    </Tooltip>
+  );
+}