danvics/Pulse
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix API token generation UX

Browse source
This commit is contained in:
rcourtman 2025-10-15 22:38:50 +00:00
parent 1d580c658d
commit e2a0fbe816
2 changed files with 53 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
frontend-modern/src/components/Settings/APITokenManager.tsx
View file

@ -11,6 +11,7 @@ import type { DockerHost } from '@/types/api';
interface APITokenManagerProps {
currentTokenHint?: string;
onTokensChanged?: () => void;
refreshing?: boolean;
}
export const APITokenManager: Component<APITokenManagerProps> = (props) => {
@ -67,16 +68,12 @@ export const APITokenManager: Component<APITokenManagerProps> = (props) => {
const trimmedName = nameInput().trim() || undefined;
const { token, record } = await SecurityAPI.createToken(trimmedName);
console.log('✅ Token generated:', { token, record });
setTokens((prev) => [record, ...prev]);
setNewTokenValue(token);
setNewTokenRecord(record);
setNameInput('');
console.log('✅ State updated, newTokenValue:', token);
showSuccess('New API token generated! Scroll up to see it!');
showSuccess('New API token generated. Copy it below while it is still visible.');
props.onTokensChanged?.();
try {
@ -88,10 +85,6 @@ export const APITokenManager: Component<APITokenManagerProps> = (props) => {
console.warn('Unable to persist API token in localStorage', storageErr);
}
// Scroll to top to show the token
setTimeout(() => {
window.scrollTo({ top: 0, behavior: 'smooth' });
}, 100);
} catch (err) {
console.error('Failed to generate API token', err);
showError('Failed to generate API token');
@ -190,6 +183,16 @@ export const APITokenManager: Component<APITokenManagerProps> = (props) => {
</div>
<div class="p-6 space-y-6">
<Show when={props.refreshing}>
<div class="flex items-center gap-2 rounded-md bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 px-3 py-2 text-xs text-blue-800 dark:text-blue-200">
<svg class="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke-width="4" stroke="currentColor" />
<path class="opacity-75" d="M4 12a8 8 0 018-8" stroke-width="4" stroke-linecap="round" stroke="currentColor" />
</svg>
<span>Refreshing security status…</span>
</div>
</Show>
{/* CRITICAL: Show generated token FIRST and PROMINENTLY */}
<Show when={newTokenValue()}>
<div class="space-y-4 border-4 border-green-500 dark:border-green-600 rounded-lg p-5 bg-green-50 dark:bg-green-900/30">
@ -227,7 +230,7 @@ export const APITokenManager: Component<APITokenManagerProps> = (props) => {
<div class="bg-yellow-50 dark:bg-yellow-900/30 border border-yellow-300 dark:border-yellow-700 rounded-lg p-3">
<p class="text-sm text-yellow-900 dark:text-yellow-100 font-medium">
💡 Next: Use this token on the <a href="/settings/docker-agents" class="underline hover:no-underline font-bold">Docker Agents</a> page to deploy monitoring.
💡 Keep this token safe and use it anywhere Pulse requires API authentication—Docker agents, automations, or custom integrations.
</p>
</div>

81
frontend-modern/src/components/Settings/Settings.tsx
View file

@ -3574,50 +3574,49 @@ const Settings: Component<SettingsProps> = (props) => {
{/* Security setup now handled by first-run wizard */}
{/* API Token - Show always to allow API access even when auth is disabled */}
<Show when={!securityStatusLoading()}>
<Card
padding="none"
class="overflow-hidden border border-gray-200 dark:border-gray-700"
border={false}
>
{/* Header */}
<div class="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 px-6 py-4 border-b border-gray-200 dark:border-gray-700">
<div class="flex items-center gap-3">
<div class="p-2 bg-blue-100 dark:bg-blue-900/50 rounded-lg">
<svg
class="w-5 h-5 text-blue-600 dark:text-blue-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<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"
/>
</svg>
</div>
<SectionHeader
title="API token"
description="For automation and integrations"
size="sm"
class="flex-1"
/>
<Card
padding="none"
class="overflow-hidden border border-gray-200 dark:border-gray-700"
border={false}
>
{/* Header */}
<div class="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 px-6 py-4 border-b border-gray-200 dark:border-gray-700">
<div class="flex items-center gap-3">
<div class="p-2 bg-blue-100 dark:bg-blue-900/50 rounded-lg">
<svg
class="w-5 h-5 text-blue-600 dark:text-blue-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<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"
/>
</svg>
</div>
</div>
{/* Content */}
<div class="p-6">
<APITokenManager
currentTokenHint={securityStatus()?.apiTokenHint}
onTokensChanged={() => {
void loadSecurityStatus();
}}
<SectionHeader
title="API token"
description="For automation and integrations"
size="sm"
class="flex-1"
/>
</div>
</Card>
</Show>
</div>
{/* Content */}
<div class="p-6">
<APITokenManager
currentTokenHint={securityStatus()?.apiTokenHint}
onTokensChanged={() => {
void loadSecurityStatus();
}}
refreshing={securityStatusLoading()}
/>
</div>
</Card>
{/* Advanced - Only show if auth is enabled */}
{/* Advanced Options section removed - was only used for Registration Tokens */}