biscuit-auth · Akanoa · Sep 9, 2022 · Sep 9, 2022 · Sep 9, 2022 · Sep 10, 2022
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 node_modules
 dist
+.idea
diff --git a/demo/index.html b/demo/index.html
@@ -16,6 +16,8 @@ <h1>demo biscuit</h1>
   <li><a href="token.html">Token printer</a></li>
   <li><a href="authorizer.html">Authorizer editor</a></li>
   <li><a href="playground.html">Datalog playground</a></li>
+  <li><a href="playground-alternate.html">Datalog playground from base64</a></li>
+  <li><a href="playground-control.html">Datalog playground Configurator</a></li>
   <li><a href="generator.html">Token generator</a></li>
 </ul>
 </body>

diff --git a/demo/playground-alternate.html b/demo/playground-alternate.html
@@ -0,0 +1,59 @@
+<!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>Biscuit Playground</title>
+  <link rel="stylesheet" href="/demo/index.css">
+  <script type="module" src="/src/index.ts"></script>
+</head>
+<body>
+<h1>Biscuit Playground</h1>
+
+<div id="app"></div>
+
+<script type="application/javascript">
+  let appElement = document.querySelector("#app");
+
+  const params = new URLSearchParams(window.location.search);
+
+  import("/src/index.ts").then(m => {
+
+      let configuration = new m.Configuration();
+      configuration.fromUrl(params);
+
+      const hash = params.has("hash") ? params.get("hash") : 'eyJjb2RlIjoiIiwiYmxvY2tzIjpbeyJjb2RlIjoiIiwiZXh0ZXJuYWxLZXkiOm51bGx9XX0%3D'
+
+      appElement.innerHTML = `<bc-playground id="playground"
+      configuration=${configuration}
+      fromHash="${hash}"></bc-playground>`
+
+      setTimeout(() => {
+          const playground = document.querySelector("#playground");
+          if (playground !== null) {
+              playground.addEventListener("export", (e) => {
+                  let data = e.detail.hash;
+                  let urlParams = new URLSearchParams();
+                  configuration.exportUrl(urlParams);
+
+                  urlParams.set("hash", data)
+
+                  const old_location = window.location.toString();
+                  const new_url = new URL(old_location)
+                  new_url.search = urlParams.toString()
+
+                  window.history.pushState("", "", new_url.toString())
+              })
+          }
+      })
+
+  }).catch(e => {
+      console.log(e)
+  })
+
+
+</script>
+
+</body>
+</html>
diff --git a/demo/playground-control.html b/demo/playground-control.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Biscuit Playgound Configurator</title>
+  <link rel="stylesheet" href="/demo/index.css">
+  <script type="module" src="/src/index.ts"></script>
+</head>
+<body>
+
+<div id="app"></div>
+
+<script type="application/javascript">
+    let appElement = document.querySelector("#app");
+
+    const search = window.location.search;
+
+    appElement.innerHTML = `<bc-playground-controls id="playground"
+      query="${search}"></bc-playground-controls>`
+
+    setTimeout(() => {
+        const playground = document.querySelector("#playground");
+        if (playground !== null) {
+            playground.addEventListener("export", (e) => {
+                let data = e.detail.url;
+
+                const old_location = window.location.toString();
+                const new_url = new URL(old_location)
+                new_url.search = data
+
+                let demo_url = new URL(new_url.toString())
+                demo_url.pathname = "/demo/playground-alternate.html"
+
+                navigator.clipboard.writeText(demo_url.toString())
+
+                window.history.pushState("", "", new_url.toString())
+            })
+        }
+    })
+</script>
+
+</body>
+</html>
diff --git a/src/bc-authorizer-content.js b/src/bc-authorizer-content.js
@@ -18,7 +18,7 @@ export class BcAuthorizerContent extends LitElement {
   render() {
     const deduped = [...new Set(this.content)];
     const sortedFacts = [...deduped].sort((f1, f2) => {
-      if (f1.name == f2.name) {
+      if (f1.name === f2.name) {
         return f1.terms > f2.terms ? 1 : -1;
       } else {
         return f1.name > f2.name ? 1 : -1;
@@ -29,13 +29,13 @@ export class BcAuthorizerContent extends LitElement {
     var facts = "";
     var current_name;
     for (let fact of sortedFacts) {
-      if (facts_map[fact.name] == undefined) {
+      if (facts_map[fact.name] === undefined) {
         facts_map[fact.name] = [];
       }
 
       let alreadyThere = false;
       for (let terms of facts_map[fact.name]) {
-        console.log(terms.join(), fact.terms.join());
+        console.debug(terms.join(), fact.terms.join());
         if (terms.join() === fact.terms.join()) {
           alreadyThere = true;
           break;
@@ -46,12 +46,11 @@ export class BcAuthorizerContent extends LitElement {
 
       facts_map[fact.name].push(fact.terms);
 
-      if (current_name == undefined) {
+      if (current_name === undefined) {
         current_name = fact.name;
       }
 
-      if (fact.name != current_name) {
-        facts += "\n";
+      if (fact.name !== current_name) {
         current_name = fact.name;
       }
 

diff --git a/src/bc-datalog-editor.js b/src/bc-datalog-editor.js
@@ -205,8 +205,8 @@ export class BcDatalogEditor extends LitElement {
   }
 
   updated(changedProperties) {
-    console.log("updated");
-    console.log(changedProperties);
+    console.debug("updated");
+    console.debug(changedProperties);
     super.updated(changedProperties);
     if (changedProperties.has("datalog")) {
       if (this.datalog != this._cm.state.doc.toString()) {

diff --git a/src/bc-export.ts b/src/bc-export.ts
@@ -0,0 +1,59 @@
+import { html, LitElement, css } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { dispatchCustomEvent } from "./lib/events";
+
+@customElement("bc-export")
+class BcExport extends LitElement {
+  @property() blocks : Array<{ code: string; externalKey: string | null }> = [];
+  @property() code = ""
+
+  static styles = css`
+    .container {
+      margin-top: 10px;
+      margin-bottom: 10px;
+      display: flex;
+      gap: 10px;
+    }
+    .container .confirmation {
+      display: none;
+      line-height: 40px;
+    }
+
+    .container .export {
+      padding: 5px;
+      align-self: center;
+      font-weight: bold;
+      font-size: 1.05em;
+    }
+  `;
+
+  constructor() {
+    super();
+  }
+
+  performExport(preventClipboard: boolean = false) {
+    const data = {code:this.code, blocks:this.blocks}
+    const hash = encodeURIComponent(btoa(JSON.stringify(data)))
+    dispatchCustomEvent(this, "export", {hash}, {bubble: true});
+    if (preventClipboard)
+        return
+    navigator.clipboard.writeText(hash).then(() => {
+      if (this.shadowRoot !== null) {
+        const confirmationElement = this.shadowRoot.querySelector(".confirmation") as HTMLLIElement;
+        confirmationElement.style.display = "block";
+        setTimeout(() => {
+          confirmationElement.style.display = "none";
+        }, 2000)
+      }
+    })
+  }
+
+  protected render(): unknown {
+    return html`
+      <div class="container">
+        <button class="export" @click="${() => this.performExport()}" type="button">Export Playground as hash</button>
+        <div class="confirmation">Hash copied to clipboard and URL updated!</div>
+      </div>
+    `
+  }
+}
diff --git a/src/bc-key-details.ts b/src/bc-key-details.ts
@@ -0,0 +1,143 @@
+import { html, LitElement, css } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import {
+  get_public_key
+} from "@biscuit-auth/biscuit-wasm-support";
+import { initialize } from "./wasm";
+import { dispatchCustomEvent } from "./lib/events";
+
+@customElement("bc-key-details")
+class ThirdPartyBlockDetails extends LitElement {
+  @property() privateKey = "";
+  @property() allowsCustomKey = false;
+  @property() displayPublicKey = false;
+  @property() withoutAlgorithm = false;
+  @property() allowsRegenerate = false;
+  @state() _privateKey = "";
+  @state() _publicKey = "";
+  @state() private started = false;
+
+  static styles = css`
+    .container {
+      display: flex;
+      gap: 10px;
+    }
+    .confirmation {
+      display: none;
+    }
+
+    .button {
+      padding: 5px;
+      box-sizing: border-box;
+      margin-top: -5px;
+      font-weight: bold;
+    }
+
+    .key_container {
+      display: flex;
+      flex-direction: row;
+    }
+
+    .key_container .symbol {
+      line-height: 20px;
+    }
+
+    .key_container .key {
+      line-height: 0;
+      margin-left: 2px;
+      user-select: all;
+      padding: 10px;
+      box-sizing: border-box;
+    }
+
+    .key_container .key[contenteditable] {
+      outline: 0 solid transparent;
+    }
+  `
+
+  constructor() {
+    super();
+  }
+
+  firstUpdated() {
+    initialize().then(() => {
+      this._publicKey = get_public_key(this._privateKey)
+    });
+  }
+
+  onKeyChange(e: InputEvent) {
+    if (e.target !== null ) {
+        const data = (e.target as HTMLInputElement).innerText;
+        this._privateKey = data;
+        this._publicKey = get_public_key(this._privateKey)
+        dispatchCustomEvent(this, "update", {data})
+    }
+  }
+
+  attributeChangedCallback(name: string, _old: string | null, value: string | null) {
+
+    if (name === "privatekey" && value !== null && value.length) {
+      this._privateKey = value;
+    }
+
+    if (name === "allowscustomkey") {
+      this.allowsCustomKey = value === "true";
+    }
+
+    if (name === "withoutalgorithm") {
+      this.withoutAlgorithm = value === "true"
+    }
+
+    if (name === "allowsregenerate") {
+      this.allowsRegenerate = value === "true"
+    }
+
+    if (name === "displaypublickey") {
+      this.displayPublicKey = value === "true"
+    }
+  }
+
+  onCopyButton() {
+    const data = this.withoutAlgorithm ? `${this._publicKey}` : `ed25519/${this._publicKey}`;
+    navigator.clipboard.writeText(data).then(r => {
+      console.debug("copied")
+      if (this.shadowRoot !== null) {
+        const confirmationElement = this.shadowRoot.querySelector(".confirmation") as HTMLLIElement;
+        if (confirmationElement !== null) {
+          confirmationElement.style.display = "block"
+          setTimeout(() => {
+              confirmationElement.style.display = "none"
+            }, 2000)
+        }
+      }
+    })
+  }
+
+  onRegeneratePrivateKey() {
+    dispatchCustomEvent(this, "regenerate")
+  }
+
+  protected render() {
+
+      const customExternalContent = html`<div class="key_container">
+        <div class="symbol">🔑</div>
+        <div contenteditable="true" class="key"
+             @blur="${(e: InputEvent) => this.onKeyChange(e)}"
+        >${this._privateKey}</div>
+      </div>`
+
+    const customExternalKey = this.allowsCustomKey ? customExternalContent : '';
+
+    const regenerate = this.allowsRegenerate ? html`<button class="button" @click="${this.onRegeneratePrivateKey}">Regenerate Private Key</button>` : ``;
+    const publicKey = this.displayPublicKey ? html`<button class="button" @click="${this.onCopyButton}" type="button">Copy Public Key</button>
+    <div class="confirmation">Copied! </div>` : ``;
+
+    return html`
+      <div class="container">
+        ${regenerate}
+        ${publicKey}
+        ${customExternalKey}
+      </div>
+    `;
+  }
+}