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>

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

@ -3574,7 +3574,6 @@ 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"
@ -3614,10 +3613,10 @@ const Settings: Component<SettingsProps> = (props) => {
onTokensChanged={() => {
void loadSecurityStatus();
}}
refreshing={securityStatusLoading()}
/>
</div>
</Card>
</Show>
{/* Advanced - Only show if auth is enabled */}
{/* Advanced Options section removed - was only used for Registration Tokens */}