Rename: vault1984 → clavitor throughout (dirs, binaries, web assets, CSS)
This commit is contained in:
James
parent
5597bbc6b5
commit
4e5f8dd734
|
|
@ -1,17 +1,17 @@
|
|||
|
||||
## Styleguide
|
||||
|
||||
**vault1984.css** is the single global stylesheet for all clavitor web surfaces — marketing site (`clavitor-web`) and the app UI (`clavitor`).
|
||||
**clavitor.css** is the single global stylesheet for all clavitor web surfaces — marketing site (`clavitor-web`) and the app UI (`clavitor`).
|
||||
|
||||
- Live: https://clavitor.com/styleguide.html
|
||||
- Source: `clavitor-web/vault1984.css`
|
||||
- Source: `clavitor-web/clavitor.css`
|
||||
|
||||
### Rules (no exceptions)
|
||||
1. **One stylesheet.** `vault1984.css` only. No Tailwind, no inline styles, no `<style>` blocks.
|
||||
1. **One stylesheet.** `clavitor.css` only. No Tailwind, no inline styles, no `<style>` blocks.
|
||||
2. **One rule per class.** If you need a variant, add a modifier class (e.g. `.card.gold`), not a new inline style.
|
||||
3. **One width.** `--width: 1280px` via `.container`. Never hardcode a max-width anywhere else.
|
||||
4. **One padding.** `--pad: 2rem` via `.container`. Never hardcode horizontal padding.
|
||||
5. **CSS variables for everything.** Colors, spacing, radius, fonts — all via `var(--*)`.
|
||||
|
||||
### To use in clavitor app
|
||||
Copy or symlink `vault1984.css` into `clavitor/web/` and embed it. The token set (colors, fonts, radius) is shared — app UI should feel identical to the marketing site.
|
||||
Copy or symlink `clavitor.css` into `clavitor/web/` and embed it. The token set (colors, fonts, radius) is shared — app UI should feel identical to the marketing site.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,409 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Clavitor Design System — v0.1</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
/* ============================================
|
||||
CLAVITOR DESIGN SYSTEM — v0.1
|
||||
One file. No dependencies. Copy what you need.
|
||||
============================================ */
|
||||
|
||||
/* --- CSS Variables (Tokens) --- */
|
||||
:root {
|
||||
/* Brand */
|
||||
--brand-black: #0A0A0A;
|
||||
--brand-accent: #B45309;
|
||||
--brand-accent-light: #D97706;
|
||||
--brand-accent-dark: #92400E;
|
||||
|
||||
/* Core Colors — Light Mode */
|
||||
--bg-primary: #FFFFFF;
|
||||
--bg-secondary: #F5F5F5;
|
||||
--bg-tertiary: #E5E5E5;
|
||||
--bg-inverse: #0A0A0A;
|
||||
|
||||
--text-primary: #171717;
|
||||
--text-secondary: #525252;
|
||||
--text-tertiary: #737373;
|
||||
--text-inverse: #FFFFFF;
|
||||
|
||||
--border-default: #E5E5E5;
|
||||
--border-strong: #D4D4D4;
|
||||
|
||||
/* Semantic */
|
||||
--success: #16A34A;
|
||||
--warning: #CA8A04;
|
||||
--error: #DC2626;
|
||||
|
||||
/* Typography */
|
||||
--font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
|
||||
|
||||
/* Spacing (4px base) */
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-10: 40px;
|
||||
--space-12: 48px;
|
||||
--space-16: 64px;
|
||||
|
||||
/* Motion */
|
||||
--duration-fast: 100ms;
|
||||
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* --- Reset --- */
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
html {
|
||||
font-family: var(--font-family);
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-primary);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* --- Layout --- */
|
||||
.container { max-width: 1200px; margin: 0 auto; padding: 48px 24px; }
|
||||
.section { margin-bottom: 64px; }
|
||||
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
|
||||
.flex-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
|
||||
.flex-col { display: flex; flex-direction: column; gap: 12px; }
|
||||
|
||||
/* --- Typography --- */
|
||||
h1 { font-size: 48px; font-weight: 700; letter-spacing: -0.022em; line-height: 1; }
|
||||
h2 { font-size: 36px; font-weight: 600; letter-spacing: -0.022em; line-height: 1.1; }
|
||||
h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.019em; }
|
||||
h4 { font-size: 20px; font-weight: 500; }
|
||||
.text-sm { font-size: 14px; }
|
||||
.text-xs { font-size: 12px; }
|
||||
.text-secondary { color: var(--text-secondary); }
|
||||
.text-tertiary { color: var(--text-tertiary); }
|
||||
|
||||
/* Wordmark — spaced uppercase, infrastructure feel */
|
||||
.wordmark {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.4em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.wordmark-lg {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.35em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* --- Brand Block --- */
|
||||
.brand-block { display: flex; align-items: center; gap: 16px; margin: 32px 0; }
|
||||
.black-square { width: 64px; height: 64px; background: var(--brand-black); }
|
||||
|
||||
/* --- Colors --- */
|
||||
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; }
|
||||
.color-swatch { border-radius: 8px; overflow: hidden; border: 1px solid var(--border-default); }
|
||||
.color-block { height: 80px; }
|
||||
.color-label { padding: 12px; font-size: 12px; background: var(--bg-primary); }
|
||||
.color-label code { font-family: ui-monospace, monospace; background: var(--bg-secondary); padding: 2px 4px; border-radius: 4px; }
|
||||
|
||||
/* --- Buttons --- */
|
||||
.btn {
|
||||
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
|
||||
font-family: inherit; font-size: 16px; font-weight: 500;
|
||||
text-decoration: none; border: none; border-radius: 8px;
|
||||
cursor: pointer; transition: all 100ms ease;
|
||||
height: 40px; padding: 0 16px;
|
||||
}
|
||||
.btn:focus { outline: none; box-shadow: 0 0 0 2px white, 0 0 0 4px var(--brand-accent); }
|
||||
.btn-primary { background: var(--brand-black); color: white; }
|
||||
.btn-primary:hover { background: #262626; }
|
||||
.btn-secondary { background: transparent; color: var(--text-primary); border: 1px solid var(--border-strong); }
|
||||
.btn-secondary:hover { background: var(--bg-secondary); }
|
||||
.btn-accent { background: var(--brand-accent); color: white; }
|
||||
.btn-accent:hover { background: var(--brand-accent-light); }
|
||||
.btn-ghost { background: transparent; color: var(--text-primary); }
|
||||
.btn-ghost:hover { background: var(--bg-secondary); }
|
||||
.btn-sm { height: 32px; padding: 0 12px; font-size: 14px; }
|
||||
.btn-lg { height: 48px; padding: 0 20px; }
|
||||
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
|
||||
/* --- Inputs --- */
|
||||
.input-group { display: flex; flex-direction: column; gap: 8px; }
|
||||
.input-label { font-size: 14px; font-weight: 500; color: var(--text-primary); }
|
||||
.input {
|
||||
height: 40px; padding: 0 12px;
|
||||
font-family: inherit; font-size: 16px;
|
||||
color: var(--text-primary); background: var(--bg-primary);
|
||||
border: 1px solid var(--border-strong); border-radius: 8px;
|
||||
transition: all 100ms ease;
|
||||
}
|
||||
.input:hover { border-color: var(--text-tertiary); }
|
||||
.input:focus { outline: none; border-color: var(--brand-accent); box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.1); }
|
||||
.input::placeholder { color: var(--text-tertiary); }
|
||||
.input-error { border-color: var(--error); }
|
||||
.input-hint { font-size: 12px; color: var(--text-tertiary); }
|
||||
.input-error-text { font-size: 12px; color: var(--error); }
|
||||
|
||||
/* --- Cards --- */
|
||||
.card { background: var(--bg-secondary); border-radius: 12px; padding: 24px; }
|
||||
.card-flat { background: var(--bg-secondary); border: 1px solid var(--border-default); }
|
||||
.card-header { margin-bottom: 16px; }
|
||||
.card-title { font-size: 18px; font-weight: 600; }
|
||||
|
||||
/* --- Badges --- */
|
||||
.badge { display: inline-flex; align-items: center; height: 24px; padding: 0 12px; font-size: 12px; font-weight: 500; border-radius: 8px; }
|
||||
.badge-default { background: var(--bg-tertiary); color: var(--text-secondary); }
|
||||
.badge-primary { background: var(--brand-black); color: white; }
|
||||
.badge-accent { background: var(--brand-accent); color: white; }
|
||||
.badge-success { background: rgba(22, 163, 74, 0.1); color: var(--success); }
|
||||
.badge-warning { background: rgba(202, 138, 4, 0.1); color: var(--warning); }
|
||||
.badge-error { background: rgba(220, 38, 38, 0.1); color: var(--error); }
|
||||
|
||||
/* --- Alerts --- */
|
||||
.alert { display: flex; gap: 12px; padding: 16px; border-radius: 12px; border-left: 3px solid; }
|
||||
.alert-accent { background: rgba(180, 83, 9, 0.05); border-left-color: var(--brand-accent); }
|
||||
.alert-success { background: rgba(22, 163, 74, 0.05); border-left-color: var(--success); }
|
||||
.alert-error { background: rgba(220, 38, 38, 0.05); border-left-color: var(--error); }
|
||||
|
||||
/* --- Tables --- */
|
||||
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
|
||||
.table th { text-align: left; padding: 12px 16px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); background: var(--bg-secondary); border-bottom: 1px solid var(--border-default); }
|
||||
.table td { padding: 12px 16px; border-bottom: 1px solid var(--border-default); }
|
||||
.table tr:hover td { background: var(--bg-secondary); }
|
||||
|
||||
/* --- Code --- */
|
||||
.code-block { background: var(--bg-inverse); color: var(--text-inverse); font-family: ui-monospace, monospace; font-size: 14px; line-height: 1.6; padding: 16px; border-radius: 12px; overflow-x: auto; }
|
||||
.code-block .prompt { color: var(--brand-accent); }
|
||||
code { font-family: ui-monospace, monospace; font-size: 0.9em; background: var(--bg-secondary); padding: 2px 6px; border-radius: 4px; color: var(--brand-accent); }
|
||||
|
||||
/* --- Spacing --- */
|
||||
.spacing-demo { display: flex; flex-direction: column; gap: 16px; }
|
||||
.spacing-row { display: flex; align-items: center; gap: 16px; }
|
||||
.spacing-box { background: var(--brand-accent); height: 24px; }
|
||||
|
||||
/* --- Section Title --- */
|
||||
.section-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-tertiary); margin-bottom: 24px; padding-bottom: 12px; border-bottom: 1px solid var(--border-default); }
|
||||
|
||||
/* --- Checkbox --- */
|
||||
.checkbox { display: flex; align-items: center; gap: 12px; cursor: pointer; }
|
||||
.checkbox-input { width: 20px; height: 20px; border: 2px solid var(--border-strong); border-radius: 4px; appearance: none; cursor: pointer; transition: all 100ms ease; }
|
||||
.checkbox-input:checked { background: var(--brand-accent); border-color: var(--brand-accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E"); }
|
||||
|
||||
/* --- Toggle --- */
|
||||
.toggle { width: 44px; height: 24px; background: var(--bg-tertiary); border-radius: 9999px; position: relative; cursor: pointer; transition: background 200ms ease; }
|
||||
.toggle::after { content: ''; position: absolute; width: 20px; height: 20px; background: white; border-radius: 9999px; top: 2px; left: 2px; transition: transform 200ms ease; }
|
||||
.toggle.on { background: var(--brand-accent); }
|
||||
.toggle.on::after { transform: translateX(20px); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="section">
|
||||
<div class="brand-block">
|
||||
<div class="black-square"></div>
|
||||
<div>
|
||||
<h1>Clavitor</h1>
|
||||
<p class="text-secondary">Design System v0.1</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="wordmark-lg" style="margin-top: 24px; color: var(--brand-accent);">CLAVITOR</p>
|
||||
<p class="text-secondary" style="max-width: 600px; margin-top: 12px;">
|
||||
A black box vault for AI infrastructure. One file. No dependencies.
|
||||
Copy the CSS variables and classes you need.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Brand Colors -->
|
||||
<div class="section">
|
||||
<div class="section-title">Brand Colors</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-block" style="background: var(--brand-black);"></div><div class="color-label"><strong>Black Square</strong><br><code>--brand-black</code><br>#0A0A0A</div></div>
|
||||
<div class="color-swatch"><div class="color-block" style="background: var(--brand-accent);"></div><div class="color-label"><strong>Accent</strong><br><code>--brand-accent</code><br>#B45309</div></div>
|
||||
<div class="color-swatch"><div class="color-block" style="background: var(--brand-accent-light);"></div><div class="color-label"><strong>Accent Light</strong><br><code>--brand-accent-light</code><br>#D97706</div></div>
|
||||
<div class="color-swatch"><div class="color-block" style="background: var(--brand-accent-dark);"></div><div class="color-label"><strong>Accent Dark</strong><br><code>--brand-accent-dark</code><br>#92400E</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Typography -->
|
||||
<div class="section">
|
||||
<div class="section-title">Typography — Plus Jakarta Sans</div>
|
||||
<div class="flex-col">
|
||||
<div><span class="text-tertiary text-xs" style="display:inline-block;width:100px;">wordmark</span><span class="wordmark-lg">CLAVITOR</span></div>
|
||||
<div><span class="text-tertiary text-xs" style="display:inline-block;width:100px;">48px</span><span style="font-size:48px;font-weight:700;">Heading 48</span></div>
|
||||
<div><span class="text-tertiary text-xs" style="display:inline-block;width:100px;">36px</span><span style="font-size:36px;font-weight:600;">Heading 36</span></div>
|
||||
<div><span class="text-tertiary text-xs" style="display:inline-block;width:100px;">24px</span><span style="font-size:24px;font-weight:600;">Heading 24</span></div>
|
||||
<div><span class="text-tertiary text-xs" style="display:inline-block;width:100px;">18px</span><span style="font-size:18px;">Body large 18</span></div>
|
||||
<div><span class="text-tertiary text-xs" style="display:inline-block;width:100px;">16px</span><span style="font-size:16px;">Body 16 — The quick brown fox jumps</span></div>
|
||||
<div><span class="text-tertiary text-xs" style="display:inline-block;width:100px;">14px</span><span style="font-size:14px;">Small 14 — The quick brown fox jumps</span></div>
|
||||
<div><span class="text-tertiary text-xs" style="display:inline-block;width:100px;">12px</span><span style="font-size:12px;">Tiny 12 — The quick brown fox</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Spacing -->
|
||||
<div class="section">
|
||||
<div class="section-title">Spacing Scale (4px base)</div>
|
||||
<div class="spacing-demo">
|
||||
<div class="spacing-row"><span class="text-xs text-tertiary" style="width:60px;">4px</span><div class="spacing-box" style="width:4px;"></div></div>
|
||||
<div class="spacing-row"><span class="text-xs text-tertiary" style="width:60px;">8px</span><div class="spacing-box" style="width:8px;"></div></div>
|
||||
<div class="spacing-row"><span class="text-xs text-tertiary" style="width:60px;">16px</span><div class="spacing-box" style="width:16px;"></div></div>
|
||||
<div class="spacing-row"><span class="text-xs text-tertiary" style="width:60px;">24px</span><div class="spacing-box" style="width:24px;"></div></div>
|
||||
<div class="spacing-row"><span class="text-xs text-tertiary" style="width:60px;">32px</span><div class="spacing-box" style="width:32px;"></div></div>
|
||||
<div class="spacing-row"><span class="text-xs text-tertiary" style="width:60px;">48px</span><div class="spacing-box" style="width:48px;"></div></div>
|
||||
<div class="spacing-row"><span class="text-xs text-tertiary" style="width:60px;">64px</span><div class="spacing-box" style="width:64px;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Buttons -->
|
||||
<div class="section">
|
||||
<div class="section-title">Buttons</div>
|
||||
<h4 style="margin-bottom:16px;">Variants</h4>
|
||||
<div class="flex-row" style="margin-bottom:24px;">
|
||||
<button class="btn btn-primary">Primary</button>
|
||||
<button class="btn btn-secondary">Secondary</button>
|
||||
<button class="btn btn-accent">Accent</button>
|
||||
<button class="btn btn-ghost">Ghost</button>
|
||||
<button class="btn btn-primary" disabled>Disabled</button>
|
||||
</div>
|
||||
<h4 style="margin-bottom:16px;">Sizes</h4>
|
||||
<div class="flex-row">
|
||||
<button class="btn btn-primary btn-sm">Small</button>
|
||||
<button class="btn btn-primary">Medium</button>
|
||||
<button class="btn btn-primary btn-lg">Large</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Inputs -->
|
||||
<div class="section">
|
||||
<div class="section-title">Inputs</div>
|
||||
<div class="grid-2">
|
||||
<div class="input-group">
|
||||
<label class="input-label">Default</label>
|
||||
<input type="text" class="input" placeholder="Enter text...">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label class="input-label">With Hint</label>
|
||||
<input type="text" class="input" value="user@example.com">
|
||||
<span class="input-hint">We'll never share your email.</span>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label class="input-label">Error State</label>
|
||||
<input type="text" class="input input-error" value="invalid@email">
|
||||
<span class="input-error-text">Please enter a valid email address.</span>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label class="input-label">Disabled</label>
|
||||
<input type="text" class="input" value="Cannot edit" disabled>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cards -->
|
||||
<div class="section">
|
||||
<div class="section-title">Cards</div>
|
||||
<div class="grid-2">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">Credential Entry</div>
|
||||
<p class="text-sm text-secondary">Last modified 2 hours ago</p>
|
||||
</div>
|
||||
<p class="text-secondary">Password for production database. Private fields encrypted with your biometric.</p>
|
||||
<div class="flex-row" style="margin-top:16px;">
|
||||
<span class="badge badge-accent">Private</span>
|
||||
<span class="badge badge-default">Database</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-flat">
|
||||
<div class="card-header">
|
||||
<div class="card-title">API Key</div>
|
||||
<p class="text-sm text-secondary">Never expires</p>
|
||||
</div>
|
||||
<p class="text-secondary">Production API key for CI/CD pipelines. Rotate every 90 days.</p>
|
||||
<div class="flex-row" style="margin-top:16px;">
|
||||
<span class="badge badge-primary">Active</span>
|
||||
<span class="badge badge-default">API</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Badges -->
|
||||
<div class="section">
|
||||
<div class="section-title">Badges</div>
|
||||
<div class="flex-row">
|
||||
<span class="badge badge-default">Default</span>
|
||||
<span class="badge badge-primary">Primary</span>
|
||||
<span class="badge badge-accent">Accent</span>
|
||||
<span class="badge badge-success">Success</span>
|
||||
<span class="badge badge-warning">Warning</span>
|
||||
<span class="badge badge-error">Error</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alerts -->
|
||||
<div class="section">
|
||||
<div class="section-title">Alerts</div>
|
||||
<div class="flex-col">
|
||||
<div class="alert alert-accent">
|
||||
<strong>Info:</strong> Your vault is end-to-end encrypted. We cannot access your data.
|
||||
</div>
|
||||
<div class="alert alert-success">
|
||||
<strong>Success:</strong> Credential rotated successfully. API key updated.
|
||||
</div>
|
||||
<div class="alert alert-error">
|
||||
<strong>Error:</strong> Failed to connect to vault. Check your network connection.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tables -->
|
||||
<div class="section">
|
||||
<div class="section-title">Tables</div>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Status</th><th>Last Used</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Production DB</td><td>Password</td><td><span class="badge badge-success">Active</span></td><td>2 min ago</td></tr>
|
||||
<tr><td>AWS API Key</td><td>API Key</td><td><span class="badge badge-warning">Expiring</span></td><td>1 hour ago</td></tr>
|
||||
<tr><td>GitHub SSH</td><td>SSH Key</td><td><span class="badge badge-success">Active</span></td><td>3 days ago</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Code Block -->
|
||||
<div class="section">
|
||||
<div class="section-title">Code / Terminal</div>
|
||||
<div class="code-block">
|
||||
<span style="color:var(--brand-accent);">$</span> clavitor search github<br>
|
||||
<span style="color:#A3A3A3;">Found 3 credentials:</span><br>
|
||||
<span style="color:#A3A3A3;"> • github-personal (SSH key)</span><br>
|
||||
<span style="color:#A3A3A3;"> • github-work (Token)</span><br>
|
||||
<span style="color:#A3A3A3;"> • github-actions (API key)</span>
|
||||
</div>
|
||||
<p style="margin-top:16px;">Inline code looks like <code>--brand-accent</code> or <code>get_credential()</code></p>
|
||||
</div>
|
||||
|
||||
<!-- Form Elements -->
|
||||
<div class="section">
|
||||
<div class="section-title">Form Elements</div>
|
||||
<div class="flex-row">
|
||||
<label class="checkbox"><input type="checkbox" class="checkbox-input" checked> Enable 2FA</label>
|
||||
<label class="checkbox"><input type="checkbox" class="checkbox-input"> Share with team</label>
|
||||
<div class="toggle on"></div>
|
||||
<div class="toggle"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -9,7 +9,7 @@ export GOFIPS140 := latest
|
|||
build:
|
||||
rm -f $(BINARY)
|
||||
/usr/local/go/bin/go clean -cache
|
||||
GOFIPS140=latest /usr/local/go/bin/go build -o $(BINARY) ./cmd/vault1984
|
||||
GOFIPS140=latest /usr/local/go/bin/go build -o $(BINARY) ./cmd/clavitor
|
||||
|
||||
deploy: build
|
||||
scp $(BINARY) $(REMOTE):/tmp/$(BINARY)-new
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/vault1984.css">
|
||||
<link rel="stylesheet" href="/clavitor.css">
|
||||
{{if eq .Page "install"}}{{template "install-head"}}{{end}}
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
<div class="nav-inner">
|
||||
<a href="/" class="nav-logo">clav<span class="n">itor</span></a>
|
||||
<div class="nav-links">
|
||||
<a href="https://github.com/johanjongsma/vault1984" target="_blank" rel="noopener" class="nav-link">GitHub</a>
|
||||
<a href="https://github.com/johanjongsma/clavitor" target="_blank" rel="noopener" class="nav-link">GitHub</a>
|
||||
<a href="/hosted" class="nav-link{{if eq .ActiveNav "hosted"}} active{{end}}">Hosted</a>
|
||||
<a href="/pricing" class="nav-link{{if eq .ActiveNav "pricing"}} active{{end}}">Pricing</a>
|
||||
<a href="/install" class="nav-link{{if eq .ActiveNav "install"}} active{{end}}">Self-host</a>
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<div class="footer-inner">
|
||||
<div class="footer-links">
|
||||
<a href="/" class="vaultname" style="color:var(--text)">clav<span class="n">itor</span></a>
|
||||
<a href="https://github.com/johanjongsma/vault1984" target="_blank" rel="noopener">GitHub</a>
|
||||
<a href="https://github.com/johanjongsma/clavitor" target="_blank" rel="noopener">GitHub</a>
|
||||
<a href="#">Discord</a>
|
||||
<a href="#">X</a>
|
||||
</div>
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="vault1984-app.css">
|
||||
<link rel="stylesheet" href="clavitor-app.css">
|
||||
<script src="/app/crypto.js"></script>
|
||||
<script src="/app/webauthn.js"></script>
|
||||
</head>
|
||||
|
|
@ -208,11 +208,11 @@
|
|||
}
|
||||
|
||||
// L2 key from active PRF session — needed to generate the token
|
||||
var l2Key = Vault1984WebAuthn.getL2Key();
|
||||
var l2Key = ClavitorWebAuthn.getL2Key();
|
||||
if (!l2Key) {
|
||||
try {
|
||||
await Vault1984WebAuthn.unlock();
|
||||
l2Key = Vault1984WebAuthn.getL2Key();
|
||||
await ClavitorWebAuthn.unlock();
|
||||
l2Key = ClavitorWebAuthn.getL2Key();
|
||||
} catch(e) {
|
||||
toast('Unlock required to generate agent token', 'error');
|
||||
return;
|
||||
|
|
@ -231,11 +231,11 @@
|
|||
payload[hostBytes.length + 1 + nameBytes.length] = 0;
|
||||
payload.set(l2Key, hostBytes.length + 1 + nameBytes.length + 1);
|
||||
|
||||
// Encrypt with key derived from 'vault1984-l2-'
|
||||
var seed = enc.encode('vault1984-l2-');
|
||||
var encKey = await vault1984.crypto.hkdf_sha256(seed, null, enc.encode('token'), 16);
|
||||
var encrypted = await vault1984.crypto.aes_gcm_encrypt(encKey, payload);
|
||||
lastToken = vault1984.crypto.uint8_to_base64(encrypted)
|
||||
// Encrypt with key derived from 'clavitor-l2-'
|
||||
var seed = enc.encode('clavitor-l2-');
|
||||
var encKey = await clavitor.crypto.hkdf_sha256(seed, null, enc.encode('token'), 16);
|
||||
var encrypted = await clavitor.crypto.aes_gcm_encrypt(encKey, payload);
|
||||
lastToken = clavitor.crypto.uint8_to_base64(encrypted)
|
||||
.replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
|
||||
|
||||
document.getElementById('newAgentToken').textContent = lastToken;
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
/* ============================================================
|
||||
clavitor — app stylesheet
|
||||
Design tokens from vault1984.css (website styleguide).
|
||||
Design tokens from clavitor.css (website styleguide).
|
||||
App-specific component classes below.
|
||||
============================================================ */
|
||||
|
||||
|
|
@ -147,7 +147,7 @@ function normalize_key(key) {
|
|||
}
|
||||
|
||||
function encrypt_field(key, field_label, plaintext) {
|
||||
var info_str = 'vault1984-field-' + field_label;
|
||||
var info_str = 'clavitor-field-' + field_label;
|
||||
var nkey = normalize_key(key);
|
||||
var aes_len = nkey.length; /* 16 or 32 */
|
||||
|
||||
|
|
@ -177,7 +177,7 @@ function encrypt_field(key, field_label, plaintext) {
|
|||
* @returns {string|Promise<string>} plaintext
|
||||
*/
|
||||
function decrypt_field(key, field_label, ciphertext_b64) {
|
||||
var info_str = 'vault1984-field-' + field_label;
|
||||
var info_str = 'clavitor-field-' + field_label;
|
||||
var nkey = normalize_key(key);
|
||||
var aes_len = nkey.length;
|
||||
|
||||
|
|
@ -205,8 +205,8 @@ function l2_encrypt_field(key, entry_id, label, pt) { return encrypt_field(key,
|
|||
function l2_decrypt_field(key, entry_id, label, ct) { return decrypt_field(key, label, ct); }
|
||||
|
||||
/* Export for both environments */
|
||||
if (typeof globalThis.vault1984 === 'undefined') globalThis.vault1984 = {};
|
||||
globalThis.vault1984.crypto = {
|
||||
if (typeof globalThis.clavitor === 'undefined') globalThis.clavitor = {};
|
||||
globalThis.clavitor.crypto = {
|
||||
aes_gcm_encrypt: aes_gcm_encrypt,
|
||||
aes_gcm_decrypt: aes_gcm_decrypt,
|
||||
hkdf_sha256: hkdf_sha256,
|
||||
|
|
@ -0,0 +1,409 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Clavitor Design System — v0.1</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
/* ============================================
|
||||
CLAVITOR DESIGN SYSTEM — v0.1
|
||||
One file. No dependencies. Copy what you need.
|
||||
============================================ */
|
||||
|
||||
/* --- CSS Variables (Tokens) --- */
|
||||
:root {
|
||||
/* Brand */
|
||||
--brand-black: #0A0A0A;
|
||||
--brand-accent: #B45309;
|
||||
--brand-accent-light: #D97706;
|
||||
--brand-accent-dark: #92400E;
|
||||
|
||||
/* Core Colors — Light Mode */
|
||||
--bg-primary: #FFFFFF;
|
||||
--bg-secondary: #F5F5F5;
|
||||
--bg-tertiary: #E5E5E5;
|
||||
--bg-inverse: #0A0A0A;
|
||||
|
||||
--text-primary: #171717;
|
||||
--text-secondary: #525252;
|
||||
--text-tertiary: #737373;
|
||||
--text-inverse: #FFFFFF;
|
||||
|
||||
--border-default: #E5E5E5;
|
||||
--border-strong: #D4D4D4;
|
||||
|
||||
/* Semantic */
|
||||
--success: #16A34A;
|
||||
--warning: #CA8A04;
|
||||
--error: #DC2626;
|
||||
|
||||
/* Typography */
|
||||
--font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
|
||||
|
||||
/* Spacing (4px base) */
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-10: 40px;
|
||||
--space-12: 48px;
|
||||
--space-16: 64px;
|
||||
|
||||
/* Motion */
|
||||
--duration-fast: 100ms;
|
||||
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* --- Reset --- */
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
html {
|
||||
font-family: var(--font-family);
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-primary);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* --- Layout --- */
|
||||
.container { max-width: 1200px; margin: 0 auto; padding: 48px 24px; }
|
||||
.section { margin-bottom: 64px; }
|
||||
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
|
||||
.flex-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
|
||||
.flex-col { display: flex; flex-direction: column; gap: 12px; }
|
||||
|
||||
/* --- Typography --- */
|
||||
h1 { font-size: 48px; font-weight: 700; letter-spacing: -0.022em; line-height: 1; }
|
||||
h2 { font-size: 36px; font-weight: 600; letter-spacing: -0.022em; line-height: 1.1; }
|
||||
h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.019em; }
|
||||
h4 { font-size: 20px; font-weight: 500; }
|
||||
.text-sm { font-size: 14px; }
|
||||
.text-xs { font-size: 12px; }
|
||||
.text-secondary { color: var(--text-secondary); }
|
||||
.text-tertiary { color: var(--text-tertiary); }
|
||||
|
||||
/* Wordmark — spaced uppercase, infrastructure feel */
|
||||
.wordmark {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.4em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.wordmark-lg {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.35em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* --- Brand Block --- */
|
||||
.brand-block { display: flex; align-items: center; gap: 16px; margin: 32px 0; }
|
||||
.black-square { width: 64px; height: 64px; background: var(--brand-black); }
|
||||
|
||||
/* --- Colors --- */
|
||||
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; }
|
||||
.color-swatch { border-radius: 8px; overflow: hidden; border: 1px solid var(--border-default); }
|
||||
.color-block { height: 80px; }
|
||||
.color-label { padding: 12px; font-size: 12px; background: var(--bg-primary); }
|
||||
.color-label code { font-family: ui-monospace, monospace; background: var(--bg-secondary); padding: 2px 4px; border-radius: 4px; }
|
||||
|
||||
/* --- Buttons --- */
|
||||
.btn {
|
||||
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
|
||||
font-family: inherit; font-size: 16px; font-weight: 500;
|
||||
text-decoration: none; border: none; border-radius: 8px;
|
||||
cursor: pointer; transition: all 100ms ease;
|
||||
height: 40px; padding: 0 16px;
|
||||
}
|
||||
.btn:focus { outline: none; box-shadow: 0 0 0 2px white, 0 0 0 4px var(--brand-accent); }
|
||||
.btn-primary { background: var(--brand-black); color: white; }
|
||||
.btn-primary:hover { background: #262626; }
|
||||
.btn-secondary { background: transparent; color: var(--text-primary); border: 1px solid var(--border-strong); }
|
||||
.btn-secondary:hover { background: var(--bg-secondary); }
|
||||
.btn-accent { background: var(--brand-accent); color: white; }
|
||||
.btn-accent:hover { background: var(--brand-accent-light); }
|
||||
.btn-ghost { background: transparent; color: var(--text-primary); }
|
||||
.btn-ghost:hover { background: var(--bg-secondary); }
|
||||
.btn-sm { height: 32px; padding: 0 12px; font-size: 14px; }
|
||||
.btn-lg { height: 48px; padding: 0 20px; }
|
||||
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
|
||||
/* --- Inputs --- */
|
||||
.input-group { display: flex; flex-direction: column; gap: 8px; }
|
||||
.input-label { font-size: 14px; font-weight: 500; color: var(--text-primary); }
|
||||
.input {
|
||||
height: 40px; padding: 0 12px;
|
||||
font-family: inherit; font-size: 16px;
|
||||
color: var(--text-primary); background: var(--bg-primary);
|
||||
border: 1px solid var(--border-strong); border-radius: 8px;
|
||||
transition: all 100ms ease;
|
||||
}
|
||||
.input:hover { border-color: var(--text-tertiary); }
|
||||
.input:focus { outline: none; border-color: var(--brand-accent); box-shadow: 0 0 0 3px rgba(180, 83, 9, 0.1); }
|
||||
.input::placeholder { color: var(--text-tertiary); }
|
||||
.input-error { border-color: var(--error); }
|
||||
.input-hint { font-size: 12px; color: var(--text-tertiary); }
|
||||
.input-error-text { font-size: 12px; color: var(--error); }
|
||||
|
||||
/* --- Cards --- */
|
||||
.card { background: var(--bg-secondary); border-radius: 12px; padding: 24px; }
|
||||
.card-flat { background: var(--bg-secondary); border: 1px solid var(--border-default); }
|
||||
.card-header { margin-bottom: 16px; }
|
||||
.card-title { font-size: 18px; font-weight: 600; }
|
||||
|
||||
/* --- Badges --- */
|
||||
.badge { display: inline-flex; align-items: center; height: 24px; padding: 0 12px; font-size: 12px; font-weight: 500; border-radius: 8px; }
|
||||
.badge-default { background: var(--bg-tertiary); color: var(--text-secondary); }
|
||||
.badge-primary { background: var(--brand-black); color: white; }
|
||||
.badge-accent { background: var(--brand-accent); color: white; }
|
||||
.badge-success { background: rgba(22, 163, 74, 0.1); color: var(--success); }
|
||||
.badge-warning { background: rgba(202, 138, 4, 0.1); color: var(--warning); }
|
||||
.badge-error { background: rgba(220, 38, 38, 0.1); color: var(--error); }
|
||||
|
||||
/* --- Alerts --- */
|
||||
.alert { display: flex; gap: 12px; padding: 16px; border-radius: 12px; border-left: 3px solid; }
|
||||
.alert-accent { background: rgba(180, 83, 9, 0.05); border-left-color: var(--brand-accent); }
|
||||
.alert-success { background: rgba(22, 163, 74, 0.05); border-left-color: var(--success); }
|
||||
.alert-error { background: rgba(220, 38, 38, 0.05); border-left-color: var(--error); }
|
||||
|
||||
/* --- Tables --- */
|
||||
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
|
||||
.table th { text-align: left; padding: 12px 16px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); background: var(--bg-secondary); border-bottom: 1px solid var(--border-default); }
|
||||
.table td { padding: 12px 16px; border-bottom: 1px solid var(--border-default); }
|
||||
.table tr:hover td { background: var(--bg-secondary); }
|
||||
|
||||
/* --- Code --- */
|
||||
.code-block { background: var(--bg-inverse); color: var(--text-inverse); font-family: ui-monospace, monospace; font-size: 14px; line-height: 1.6; padding: 16px; border-radius: 12px; overflow-x: auto; }
|
||||
.code-block .prompt { color: var(--brand-accent); }
|
||||
code { font-family: ui-monospace, monospace; font-size: 0.9em; background: var(--bg-secondary); padding: 2px 6px; border-radius: 4px; color: var(--brand-accent); }
|
||||
|
||||
/* --- Spacing --- */
|
||||
.spacing-demo { display: flex; flex-direction: column; gap: 16px; }
|
||||
.spacing-row { display: flex; align-items: center; gap: 16px; }
|
||||
.spacing-box { background: var(--brand-accent); height: 24px; }
|
||||
|
||||
/* --- Section Title --- */
|
||||
.section-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-tertiary); margin-bottom: 24px; padding-bottom: 12px; border-bottom: 1px solid var(--border-default); }
|
||||
|
||||
/* --- Checkbox --- */
|
||||
.checkbox { display: flex; align-items: center; gap: 12px; cursor: pointer; }
|
||||
.checkbox-input { width: 20px; height: 20px; border: 2px solid var(--border-strong); border-radius: 4px; appearance: none; cursor: pointer; transition: all 100ms ease; }
|
||||
.checkbox-input:checked { background: var(--brand-accent); border-color: var(--brand-accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E"); }
|
||||
|
||||
/* --- Toggle --- */
|
||||
.toggle { width: 44px; height: 24px; background: var(--bg-tertiary); border-radius: 9999px; position: relative; cursor: pointer; transition: background 200ms ease; }
|
||||
.toggle::after { content: ''; position: absolute; width: 20px; height: 20px; background: white; border-radius: 9999px; top: 2px; left: 2px; transition: transform 200ms ease; }
|
||||
.toggle.on { background: var(--brand-accent); }
|
||||
.toggle.on::after { transform: translateX(20px); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="section">
|
||||
<div class="brand-block">
|
||||
<div class="black-square"></div>
|
||||
<div>
|
||||
<h1>Clavitor</h1>
|
||||
<p class="text-secondary">Design System v0.1</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="wordmark-lg" style="margin-top: 24px; color: var(--brand-accent);">CLAVITOR</p>
|
||||
<p class="text-secondary" style="max-width: 600px; margin-top: 12px;">
|
||||
A black box vault for AI infrastructure. One file. No dependencies.
|
||||
Copy the CSS variables and classes you need.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Brand Colors -->
|
||||
<div class="section">
|
||||
<div class="section-title">Brand Colors</div>
|
||||
<div class="color-grid">
|
||||
<div class="color-swatch"><div class="color-block" style="background: var(--brand-black);"></div><div class="color-label"><strong>Black Square</strong><br><code>--brand-black</code><br>#0A0A0A</div></div>
|
||||
<div class="color-swatch"><div class="color-block" style="background: var(--brand-accent);"></div><div class="color-label"><strong>Accent</strong><br><code>--brand-accent</code><br>#B45309</div></div>
|
||||
<div class="color-swatch"><div class="color-block" style="background: var(--brand-accent-light);"></div><div class="color-label"><strong>Accent Light</strong><br><code>--brand-accent-light</code><br>#D97706</div></div>
|
||||
<div class="color-swatch"><div class="color-block" style="background: var(--brand-accent-dark);"></div><div class="color-label"><strong>Accent Dark</strong><br><code>--brand-accent-dark</code><br>#92400E</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Typography -->
|
||||
<div class="section">
|
||||
<div class="section-title">Typography — Plus Jakarta Sans</div>
|
||||
<div class="flex-col">
|
||||
<div><span class="text-tertiary text-xs" style="display:inline-block;width:100px;">wordmark</span><span class="wordmark-lg">CLAVITOR</span></div>
|
||||
<div><span class="text-tertiary text-xs" style="display:inline-block;width:100px;">48px</span><span style="font-size:48px;font-weight:700;">Heading 48</span></div>
|
||||
<div><span class="text-tertiary text-xs" style="display:inline-block;width:100px;">36px</span><span style="font-size:36px;font-weight:600;">Heading 36</span></div>
|
||||
<div><span class="text-tertiary text-xs" style="display:inline-block;width:100px;">24px</span><span style="font-size:24px;font-weight:600;">Heading 24</span></div>
|
||||
<div><span class="text-tertiary text-xs" style="display:inline-block;width:100px;">18px</span><span style="font-size:18px;">Body large 18</span></div>
|
||||
<div><span class="text-tertiary text-xs" style="display:inline-block;width:100px;">16px</span><span style="font-size:16px;">Body 16 — The quick brown fox jumps</span></div>
|
||||
<div><span class="text-tertiary text-xs" style="display:inline-block;width:100px;">14px</span><span style="font-size:14px;">Small 14 — The quick brown fox jumps</span></div>
|
||||
<div><span class="text-tertiary text-xs" style="display:inline-block;width:100px;">12px</span><span style="font-size:12px;">Tiny 12 — The quick brown fox</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Spacing -->
|
||||
<div class="section">
|
||||
<div class="section-title">Spacing Scale (4px base)</div>
|
||||
<div class="spacing-demo">
|
||||
<div class="spacing-row"><span class="text-xs text-tertiary" style="width:60px;">4px</span><div class="spacing-box" style="width:4px;"></div></div>
|
||||
<div class="spacing-row"><span class="text-xs text-tertiary" style="width:60px;">8px</span><div class="spacing-box" style="width:8px;"></div></div>
|
||||
<div class="spacing-row"><span class="text-xs text-tertiary" style="width:60px;">16px</span><div class="spacing-box" style="width:16px;"></div></div>
|
||||
<div class="spacing-row"><span class="text-xs text-tertiary" style="width:60px;">24px</span><div class="spacing-box" style="width:24px;"></div></div>
|
||||
<div class="spacing-row"><span class="text-xs text-tertiary" style="width:60px;">32px</span><div class="spacing-box" style="width:32px;"></div></div>
|
||||
<div class="spacing-row"><span class="text-xs text-tertiary" style="width:60px;">48px</span><div class="spacing-box" style="width:48px;"></div></div>
|
||||
<div class="spacing-row"><span class="text-xs text-tertiary" style="width:60px;">64px</span><div class="spacing-box" style="width:64px;"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Buttons -->
|
||||
<div class="section">
|
||||
<div class="section-title">Buttons</div>
|
||||
<h4 style="margin-bottom:16px;">Variants</h4>
|
||||
<div class="flex-row" style="margin-bottom:24px;">
|
||||
<button class="btn btn-primary">Primary</button>
|
||||
<button class="btn btn-secondary">Secondary</button>
|
||||
<button class="btn btn-accent">Accent</button>
|
||||
<button class="btn btn-ghost">Ghost</button>
|
||||
<button class="btn btn-primary" disabled>Disabled</button>
|
||||
</div>
|
||||
<h4 style="margin-bottom:16px;">Sizes</h4>
|
||||
<div class="flex-row">
|
||||
<button class="btn btn-primary btn-sm">Small</button>
|
||||
<button class="btn btn-primary">Medium</button>
|
||||
<button class="btn btn-primary btn-lg">Large</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Inputs -->
|
||||
<div class="section">
|
||||
<div class="section-title">Inputs</div>
|
||||
<div class="grid-2">
|
||||
<div class="input-group">
|
||||
<label class="input-label">Default</label>
|
||||
<input type="text" class="input" placeholder="Enter text...">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label class="input-label">With Hint</label>
|
||||
<input type="text" class="input" value="user@example.com">
|
||||
<span class="input-hint">We'll never share your email.</span>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label class="input-label">Error State</label>
|
||||
<input type="text" class="input input-error" value="invalid@email">
|
||||
<span class="input-error-text">Please enter a valid email address.</span>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label class="input-label">Disabled</label>
|
||||
<input type="text" class="input" value="Cannot edit" disabled>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cards -->
|
||||
<div class="section">
|
||||
<div class="section-title">Cards</div>
|
||||
<div class="grid-2">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">Credential Entry</div>
|
||||
<p class="text-sm text-secondary">Last modified 2 hours ago</p>
|
||||
</div>
|
||||
<p class="text-secondary">Password for production database. Private fields encrypted with your biometric.</p>
|
||||
<div class="flex-row" style="margin-top:16px;">
|
||||
<span class="badge badge-accent">Private</span>
|
||||
<span class="badge badge-default">Database</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-flat">
|
||||
<div class="card-header">
|
||||
<div class="card-title">API Key</div>
|
||||
<p class="text-sm text-secondary">Never expires</p>
|
||||
</div>
|
||||
<p class="text-secondary">Production API key for CI/CD pipelines. Rotate every 90 days.</p>
|
||||
<div class="flex-row" style="margin-top:16px;">
|
||||
<span class="badge badge-primary">Active</span>
|
||||
<span class="badge badge-default">API</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Badges -->
|
||||
<div class="section">
|
||||
<div class="section-title">Badges</div>
|
||||
<div class="flex-row">
|
||||
<span class="badge badge-default">Default</span>
|
||||
<span class="badge badge-primary">Primary</span>
|
||||
<span class="badge badge-accent">Accent</span>
|
||||
<span class="badge badge-success">Success</span>
|
||||
<span class="badge badge-warning">Warning</span>
|
||||
<span class="badge badge-error">Error</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alerts -->
|
||||
<div class="section">
|
||||
<div class="section-title">Alerts</div>
|
||||
<div class="flex-col">
|
||||
<div class="alert alert-accent">
|
||||
<strong>Info:</strong> Your vault is end-to-end encrypted. We cannot access your data.
|
||||
</div>
|
||||
<div class="alert alert-success">
|
||||
<strong>Success:</strong> Credential rotated successfully. API key updated.
|
||||
</div>
|
||||
<div class="alert alert-error">
|
||||
<strong>Error:</strong> Failed to connect to vault. Check your network connection.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tables -->
|
||||
<div class="section">
|
||||
<div class="section-title">Tables</div>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr><th>Name</th><th>Type</th><th>Status</th><th>Last Used</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Production DB</td><td>Password</td><td><span class="badge badge-success">Active</span></td><td>2 min ago</td></tr>
|
||||
<tr><td>AWS API Key</td><td>API Key</td><td><span class="badge badge-warning">Expiring</span></td><td>1 hour ago</td></tr>
|
||||
<tr><td>GitHub SSH</td><td>SSH Key</td><td><span class="badge badge-success">Active</span></td><td>3 days ago</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Code Block -->
|
||||
<div class="section">
|
||||
<div class="section-title">Code / Terminal</div>
|
||||
<div class="code-block">
|
||||
<span style="color:var(--brand-accent);">$</span> clavitor search github<br>
|
||||
<span style="color:#A3A3A3;">Found 3 credentials:</span><br>
|
||||
<span style="color:#A3A3A3;"> • github-personal (SSH key)</span><br>
|
||||
<span style="color:#A3A3A3;"> • github-work (Token)</span><br>
|
||||
<span style="color:#A3A3A3;"> • github-actions (API key)</span>
|
||||
</div>
|
||||
<p style="margin-top:16px;">Inline code looks like <code>--brand-accent</code> or <code>get_credential()</code></p>
|
||||
</div>
|
||||
|
||||
<!-- Form Elements -->
|
||||
<div class="section">
|
||||
<div class="section-title">Form Elements</div>
|
||||
<div class="flex-row">
|
||||
<label class="checkbox"><input type="checkbox" class="checkbox-input" checked> Enable 2FA</label>
|
||||
<label class="checkbox"><input type="checkbox" class="checkbox-input"> Share with team</label>
|
||||
<div class="toggle on"></div>
|
||||
<div class="toggle"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 355 B After Width: | Height: | Size: 355 B |
|
|
@ -9,7 +9,7 @@
|
|||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="/vault1984.css">
|
||||
<link rel="stylesheet" href="/clavitor.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
<div class="nav-inner">
|
||||
<a href="/" class="nav-logo">clav<span class="n">itor</span></a>
|
||||
<div class="nav-links">
|
||||
<a href="https://github.com/johanjongsma/vault1984" target="_blank" rel="noopener" class="nav-link">GitHub</a>
|
||||
<a href="https://github.com/johanjongsma/clavitor" target="_blank" rel="noopener" class="nav-link">GitHub</a>
|
||||
<a href="/hosted" class="nav-link">Hosted</a>
|
||||
<a href="/pricing" class="nav-link">Pricing</a>
|
||||
<a href="/install" class="nav-link">Self-host</a>
|
||||
|
|
@ -308,7 +308,7 @@
|
|||
<div class="footer-inner">
|
||||
<div class="footer-links">
|
||||
<a href="/" class="vaultname">clav<span class="n">itor</span></a>
|
||||
<a href="https://github.com/johanjongsma/vault1984" target="_blank" rel="noopener">GitHub</a>
|
||||
<a href="https://github.com/johanjongsma/clavitor" target="_blank" rel="noopener">GitHub</a>
|
||||
<a href="#">Discord</a>
|
||||
<a href="#">X</a>
|
||||
</div>
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="vault1984-app.css">
|
||||
<link rel="stylesheet" href="clavitor-app.css">
|
||||
<script src="/app/crypto.js"></script>
|
||||
<script src="/app/totp.js"></script>
|
||||
<script src="/app/webauthn.js"></script>
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
|
||||
<script>
|
||||
var BUILD = '20260321-stateless';
|
||||
console.log('vault1984 build: ' + BUILD);
|
||||
console.log('clavitor build: ' + BUILD);
|
||||
|
||||
// Stateless auth: no token variable. Auth state = sessionStorage has v1984_master.
|
||||
var entries = [];
|
||||
|
|
@ -211,7 +211,7 @@
|
|||
var prfResults = extResults.prf && extResults.prf.results;
|
||||
|
||||
if (prfResults && prfResults.first) {
|
||||
await Vault1984WebAuthn.storeMasterKey(prfResults.first);
|
||||
await ClavitorWebAuthn.storeMasterKey(prfResults.first);
|
||||
} else {
|
||||
// Device didn't return PRF on create — need one more tap
|
||||
showMasterKeyStep(defaultName);
|
||||
|
|
@ -234,7 +234,7 @@
|
|||
if (!getExt.prf || !getExt.prf.results || !getExt.prf.results.first) {
|
||||
throw new Error('Your device does not support encryption key derivation (PRF).');
|
||||
}
|
||||
await Vault1984WebAuthn.storeMasterKey(getExt.prf.results.first);
|
||||
await ClavitorWebAuthn.storeMasterKey(getExt.prf.results.first);
|
||||
}
|
||||
|
||||
// 4. Now we have the master key — complete registration (creates DB)
|
||||
|
|
@ -244,7 +244,7 @@
|
|||
// L1 key sent in request body for DB naming.
|
||||
var regHeaders = {'Content-Type': 'application/json'};
|
||||
|
||||
var l2Key = Vault1984WebAuthn.getL2Key();
|
||||
var l2Key = ClavitorWebAuthn.getL2Key();
|
||||
var l1Bytes = l2Key ? Array.from(l2Key.slice(0, 8)) : [];
|
||||
|
||||
var regRes = await fetch('/api/auth/register/complete', {
|
||||
|
|
@ -399,17 +399,17 @@
|
|||
// Derive and store master key from PRF output
|
||||
var extResults = assertion.getClientExtensionResults();
|
||||
if (extResults.prf && extResults.prf.results && extResults.prf.results.first) {
|
||||
await Vault1984WebAuthn.storeMasterKey(extResults.prf.results.first);
|
||||
await ClavitorWebAuthn.storeMasterKey(extResults.prf.results.first);
|
||||
}
|
||||
|
||||
if (!sessionStorage.getItem('v1984_master')) {
|
||||
throw new Error('PRF output not available — cannot derive encryption keys');
|
||||
}
|
||||
console.log('vault1984: L1 bearer =', getL1Bearer());
|
||||
console.log('clavitor: L1 bearer =', getL1Bearer());
|
||||
|
||||
restoreAppLayout();
|
||||
if (window._topbarResetIdle) window._topbarResetIdle();
|
||||
console.log('vault1984: calling loadEntries');
|
||||
console.log('clavitor: calling loadEntries');
|
||||
loadEntries(true);
|
||||
} catch (e) {
|
||||
btn.textContent = 'Unlock with Passkey';
|
||||
|
|
@ -420,7 +420,7 @@
|
|||
}
|
||||
|
||||
function restoreAppLayout() {
|
||||
var unlocked = Vault1984WebAuthn.isUnlocked();
|
||||
var unlocked = ClavitorWebAuthn.isUnlocked();
|
||||
document.getElementById('app').innerHTML =
|
||||
'<div class="main-area">' +
|
||||
'<div id="topbar"></div>' +
|
||||
|
|
@ -623,7 +623,7 @@
|
|||
'<span class="totp-countdown" id="totp-timer-' + i + '"></span>' +
|
||||
'<button onclick="copyTOTPCode(' + i + ')" class="field-action" title="Copy code">copy</button>';
|
||||
setTimeout(function(idx, seed) { startTOTPDisplay(idx, seed); }.bind(null, i, f.value), 0);
|
||||
} else if (enc && !Vault1984WebAuthn.isUnlocked()) {
|
||||
} else if (enc && !ClavitorWebAuthn.isUnlocked()) {
|
||||
fieldsHtml += '<span class="field-l2-locked">Locked</span>' +
|
||||
'<button class="field-action" onclick="unlockAndRefresh()">unlock</button>';
|
||||
} else if (enc) {
|
||||
|
|
@ -638,7 +638,7 @@
|
|||
}
|
||||
if (f.kind === 'totp' && f.value && !enc) {
|
||||
// TOTP already handled above
|
||||
} else if (enc && Vault1984WebAuthn.isUnlocked()) {
|
||||
} else if (enc && ClavitorWebAuthn.isUnlocked()) {
|
||||
fieldsHtml += '<button class="field-action l2-copy-btn" data-idx="' + i + '" style="display:none" title="Copy">copy</button>';
|
||||
} else if (!enc) {
|
||||
fieldsHtml += '<button onclick="copyField(\'' + escapeHtml(f.value).replace(/'/g, "\\'") + '\')" class="field-action" title="Copy">copy</button>';
|
||||
|
|
@ -684,7 +684,7 @@
|
|||
detailPane.innerHTML = html;
|
||||
|
||||
// Async: decrypt all L2 fields that are unlocked
|
||||
if (Vault1984WebAuthn.isL2Unlocked()) {
|
||||
if (ClavitorWebAuthn.isL2Unlocked()) {
|
||||
decryptVisibleL2Fields();
|
||||
}
|
||||
}
|
||||
|
|
@ -700,7 +700,7 @@
|
|||
var el = document.getElementById('field-' + idx);
|
||||
var copyBtn = document.querySelector('.l2-copy-btn[data-idx="' + idx + '"]');
|
||||
|
||||
Vault1984WebAuthn.decryptField(label, cipher, tier).then(function(plaintext) {
|
||||
ClavitorWebAuthn.decryptField(label, cipher, tier).then(function(plaintext) {
|
||||
finishL2Field(el, btn, copyBtn, plaintext);
|
||||
}).catch(function() {
|
||||
// Not actually encrypted — show raw value
|
||||
|
|
@ -740,7 +740,7 @@
|
|||
|
||||
async function unlockAndRefresh() {
|
||||
try {
|
||||
await Vault1984WebAuthn.unlockL2();
|
||||
await ClavitorWebAuthn.unlockL2();
|
||||
var badge = document.getElementById('lockStatus');
|
||||
if (badge) { badge.className = 'badge accent'; badge.textContent = 'L3 Unlocked'; }
|
||||
if (currentEntry) {
|
||||
|
|
@ -758,7 +758,7 @@
|
|||
var f = e.data.fields[fieldIdx];
|
||||
var currentTier = fieldTier(f);
|
||||
|
||||
if (!Vault1984WebAuthn.isUnlocked()) {
|
||||
if (!ClavitorWebAuthn.isUnlocked()) {
|
||||
toast('Tap your security key first', 'error');
|
||||
return;
|
||||
}
|
||||
|
|
@ -768,15 +768,15 @@
|
|||
// L3 → L1: decrypt and make plaintext
|
||||
if (!confirm('Make "' + f.label + '" visible to everyone (including agents)?')) return;
|
||||
try {
|
||||
f.value = await Vault1984WebAuthn.decryptField(f.label, f.value, 3);
|
||||
f.value = await ClavitorWebAuthn.decryptField(f.label, f.value, 3);
|
||||
} catch (err) { /* already plaintext */ }
|
||||
newTier = 0;
|
||||
} else if (currentTier === 2) {
|
||||
// L2 → L3: re-encrypt with L3 key
|
||||
if (!confirm('Hide "' + f.label + '" from agents? Only hardware key can access.')) return;
|
||||
try {
|
||||
var plain = await Vault1984WebAuthn.decryptField(f.label, f.value, 2);
|
||||
f.value = await Vault1984WebAuthn.encryptField(f.label, plain, 3);
|
||||
var plain = await ClavitorWebAuthn.decryptField(f.label, f.value, 2);
|
||||
f.value = await ClavitorWebAuthn.encryptField(f.label, plain, 3);
|
||||
} catch (err) {
|
||||
toast('Re-encryption failed', 'error');
|
||||
return;
|
||||
|
|
@ -784,7 +784,7 @@
|
|||
newTier = 3;
|
||||
} else {
|
||||
// L1 → L2: encrypt with L2 key
|
||||
f.value = await Vault1984WebAuthn.encryptField(f.label, f.value, 2);
|
||||
f.value = await ClavitorWebAuthn.encryptField(f.label, f.value, 2);
|
||||
newTier = 2;
|
||||
}
|
||||
|
||||
|
|
@ -823,8 +823,8 @@
|
|||
var timerEl = document.getElementById('totp-timer-' + idx);
|
||||
if (!codeEl || !timerEl) { clearInterval(_totpTimers[idx]); return; }
|
||||
|
||||
var code = vault1984.totp.generate_totp(seed);
|
||||
var remaining = vault1984.totp.totp_remaining();
|
||||
var code = clavitor.totp.generate_totp(seed);
|
||||
var remaining = clavitor.totp.totp_remaining();
|
||||
|
||||
if (code && typeof code.then === 'function') {
|
||||
code.then(function(c) {
|
||||
|
|
@ -990,13 +990,13 @@
|
|||
|
||||
// Encrypt L2/L3 fields client-side
|
||||
if (hasL2) {
|
||||
if (!Vault1984WebAuthn.isUnlocked()) {
|
||||
if (!ClavitorWebAuthn.isUnlocked()) {
|
||||
throw new Error('L2_LOCKED');
|
||||
}
|
||||
for (var i = 0; i < fields.length; i++) {
|
||||
if (fields[i].l2 && fields[i].value) {
|
||||
var tier = 3; // l2 flag = hardware-only (L3)
|
||||
fields[i].value = await Vault1984WebAuthn.encryptField(fields[i].label, fields[i].value, tier);
|
||||
fields[i].value = await ClavitorWebAuthn.encryptField(fields[i].label, fields[i].value, tier);
|
||||
fields[i].tier = tier;
|
||||
}
|
||||
}
|
||||
|
|
@ -1066,9 +1066,9 @@
|
|||
for (var fi = 0; fi < editFields.length; fi++) {
|
||||
var f = editFields[fi];
|
||||
var input = divs[fi].querySelector('.field-value-input');
|
||||
if (f.l2 && f.value && Vault1984WebAuthn.isL2Unlocked()) {
|
||||
if (f.l2 && f.value && ClavitorWebAuthn.isL2Unlocked()) {
|
||||
try {
|
||||
input.value = await Vault1984WebAuthn.decryptL2Field(f.value);
|
||||
input.value = await ClavitorWebAuthn.decryptL2Field(f.value);
|
||||
} catch (err) {
|
||||
input.value = f.value;
|
||||
}
|
||||
|
|
@ -1462,9 +1462,9 @@
|
|||
}
|
||||
|
||||
var needsEncryption = selected.some(function(s) { return s._tier >= 2; });
|
||||
if (needsEncryption && !Vault1984WebAuthn.isUnlocked()) {
|
||||
if (needsEncryption && !ClavitorWebAuthn.isUnlocked()) {
|
||||
try {
|
||||
await Vault1984WebAuthn.unlock();
|
||||
await ClavitorWebAuthn.unlock();
|
||||
} catch(e) {
|
||||
toast('Unlock required to encrypt fields', 'error');
|
||||
return;
|
||||
|
|
@ -1479,7 +1479,7 @@
|
|||
|
||||
try {
|
||||
if (s._tier >= 2) {
|
||||
seedValue = await Vault1984WebAuthn.encryptField('totp', s.secret, s._tier);
|
||||
seedValue = await ClavitorWebAuthn.encryptField('totp', s.secret, s._tier);
|
||||
}
|
||||
|
||||
var res = await api('POST', '/api/entries', {
|
||||
|
|
@ -1626,7 +1626,7 @@
|
|||
'routing number', 'iban', 'swift', 'pin'];
|
||||
|
||||
// Encrypt fields based on visibility selection
|
||||
if (Vault1984WebAuthn.isUnlocked()) {
|
||||
if (ClavitorWebAuthn.isUnlocked()) {
|
||||
for (var si = 0; si < selected.length; si++) {
|
||||
var fields = selected[si].fields;
|
||||
var entryType = selected[si].type;
|
||||
|
|
@ -1651,7 +1651,7 @@
|
|||
}
|
||||
|
||||
if (tier >= 2 && f.value) {
|
||||
fields[fi].value = await Vault1984WebAuthn.encryptField(f.label, f.value, tier);
|
||||
fields[fi].value = await ClavitorWebAuthn.encryptField(f.label, f.value, tier);
|
||||
fields[fi].tier = tier;
|
||||
}
|
||||
}
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="vault1984-app.css">
|
||||
<link rel="stylesheet" href="clavitor-app.css">
|
||||
<script src="/app/webauthn.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -83,7 +83,7 @@
|
|||
var unlockBtn = document.getElementById('unlockBtn');
|
||||
var lockBtn = document.getElementById('lockBtn');
|
||||
|
||||
if (Vault1984WebAuthn.isL2Unlocked()) {
|
||||
if (ClavitorWebAuthn.isL2Unlocked()) {
|
||||
status.className = 'badge accent';
|
||||
status.textContent = 'Unlocked';
|
||||
unlockBtn.classList.add('hidden');
|
||||
|
|
@ -150,7 +150,7 @@
|
|||
method: 'POST',
|
||||
headers: headers,
|
||||
body: JSON.stringify({
|
||||
cred_id: Vault1984WebAuthn.b64urlEncode(credential.rawId),
|
||||
cred_id: ClavitorWebAuthn.b64urlEncode(credential.rawId),
|
||||
public_key: Array.from(new Uint8Array(
|
||||
credential.response.getPublicKey ? credential.response.getPublicKey() : new ArrayBuffer(0)
|
||||
)),
|
||||
|
|
@ -173,7 +173,7 @@
|
|||
|
||||
async function doUnlockL2() {
|
||||
try {
|
||||
await Vault1984WebAuthn.unlockL2();
|
||||
await ClavitorWebAuthn.unlockL2();
|
||||
updateL2Status();
|
||||
toast('L2 unlocked!');
|
||||
} catch (e) {
|
||||
|
|
@ -182,7 +182,7 @@
|
|||
}
|
||||
|
||||
function doLockL2() {
|
||||
Vault1984WebAuthn.lockL2();
|
||||
ClavitorWebAuthn.lockL2();
|
||||
updateL2Status();
|
||||
toast('L2 locked');
|
||||
}
|
||||
|
|
@ -234,7 +234,7 @@
|
|||
loadCredentials();
|
||||
}
|
||||
|
||||
if (!Vault1984WebAuthn.isPRFSupported()) {
|
||||
if (!ClavitorWebAuthn.isPRFSupported()) {
|
||||
document.getElementById('prfWarning').classList.remove('hidden');
|
||||
}
|
||||
|
||||
|
|
@ -55,9 +55,9 @@
|
|||
/* --- Test 1: L1 (8-byte) roundtrip --- */
|
||||
tests.push(function(done) {
|
||||
var name = 'L1 (8B) encrypt/decrypt roundtrip';
|
||||
resolve(vault1984.crypto.encrypt_field(K8, 'username', 'johanj'), function(ct, err) {
|
||||
resolve(clavitor.crypto.encrypt_field(K8, 'username', 'johanj'), function(ct, err) {
|
||||
if (err) { fail(name, err.message); done(); return; }
|
||||
resolve(vault1984.crypto.decrypt_field(K8, 'username', ct), function(pt, err2) {
|
||||
resolve(clavitor.crypto.decrypt_field(K8, 'username', ct), function(pt, err2) {
|
||||
if (err2) fail(name, err2.message);
|
||||
else if (pt === 'johanj') pass(name);
|
||||
else fail(name, 'got "' + pt + '"');
|
||||
|
|
@ -69,9 +69,9 @@
|
|||
/* --- Test 2: L2 (16-byte) roundtrip --- */
|
||||
tests.push(function(done) {
|
||||
var name = 'L2 (16B) encrypt/decrypt roundtrip';
|
||||
resolve(vault1984.crypto.encrypt_field(K16, 'password', 's3cret!P@ss'), function(ct, err) {
|
||||
resolve(clavitor.crypto.encrypt_field(K16, 'password', 's3cret!P@ss'), function(ct, err) {
|
||||
if (err) { fail(name, err.message); done(); return; }
|
||||
resolve(vault1984.crypto.decrypt_field(K16, 'password', ct), function(pt, err2) {
|
||||
resolve(clavitor.crypto.decrypt_field(K16, 'password', ct), function(pt, err2) {
|
||||
if (err2) fail(name, err2.message);
|
||||
else if (pt === 's3cret!P@ss') pass(name);
|
||||
else fail(name, 'got "' + pt + '"');
|
||||
|
|
@ -83,9 +83,9 @@
|
|||
/* --- Test 3: L3 (32-byte) roundtrip --- */
|
||||
tests.push(function(done) {
|
||||
var name = 'L3 (32B) encrypt/decrypt roundtrip';
|
||||
resolve(vault1984.crypto.encrypt_field(K32, 'passport', 'NL12345678'), function(ct, err) {
|
||||
resolve(clavitor.crypto.encrypt_field(K32, 'passport', 'NL12345678'), function(ct, err) {
|
||||
if (err) { fail(name, err.message); done(); return; }
|
||||
resolve(vault1984.crypto.decrypt_field(K32, 'passport', ct), function(pt, err2) {
|
||||
resolve(clavitor.crypto.decrypt_field(K32, 'passport', ct), function(pt, err2) {
|
||||
if (err2) fail(name, err2.message);
|
||||
else if (pt === 'NL12345678') pass(name);
|
||||
else fail(name, 'got "' + pt + '"');
|
||||
|
|
@ -97,9 +97,9 @@
|
|||
/* --- Test 4: L2 key cannot decrypt L3 ciphertext --- */
|
||||
tests.push(function(done) {
|
||||
var name = 'L2 key rejects L3 ciphertext';
|
||||
resolve(vault1984.crypto.encrypt_field(K32, 'passport', 'NL12345678'), function(ct, err) {
|
||||
resolve(clavitor.crypto.encrypt_field(K32, 'passport', 'NL12345678'), function(ct, err) {
|
||||
if (err) { fail(name, 'encrypt failed: ' + err.message); done(); return; }
|
||||
safe(function() { return vault1984.crypto.decrypt_field(K16, 'passport', ct); }, function(pt, err2) {
|
||||
safe(function() { return clavitor.crypto.decrypt_field(K16, 'passport', ct); }, function(pt, err2) {
|
||||
if (err2) pass(name);
|
||||
else fail(name, 'L2 key decrypted L3 data to "' + pt + '"');
|
||||
done();
|
||||
|
|
@ -110,9 +110,9 @@
|
|||
/* --- Test 5: L3 key cannot decrypt L2 ciphertext --- */
|
||||
tests.push(function(done) {
|
||||
var name = 'L3 key rejects L2 ciphertext';
|
||||
resolve(vault1984.crypto.encrypt_field(K16, 'password', 'secret'), function(ct, err) {
|
||||
resolve(clavitor.crypto.encrypt_field(K16, 'password', 'secret'), function(ct, err) {
|
||||
if (err) { fail(name, 'encrypt failed: ' + err.message); done(); return; }
|
||||
safe(function() { return vault1984.crypto.decrypt_field(K32, 'password', ct); }, function(pt, err2) {
|
||||
safe(function() { return clavitor.crypto.decrypt_field(K32, 'password', ct); }, function(pt, err2) {
|
||||
if (err2) pass(name);
|
||||
else fail(name, 'L3 key decrypted L2 data to "' + pt + '"');
|
||||
done();
|
||||
|
|
@ -123,9 +123,9 @@
|
|||
/* --- Test 6: Wrong key rejection --- */
|
||||
tests.push(function(done) {
|
||||
var name = 'wrong key rejected';
|
||||
resolve(vault1984.crypto.encrypt_field(K16, 'secret', 'value'), function(ct, err) {
|
||||
resolve(clavitor.crypto.encrypt_field(K16, 'secret', 'value'), function(ct, err) {
|
||||
if (err) { fail(name, 'encrypt failed'); done(); return; }
|
||||
safe(function() { return vault1984.crypto.decrypt_field(WRONG_K16, 'secret', ct); }, function(pt, err2) {
|
||||
safe(function() { return clavitor.crypto.decrypt_field(WRONG_K16, 'secret', ct); }, function(pt, err2) {
|
||||
if (err2) pass(name);
|
||||
else fail(name, 'wrong key decrypted to "' + pt + '"');
|
||||
done();
|
||||
|
|
@ -136,9 +136,9 @@
|
|||
/* --- Test 7: Wrong label rejection --- */
|
||||
tests.push(function(done) {
|
||||
var name = 'wrong label rejected';
|
||||
resolve(vault1984.crypto.encrypt_field(K16, 'labelA', 'value'), function(ct, err) {
|
||||
resolve(clavitor.crypto.encrypt_field(K16, 'labelA', 'value'), function(ct, err) {
|
||||
if (err) { fail(name, 'encrypt failed'); done(); return; }
|
||||
safe(function() { return vault1984.crypto.decrypt_field(K16, 'labelB', ct); }, function(pt, err2) {
|
||||
safe(function() { return clavitor.crypto.decrypt_field(K16, 'labelB', ct); }, function(pt, err2) {
|
||||
if (err2) pass(name);
|
||||
else fail(name, 'wrong label decrypted to "' + pt + '"');
|
||||
done();
|
||||
|
|
@ -149,9 +149,9 @@
|
|||
/* --- Test 8: Empty string roundtrip --- */
|
||||
tests.push(function(done) {
|
||||
var name = 'empty string roundtrip';
|
||||
resolve(vault1984.crypto.encrypt_field(K16, 'empty', ''), function(ct, err) {
|
||||
resolve(clavitor.crypto.encrypt_field(K16, 'empty', ''), function(ct, err) {
|
||||
if (err) { fail(name, err.message); done(); return; }
|
||||
resolve(vault1984.crypto.decrypt_field(K16, 'empty', ct), function(pt, err2) {
|
||||
resolve(clavitor.crypto.decrypt_field(K16, 'empty', ct), function(pt, err2) {
|
||||
if (err2) fail(name, err2.message);
|
||||
else if (pt === '') pass(name);
|
||||
else fail(name, 'got "' + pt + '"');
|
||||
|
|
@ -164,9 +164,9 @@
|
|||
tests.push(function(done) {
|
||||
var name = 'unicode roundtrip';
|
||||
var unicode = 'pässwörd 密码 🔑';
|
||||
resolve(vault1984.crypto.encrypt_field(K16, 'intl', unicode), function(ct, err) {
|
||||
resolve(clavitor.crypto.encrypt_field(K16, 'intl', unicode), function(ct, err) {
|
||||
if (err) { fail(name, err.message); done(); return; }
|
||||
resolve(vault1984.crypto.decrypt_field(K16, 'intl', ct), function(pt, err2) {
|
||||
resolve(clavitor.crypto.decrypt_field(K16, 'intl', ct), function(pt, err2) {
|
||||
if (err2) fail(name, err2.message);
|
||||
else if (pt === unicode) pass(name);
|
||||
else fail(name, 'mismatch');
|
||||
|
|
@ -182,9 +182,9 @@
|
|||
* K16 = [11,22,33,44,55,66,77,88,99,110,111,112,113,114,115,116]
|
||||
* These are different keys after normalization, so HKDF produces different field keys.
|
||||
* L1 ciphertext must NOT be decryptable with L2 key. */
|
||||
resolve(vault1984.crypto.encrypt_field(K8, 'field', 'test'), function(ct1, err) {
|
||||
resolve(clavitor.crypto.encrypt_field(K8, 'field', 'test'), function(ct1, err) {
|
||||
if (err) { fail(name, 'L1 encrypt: ' + err.message); done(); return; }
|
||||
safe(function() { return vault1984.crypto.decrypt_field(K16, 'field', ct1); }, function(pt, err2) {
|
||||
safe(function() { return clavitor.crypto.decrypt_field(K16, 'field', ct1); }, function(pt, err2) {
|
||||
if (err2) pass(name);
|
||||
else fail(name, 'L2 key decrypted L1 data');
|
||||
done();
|
||||
|
|
@ -195,7 +195,7 @@
|
|||
/* --- Test 11: TOTP generation (RFC 6238 test vector) --- */
|
||||
tests.push(function(done) {
|
||||
var name = 'TOTP RFC 6238 test vector';
|
||||
var result = vault1984.totp.generate_totp('GEZDGNBVGY3TQOJQGEZDGNBVGY3TQOJQ', 59, 30, 6);
|
||||
var result = clavitor.totp.generate_totp('GEZDGNBVGY3TQOJQGEZDGNBVGY3TQOJQ', 59, 30, 6);
|
||||
resolve(result, function(code, err) {
|
||||
if (err) fail(name, err.message);
|
||||
else if (code === '287082') pass(name);
|
||||
|
|
@ -207,7 +207,7 @@
|
|||
/* --- Test 12: TOTP second test vector (time=1111111109) --- */
|
||||
tests.push(function(done) {
|
||||
var name = 'TOTP RFC 6238 test vector #2';
|
||||
var result = vault1984.totp.generate_totp('GEZDGNBVGY3TQOJQGEZDGNBVGY3TQOJQ', 1111111109, 30, 8);
|
||||
var result = clavitor.totp.generate_totp('GEZDGNBVGY3TQOJQGEZDGNBVGY3TQOJQ', 1111111109, 30, 8);
|
||||
resolve(result, function(code, err) {
|
||||
if (err) fail(name, err.message);
|
||||
else if (code === '07081804') pass(name);
|
||||
|
|
@ -220,10 +220,10 @@
|
|||
tests.push(function(done) {
|
||||
var name = 'L3 TOTP seed inaccessible to agent (L2 key)';
|
||||
var seed = 'JBSWY3DPEHPK3PXP'; // a TOTP seed
|
||||
resolve(vault1984.crypto.encrypt_field(K32, 'totp', seed), function(ct, err) {
|
||||
resolve(clavitor.crypto.encrypt_field(K32, 'totp', seed), function(ct, err) {
|
||||
if (err) { fail(name, 'encrypt failed'); done(); return; }
|
||||
// Agent has K16 (L2), tries to decrypt L3 TOTP seed
|
||||
safe(function() { return vault1984.crypto.decrypt_field(K16, 'totp', ct); }, function(pt, err2) {
|
||||
safe(function() { return clavitor.crypto.decrypt_field(K16, 'totp', ct); }, function(pt, err2) {
|
||||
if (err2) pass(name);
|
||||
else fail(name, 'L2 key decrypted L3 TOTP seed to "' + pt + '"');
|
||||
done();
|
||||
|
|
@ -235,9 +235,9 @@
|
|||
tests.push(function(done) {
|
||||
var name = 'L2 TOTP seed accessible to agent (L2 key)';
|
||||
var seed = 'JBSWY3DPEHPK3PXP';
|
||||
resolve(vault1984.crypto.encrypt_field(K16, 'totp', seed), function(ct, err) {
|
||||
resolve(clavitor.crypto.encrypt_field(K16, 'totp', seed), function(ct, err) {
|
||||
if (err) { fail(name, 'encrypt failed'); done(); return; }
|
||||
resolve(vault1984.crypto.decrypt_field(K16, 'totp', ct), function(pt, err2) {
|
||||
resolve(clavitor.crypto.decrypt_field(K16, 'totp', ct), function(pt, err2) {
|
||||
if (err2) fail(name, err2.message);
|
||||
else if (pt === seed) pass(name);
|
||||
else fail(name, 'got "' + pt + '"');
|
||||
|
|
@ -249,9 +249,9 @@
|
|||
/* --- Test 15: L3 card number cannot be read with L2 key --- */
|
||||
tests.push(function(done) {
|
||||
var name = 'L3 card number inaccessible to agent (L2 key)';
|
||||
resolve(vault1984.crypto.encrypt_field(K32, 'Number', '5452120017212208'), function(ct, err) {
|
||||
resolve(clavitor.crypto.encrypt_field(K32, 'Number', '5452120017212208'), function(ct, err) {
|
||||
if (err) { fail(name, 'encrypt failed'); done(); return; }
|
||||
safe(function() { return vault1984.crypto.decrypt_field(K16, 'Number', ct); }, function(pt, err2) {
|
||||
safe(function() { return clavitor.crypto.decrypt_field(K16, 'Number', ct); }, function(pt, err2) {
|
||||
if (err2) pass(name);
|
||||
else fail(name, 'L2 key decrypted L3 card number');
|
||||
done();
|
||||
|
|
@ -263,9 +263,9 @@
|
|||
tests.push(function(done) {
|
||||
var name = 'truncation: L2 prefix of L3, still cannot decrypt L3';
|
||||
// K16 = K32[0..16] by design. Encrypt with full K32, try with K16.
|
||||
resolve(vault1984.crypto.encrypt_field(K32, 'secret', 'classified'), function(ct, err) {
|
||||
resolve(clavitor.crypto.encrypt_field(K32, 'secret', 'classified'), function(ct, err) {
|
||||
if (err) { fail(name, 'encrypt failed'); done(); return; }
|
||||
safe(function() { return vault1984.crypto.decrypt_field(K16, 'secret', ct); }, function(pt, err2) {
|
||||
safe(function() { return clavitor.crypto.decrypt_field(K16, 'secret', ct); }, function(pt, err2) {
|
||||
if (err2) pass(name);
|
||||
else fail(name, 'L2 (prefix of L3) decrypted L3 data');
|
||||
done();
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="vault1984-app.css">
|
||||
<link rel="stylesheet" href="clavitor-app.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="topbar"></div>
|
||||
|
|
@ -107,8 +107,8 @@ function totp_remaining(period) {
|
|||
}
|
||||
|
||||
/* Export */
|
||||
if (typeof globalThis.vault1984 === 'undefined') globalThis.vault1984 = {};
|
||||
globalThis.vault1984.totp = {
|
||||
if (typeof globalThis.clavitor === 'undefined') globalThis.clavitor = {};
|
||||
globalThis.clavitor.totp = {
|
||||
generate_totp: generate_totp,
|
||||
totp_remaining: totp_remaining,
|
||||
base32_decode: base32_decode
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
'use strict';
|
||||
|
||||
var SESSION_KEY = 'v1984_master';
|
||||
var HKDF_SALT = new TextEncoder().encode('vault1984-master-v2');
|
||||
var HKDF_SALT = new TextEncoder().encode('clavitor-master-v2');
|
||||
|
||||
// Derive master key from raw PRF output and store in sessionStorage.
|
||||
// Returns true if stored, false if prfOutput is null/missing.
|
||||
|
|
@ -225,14 +225,14 @@
|
|||
async function encryptField(fieldLabel, plaintext, tier) {
|
||||
var key = (tier === 3) ? getL3Key() : getL2Key();
|
||||
if (!key) throw new Error('Vault not unlocked');
|
||||
return vault1984.crypto.encrypt_field(key, fieldLabel, plaintext);
|
||||
return clavitor.crypto.encrypt_field(key, fieldLabel, plaintext);
|
||||
}
|
||||
|
||||
// Decrypt a field value (uses shared crypto.js)
|
||||
async function decryptField(fieldLabel, ciphertextB64, tier) {
|
||||
var key = (tier === 3) ? getL3Key() : getL2Key();
|
||||
if (!key) throw new Error('Vault not unlocked');
|
||||
return vault1984.crypto.decrypt_field(key, fieldLabel, ciphertextB64);
|
||||
return clavitor.crypto.decrypt_field(key, fieldLabel, ciphertextB64);
|
||||
}
|
||||
|
||||
// Backward compat
|
||||
|
|
@ -257,7 +257,7 @@
|
|||
var lockL2 = lock;
|
||||
|
||||
// Export public API
|
||||
window.Vault1984WebAuthn = {
|
||||
window.ClavitorWebAuthn = {
|
||||
isPRFSupported: isPRFSupported,
|
||||
storeMasterKey: storeMasterKey,
|
||||
registerPasskey: registerPasskey,
|
||||
|
Before Width: | Height: | Size: 130 KiB After Width: | Height: | Size: 130 KiB |
|
|
@ -1 +0,0 @@
|
|||
/home/johan/dev/clavitor/design-system
|
||||
Binary file not shown.
Loading…
Reference in New Issue