Oleksandr Kozachuk
03c5dadccb
Run the real hel core in the browser via WebAssembly, replacing the plain-JS ooke.github.io/sk reimplementation so the web and the CLI share one generator. - hel core: new storage module (native fs / wasm localStorage) backs init/source/dump/correct; the pipe and pb branches are gated out of wasm; the wasm editor is completed (EditorRef) and its password prompt no longer blocks the single JS thread (synchronous hel_get_password instead of a thread::sleep poll). - helwasm: hel_load_script for bulk import, a panic hook in hel_init, dropped the ok_add / web-sys leftovers; build.sh runs wasm-bindgen into a committed pkg/ so GitHub Pages can serve the static dir with no CI. - UI: rewritten index.html + style.css in the kaizenkodo.org style — responsive, masked-but-copyable passwords with click-to-reveal, a quick-generate card plus a full command console, localStorage persistence, and paste import/export.
258 lines
9.5 KiB
HTML
258 lines
9.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
|
<meta name="theme-color" content="#1b4161" />
|
|
<title>LesS/KEY — password generator</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<link rel="stylesheet" href="./style.css" />
|
|
</head>
|
|
<body>
|
|
<header class="site">
|
|
<div class="wrap nav">
|
|
<a class="brand" href="./">
|
|
<span class="enso" aria-hidden="true"></span>
|
|
<span class="wordmark">LesS/KEY</span>
|
|
</a>
|
|
<span class="nav-spacer"></span>
|
|
<button class="btn ghost" id="importBtn">Import</button>
|
|
<button class="btn ghost" id="exportBtn">Export</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="wrap">
|
|
<!-- Quick generate -->
|
|
<section class="card">
|
|
<div class="eyebrow">Generate</div>
|
|
<h2>Quick password</h2>
|
|
<p class="hint">
|
|
Deterministic — the same name + master always regenerate the same
|
|
password. Nothing secret is stored; this entry is not added to your
|
|
catalog.
|
|
</p>
|
|
<div class="grid2">
|
|
<div class="field">
|
|
<label for="qname">Name (+ optional rules)</label>
|
|
<input type="text" id="qname" placeholder="exa91 or exa91 20R 99 2020-01-01" autocomplete="off" spellcheck="false" autofocus />
|
|
</div>
|
|
<div class="field">
|
|
<label for="master">Master password</label>
|
|
<input type="password" id="master" placeholder="your master phrase" autocomplete="off" />
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<button class="btn" id="show">Show</button>
|
|
<button class="btn ghost" id="copy">Copy</button>
|
|
</div>
|
|
<div class="secret-line">
|
|
<span class="tag">result</span>
|
|
<span id="qsecret"><span class="secret"></span></span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Console -->
|
|
<section class="card">
|
|
<div class="eyebrow">Console</div>
|
|
<h2>All commands</h2>
|
|
<p class="hint">
|
|
The full hel command line — <code>ls</code>, <code>add</code>,
|
|
<code>enc</code>, <code>gen</code>, <code>comment</code>,
|
|
<code>correct</code>, <code>help</code>, … Your catalog persists in this
|
|
browser (localStorage). <code>enc</code>/<code>gen</code> output is
|
|
masked — click to reveal.
|
|
</p>
|
|
<div class="console-out" id="cout"></div>
|
|
<div class="console-in">
|
|
<span class="prompt">></span>
|
|
<input type="text" id="cin" placeholder="type a command and press Enter" autocomplete="off" spellcheck="false" />
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="foot wrap">
|
|
Runs the real hel core compiled to WebAssembly — same generator as the CLI.
|
|
</footer>
|
|
|
|
<div class="toast" id="toast"></div>
|
|
|
|
<!-- Import modal -->
|
|
<div class="modal-bg" id="importModal">
|
|
<div class="modal">
|
|
<h3>Import catalog</h3>
|
|
<p class="hint">Paste your catalog (e.g. the text of the Notion page). Existing entries with the same name are replaced.</p>
|
|
<textarea id="importText" placeholder="add ..."></textarea>
|
|
<div class="row">
|
|
<button class="btn" id="importDo">Import</button>
|
|
<button class="btn ghost" id="importCancel">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Export modal -->
|
|
<div class="modal-bg" id="exportModal">
|
|
<div class="modal">
|
|
<h3>Export catalog</h3>
|
|
<p class="hint">Copy this and paste it back into your Notion page.</p>
|
|
<textarea id="exportText" readonly></textarea>
|
|
<div class="row">
|
|
<button class="btn" id="exportCopy">Copy</button>
|
|
<button class="btn ghost" id="exportClose">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module">
|
|
import init, { hel_init, hel_command, hel_load_script } from "./pkg/helwasm.js";
|
|
|
|
const $ = (s) => document.querySelector(s);
|
|
const masterEl = () => document.getElementById("master");
|
|
const CATALOG_KEY = "hel_catalog";
|
|
|
|
// ---- host imports (wasm calls these by bare name → must be globals) ----
|
|
window.hel_get_password = () => (masterEl() ? masterEl().value : "") || "";
|
|
window.hel_rnd_range = (s, e) => {
|
|
if (e <= s) return s;
|
|
const r = crypto.getRandomValues(new Uint32Array(1))[0] / 4294967296;
|
|
return s + Math.floor(r * (e - s));
|
|
};
|
|
window.hel_storage_get = (k) => localStorage.getItem("hel:" + k);
|
|
window.hel_storage_set = (k, v) => localStorage.setItem("hel:" + k, v);
|
|
|
|
// ---- helpers ----
|
|
const persist = () => hel_command("save " + CATALOG_KEY);
|
|
const esc = (s) => s.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
|
|
const isSecretCmd = (cmd) => {
|
|
const v = cmd.trim().split(/\s+/)[0];
|
|
return v === "enc" || v === "gen";
|
|
};
|
|
|
|
let toastT;
|
|
function toast(msg) {
|
|
const t = $("#toast");
|
|
t.textContent = msg;
|
|
t.classList.add("show");
|
|
clearTimeout(toastT);
|
|
toastT = setTimeout(() => t.classList.remove("show"), 1600);
|
|
}
|
|
|
|
async function copyText(text) {
|
|
try {
|
|
await navigator.clipboard.writeText(text);
|
|
toast("Copied");
|
|
} catch {
|
|
toast("Copy failed");
|
|
}
|
|
}
|
|
|
|
function secretSpan(text) {
|
|
const s = document.createElement("span");
|
|
s.className = "secret";
|
|
s.textContent = text;
|
|
s.title = "click to reveal";
|
|
s.addEventListener("click", () => s.classList.toggle("revealed"));
|
|
return s;
|
|
}
|
|
|
|
// ---- quick generate (stateless: never pollutes the stored catalog) ----
|
|
let lastSecret = "";
|
|
function quickShow() {
|
|
const spec = $("#qname").value.trim();
|
|
if (!spec) return toast("Enter a name");
|
|
if (!masterEl().value) return toast("Enter the master password");
|
|
const name = spec.split(/\s+/)[0];
|
|
let out = hel_command("enc " + name);
|
|
if (/not found/.test(out)) {
|
|
hel_command("add " + spec);
|
|
out = hel_command("enc " + name);
|
|
hel_command("rm " + name);
|
|
}
|
|
const pw = out.split("\n").filter((l) => l && !/^(warning|error):/.test(l)).pop() || "";
|
|
lastSecret = pw;
|
|
const slot = $("#qsecret");
|
|
slot.innerHTML = "";
|
|
slot.appendChild(secretSpan(pw));
|
|
if (!pw) toast("No output");
|
|
}
|
|
|
|
// ---- console ----
|
|
function appendLine(html, cls) {
|
|
const out = $("#cout");
|
|
const div = document.createElement("div");
|
|
if (cls) div.className = cls;
|
|
div.innerHTML = html;
|
|
out.appendChild(div);
|
|
out.scrollTop = out.scrollHeight;
|
|
}
|
|
function appendSecret(text) {
|
|
const out = $("#cout");
|
|
const div = document.createElement("div");
|
|
div.appendChild(secretSpan(text));
|
|
out.appendChild(div);
|
|
out.scrollTop = out.scrollHeight;
|
|
}
|
|
function consoleRun(cmd) {
|
|
appendLine('<span class="cmd">> ' + esc(cmd) + "</span>");
|
|
const out = hel_command(cmd);
|
|
persist();
|
|
if (out) {
|
|
const secret = isSecretCmd(cmd);
|
|
for (const line of out.split("\n")) {
|
|
if (/^(warning|error):/.test(line)) appendLine(esc(line), "err");
|
|
else if (secret && line.trim() && !line.startsWith("add ")) appendSecret(line);
|
|
else appendLine(esc(line) || " ");
|
|
}
|
|
}
|
|
}
|
|
|
|
// ---- boot ----
|
|
async function boot() {
|
|
await init();
|
|
hel_init();
|
|
if (localStorage.getItem("hel:" + CATALOG_KEY)) hel_command("source " + CATALOG_KEY);
|
|
|
|
$("#show").onclick = quickShow;
|
|
$("#copy").onclick = () => (lastSecret ? copyText(lastSecret) : toast("Nothing to copy"));
|
|
$("#qname").addEventListener("keydown", (e) => e.key === "Enter" && quickShow());
|
|
|
|
const ci = $("#cin");
|
|
ci.addEventListener("keydown", (e) => {
|
|
if (e.key === "Enter") {
|
|
const v = ci.value;
|
|
if (v.trim()) consoleRun(v);
|
|
ci.value = "";
|
|
}
|
|
});
|
|
|
|
$("#importBtn").onclick = () => $("#importModal").classList.add("show");
|
|
$("#importCancel").onclick = () => $("#importModal").classList.remove("show");
|
|
$("#importDo").onclick = () => {
|
|
const txt = $("#importText").value;
|
|
if (txt.trim()) {
|
|
hel_load_script(txt);
|
|
persist();
|
|
toast("Imported");
|
|
appendLine('<span class="muted"># imported catalog</span>');
|
|
}
|
|
$("#importModal").classList.remove("show");
|
|
$("#importText").value = "";
|
|
};
|
|
$("#exportBtn").onclick = () => {
|
|
$("#exportText").value = hel_command("dump -");
|
|
$("#exportModal").classList.add("show");
|
|
};
|
|
$("#exportClose").onclick = () => $("#exportModal").classList.remove("show");
|
|
$("#exportCopy").onclick = () => copyText($("#exportText").value);
|
|
|
|
appendLine('<span class="muted"># LesS/KEY ready — runs the real hel core via WASM. Try: help</span>');
|
|
}
|
|
boot();
|
|
</script>
|
|
</body>
|
|
</html>
|