Files
myworkspace/LinkSyncServer/templates/apikeys.html
DavidSaylor fe4cbc3537 feat: add web UI, query engine, session management, and 20 E2E tests
- Web UI: login, dashboard, links CRUD, collections, API keys, admin pages
- Query engine: AND/OR/XOR with field filters, tag search, preview endpoint
- Session management: token expiry detection, 401 interceptor, expiry banner
- Links search: tags included, multi-word AND, query mode with set operations
- Collections: static/dynamic, query builder with preview, public tree view
- Save as Collection: convert search results (static) or query (dynamic)
- Dashboard stats: resilient loading with allSettled pattern
- Login page: redesigned with public collections tree view
- Bug fix: query executor None fields crash (notes/description/url/title)
- E2E tests: 20 Playwright tests covering all critical user flows
- All 104 tests passing (84 unit/integration + 20 E2E)
2026-05-22 07:46:53 -05:00

71 lines
2.5 KiB
HTML

{% extends "base.html" %}
{% block title %}API Keys - LinkSync{% endblock %}
{% block content %}
<div class="page-header">
<h1>API Keys</h1>
<button class="btn btn-primary" id="new-key-btn">+ New API Key</button>
</div>
<div id="api-keys-list" class="api-keys-table">
<div class="loading">Loading API keys...</div>
</div>
<div id="key-modal" class="modal" style="display: none;">
<div class="modal-overlay"></div>
<div class="modal-content">
<div class="modal-header">
<h2>Create API Key</h2>
<button class="modal-close" id="key-modal-close">&times;</button>
</div>
<form id="key-form">
<div class="form-group">
<label for="key-name">Key Name *</label>
<input type="text" id="key-name" placeholder="e.g., Firefox Extension" required>
</div>
<div class="form-actions">
<button type="button" class="btn btn-secondary" id="key-cancel-btn">Cancel</button>
<button type="submit" class="btn btn-primary" id="key-save-btn">Create</button>
</div>
</form>
</div>
</div>
<div id="key-result-modal" class="modal" style="display: none;">
<div class="modal-overlay"></div>
<div class="modal-content">
<div class="modal-header">
<h2>API Key Created</h2>
<button class="modal-close" id="key-result-close">&times;</button>
</div>
<div class="key-result">
<p><strong>Copy this key now. You will not be able to see it again.</strong></p>
<div class="key-display">
<code id="new-key-value"></code>
<button class="btn btn-sm" id="copy-key-btn">Copy</button>
</div>
</div>
<div class="form-actions">
<button class="btn btn-primary" id="key-done-btn">Done</button>
</div>
</div>
</div>
<div id="delete-key-modal" class="modal" style="display: none;">
<div class="modal-overlay"></div>
<div class="modal-content modal-sm">
<h2>Delete API Key</h2>
<p>Are you sure you want to delete this API key? Any connections using this key will stop working.</p>
<div class="form-actions">
<button class="btn btn-secondary" id="delete-key-cancel-btn">Cancel</button>
<button class="btn btn-danger" id="confirm-delete-key-btn">Delete</button>
</div>
</div>
</div>
{% endblock %}
{% block extra_js %}
<script src="/static/js/apikeys-page.js?v={{ build_id }}"></script>
{% endblock %}