pithos/web/index.html
Local Dev b8ec745a43 Pithos in the browser: Drives on Silent Mode with a key file
A page served by the gateway that signs in with the Pithos key file
(Ed25519 in Web Crypto) or an Export JSON S3 key, then browses, views,
downloads, uploads, renames and deletes, encrypting and decrypting in the
page with the same formats as the desktop. Checked against a local
gateway and real s3d: files the desktop encrypted open byte-identical in
the browser, and browser uploads open in the desktop client; the server
only ever holds encrypted names. Remember on this device keeps the key
sealed with a passphrase in IndexedDB.
2026-10-05 02:25:02 +02:00

79 lines
3.8 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="referrer" content="no-referrer">
<meta name="color-scheme" content="dark light">
<title>Pithos</title>
<link rel="icon" href="/_app/icon.svg" type="image/svg+xml">
<link rel="stylesheet" href="/_app/app.css">
<script type="module" src="/_app/app.js"></script>
</head>
<body>
<header class="top">
<a class="brand" href="#/"><img src="/_app/icon.svg" alt=""><span>Pithos</span></a>
<span class="who" id="who" hidden></span>
<button class="btn small" id="signout" hidden>Sign out</button>
</header>
<main id="signin" class="signin" hidden>
<section class="card narrow">
<h1>Your drives on Silent Mode</h1>
<p class="muted">Open the drives you keep on Silent Mode from any browser. Files are decrypted here, in this page; the server only ever sees them encrypted.</p>
<div id="unlock" hidden>
<p>A key is remembered on this device.</p>
<form id="unlock-form" class="stack">
<label class="field"><span>Passphrase</span><input type="password" id="unlock-pass" autocomplete="current-password" required></label>
<div class="row"><button class="btn primary" type="submit">Unlock</button><button class="btn" type="button" id="forget">Use another key</button></div>
</form>
</div>
<div id="keyform">
<label class="drop" id="drop" tabindex="0">
<input type="file" id="keyfile" accept=".json,application/json" hidden>
<strong>Drop your key file here</strong>
<span class="muted">or click to choose it</span>
</label>
<details class="paste">
<summary>Paste it instead</summary>
<textarea id="keytext" rows="5" spellcheck="false" autocomplete="off" placeholder='{"v":1,"secret":"…"} or {"endpoint":"…","accessKey":"…","secretKey":"…","bucket":"…"}'></textarea>
</details>
<label class="check"><input type="checkbox" id="remember"> Remember on this device</label>
<label class="field" id="pass-row" hidden><span>Passphrase to protect it (at least 10 characters)</span><input type="password" id="pass" autocomplete="new-password" minlength="10"></label>
<button class="btn primary" id="go">Sign in</button>
<div class="help">
<p><b>Which key?</b></p>
<ul>
<li><b>Your Pithos key</b> opens all your drives, encrypted files included: in Pithos, Accounts › On Silent Mode › Export key (in Theseus: Key for the browser app).</li>
<li><b>An S3 key file</b> (Users &amp; keys › Export JSON…, or a folder key someone shared with you) opens readable files and shared folders.</li>
</ul>
<p class="muted">The key stays in this tab, or sealed with your passphrase if you choose Remember. Close the tab to sign out.</p>
</div>
</div>
<p class="error" id="signin-error" hidden></p>
</section>
</main>
<main id="app" class="app" hidden>
<nav class="crumbs" id="crumbs"></nav>
<div class="toolbar" id="toolbar">
<button class="btn primary" id="upload">Upload</button>
<input type="file" id="files" multiple hidden>
<button class="btn" id="newfolder">New folder</button>
<span class="spacer"></span>
<span class="muted small" id="count"></span>
</div>
<section class="card list" id="list"></section>
<p class="muted small foot">Pithos in the browser · <a href="https://silentmode.st/pithos/" rel="noopener">pithos.sia</a></p>
</main>
<div class="viewer" id="viewer" hidden>
<div class="viewer-bar"><span id="viewer-name"></span><span class="spacer"></span><button class="btn small" id="viewer-dl">Download</button><button class="btn small" id="viewer-close">Close</button></div>
<div class="viewer-body" id="viewer-body"></div>
</div>
<div class="toasts" id="toasts" aria-live="polite"></div>
</body>
</html>