From 4093a8ff9c374716de475baeb75e908e7cc9a747 Mon Sep 17 00:00:00 2001
From: Clement Delafargue <clement.delafargue.ext@outscale.com>
Date: Mon, 30 Oct 2023 15:42:14 +0100
Subject: [PATCH] snapshot printer

Features:

- printing snapshot contents and execution time
- running autorization
- adding extra authorization code
- querying snapshot

Not implemented yet:

- inline reporting of failed checks & policies
- reporting of syntax errors for extra authorizer code
- reporting of syntax errors for queries
---
 demo/index.html            |   1 +
 demo/snapshot-printer.html |  19 +++
 src/bc-snapshot-printer.ts | 305 +++++++++++++++++++++++++++++++++++++
 src/index.ts               |   1 +
 src/lib/adapters.ts        |  12 ++
 5 files changed, 338 insertions(+)
 create mode 100644 demo/snapshot-printer.html
 create mode 100644 src/bc-snapshot-printer.ts
diff --git a/demo/index.html b/demo/index.html
index 90baf14..1359e2a 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -14,6 +14,7 @@ <h1>demo biscuit</h1>
 <h2>ready-to-use components</h2>
 <ul>
   <li><a href="token-printer.html">Token printer</a></li>
+  <li><a href="snapshot-printer.html">Snapshot printer</a></li>
   <li><a href="playground.html">Datalog playground</a></li>
   <li><a href="token-generator.html">Token generator</a></li>
   <li><a href="editor.html">Datalog editor</a></li>
diff --git a/demo/snapshot-printer.html b/demo/snapshot-printer.html
new file mode 100644
index 0000000..63b6f33
--- /dev/null
+++ b/demo/snapshot-printer.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>demo biscuit</title>
+  <link rel="stylesheet" href="/demo/index.css">
+  <script type="module" src="/src/index.ts"></script>
+</head>
+<body>
+<h1>demo biscuit</h1>
+
+<bc-snapshot-printer showAuthorizer="true" showQuery="true">
+        </bc-snapshot-printer>
+
+
+</body>
+</html>
diff --git a/src/bc-snapshot-printer.ts b/src/bc-snapshot-printer.ts
new file mode 100644
index 0000000..01d9d3c
--- /dev/null
+++ b/src/bc-snapshot-printer.ts
@@ -0,0 +1,305 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import "./bc-datalog-editor";
+import { initialize } from "./wasm.js";
+import { inspect_snapshot } from "@biscuit-auth/biscuit-wasm-support";
+import {
+  AuthorizerError,
+  AuthorizerResult,
+  Fact,
+  LogicError,
+  Result,
+  SnapshotInspectionResult,
+  trimLines,
+} from "./lib/adapters";
+
+/**
+ * TODO DOCS
+ */
+@customElement("bc-snapshot-printer")
+export class BcSnapshotPrinter extends LitElement {
+  @property()
+  snapshot = "";
+
+  @property()
+  readonly = false;
+
+  @property()
+  showAuthorizer = false;
+
+  @property()
+  showQuery = false;
+
+  @property()
+  authorizer = "";
+
+  @property()
+  query = "";
+
+  @state()
+  _started = false;
+
+  constructor() {
+    super();
+    const authorizerChild = this.querySelector(".authorizer");
+    if (authorizerChild !== null) {
+      this.authorizer = trimLines(authorizerChild.textContent ?? "");
+    }
+  }
+
+  firstUpdated() {
+    initialize().then(() => (this._started = true));
+  }
+
+  _onUpdatedSnapshot(e: InputEvent) {
+    if (this.readonly) return;
+    this.snapshot = (e.target as HTMLInputElement).value.trim();
+  }
+
+  _onUpdatedQuery(e: { detail: { code: string } }) {
+    if (!this.showQuery) return;
+    this.query = e.detail.code;
+  }
+
+  _onUpdatedAuthorizer(e: { detail: { code: string } }) {
+    if (!this.showAuthorizer) return;
+    this.authorizer = e.detail.code;
+  }
+
+  renderSnapshotInput() {
+    if (this.readonly) {
+      return html`
+        <div class="code">
+          <p>Encoded snapshot</p>
+          <code>${this.snapshot}</code>
+        </div>
+      `;
+    }
+    return html`
+      <div class="code">
+        <p>Encoded snapshot</p>
+        <textarea @input=${this._onUpdatedSnapshot}>${this.snapshot}</textarea>
+      </div>
+    `;
+  }
+
+  renderNotStarted() {
+    return html`
+      <div class="snapshot">
+        ${this.renderSnapshotInput()}
+        <div class="content">loading biscuit snapshot</div>
+      </div>
+    `;
+  }
+
+  renderEmptyToken() {
+    return html`
+      ${this.renderSnapshotInput()}
+      <div class="content">Please enter a base64-encoded snapshot</div>
+    `;
+  }
+
+  renderResult(result: SnapshotInspectionResult) {
+    if (this.snapshot === "") {
+      return html`
+        ${this.renderSnapshotInput()}
+        <div class="content">Please enter a base64-encoded snapshot</div>
+      `;
+    }
+
+    if (result.snapshot.Err) {
+      return html`
+        ${this.renderSnapshotInput()}
+        <div class="content">${result.snapshot.Err}</div>
+      `;
+    }
+
+    const {
+      code,
+      elapsed_micros,
+      iterations,
+      authorization_result,
+      query_result,
+    } = result.snapshot.Ok!;
+
+    const auth_res: Result<AuthorizerResult, AuthorizerError> = {
+      Ok: {
+        authorizer_editor: { markers: [] },
+        authorizer_result: authorization_result,
+        authorizer_world: [],
+        token_blocks: [],
+      },
+    };
+
+    return html`
+      ${this.renderSnapshotInput()}
+      <div class="content">
+        <p>Elapsed time: ${elapsed_micros.toString()}μs</p>
+        <p>Iterations: ${iterations}</p>
+        <p>Snapshot contents</p>
+        <bc-datalog-editor code=${code} .marks=${[]} readonly="true">
+        </bc-datalog-editor>
+        ${this.renderAuthorizerInput()}
+        <bc-authorizer-result .content=${auth_res}></bc-authorizer-result>
+        ${this.renderQueryInput()}
+        ${query_result && this.renderQueryResult(query_result)}
+      </div>
+    `;
+  }
+
+  renderAuthorizerInput() {
+    if (!this.showAuthorizer) return;
+
+    return html`
+      <p>Extra authorizer code</p>
+      <bc-datalog-editor
+        @bc-datalog-editor:update=${(e: { detail: { code: string } }) =>
+          this._onUpdatedAuthorizer(e)}
+      >
+      </bc-datalog-editor>
+    `;
+  }
+
+  renderQueryInput() {
+    if (!this.showQuery) return;
+
+    return html`
+      <p>Query snapshot</p>
+      <bc-datalog-editor
+        @bc-datalog-editor:update=${(e: { detail: { code: string } }) =>
+          this._onUpdatedQuery(e)}
+      >
+      </bc-datalog-editor>
+    `;
+  }
+
+  renderQueryResult(result: Result<Array<Fact>, LogicError>) {
+    if (result.Err) {
+      console.error(result.Err);
+      return html`<p>error</p>`;
+    } else {
+      return html`<bc-authorizer-content .content=${result.Ok!}>
+      </bc-authorizer-content>`;
+    }
+  }
+
+  render() {
+    if (!this._started) return this.renderNotStarted();
+    const inspectQuery = {
+      data: this.snapshot,
+      extra_authorizer: this.authorizer != "" ? this.authorizer : undefined,
+      query: this.query != "" ? this.query : undefined,
+    };
+    const parseResult = inspect_snapshot(inspectQuery);
+
+    return html` <div class="row">${this.renderResult(parseResult)}</div> `;
+  }
+
+  static styles = css`
+    .row {
+      display: flex;
+      flex-direction: column;
+      text-align: left;
+    }
+
+    .public-key-input {
+      display: flex;
+    }
+
+    .public-key-input label {
+      height: 1.5em;
+    }
+
+    #public-key {
+      margin-left: 1em;
+      flex-grow: 1;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .row {
+        color: #dee2e6;
+        background: #131314;
+      }
+      textarea {
+        color: #dee2e6;
+        background: #131314;
+      }
+    }
+
+    @media (prefers-color-scheme: light) {
+      .row {
+        color: #1d2d35;
+        background: #fff;
+      }
+    }
+
+    @media (min-width: 576px) {
+      .row {
+        display: flex;
+        flex-flow: row wrap;
+        flex-direction: row;
+      }
+
+      .code {
+        order: 1;
+        width: 49%;
+      }
+
+      .content {
+        order: 2;
+        width: 49%;
+      }
+    }
+
+    code {
+      overflow-wrap: anywhere;
+      padding: 0.2em;
+      padding-top: 1em;
+    }
+
+    .code {
+      border: 1px rgba(128, 128, 128, 0.4) solid;
+      display: flex;
+      flex-direction: column;
+    }
+
+    textarea {
+      flex-grow: 1;
+      border: 0;
+    }
+
+    .content {
+      border-top: 1px rgba(128, 128, 128, 0.4) solid;
+      border-right: 1px rgba(128, 128, 128, 0.4) solid;
+    }
+
+    p {
+      border-bottom: 1px rgba(128, 128, 128, 0.4) solid;
+      margin-block-start: 0px;
+      margin-block-end: 0px;
+      padding: 0.2em;
+      font-size: 0.8em;
+    }
+
+    .revocation-id,
+    .external-key {
+      overflow: hidden;
+      diplay: inline-block;
+      text-overflow: ellipsis;
+      max-width: 100;
+    }
+
+    .revocation-id,
+    .external-key > .id {
+      user-select: all;
+    }
+
+    .content code {
+      user-select: all;
+    }
+
+    bc-datalog-editor {
+      border-bottom: 1px rgba(128, 128, 128, 0.4) solid;
+    }
+  `;
+}
diff --git a/src/index.ts b/src/index.ts
index ea72748..ffd5dbb 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -10,5 +10,6 @@ import "./bc-authorizer-result";
 import "./bc-datalog-playground";
 import "./bc-token-printer";
 import "./bc-token-generator";
+import "./bc-snapshot-printer";
 export { execute } from "@biscuit-auth/biscuit-wasm-support";
 export { initialize } from "./wasm.js";
diff --git a/src/lib/adapters.ts b/src/lib/adapters.ts
index 855a962..a27c42a 100644
--- a/src/lib/adapters.ts
+++ b/src/lib/adapters.ts
@@ -141,3 +141,15 @@ export function trimLines(str: string) {
     .map((line: string) => line.trim())
     .join("\n");
 }
+
+export type SnapshotInspectionResult = {
+  snapshot: Result<SnapshotData, LogicError>;
+};
+
+export type SnapshotData = {
+  code: string;
+  iterations: number;
+  elapsed_micros: bigint;
+  authorization_result: Result<number, { FailedLogic?: LogicError }>;
+  query_result?: Result<Array<Fact>, LogicError>;
+};
