torchwood/cmd/age-keyserver/templates/home.html at ced0492065a1d619b3dcb0cb1e91359a555ada6b · FiloSottile/torchwood · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>age Keyserver</title>
	<link rel="stylesheet" href="/static/style.css">
	<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
</head>
<body>
	<h1>age Keyserver</h1>

	<p>A <a href="https://words.filippo.io/keyserver-tlog" target="_blank">transparent</a> keyserver for <a href="https://age-encryption.org" target="_blank">age</a> public keys.</p>

	<div class="section lookup-section">
		<h2>Look up a public key</h2>
		<form id="lookup-form">
			<input type="email" id="lookup-email" name="email" required placeholder="joe@example.com" autofocus>
			<button type="submit">Look up key</button>
		</form>
		<div id="lookup-result"></div>
	</div>

	<div class="section cli-example-section">
		<h2>Use from the command line</h2>
		<p>Encrypt a file to someone's public key directly:</p>
		<div class="key-result">
			<code class="pubkey-display">age -r $(go run filippo.io/torchwood/cmd/age-keylookup@main joe@example.com)</code>
			<button id="copy-cli-btn" onclick="copyCliExample()" class="copy-button">Copy</button>
		</div>
	</div>

	<div class="section">
		<h2>Submit or manage your key</h2>
		<form action="/login" method="POST">
			<input type="email" id="email" name="email" required placeholder="you@example.com">

			<div class="h-captcha" data-sitekey="{{.HCaptchaSitekey}}"></div>

			<button type="submit">Send login link</button>
		</form>
	</div>

	<div class="footer">
		<p>
			Learn more about the <a href="https://age-encryption.org" target="_blank">age encryption tool</a>,
			about <a href="https://words.filippo.io/keyserver-tlog" target="_blank">transparency logs</a>,
			or read the <a href="https://github.com/FiloSottile/torchwood/tree/main/cmd/age-keyserver" target="_blank">source code</a>.
		</p>
	</div>

	<script>
		function copyCliExample() {
			const cliCommand = 'age -r $(go run filippo.io/torchwood/cmd/age-keylookup@main joe@example.com)';
			navigator.clipboard.writeText(cliCommand).then(() => {
				const btn = document.getElementById('copy-cli-btn');
				const originalText = btn.textContent;
				btn.textContent = 'Copied!';
				btn.style.background = 'var(--button-bg)';
				setTimeout(() => {
					btn.textContent = originalText;
					btn.style.background = '';
				}, 2000);
			}).catch(err => {
				console.error('Failed to copy:', err);
			});
		}

		function copyToClipboard(text) {
			navigator.clipboard.writeText(text).then(() => {
				const btn = document.getElementById('copy-btn');
				const originalText = btn.textContent;
				btn.textContent = 'Copied!';
				btn.style.background = 'var(--button-bg)';
				setTimeout(() => {
					btn.textContent = originalText;
					btn.style.background = '';
				}, 2000);
			}).catch(err => {
				console.error('Failed to copy:', err);
			});
		}

		document.getElementById('lookup-form').addEventListener('submit', async (e) => {
			e.preventDefault();
			const email = document.getElementById('lookup-email').value;
			const resultDiv = document.getElementById('lookup-result');

			resultDiv.innerHTML = '<p style="margin-top: 1rem;" class="dimmed">Looking up...</p>';

			try {
				const resp = await fetch('/api/lookup?email=' + encodeURIComponent(email));
				if (resp.ok) {
					const data = await resp.json();
					resultDiv.innerHTML = `
						<div style="margin-top: 1.5rem;">
							<p><strong>Public key for <u>${email}</u>:</strong></p>
							<div class="key-result">
								<code class="pubkey-display">${data.pubkey}</code>
								<button id="copy-btn" onclick="copyToClipboard('${data.pubkey}')" class="copy-button">Copy</button>
							</div>
							<details style="margin-top: 1rem;">
								<summary style="cursor: pointer; color: var(--text); font-weight: 500;">Transparency log proof</summary>
								<div style="margin-top: 0.5rem;">
									<p class="dimmed" style="margin-bottom: 0.5rem;">The CLI automatically verifies this proof when looking up keys.</p>
									<pre style="background: var(--bg); padding: 1rem; border: 1px solid var(--border); border-radius: 4px; overflow-x: auto; font-size: 0.85rem;">${data.proof}</pre>
								</div>
							</details>
						</div>
					`;
				} else {
					resultDiv.innerHTML = '<p style="margin-top: 1rem;" class="error">No key found for this email address.</p>';
				}
			} catch (err) {
				resultDiv.innerHTML = '<p style="margin-top: 1rem;" class="error">Error looking up key.</p>';
			}
		});

		let params = new URLSearchParams(document.location.search);
		let emailParam = params.get("email")
		if (emailParam !== null) {
			document.getElementById('lookup-email').value = emailParam;
			document.getElementById('lookup-form').requestSubmit();
		}
	</script>
</body>
</html>