This repository has been archived on 2025-08-23. You can view files and clone it, but cannot push or open issues or pull requests.
Files
GreenCoast/client/app.js

393 lines
19 KiB
JavaScript

import { encryptString, decryptToString, toBlob } from "./crypto.js";
const els = {};
function $(id){ return document.getElementById(id); }
// ---- Trusted Types policy & safe HTML setter ----
const ttPolicy = (() => {
try {
if (window.trustedTypes) {
// Allow only our sanitized HTML chunks (legal pages). Strip scripts & inline handlers.
return window.trustedTypes.createPolicy("gc", {
createHTML: (s) =>
s
.replace(/<script[\s\S]*?<\/script>/gi, "")
.replace(/\son\w+=/gi, "") // remove inline event handlers
});
}
} catch {}
return null;
})();
function setHTML(el, html) {
if (!el) return;
if (ttPolicy) {
el.innerHTML = ttPolicy.createHTML(html);
} else {
// Very defensive fallback if TT creation is blocked: render as plain text.
el.textContent = html.replace(/<[^>]*>/g, "");
}
}
// ---- Hash routes map (SPA) ----
const routes = {
"/": "feed",
"/privacy": "privacy.html",
"/gdpr": "gdpr.html",
"/terms": "terms.html"
};
window.addEventListener("DOMContentLoaded", () => {
Object.assign(els, {
shardUrl: $("shardUrl"), bearer: $("bearer"), passphrase: $("passphrase"),
saveConn: $("saveConn"), health: $("health"), visibility: $("visibility"),
title: $("title"), body: $("body"), publish: $("publish"), publishStatus: $("publishStatus"),
posts: $("posts"), discordStart: $("discordStart"), signIn: $("signIn"), panic: $("panic"),
avatar: $("avatar"), fp: $("fp"), flash: $("flash"), banner: $("banner"),
feed: $("feed"), page: $("page"), pageContent: $("pageContent"),
});
// Buttons
on(els.saveConn, "click", onSaveConn);
on(els.publish, "click", publish);
on(els.discordStart, "click", discordStart);
on(els.signIn, "click", deviceKeySignIn);
on(els.panic, "click", panicWipe);
// Route navigation (hash-based)
document.querySelectorAll('a[data-route]').forEach(a=>{
a.addEventListener('click', (e)=>{
if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return; // allow new tab etc.
// hash change will trigger render
});
});
window.addEventListener('hashchange', ()=>renderRoute(currentPath()));
applyConfig();
updateLimitedModeUI();
init();
renderRoute(currentPath());
flash("GC client loaded");
});
// ---------- init ----------
async function init(){
await checkHealth(); await syncIndex(); sse(); await renderAvatar();
}
// ---------- helpers ----------
function on(el, ev, fn){ if (el) el.addEventListener(ev, fn, false); }
function flash(msg, ms=1800){ if(!els.flash) return; els.flash.textContent=msg; els.flash.style.display="block"; setTimeout(()=>els.flash.style.display="none", ms); }
function norm(u){ return (u||"").replace(/\/+$/,""); }
function currentPath(){
const h = location.hash || "#/";
const p = h.replace(/^#/, "");
return p || "/";
}
function defaultApiBase() {
try { const qs = new URLSearchParams(window.location.search); const qApi = qs.get("api"); if (qApi) return qApi.replace(/\/+$/,""); } catch {}
const m = document.querySelector('meta[name="gc-api-base"]'); if (m && m.content) return m.content.replace(/\/+$/,"");
try {
const u = new URL(window.location.href); const proto = u.protocol; const host = u.hostname; const portStr = u.port; const bracketHost = host.includes(":") ? `[${host}]` : host;
const port = portStr ? parseInt(portStr,10) : null; let apiPort = port;
if (port === 8082) apiPort = 8080; else if (port === 9082) apiPort = 9080; else if (port) apiPort = Math.max(1, port-2);
return apiPort ? `${proto}//${bracketHost}:${apiPort}` : `${proto}//${bracketHost}`;
} catch { return window.location.origin.replace(/\/+$/,""); }
}
const LS_KEY = "gc_client_config_v6";
const POSTS_KEY = "gc_posts_index_v6";
const KEY_PKCS8 = "gc_key_pkcs8";
const KEY_PUB_RAW = "gc_key_pub_raw";
function loadConfig(){ try { return JSON.parse(localStorage.getItem(LS_KEY)) ?? {}; } catch { return {}; } }
const cfg = loadConfig();
function saveConfig(c){ localStorage.setItem(LS_KEY, JSON.stringify(Object.assign(cfg,c))); }
function applyConfig(){
if (!els.shardUrl) return;
els.shardUrl.value = cfg.url ?? defaultApiBase();
els.bearer.value = cfg.bearer ?? "";
els.passphrase.value = cfg.passphrase ?? "";
}
function isAuthorized(){ return !!cfg.bearer; }
function setActiveTab(path){
const cur = path in routes ? path : "/";
document.querySelectorAll(".tabs a").forEach(a=>{
const href = new URL(a.href, location.origin).hash.replace(/^#/, "") || "/";
a.classList.toggle("active", href===cur);
});
}
function updateLimitedModeUI(){
const limited = !isAuthorized();
if (els.banner) els.banner.hidden = !limited;
if (els.visibility){
const priv = [...els.visibility.options].find(o => o.value === "private");
if (priv) { priv.disabled = limited; if (limited && els.visibility.value === "private") els.visibility.value = "public"; }
}
}
// ---------- router (hash-based) ----------
async function renderRoute(path){
setActiveTab(path);
const target = routes[path] ?? "feed";
if (target === "feed"){
els.page.hidden = true;
els.feed.hidden = false;
return;
}
// Load static page into #pageContent (Trusted Types aware)
els.feed.hidden = true;
els.page.hidden = false;
setHTML(els.pageContent, "Loading…");
try{
const res = await fetch("./"+target, { cache:"no-store" });
const html = await res.text();
const m = html.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
setHTML(els.pageContent, m ? m[1] : html);
}catch{
setHTML(els.pageContent, `<p class="muted">Failed to load page.</p>`);
}
}
// ---------- health / posts / SSE ----------
async function checkHealth(){
const base = cfg.url || defaultApiBase();
if (!base) { if (els.health) els.health.textContent="Set URL"; return; }
els.health.textContent="Checking…";
try { const r = await fetch(base + "/healthz"); els.health.textContent = r.ok ? "Connected ✔" : `Error: ${r.status}`; }
catch { els.health.textContent = "Not reachable"; }
}
function getPosts(){ try { return JSON.parse(localStorage.getItem(POSTS_KEY)) ?? []; } catch { return []; } }
function setPosts(v){ localStorage.setItem(POSTS_KEY, JSON.stringify(v)); renderPosts(); }
async function syncIndex(){
const base = cfg.url || defaultApiBase();
if (!base) return;
try{
const r = await fetch(base + "/v1/index");
if (!r.ok) throw new Error("index fetch failed");
const entries = await r.json();
setPosts(entries.map(e=>({hash:e.hash, title:"(title unknown — fetch)", bytes:e.bytes, ts:e.stored_at, enc:e.private, author:e.author||null, tz:e.creator_tz||null})));
}catch(e){ console.warn("index sync failed", e); }
}
let sseCtrl;
function sse(reset=false){
const base = cfg.url || defaultApiBase();
if (!base) return;
if (sseCtrl){ sseCtrl.abort(); sseCtrl=undefined; if(!reset) return; }
sseCtrl = new AbortController();
fetch(base + "/v1/index/stream", { signal:sseCtrl.signal }).then(async resp=>{
if (!resp.ok) return;
const reader = resp.body.getReader(); const dec = new TextDecoder(); let buf="";
while(true){ const {value,done}=await reader.read(); if(done) break;
buf += dec.decode(value,{stream:true});
let i; while((i=buf.indexOf("\n\n"))>=0){
const chunk=buf.slice(0,i); buf=buf.slice(i+2);
if (chunk.startsWith("data: ")){
try{
const ev = JSON.parse(chunk.slice(6));
if (ev.event==="put"){
const e=ev.data; const posts=getPosts();
if (!posts.find(p=>p.hash===e.hash)){
posts.unshift({hash:e.hash,title:"(title unknown — fetch)",bytes:e.bytes,ts:e.stored_at,enc:e.private,author:e.author||null,tz:e.creator_tz||null});
setPosts(posts);
}
} else if (ev.event==="delete"){
const h=ev.data.hash; setPosts(getPosts().filter(x=>x.hash!==h));
}
}catch{}
}
}
}
}).catch(()=>{});
}
// ---------- avatar (canvas PNG) ----------
function b64uEncode(buf){ const bin = Array.from(new Uint8Array(buf)).map(b=>String.fromCharCode(b)).join(""); return btoa(bin).replace(/\+/g,"-").replace(/\//g,"_").replace(/=+$/,""); }
function b64uDecodeToBytes(s){ s=s.replace(/-/g,"+").replace(/_/g,"/"); while(s.length%4) s+="="; const bin=atob(s); const out=new Uint8Array(bin.length); for(let i=0;i<bin.length;i++) out[i]=bin.charCodeAt(i); return out; }
function b64urlToJSON(b){ return JSON.parse(new TextDecoder().decode(b64uDecodeToBytes(b))); }
function parseGC2(tok){ try{ const p=tok.split("."); if(p.length!==3) return {}; const pl=b64urlToJSON(p[1]); return {sub:pl.sub||"", cnf:pl.cnf||""}; }catch{ return {}; } }
async function sha256Hex(str){ const out = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(str)); return Array.from(new Uint8Array(out)).map(b=>b.toString(16).padStart(2,"0")).join(""); }
function hexBytes(hex){ const u=new Uint8Array(hex.length/2); for(let i=0;i<u.length;i++) u[i]=parseInt(hex.substr(i*2,2),16); return u; }
function identiconPNG(hex, size=64){
const cells=5, cell=Math.floor(size/cells), pad=Math.floor((size-cell*cells)/2);
const b=hexBytes(hex); const hue=b[0]/255*360; const bg=`hsl(${hue},35%,16%)`; const fg=`hsl(${(hue+180)%360},70%,60%)`;
const bits=[]; for(const x of b) for(let i=0;i<8;i++) bits.push((x>>i)&1);
const c=document.createElement("canvas"); c.width=c.height=size; const g=c.getContext("2d");
g.fillStyle=bg; g.fillRect(0,0,size,size);
let k=0;
for(let y=0;y<cells;y++){
for(let x=0;x<3;x++){
if(bits[k++]===1){
const px=pad+x*cell, py=pad+y*cell;
g.fillStyle=fg; g.fillRect(px,py,cell-1,cell-1);
const mx=pad+(cells-1-x)*cell;
if(cells-1-x!==x) g.fillRect(mx,py,cell-1,cell-1);
}
}
}
return c.toDataURL("image/png");
}
async function renderAvatar(){
if (!els.avatar) return;
let seed=null, label="(pseudonymous)";
if (cfg.bearer){ const p=parseGC2(cfg.bearer); seed=p.cnf||p.sub||null; if(p.sub) label=p.sub; }
if (!seed){ els.avatar.removeAttribute("src"); if (els.fp) els.fp.textContent="(pseudonymous)"; return; }
const hex=await sha256Hex(seed);
els.avatar.onerror = ()=>{ els.avatar.removeAttribute("src"); if (els.fp) els.fp.textContent="(pseudonymous)"; };
els.avatar.src=identiconPNG(hex, 64);
if (els.fp) els.fp.textContent=label+" (pseudonymous)";
}
// ---------- security / PoP ----------
async function onSaveConn(){
const c = { url: norm(els.shardUrl.value || defaultApiBase()), bearer: els.bearer.value.trim(), passphrase: els.passphrase.value };
saveConfig(c); flash("Saved");
updateLimitedModeUI(); await checkHealth(); await syncIndex(); sse(true); await renderAvatar();
}
async function panicWipe(){
flash("Wiping local state…");
try { const base = cfg.url || defaultApiBase(); if (base) await fetch(base + "/v1/session/clear", { method:"POST" }); } catch {}
localStorage.clear(); sessionStorage.clear(); caches?.keys?.().then(keys => keys.forEach(k => caches.delete(k)));
flash("Cleared — reloading"); setTimeout(()=>location.reload(), 300);
}
async function discordStart(){
const base = cfg.url || defaultApiBase(); if (!base){ alert("Set shard URL first."); return; }
const r = await fetch(base + "/v1/auth/discord/start", { headers: { "X-GC-3P-Assent":"1" }});
if (!r.ok){ alert("Discord SSO not available"); return; }
const j = await r.json(); location.href = j.url;
}
async function getOrCreateKeyPair(){
const pkcs8 = sessionStorage.getItem(KEY_PKCS8); const pubRaw = sessionStorage.getItem(KEY_PUB_RAW);
if (pkcs8 && pubRaw){
try{
const priv = await crypto.subtle.importKey("pkcs8", b64uDecodeToBytes(pkcs8), {name:"ECDSA", namedCurve:"P-256"}, true, ["sign"]);
const pub = await crypto.subtle.importKey("raw", b64uDecodeToBytes(pubRaw), {name:"ECDSA", namedCurve:"P-256"}, true, ["verify"]);
return { priv, pub, pubRawB64u: pubRaw };
}catch{}
}
const kp = await crypto.subtle.generateKey({name:"ECDSA", namedCurve:"P-256"}, true, ["sign","verify"]);
const pkcs8New = await crypto.subtle.exportKey("pkcs8", kp.privateKey);
const pubRawBytes = await crypto.subtle.exportKey("raw", kp.publicKey);
const pkcs8B64 = b64uEncode(pkcs8New); const pubRawB64 = b64uEncode(pubRawBytes);
sessionStorage.setItem(KEY_PKCS8, pkcs8B64); sessionStorage.setItem(KEY_PUB_RAW, pubRawB64);
return { priv: kp.privateKey, pub: kp.publicKey, pubRawB64u: pubRawB64 };
}
async function deviceKeySignIn(){
const base = cfg.url || defaultApiBase(); if (!base){ alert("Set shard URL first."); return; }
flash("Signing in…");
try{
const { priv, pubRawB64u } = await getOrCreateKeyPair();
const rc = await fetch(base + "/v1/auth/key/challenge", { method:"POST" });
if (!rc.ok) throw new Error("challenge "+rc.status);
const cj = await rc.json();
const msg = new TextEncoder().encode("key-verify\n"+cj.nonce);
const sig = await crypto.subtle.sign({name:"ECDSA", hash:"SHA-256"}, priv, msg);
const body = JSON.stringify({ nonce:cj.nonce, alg:"p256", pub:pubRawB64u, sig:b64uEncode(sig) });
const rv = await fetch(base + "/v1/auth/key/verify", { method:"POST", headers:{"Content-Type":"application/json"}, body });
if (!rv.ok) throw new Error("verify "+rv.status);
const vj = await rv.json();
saveConfig({ bearer: vj.bearer }); applyConfig(); updateLimitedModeUI();
await renderAvatar(); await checkHealth(); await syncIndex(); sse(true); flash("Signed in");
}catch(e){ console.error(e); alert("Sign-in error: "+(e?.message||e)); }
}
async function signPoPHeaders(method, pathOnly, bodyBytes){
const pubRaw = sessionStorage.getItem(KEY_PUB_RAW); const pkcs8 = sessionStorage.getItem(KEY_PKCS8);
if (!pubRaw || !pkcs8) return {};
const priv = await crypto.subtle.importKey("pkcs8", b64uDecodeToBytes(pkcs8), {name:"ECDSA", namedCurve:"P-256"}, false, ["sign"]);
const bodyHash = await crypto.subtle.digest("SHA-256", bodyBytes || new Uint8Array());
const hex = Array.from(new Uint8Array(bodyHash)).map(b=>b.toString(16).padStart(2,"0")).join("");
const ts = Math.floor(Date.now()/1000).toString();
const msg = new TextEncoder().encode(method.toUpperCase()+"\n"+pathOnly+"\n"+ts+"\n"+hex);
const sig = await crypto.subtle.sign({name:"ECDSA", hash:"SHA-256"}, priv, msg);
return { "X-GC-Key":"p256:"+pubRaw, "X-GC-TS":ts, "X-GC-Proof":b64uEncode(sig) };
}
async function fetchWithPoP(url, opts){
const u = new URL(url); const path = u.pathname; const method = (opts?.method||"GET").toUpperCase();
const bodyBuf = opts?.body instanceof Blob ? new Uint8Array(await opts.body.arrayBuffer())
: (opts?.body instanceof ArrayBuffer ? new Uint8Array(opts.body) : new Uint8Array());
const pop = await signPoPHeaders(method, path, bodyBuf);
const headers = new Headers(opts?.headers||{});
if (cfg.bearer) headers.set("Authorization", "Bearer "+cfg.bearer);
for (const [k,v] of Object.entries(pop)) headers.set(k,v);
return fetch(url, { ...(opts||{}), headers });
}
// ---------- compose / posts ----------
function msg(t, err=false){ els.publishStatus.textContent=t; els.publishStatus.style.color = err ? "#ff6b6b" : "#8b949e"; }
async function publish(){
const base = cfg.url || defaultApiBase(); if (!base) return msg("Set shard URL first.", true);
const title = els.title.value.trim(); const body = els.body.value; const vis = els.visibility.value;
if (!isAuthorized() && vis === "private"){ msg("Private posts require authorizing this device. Publishing as public.", true); els.visibility.value = "public"; }
try{
let blob, enc=false;
if (els.visibility.value==="private"){
if (!els.passphrase.value) return msg("Set a passphrase for private posts.", true);
const payload = await encryptString(JSON.stringify({title,body}), els.passphrase.value);
blob = toBlob(payload); enc=true;
} else { blob = toBlob(JSON.stringify({title,body})); }
const headers = {"Content-Type":"application/octet-stream"};
if (enc) headers["X-GC-Private"]="1";
const tz = Intl.DateTimeFormat().resolvedOptions().timeZone; if (tz) headers["X-GC-TZ"]=tz;
const r = await fetchWithPoP(base + "/v1/object", { method:"PUT", headers, body: blob });
if (!r.ok) throw new Error(await r.text());
const j = await r.json();
const posts = getPosts();
posts.unshift({ hash:j.hash, title: title || "(untitled)", bytes:j.bytes, ts:j.stored_at, enc, author:j.author||null, tz:j.creator_tz||null });
setPosts(posts);
els.body.value=""; msg(`Published ${enc?"private":"public"} post. Hash: ${j.hash}`);
}catch(e){ msg("Publish failed: "+(e?.message||e), true); }
}
function renderPosts(){
const posts = getPosts(); if (!els.posts) return; els.posts.innerHTML="";
for (const p of posts){
const div = document.createElement("div"); div.className="post";
const badge = p.enc?`<span class="badge">private</span>`:`<span class="badge">public</span>`;
const tz = p.tz?` · tz:${p.tz}`:""; const who = p.author?` · by ${p.author.slice(0,8)}`:"";
div.innerHTML = `
<div class="meta"><code>${p.hash.slice(0,10)}…</code> · ${p.bytes} bytes · ${p.ts}${tz}${who} ${badge}</div>
<div class="actions">
<button data-act="view" type="button">View</button>
<button data-act="save" type="button">Save blob</button>
<button data-act="delete" type="button">Delete (server)</button>
<button data-act="remove" type="button">Remove (local)</button>
</div>
<pre class="content" style="white-space:pre-wrap;margin-top:.5rem;"></pre>`;
const pre = div.querySelector(".content");
div.querySelector('[data-act="view"]').onclick = ()=>viewPost(p, pre);
div.querySelector('[data-act="save"]').onclick = ()=>saveBlob(p);
div.querySelector('[data-act="delete"]').onclick = ()=>delServer(p);
div.querySelector('[data-act="remove"]').onclick = ()=>{ setPosts(getPosts().filter(x=>x.hash!==p.hash)); };
els.posts.appendChild(div);
}
}
async function viewPost(p, pre){
const base = cfg.url || defaultApiBase(); pre.textContent="Loading…";
try{
const r = await fetch(base + "/v1/object/"+p.hash);
if (!r.ok) throw new Error("fetch failed "+r.status);
const buf = new Uint8Array(await r.arrayBuffer());
let text;
if (p.enc){ if (!els.passphrase.value) throw new Error("passphrase required"); text = await decryptToString(buf, els.passphrase.value); }
else { text = new TextDecoder().decode(buf); }
try{ const j=JSON.parse(text); pre.textContent=(j.title?`# ${j.title}\n\n`:"")+(j.body??text); } catch{ pre.textContent=text; }
}catch(e){ pre.textContent="Error: "+(e?.message||e); }
}
async function saveBlob(p){
const base = cfg.url || defaultApiBase();
const r = await fetch(base + "/v1/object/"+p.hash);
if (!r.ok) return alert("download failed "+r.status);
const b = await r.blob(); const a=document.createElement("a"); a.href=URL.createObjectURL(b);
a.download=p.hash+(p.enc?".gcenc":".json"); a.click(); URL.revokeObjectURL(a.href);
}
async function delServer(p){
const base = cfg.url || defaultApiBase();
if (!confirm("Delete blob from server by hash?")) return;
const r = await fetchWithPoP(base + "/v1/object/"+p.hash, { method:"DELETE" });
if (!r.ok) return alert("delete failed "+r.status);
setPosts(getPosts().filter(x=>x.hash!==p.hash));
}