Add app pairing feature for simplified registry connection
- Add pairing_requests table and hostname column to api_tokens - Add pairing API endpoints: initiate, check, status, connected-apps - Add cmdforge config connect <username> CLI command - Rewrite tokens.html as Connected Apps with pairing flow - Update TUI: Connect button when not authenticated, Publish when connected - Add private sync option after save in TUI when connected - Add visibility parameter to publish_tool in registry_client Co-Authored-By: Claude Opus 4.5 <[email protected]>
This commit is contained in:
Claude Opus 4.5
@@ -1,21 +1,21 @@
|
||||
{% extends "dashboard/base.html" %}
|
||||
{% set active_page = 'tokens' %}
|
||||
|
||||
{% block title %}API Tokens - CmdForge Dashboard{% endblock %}
|
||||
{% block title %}Connected Apps - CmdForge Dashboard{% endblock %}
|
||||
|
||||
{% block dashboard_header %}
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-900">API Tokens</h1>
|
||||
<p class="mt-1 text-gray-600">Manage tokens for CLI and API access</p>
|
||||
<h1 class="text-2xl font-bold text-gray-900">Connected Apps</h1>
|
||||
<p class="mt-1 text-gray-600">Manage devices connected to your CmdForge account</p>
|
||||
</div>
|
||||
<button type="button"
|
||||
onclick="openCreateTokenModal()"
|
||||
onclick="startPairing()"
|
||||
class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
|
||||
</svg>
|
||||
Create Token
|
||||
Connect New App
|
||||
</button>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -28,11 +28,11 @@
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<div class="ml-3">
|
||||
<h4 class="text-sm font-medium text-blue-800">About API Tokens</h4>
|
||||
<h4 class="text-sm font-medium text-blue-800">About Connected Apps</h4>
|
||||
<p class="mt-1 text-sm text-blue-700">
|
||||
API tokens are used to authenticate with the CmdForge registry from the CLI.
|
||||
Use <code class="px-1 bg-blue-100 rounded">cmdforge auth login</code> to authenticate,
|
||||
or set the <code class="px-1 bg-blue-100 rounded">CMDFORGE_TOKEN</code> environment variable.
|
||||
Connected apps can publish tools and sync your work across devices.
|
||||
Run <code class="px-1 bg-blue-100 rounded">cmdforge config connect <username></code> in your terminal,
|
||||
then click "Connect New App" here to complete the connection.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -44,16 +44,13 @@
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Name
|
||||
Device
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Created
|
||||
Connected
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Last Used
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Status
|
||||
Last Active
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Actions
|
||||
@@ -65,14 +62,16 @@
|
||||
<tr class="hover:bg-gray-50">
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<div class="flex items-center">
|
||||
<div class="w-10 h-10 bg-cyan-100 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-cyan-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/>
|
||||
<div class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<p class="text-sm font-medium text-gray-900">{{ token.name }}</p>
|
||||
<p class="text-xs text-gray-500 font-mono">st_...{{ token.token_suffix }}</p>
|
||||
<p class="text-sm font-medium text-gray-900">{{ token.hostname or token.name }}</p>
|
||||
{% if token.hostname and token.name != 'App: ' + token.hostname %}
|
||||
<p class="text-xs text-gray-500">{{ token.name }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
@@ -82,27 +81,12 @@
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{{ token.last_used_at|timeago if token.last_used_at else 'Never' }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
{% if token.revoked_at %}
|
||||
<span class="px-2 py-1 text-xs font-medium text-red-800 bg-red-100 rounded-full">
|
||||
Revoked
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="px-2 py-1 text-xs font-medium text-green-800 bg-green-100 rounded-full">
|
||||
Active
|
||||
</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
{% if not token.revoked_at %}
|
||||
<button type="button"
|
||||
onclick="revokeToken({{ token.id }}, '{{ token.name }}')"
|
||||
onclick="disconnectApp({{ token.id }}, '{{ token.hostname or token.name }}')"
|
||||
class="text-red-600 hover:text-red-900">
|
||||
Revoke
|
||||
Disconnect
|
||||
</button>
|
||||
{% else %}
|
||||
<span class="text-gray-400">Revoked {{ token.revoked_at|timeago }}</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
@@ -113,21 +97,101 @@
|
||||
<!-- Empty State -->
|
||||
<div class="bg-white rounded-lg border border-gray-200 text-center py-16">
|
||||
<svg class="mx-auto w-16 h-16 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
<h3 class="mt-4 text-lg font-medium text-gray-900">No API tokens</h3>
|
||||
<h3 class="mt-4 text-lg font-medium text-gray-900">No connected apps</h3>
|
||||
<p class="mt-2 text-gray-600 max-w-sm mx-auto">
|
||||
Create an API token to authenticate with the registry from the command line.
|
||||
Connect your CmdForge CLI to sync tools and publish across devices.
|
||||
</p>
|
||||
<button type="button"
|
||||
onclick="openCreateTokenModal()"
|
||||
onclick="startPairing()"
|
||||
class="mt-6 inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700">
|
||||
Create Your First Token
|
||||
Connect Your First App
|
||||
</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Create Token Modal -->
|
||||
<!-- Pairing Modal -->
|
||||
<div id="pairing-modal" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-modal="true" role="dialog">
|
||||
<div class="min-h-screen px-4 text-center flex items-center justify-center">
|
||||
<div class="fixed inset-0 bg-black bg-opacity-50" onclick="closePairingModal()"></div>
|
||||
<div class="relative z-10 w-full max-w-md text-left bg-white shadow-xl rounded-lg">
|
||||
<div class="p-6">
|
||||
<div class="flex items-center mb-4">
|
||||
<div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="ml-3 text-lg font-semibold text-gray-900">Connect App</h3>
|
||||
</div>
|
||||
|
||||
<div id="pairing-step-1">
|
||||
<p class="text-sm text-gray-600 mb-4">
|
||||
To connect a new app, run this command in your terminal:
|
||||
</p>
|
||||
<pre class="bg-gray-900 text-gray-100 text-sm p-3 rounded-lg overflow-x-auto mb-4"><code>cmdforge config connect {{ user.slug }}</code></pre>
|
||||
<p class="text-sm text-gray-600 mb-4">
|
||||
Then click the button below to complete the connection.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="pairing-step-2" class="hidden">
|
||||
<div class="flex items-center justify-center py-8">
|
||||
<svg class="animate-spin h-8 w-8 text-indigo-600" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 text-center mb-2">
|
||||
Waiting for connection...
|
||||
</p>
|
||||
<p class="text-xs text-gray-500 text-center">
|
||||
Run <code class="px-1 bg-gray-100 rounded">cmdforge config connect {{ user.slug }}</code> in your terminal
|
||||
</p>
|
||||
<p class="text-xs text-gray-500 text-center mt-2" id="pairing-countdown">
|
||||
Expires in 5:00
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="pairing-step-3" class="hidden">
|
||||
<div class="flex items-center justify-center py-4">
|
||||
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center">
|
||||
<svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-lg font-medium text-gray-900 text-center mb-2">Connected!</p>
|
||||
<p class="text-sm text-gray-600 text-center" id="connected-device-name"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 px-6 py-4 rounded-b-lg flex justify-end gap-3">
|
||||
<button type="button"
|
||||
onclick="closePairingModal()"
|
||||
id="pairing-cancel-btn"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900">
|
||||
Cancel
|
||||
</button>
|
||||
<button type="button"
|
||||
onclick="initiatePairing()"
|
||||
id="pairing-start-btn"
|
||||
class="px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700">
|
||||
I've Run the Command
|
||||
</button>
|
||||
<button type="button"
|
||||
onclick="closePairingModal()"
|
||||
id="pairing-done-btn"
|
||||
class="hidden px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700">
|
||||
Done
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Legacy: Keep create token modal for advanced users -->
|
||||
<div id="create-token-modal" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-modal="true" role="dialog">
|
||||
<div class="min-h-screen px-4 text-center flex items-center justify-center">
|
||||
<div class="fixed inset-0 bg-black bg-opacity-50" onclick="closeCreateTokenModal()"></div>
|
||||
@@ -136,9 +200,9 @@
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||||
|
||||
<div class="p-6">
|
||||
<h3 class="text-lg font-semibold text-gray-900">Create API Token</h3>
|
||||
<h3 class="text-lg font-semibold text-gray-900">Create API Token (Advanced)</h3>
|
||||
<p class="mt-2 text-sm text-gray-600">
|
||||
Give your token a descriptive name so you can identify it later.
|
||||
For CI/CD or custom integrations. Most users should use "Connect App" instead.
|
||||
</p>
|
||||
|
||||
<div class="mt-4">
|
||||
@@ -149,7 +213,7 @@
|
||||
name="name"
|
||||
id="token-name"
|
||||
required
|
||||
placeholder="e.g., Laptop CLI, CI/CD Pipeline"
|
||||
placeholder="e.g., GitHub Actions, CI/CD Pipeline"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500">
|
||||
</div>
|
||||
</div>
|
||||
@@ -170,7 +234,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Token Created Modal (shows the token once) -->
|
||||
<!-- Token Created Modal -->
|
||||
<div id="token-created-modal" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-modal="true" role="dialog">
|
||||
<div class="min-h-screen px-4 text-center flex items-center justify-center">
|
||||
<div class="fixed inset-0 bg-black bg-opacity-50"></div>
|
||||
@@ -211,11 +275,6 @@
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="mt-4 text-sm text-gray-600">
|
||||
To use this token, run:
|
||||
</p>
|
||||
<pre class="mt-2 bg-gray-900 text-gray-100 text-sm p-3 rounded-lg overflow-x-auto"><code>export CMDFORGE_TOKEN="<span id="token-in-export"></span>"</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 px-6 py-4 rounded-b-lg flex justify-end">
|
||||
@@ -230,6 +289,154 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let pairingCheckInterval = null;
|
||||
let pairingExpiresAt = null;
|
||||
|
||||
function startPairing() {
|
||||
document.getElementById('pairing-modal').classList.remove('hidden');
|
||||
document.getElementById('pairing-step-1').classList.remove('hidden');
|
||||
document.getElementById('pairing-step-2').classList.add('hidden');
|
||||
document.getElementById('pairing-step-3').classList.add('hidden');
|
||||
document.getElementById('pairing-start-btn').classList.remove('hidden');
|
||||
document.getElementById('pairing-cancel-btn').classList.remove('hidden');
|
||||
document.getElementById('pairing-done-btn').classList.add('hidden');
|
||||
}
|
||||
|
||||
function closePairingModal() {
|
||||
document.getElementById('pairing-modal').classList.add('hidden');
|
||||
if (pairingCheckInterval) {
|
||||
clearInterval(pairingCheckInterval);
|
||||
pairingCheckInterval = null;
|
||||
}
|
||||
}
|
||||
|
||||
async function initiatePairing() {
|
||||
// Show waiting step
|
||||
document.getElementById('pairing-step-1').classList.add('hidden');
|
||||
document.getElementById('pairing-step-2').classList.remove('hidden');
|
||||
document.getElementById('pairing-start-btn').classList.add('hidden');
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/v1/pairing/initiate', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Authorization': 'Bearer {{ session.get("auth_token") }}',
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
pairingExpiresAt = Date.now() + (data.data.expires_in * 1000);
|
||||
startPairingCountdown();
|
||||
startPairingCheck();
|
||||
} else {
|
||||
alert('Failed to initiate pairing. Please try again.');
|
||||
closePairingModal();
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Network error. Please try again.');
|
||||
closePairingModal();
|
||||
}
|
||||
}
|
||||
|
||||
function startPairingCountdown() {
|
||||
const countdownEl = document.getElementById('pairing-countdown');
|
||||
const updateCountdown = () => {
|
||||
const remaining = Math.max(0, pairingExpiresAt - Date.now());
|
||||
const minutes = Math.floor(remaining / 60000);
|
||||
const seconds = Math.floor((remaining % 60000) / 1000);
|
||||
countdownEl.textContent = `Expires in ${minutes}:${seconds.toString().padStart(2, '0')}`;
|
||||
|
||||
if (remaining <= 0) {
|
||||
closePairingModal();
|
||||
alert('Pairing request expired. Please try again.');
|
||||
}
|
||||
};
|
||||
updateCountdown();
|
||||
pairingCheckInterval = setInterval(updateCountdown, 1000);
|
||||
}
|
||||
|
||||
function startPairingCheck() {
|
||||
// Poll for connection status
|
||||
const checkConnection = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/v1/pairing/status', {
|
||||
headers: {
|
||||
'Authorization': 'Bearer {{ session.get("auth_token") }}'
|
||||
}
|
||||
});
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
if (data.data.status === 'none') {
|
||||
// Pairing was claimed
|
||||
showPairingSuccess();
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
// Ignore network errors during polling
|
||||
}
|
||||
};
|
||||
|
||||
// Check every 2 seconds
|
||||
const pollInterval = setInterval(checkConnection, 2000);
|
||||
|
||||
// Store interval to clear later
|
||||
const originalInterval = pairingCheckInterval;
|
||||
pairingCheckInterval = setInterval(() => {
|
||||
// Keep countdown running
|
||||
}, 1000);
|
||||
|
||||
// Clear poll interval when modal closes
|
||||
const originalClose = closePairingModal;
|
||||
closePairingModal = () => {
|
||||
clearInterval(pollInterval);
|
||||
originalClose();
|
||||
};
|
||||
}
|
||||
|
||||
function showPairingSuccess() {
|
||||
if (pairingCheckInterval) {
|
||||
clearInterval(pairingCheckInterval);
|
||||
pairingCheckInterval = null;
|
||||
}
|
||||
|
||||
document.getElementById('pairing-step-2').classList.add('hidden');
|
||||
document.getElementById('pairing-step-3').classList.remove('hidden');
|
||||
document.getElementById('pairing-cancel-btn').classList.add('hidden');
|
||||
document.getElementById('pairing-done-btn').classList.remove('hidden');
|
||||
|
||||
// Reload after a short delay
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
async function disconnectApp(appId, deviceName) {
|
||||
if (!confirm(`Disconnect "${deviceName}"? This device will no longer be able to access your account.`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/v1/connected-apps/${appId}`, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Authorization': 'Bearer {{ session.get("auth_token") }}'
|
||||
}
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
window.location.reload();
|
||||
} else {
|
||||
const error = await response.json();
|
||||
alert(error.error?.message || 'Failed to disconnect app');
|
||||
}
|
||||
} catch (err) {
|
||||
alert('Failed to disconnect app. Please try again.');
|
||||
}
|
||||
}
|
||||
|
||||
// Legacy token functions (for advanced users)
|
||||
function openCreateTokenModal() {
|
||||
document.getElementById('create-token-modal').classList.remove('hidden');
|
||||
document.getElementById('token-name').focus();
|
||||
@@ -267,7 +474,6 @@ async function createToken(event) {
|
||||
|
||||
function showNewToken(token) {
|
||||
document.getElementById('new-token-value').textContent = token;
|
||||
document.getElementById('token-in-export').textContent = token;
|
||||
document.getElementById('token-created-modal').classList.remove('hidden');
|
||||
}
|
||||
|
||||
@@ -287,26 +493,5 @@ function copyNewToken() {
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
async function revokeToken(tokenId, tokenName) {
|
||||
if (!confirm(`Are you sure you want to revoke "${tokenName}"? This cannot be undone.`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/dashboard/api/tokens/${tokenId}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
window.location.reload();
|
||||
} else {
|
||||
const error = await response.json();
|
||||
alert(error.error || 'Failed to revoke token');
|
||||
}
|
||||
} catch (err) {
|
||||
alert('Failed to revoke token. Please try again.');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user