305 lines
10 KiB
TypeScript
305 lines
10 KiB
TypeScript
import { Layout } from "./Layout.tsx";
|
|
|
|
export const RegisterPage = (
|
|
{ initialCode = "" }: { initialCode?: string },
|
|
) => {
|
|
return (
|
|
<Layout title="Create Account">
|
|
<div>
|
|
<div class="brand-header">
|
|
<div class="brand-logo">
|
|
<svg
|
|
width="26"
|
|
height="26"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2.5"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
|
|
</svg>
|
|
</div>
|
|
<h1 id="registerTitle">Create Account</h1>
|
|
<p class="subtitle" id="registerSubtitle">
|
|
Enroll a biometric passkey using your invitation token.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Step 1: Registration Form */}
|
|
<div id="step1Container">
|
|
<div style="text-align: left; margin-bottom: 1.25rem;">
|
|
<label
|
|
for="username"
|
|
style="display: block; font-size: 0.875rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.4rem;"
|
|
>
|
|
Username
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="username"
|
|
autocomplete="username"
|
|
placeholder="e.g. pilot_alice"
|
|
required
|
|
autofocus={!initialCode}
|
|
/>
|
|
</div>
|
|
|
|
<div style="text-align: left; margin-bottom: 1.5rem;">
|
|
<label
|
|
for="inviteCode"
|
|
style="display: block; font-size: 0.875rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.4rem;"
|
|
>
|
|
Invite Code
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="inviteCode"
|
|
placeholder="Paste invite token..."
|
|
value={initialCode}
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
id="registerBtn"
|
|
class="btn-primary"
|
|
style="width: 100%; min-height: 50px; font-size: 1rem; border-radius: var(--radius-md); box-shadow: var(--shadow-sm);"
|
|
>
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<circle cx="7.5" cy="15.5" r="5.5"></circle>
|
|
<path d="m21 2-9.6 9.6"></path>
|
|
<path d="m15.5 7.5 3 3L22 7l-3-3"></path>
|
|
</svg>
|
|
<span>Register Device Passkey</span>
|
|
</button>
|
|
|
|
<div
|
|
id="loadingIndicator"
|
|
style="display: none; margin-top: 1.25rem; text-align: center; color: var(--primary); font-size: 0.9rem; font-weight: 500;"
|
|
>
|
|
<div style="display: inline-flex; align-items: center; gap: 0.5rem;">
|
|
<svg
|
|
style="animation: spin 1s linear infinite;"
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2.5"
|
|
>
|
|
<circle
|
|
cx="12"
|
|
cy="12"
|
|
r="10"
|
|
stroke-dasharray="32"
|
|
stroke-dashoffset="12"
|
|
>
|
|
</circle>
|
|
</svg>
|
|
<span>Follow prompt on your device sensor...</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="statusMessage"></div>
|
|
|
|
<div class="links">
|
|
Already registered? <a href="/login">Sign in</a>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Step 2: Emergency 12-Word Recovery Voucher */}
|
|
<div id="step2Container" style="display: none; text-align: left;">
|
|
<div style="background: var(--success-bg); border: 1px solid var(--success-border); padding: 1rem; border-radius: var(--radius-md); margin-bottom: 1.5rem;">
|
|
<div style="font-weight: 700; color: var(--success-text); margin-bottom: 0.25rem; display: flex; align-items: center; gap: 0.5rem;">
|
|
<svg
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<polyline points="20 6 9 17 4 12"></polyline>
|
|
</svg>
|
|
<span>Passkey Enrolled!</span>
|
|
</div>
|
|
<p style="margin: 0; font-size: 0.85rem; color: var(--success-text);">
|
|
Save your 12-word recovery voucher. If you ever lose this device,
|
|
these words allow you to restore access.
|
|
</p>
|
|
</div>
|
|
|
|
<label style="display: block; font-size: 0.875rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem;">
|
|
Your 12-Word Recovery Voucher
|
|
</label>
|
|
|
|
<div
|
|
id="wordGrid"
|
|
style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; background: var(--surface-muted); padding: 1rem; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); margin-bottom: 1rem;"
|
|
>
|
|
{/* Populated dynamically */}
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
id="copyWordsBtn"
|
|
class="btn-outline"
|
|
style="width: 100%; margin-bottom: 1.5rem;"
|
|
>
|
|
<svg
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
|
|
<path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2">
|
|
</path>
|
|
</svg>
|
|
<span>Copy All Words</span>
|
|
</button>
|
|
|
|
<a
|
|
href="/dashboard"
|
|
class="btn-primary"
|
|
style="width: 100%; min-height: 48px; text-decoration: none;"
|
|
>
|
|
Continue to Dashboard →
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
{`
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
.word-cell {
|
|
background: var(--surface-card);
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-sm);
|
|
padding: 0.35rem 0.65rem;
|
|
font-size: 0.85rem;
|
|
font-family: monospace;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
.word-num {
|
|
color: var(--text-muted);
|
|
font-size: 0.75rem;
|
|
width: 18px;
|
|
}
|
|
.word-text {
|
|
color: var(--text-primary);
|
|
font-weight: 600;
|
|
}
|
|
`}
|
|
</style>
|
|
|
|
<script src="/public/auth-client.js?v=6"></script>
|
|
<script
|
|
type="module"
|
|
dangerouslySetInnerHTML={{
|
|
__html: `
|
|
import { entropyToMnemonic } from '/public/ui/utils/bip39.ts';
|
|
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const codeParam = urlParams.get('code');
|
|
if (codeParam) {
|
|
const input = document.getElementById('inviteCode');
|
|
if (input) {
|
|
input.value = codeParam;
|
|
document.getElementById('username').focus();
|
|
}
|
|
}
|
|
|
|
let generatedMnemonic = "";
|
|
|
|
document.getElementById('registerBtn').addEventListener('click', async () => {
|
|
const username = document.getElementById('username').value.trim();
|
|
const inviteCode = document.getElementById('inviteCode').value.trim();
|
|
|
|
if (!username || !inviteCode) {
|
|
setStatus("Username and Invite Code are required.", true);
|
|
return;
|
|
}
|
|
|
|
const loader = document.getElementById('loadingIndicator');
|
|
const btn = document.getElementById('registerBtn');
|
|
loader.style.display = 'block';
|
|
btn.disabled = true;
|
|
setStatus('');
|
|
|
|
try {
|
|
const res = await startWebAuthnRegistration(username, inviteCode);
|
|
if (res && res.success) {
|
|
// Generate 16 bytes of entropy for 12 BIP-39 words
|
|
const entropy = new Uint8Array(16);
|
|
crypto.getRandomValues(entropy);
|
|
generatedMnemonic = await entropyToMnemonic(entropy);
|
|
|
|
const words = generatedMnemonic.split(' ');
|
|
const grid = document.getElementById('wordGrid');
|
|
grid.innerHTML = words.map((w, idx) => \`
|
|
<div class="word-cell">
|
|
<span class="word-num">\${idx + 1}.</span>
|
|
<span class="word-text">\${w}</span>
|
|
</div>
|
|
\`).join('');
|
|
|
|
// Switch to Step 2
|
|
document.getElementById('step1Container').style.display = 'none';
|
|
document.getElementById('step2Container').style.display = 'block';
|
|
document.getElementById('registerTitle').textContent = "Recovery Voucher";
|
|
document.getElementById('registerSubtitle').textContent = "Save your 12-word backup key in a safe place.";
|
|
}
|
|
} catch (err) {
|
|
console.error(err);
|
|
} finally {
|
|
loader.style.display = 'none';
|
|
btn.disabled = false;
|
|
}
|
|
});
|
|
|
|
document.getElementById('copyWordsBtn').addEventListener('click', async () => {
|
|
if (!generatedMnemonic) return;
|
|
try {
|
|
await navigator.clipboard.writeText(generatedMnemonic);
|
|
const btn = document.getElementById('copyWordsBtn');
|
|
const origHtml = btn.innerHTML;
|
|
btn.innerHTML = '<span>✓ Copied to Clipboard!</span>';
|
|
btn.style.borderColor = 'var(--success)';
|
|
btn.style.color = 'var(--success-text)';
|
|
setTimeout(() => {
|
|
btn.innerHTML = origHtml;
|
|
btn.style.borderColor = '';
|
|
btn.style.color = '';
|
|
}, 2500);
|
|
} catch (_e) {
|
|
alert("Select and copy the words manually: " + generatedMnemonic);
|
|
}
|
|
});
|
|
`,
|
|
}}
|
|
>
|
|
</script>
|
|
</Layout>
|
|
);
|
|
};
|