Merge pull request #3 from mvhenten/demo

demo
mvhenten · May 14, 2024 · 24b0d10 · 24b0d10
2 parents d2fae8e + ee4d5ca
commit 24b0d10
Show file tree

Hide file tree

Showing 12 changed files with 1,895 additions and 149 deletions.
diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
@@ -5,9 +5,9 @@ name: Node.js CI
 
 on:
   push:
-    branches: [ "master" ]
+    branches: [ "main" ]
   pull_request:
-    branches: [ "master" ]
+    branches: [ "main" ]
 
 jobs:
   build:

diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml
@@ -31,13 +31,17 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+      - name: Use Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 22
+      - run: npm ci
       - name: Setup Pages
         uses: actions/configure-pages@v5
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          # Upload entire repository
-          path: '.'
+          path: 'demo'
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4
diff --git a/demo/demo.mjs b/demo/demo.mjs
@@ -0,0 +1,65 @@
+import { entropy } from "./dist/esm/index.js"
+
+const inputField = document.querySelector("#input");
+const strengthIndicator = document.querySelector("#strength-indicator");
+const strengthText = document.querySelector("#strength-text");
+
+const colors = [
+    [255, 140, 0],  //orange
+    [255, 0, 0],    //red
+    [191, 64, 191], //purple
+    [30, 144, 255], //blue
+    [124, 252, 0]     //green
+];
+
+
+const interpolate = (from, to, step, steps) => {
+    let color = [...from];
+
+  for (let i = 0; i < 3; i++) {
+  	const a = from[i];
+    const b = to[i];
+  	color[i] = Math.round(a +  ((b - a) / steps * step));
+  }
+
+  return color;
+}
+
+
+const color = (value, max, colors) => {
+    value = Math.max(0, Math.min(max, value));
+
+    const ranges = colors.length - 1;
+    const range = max / ranges;
+    const from = Math.floor(value / range)
+    const to = Math.min(ranges, from + 1)
+
+    return interpolate(colors[from], colors[to], value % range, range);
+}
+
+const strengthInfo = (value) => {
+    if (value == 0) return "Start typing to calculate entropy";
+    const snark = [
+        [25, "extremely weak."],
+        [47, "'swordfish'...?"],
+        [60, "guessed 60 (nano) seconds."],
+        [80, "considered strong in 1999."],
+        [85, "average?"],
+        [90, "better..."],
+        [100, "even better..."],
+        [110, "getting close..."],
+        [120, "above 120 bits is likely a strong password."],
+        [130, "overachiever."]
+    ]
+
+    const [, comment] = snark.find(([n]) => value < n) || snark[snark.length-1]
+
+    return `String entropy: ${value}, ${comment}`
+}
+
+inputField.addEventListener("keyup", (evt) => {
+    const bits = entropy(inputField.value);
+    strengthIndicator.style.width = `${Math.min(100, bits/128*100)}%`;
+    strengthIndicator.style.backgroundColor = `rgb(${color(bits, 128, colors).join(",")})`;
+    strengthText.innerText = strengthInfo(bits);
+});
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>String entropy demo</title>
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔐</text></svg>">
+    <style>
+      body, html { 
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        font: 14px/22px sans-serif;
+        color: #444;
+        background-color: #f3f3f3;
+      }
+      #container {
+        height: 60%;
+        overflow:none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      form {
+        width: 400px;
+        background-color: #fefefe;
+        padding: 2em 3em;
+        box-shadow: 5px 3px 3px #7c7c7c82;
+        border-radius: 5px;
+      }
+
+      label {
+        line-height: 32px;
+        font-weight: 600;
+      }
+
+      input {
+        display: block;
+        width: 100%;
+        border: 1px solid #ccc;
+        box-sizing: border-box;
+        line-height: inherit;
+        font: inherit;
+        padding: 0 3px;
+        border-radius: 4px;
+      }
+
+      input:focus-visible {
+        border: 1px solid #999;
+        outline: none;
+      }
+
+      fieldset {
+        border: 1px solid #ccc;
+      }
+
+      #strength-indicator {
+        display: inline-block;
+        height: 5px;
+        border-radius: 3px;
+    }
+  </style>
+  </head>
+  <body>
+    <main id="container">
+        <form>
+          <div>
+            <label>Password-strength o'meter</label>
+            <input id="input" type="password" placeholder="Type a strong password here"/>
+
+          </div>
+              <div>
+                <div id="strength-indicator"></div>
+                <div><small id="strength-text">Input a password to calculate entropy</small></div>
+            </div>
+        </form>
+    </main>
+    <script type="module" src="./demo.mjs"></script>
+  </body>
+</html>
diff --git a/index.js b/index.js