133 lines
4.4 KiB
HTML
Executable File
133 lines
4.4 KiB
HTML
Executable File
<body>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Encryptor (HTMX)</title>
|
|
|
|
<!-- CSS má být v <head> -->
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
|
|
<!-- Tohle jsi omylem smazal; bez toho HTMX nefunguje -->
|
|
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
|
|
</head>
|
|
|
|
|
|
<main class="grid">
|
|
<div class="left-col">
|
|
<section class="card">
|
|
<h2>Můj veřejný klíč</h2>
|
|
<div class="row">
|
|
<a href="/public.pem" target="_blank">public.pem</a>
|
|
<button onclick="copyFromUrl('/public.pem')">Copy</button>
|
|
</div>
|
|
<div class="row">
|
|
<a href="/public.crt" target="_blank">identity.crt</a>
|
|
<button onclick="copyFromUrl('/public.crt')">Copy</button>
|
|
</div>
|
|
<small>Pošli tohle kontaktům; můžou šifrovat pro tebe.</small>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2>Šifrovat pro cizí klíč</h2>
|
|
<form hx-post="/encrypt" hx-target="#encryptResult" hx-swap="innerHTML">
|
|
<label>Zpráva</label>
|
|
<div class="row">
|
|
<textarea id="msg" name="message" placeholder="Sem napiš zprávu..."></textarea>
|
|
<button type="button" class="secondary" onclick="copyEl('msg')">Copy</button>
|
|
<button type="button" class="secondary" onclick="clearEl('msg')">Clear</button>
|
|
</div>
|
|
|
|
<label>Veřejný klíč příjemce (PEM nebo CERT)</label>
|
|
<div class="row">
|
|
<textarea id="peerKey" name="pubkey" placeholder="-----BEGIN PUBLIC KEY----- ..."></textarea>
|
|
<button type="button" class="secondary" onclick="copyEl('peerKey')">Copy</button>
|
|
<button type="button" class="secondary" onclick="clearEl('peerKey')">Clear</button>
|
|
</div>
|
|
|
|
<button type="submit" class="primary">Encrypt</button>
|
|
</form>
|
|
<div id="encryptResult" class="result"></div>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="right-col">
|
|
<section class="card">
|
|
<h2>Dešifrovat</h2>
|
|
<form hx-post="/decrypt" hx-target="#decryptResult" hx-swap="innerHTML">
|
|
<label>Payload (JSON envelope)</label>
|
|
<div class="row">
|
|
<textarea id="payload" name="payload" placeholder='{"ek":"...","n":"...","ct":"..."}'></textarea>
|
|
<button type="button" class="secondary" onclick="copyEl('payload')">Copy</button>
|
|
<button type="button" class="secondary" onclick="clearEl('payload')">Clear</button>
|
|
</div>
|
|
<button type="submit" class="primary">Decrypt</button>
|
|
</form>
|
|
<div id="decryptResult" class="result"></div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
|
|
<div id="toast">Zkopírováno</div>
|
|
|
|
<script>
|
|
function showToast(msg='Zkopírováno') {
|
|
const t = document.getElementById('toast');
|
|
t.textContent = msg;
|
|
t.classList.add('show');
|
|
setTimeout(() => t.classList.remove('show'), 1200);
|
|
}
|
|
|
|
async function copyText(text) {
|
|
try {
|
|
if (navigator.clipboard && window.isSecureContext) {
|
|
await navigator.clipboard.writeText(text);
|
|
} else {
|
|
const ta = document.createElement('textarea');
|
|
ta.value = text;
|
|
ta.style.position = 'fixed';
|
|
ta.style.left = '-9999px';
|
|
document.body.appendChild(ta);
|
|
ta.focus();
|
|
ta.select();
|
|
document.execCommand('copy');
|
|
document.body.removeChild(ta);
|
|
}
|
|
showToast();
|
|
} catch (e) {
|
|
console.error('copyText error:', e);
|
|
alert('Nepodařilo se zkopírovat do schránky.\n' + e);
|
|
}
|
|
}
|
|
|
|
async function copyEl(id) {
|
|
const el = document.getElementById(id);
|
|
const val = (el && (el.tagName === 'TEXTAREA' || el.tagName === 'INPUT'))
|
|
? el.value
|
|
: (el?.textContent ?? '');
|
|
await copyText(val);
|
|
}
|
|
|
|
async function copyFromUrl(url) {
|
|
try {
|
|
const res = await fetch(url, {cache: 'no-store'});
|
|
if (!res.ok) throw new Error('HTTP ' + res.status);
|
|
const text = await res.text();
|
|
await copyText(text);
|
|
} catch (e) {
|
|
console.error('copyFromUrl error:', e);
|
|
alert('Nepodařilo se načíst obsah ke zkopírování.\n' + e);
|
|
}
|
|
}
|
|
|
|
function clearEl(id) {
|
|
const el = document.getElementById(id);
|
|
if (el && (el.tagName === 'TEXTAREA' || el.tagName === 'INPUT')) {
|
|
el.value = '';
|
|
} else if (el) {
|
|
el.textContent = '';
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</body>
|