refactor(frontend): extract dashboard sections #73

-60

frontend/src/components/dashboard/AccountOverview.svelte

··· 1 1 - <script lang="ts"> 2 2 - import { _ } from '../../lib/i18n' 3 3 - import type { Session } from '../../lib/types/api' 4 4 - 5 5 - interface Props { 6 6 - session: Session 7 7 - } 8 8 - 9 9 - let { session }: Props = $props() 10 10 - </script> 11 11 - 12 12 - <div class="overview"> 13 13 - <dl> 14 14 - <dt>{$_('dashboard.handle')}</dt> 15 15 - <dd> 16 16 - @{session.handle} 17 17 - {#if session.isAdmin} 18 18 - <span class="badge admin">{$_('dashboard.admin')}</span> 19 19 - {/if} 20 20 - {#if session.accountKind === 'migrated'} 21 21 - <span class="badge migrated">{$_('dashboard.migrated')}</span> 22 22 - {:else if session.accountKind === 'deactivated'} 23 23 - <span class="badge deactivated">{$_('dashboard.deactivated')}</span> 24 24 - {/if} 25 25 - </dd> 26 26 - <dt>{$_('dashboard.did')}</dt> 27 27 - <dd class="mono">{session.did}</dd> 28 28 - {#if session.contactKind === 'channel'} 29 29 - <dt>{$_('dashboard.primaryContact')}</dt> 30 30 - <dd> 31 31 - {#if session.preferredChannel === 'email'} 32 32 - {session.email || $_('register.email')} 33 33 - {:else if session.preferredChannel === 'discord'} 34 34 - {$_('register.discord')} 35 35 - {:else if session.preferredChannel === 'telegram'} 36 36 - {$_('register.telegram')} 37 37 - {:else if session.preferredChannel === 'signal'} 38 38 - {$_('register.signal')} 39 39 - {:else} 40 40 - {session.preferredChannel} 41 41 - {/if} 42 42 - {#if session.preferredChannelVerified} 43 43 - <span class="badge success">{$_('dashboard.verified')}</span> 44 44 - {:else} 45 45 - <span class="badge warning">{$_('dashboard.unverified')}</span> 46 46 - {/if} 47 47 - </dd> 48 48 - {:else if session.contactKind === 'email'} 49 49 - <dt>{$_('register.email')}</dt> 50 50 - <dd> 51 51 - {session.email} 52 52 - {#if session.emailConfirmed} 53 53 - <span class="badge success">{$_('dashboard.verified')}</span> 54 54 - {:else} 55 55 - <span class="badge warning">{$_('dashboard.unverified')}</span> 56 56 - {/if} 57 57 - </dd> 58 58 - {/if} 59 59 - </dl> 60 60 - </div>

+20 -57

frontend/src/components/dashboard/AdminContent.svelte

··· 11 11 setColors as setGlobalColors, 12 12 setHasLogo as setGlobalHasLogo 13 13 } from '../../lib/serverConfig.svelte' 14 14 + import LoadMoreSentinel from '../LoadMoreSentinel.svelte' 15 15 + import { portal } from '../../lib/portal' 14 16 15 17 interface Props { 16 18 session: Session ··· 32 34 indexedAt: string 33 35 emailConfirmedAt?: string 34 36 deactivatedAt?: string 35 35 - invitesDisabled?: boolean 36 37 } 37 38 38 39 let stats = $state<ServerStats | null>(null) ··· 41 42 let usersLoading = $state(false) 42 43 let searchQuery = $state('') 43 44 let usersCursor = $state<string | undefined>(undefined) 45 45 + let usersHasMore = $state(true) 46 46 + let searchDebounce: ReturnType<typeof setTimeout> | null = null 44 47 45 48 let selectedUser = $state<User | null>(null) 46 49 let userActionLoading = $state(false) ··· 63 66 let serverConfigLoading = $state(false) 64 67 65 68 onMount(async () => { 66 66 - await Promise.all([loadStats(), loadServerConfig()]) 69 69 + await Promise.all([loadStats(), loadServerConfig(), loadUsers(true)]) 67 70 }) 68 71 69 72 async function loadStats() { ··· 82 85 if (reset) { 83 86 users = [] 84 87 usersCursor = undefined 88 88 + usersHasMore = true 85 89 } 86 90 try { 87 91 const result = await api.searchAccounts(session.accessJwt, { ··· 91 95 }) 92 96 users = reset ? result.accounts : [...users, ...result.accounts] 93 97 usersCursor = result.cursor 98 98 + usersHasMore = !!result.cursor 94 99 } catch { 95 100 toast.error($_('admin.failedToLoadUsers')) 96 101 } finally { ··· 98 103 } 99 104 } 100 105 101 101 - function handleSearch(e: Event) { 102 102 - e.preventDefault() 103 103 - loadUsers(true) 106 106 + function onSearchInput(value: string) { 107 107 + searchQuery = value 108 108 + if (searchDebounce) clearTimeout(searchDebounce) 109 109 + searchDebounce = setTimeout(() => loadUsers(true), 300) 104 110 } 105 111 106 112 function formatBytes(bytes: number): string { ··· 216 222 indexedAt: details.indexedAt, 217 223 emailConfirmedAt: details.emailConfirmedAt, 218 224 deactivatedAt: details.deactivatedAt, 219 219 - invitesDisabled: details.invitesDisabled 220 225 } 221 226 } catch { 222 227 } finally { ··· 228 233 selectedUser = null 229 234 } 230 235 231 231 - async function toggleUserInvites() { 232 232 - if (!selectedUser) return 233 233 - userActionLoading = true 234 234 - try { 235 235 - if (selectedUser.invitesDisabled) { 236 236 - await api.enableAccountInvites(session.accessJwt, unsafeAsDid(selectedUser.did)) 237 237 - selectedUser = { ...selectedUser, invitesDisabled: false } 238 238 - toast.success($_('admin.invitesEnabled')) 239 239 - } else { 240 240 - await api.disableAccountInvites(session.accessJwt, unsafeAsDid(selectedUser.did)) 241 241 - selectedUser = { ...selectedUser, invitesDisabled: true } 242 242 - toast.success($_('admin.invitesDisabled')) 243 243 - } 244 244 - } catch (e) { 245 245 - toast.error(e instanceof ApiError ? e.message : $_('admin.failedToToggleInvites')) 246 246 - } finally { 247 247 - userActionLoading = false 248 248 - } 249 249 - } 250 250 - 251 236 async function deleteUserAccount() { 252 237 if (!selectedUser) return 253 238 if (!confirm($_('admin.deleteConfirm', { values: { handle: selectedUser.handle } }))) return ··· 372 357 <section class="users-section"> 373 358 <h3>{$_('admin.userManagement')}</h3> 374 359 375 375 - <form class="search-bar" onsubmit={handleSearch}> 376 376 - <input 377 377 - type="text" 378 378 - bind:value={searchQuery} 379 379 - placeholder={$_('admin.searchPlaceholder')} 380 380 - /> 381 381 - <button type="submit" disabled={usersLoading}> 382 382 - {usersLoading ? $_('common.loading') : $_('admin.search')} 383 383 - </button> 384 384 - </form> 360 360 + <input 361 361 + type="text" 362 362 + value={searchQuery} 363 363 + oninput={(e) => onSearchInput(e.currentTarget.value)} 364 364 + placeholder={$_('admin.searchPlaceholder')} 365 365 + /> 385 366 386 367 {#if users.length === 0 && !usersLoading} 387 368 <p class="empty">{$_('admin.searchToSeeUsers')}</p> ··· 412 393 </li> 413 394 {/each} 414 395 </ul> 415 415 - {#if usersCursor} 416 416 - <button type="button" class="load-more" onclick={() => loadUsers(false)} disabled={usersLoading}> 417 417 - {usersLoading ? $_('common.loading') : $_('admin.loadMore')} 418 418 - </button> 419 419 - {/if} 396 396 + <LoadMoreSentinel hasMore={usersHasMore} loading={usersLoading} onLoadMore={() => loadUsers(false)} /> 420 397 {/if} 421 398 </section> 422 399 423 400 </div> 424 401 425 402 {#if selectedUser} 426 426 - <div class="modal-backdrop" onclick={closeUserDetail} onkeydown={(e) => e.key === 'Escape' && closeUserDetail()} role="presentation"> 403 403 + <div class="modal-backdrop" use:portal onclick={closeUserDetail} onkeydown={(e) => e.key === 'Escape' && closeUserDetail()} role="presentation"> 427 404 <div class="modal" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()} role="dialog" aria-modal="true" tabindex="-1"> 428 405 <div class="modal-header"> 429 406 <h2>{$_('admin.userDetails')}</h2> ··· 437 414 <dt>{$_('admin.handle')}</dt> 438 415 <dd>@{selectedUser.handle}</dd> 439 416 <dt>{$_('admin.did')}</dt> 440 440 - <dd class="mono">{selectedUser.did}</dd> 417 417 + <dd class="definition-mono">{selectedUser.did}</dd> 441 418 <dt>{$_('admin.email')}</dt> 442 419 <dd>{selectedUser.email || '-'}</dd> 443 420 <dt>{$_('admin.created')}</dt> ··· 452 429 <span class="badge unverified">{$_('admin.unverified')}</span> 453 430 {/if} 454 431 </dd> 455 455 - <dt>{$_('admin.invites')}</dt> 456 456 - <dd> 457 457 - {#if selectedUser.invitesDisabled} 458 458 - <span class="badge deactivated">{$_('admin.disabled')}</span> 459 459 - {:else} 460 460 - <span class="badge verified">{$_('admin.enabled')}</span> 461 461 - {/if} 462 462 - </dd> 463 432 </dl> 464 433 <div class="modal-actions"> 465 465 - <button 466 466 - onclick={toggleUserInvites} 467 467 - disabled={userActionLoading} 468 468 - > 469 469 - {selectedUser.invitesDisabled ? $_('admin.enableInvites') : $_('admin.disableInvites')} 470 470 - </button> 471 434 <button 472 435 class="danger" 473 436 onclick={deleteUserAccount}

+14 -14

frontend/src/components/dashboard/ControllersContent.svelte

··· 376 376 </div> 377 377 <div class="item-details"> 378 378 <div class="detail"> 379 379 - <span class="label">{$_('delegation.did')}</span> 380 380 - <span class="value did">{controller.did}</span> 379 379 + <span class="detail-label">{$_('delegation.did')}</span> 380 380 + <span class="detail-value detail-value-did">{controller.did}</span> 381 381 </div> 382 382 <div class="detail"> 383 383 - <span class="label">{$_('delegation.granted')}</span> 384 384 - <span class="value">{formatDateTime(controller.grantedAt)}</span> 383 383 + <span class="detail-label">{$_('delegation.granted')}</span> 384 384 + <span class="detail-value">{formatDateTime(controller.grantedAt)}</span> 385 385 </div> 386 386 </div> 387 387 </div> ··· 507 507 </div> 508 508 <div class="item-details"> 509 509 <div class="detail"> 510 510 - <span class="label">{$_('delegation.did')}</span> 511 511 - <span class="value did">{account.did}</span> 510 510 + <span class="detail-label">{$_('delegation.did')}</span> 511 511 + <span class="detail-value detail-value-did">{account.did}</span> 512 512 </div> 513 513 <div class="detail"> 514 514 - <span class="label">{$_('delegation.granted')}</span> 515 515 - <span class="value">{formatDateTime(account.grantedAt)}</span> 514 514 + <span class="detail-label">{$_('delegation.granted')}</span> 515 515 + <span class="detail-value">{formatDateTime(account.grantedAt)}</span> 516 516 </div> 517 517 </div> 518 518 </div> ··· 601 601 </div> 602 602 <div class="audit-entry-details"> 603 603 <div class="detail"> 604 604 - <span class="label">{$_('delegation.actor')}</span> 605 605 - <span class="value did">{entry.actorDid}</span> 604 604 + <span class="detail-label">{$_('delegation.actor')}</span> 605 605 + <span class="detail-value detail-value-did">{entry.actorDid}</span> 606 606 </div> 607 607 {#if entry.delegatedDid} 608 608 <div class="detail"> 609 609 - <span class="label">{$_('delegation.target')}</span> 610 610 - <span class="value did">{entry.delegatedDid}</span> 609 609 + <span class="detail-label">{$_('delegation.target')}</span> 610 610 + <span class="detail-value detail-value-did">{entry.delegatedDid}</span> 611 611 </div> 612 612 {/if} 613 613 {#if entry.actionDetails} 614 614 <div class="detail"> 615 615 - <span class="label">{$_('delegation.details')}</span> 616 616 - <span class="value audit-details-value">{formatActionDetails(entry.actionDetails)}</span> 615 615 + <span class="detail-label">{$_('delegation.details')}</span> 616 616 + <span class="detail-value audit-details-value">{formatActionDetails(entry.actionDetails)}</span> 617 617 </div> 618 618 {/if} 619 619 </div>

-53

frontend/src/components/dashboard/MigrationContent.svelte

··· 1 1 - <script lang="ts"> 2 2 - import { _ } from '../../lib/i18n' 3 3 - import { navigate, routes } from '../../lib/router.svelte' 4 4 - import type { Session } from '../../lib/types/api' 5 5 - 6 6 - interface Props { 7 7 - session: Session 8 8 - } 9 9 - 10 10 - let { session }: Props = $props() 11 11 - 12 12 - function startMigration(type: 'inbound' | 'offline') { 13 13 - const url = type === 'offline' 14 14 - ? `${routes.migrate}?flow=offline` 15 15 - : routes.migrate 16 16 - navigate(url as typeof routes.migrate) 17 17 - } 18 18 - </script> 19 19 - 20 20 - <div class="migration"> 21 21 - <section> 22 22 - <h3>{$_('migration.migrateHere')}</h3> 23 23 - <p class="description">{$_('migration.migrateHereDesc')}</p> 24 24 - <ul class="feature-list"> 25 25 - <li>{$_('migration.bringDid')}</li> 26 26 - <li>{$_('migration.transferData')}</li> 27 27 - <li>{$_('migration.keepFollowers')}</li> 28 28 - </ul> 29 29 - <button onclick={() => startMigration('inbound')}> 30 30 - {$_('migration.inbound.review.startMigration')} 31 31 - </button> 32 32 - </section> 33 33 - 34 34 - <section> 35 35 - <h3>{$_('migration.offlineRestore')}</h3> 36 36 - <p class="description">{$_('migration.offlineRestoreDesc')}</p> 37 37 - <ul class="feature-list"> 38 38 - <li>{$_('migration.offlineFeature1')}</li> 39 39 - <li>{$_('migration.offlineFeature2')}</li> 40 40 - <li>{$_('migration.offlineFeature3')}</li> 41 41 - </ul> 42 42 - <button class="secondary" onclick={() => startMigration('offline')}> 43 43 - {$_('migration.offlineRestore')} 44 44 - </button> 45 45 - </section> 46 46 - 47 47 - {#if session.accountKind === 'migrated'} 48 48 - <section class="info-section"> 49 49 - <h3>{$_('dashboard.migratedTitle')}</h3> 50 50 - <p>{$_('dashboard.migratedMessage', { values: { pds: session.migratedToPds || 'another PDS' } })}</p> 51 51 - </section> 52 52 - {/if} 53 53 - </div>

+166

frontend/src/components/dashboard/PasskeySection.svelte

··· 1 1 + <script lang="ts"> 2 2 + import { onMount } from 'svelte' 3 3 + import { api, ApiError } from '../../lib/api' 4 4 + import { _ } from '../../lib/i18n' 5 5 + import { formatDate } from '../../lib/date' 6 6 + import { toast } from '../../lib/toast.svelte' 7 7 + import type { Session } from '../../lib/types/api' 8 8 + import { 9 9 + prepareCreationOptions, 10 10 + serializeAttestationResponse, 11 11 + type WebAuthnCreationOptionsResponse, 12 12 + } from '../../lib/webauthn' 13 13 + 14 14 + interface Props { 15 15 + session: Session 16 16 + hasPassword: boolean 17 17 + onPasskeysChanged?: (count: number) => void 18 18 + } 19 19 + 20 20 + let { session, hasPassword, onPasskeysChanged }: Props = $props() 21 21 + 22 22 + interface Passkey { 23 23 + id: string 24 24 + credentialId: string 25 25 + friendlyName: string | null 26 26 + createdAt: string 27 27 + lastUsed: string | null 28 28 + } 29 29 + 30 30 + let passkeys = $state<Passkey[]>([]) 31 31 + let loading = $state(true) 32 32 + let addingPasskey = $state(false) 33 33 + let newPasskeyName = $state('') 34 34 + let editingPasskeyId = $state<string | null>(null) 35 35 + let editPasskeyName = $state('') 36 36 + 37 37 + onMount(async () => { 38 38 + await loadPasskeys() 39 39 + }) 40 40 + 41 41 + async function loadPasskeys() { 42 42 + loading = true 43 43 + try { 44 44 + const result = await api.listPasskeys(session.accessJwt) 45 45 + passkeys = result.passkeys 46 46 + onPasskeysChanged?.(passkeys.length) 47 47 + } catch { 48 48 + toast.error($_('security.failedToLoadPasskeys')) 49 49 + } finally { 50 50 + loading = false 51 51 + } 52 52 + } 53 53 + 54 54 + async function handleAddPasskey() { 55 55 + if (!window.PublicKeyCredential) { 56 56 + toast.error($_('security.passkeysNotSupported')) 57 57 + return 58 58 + } 59 59 + addingPasskey = true 60 60 + try { 61 61 + const { options } = await api.startPasskeyRegistration(session.accessJwt, newPasskeyName || undefined) 62 62 + const publicKeyOptions = prepareCreationOptions(options as unknown as WebAuthnCreationOptionsResponse) 63 63 + const credential = await navigator.credentials.create({ publicKey: publicKeyOptions }) 64 64 + if (!credential) { 65 65 + toast.error($_('security.passkeyCreationCancelled')) 66 66 + return 67 67 + } 68 68 + const credentialResponse = serializeAttestationResponse(credential as PublicKeyCredential) 69 69 + await api.finishPasskeyRegistration(session.accessJwt, credentialResponse, newPasskeyName || undefined) 70 70 + await loadPasskeys() 71 71 + newPasskeyName = '' 72 72 + toast.success($_('security.passkeyAddedSuccess')) 73 73 + } catch (e) { 74 74 + if (e instanceof DOMException && e.name === 'NotAllowedError') { 75 75 + toast.error($_('security.passkeyCreationCancelled')) 76 76 + } else { 77 77 + toast.error(e instanceof ApiError ? e.message : 'Failed to add passkey') 78 78 + } 79 79 + } finally { 80 80 + addingPasskey = false 81 81 + } 82 82 + } 83 83 + 84 84 + async function handleDeletePasskey(id: string) { 85 85 + const passkey = passkeys.find(p => p.id === id) 86 86 + if (!confirm($_('security.deletePasskeyConfirm', { values: { name: passkey?.friendlyName || 'this passkey' } }))) return 87 87 + try { 88 88 + await api.deletePasskey(session.accessJwt, id) 89 89 + await loadPasskeys() 90 90 + toast.success($_('security.passkeyDeleted')) 91 91 + } catch (e) { 92 92 + toast.error(e instanceof ApiError ? e.message : 'Failed to delete passkey') 93 93 + } 94 94 + } 95 95 + 96 96 + async function handleSavePasskeyName() { 97 97 + if (!editingPasskeyId || !editPasskeyName.trim()) return 98 98 + try { 99 99 + await api.updatePasskey(session.accessJwt, editingPasskeyId, editPasskeyName.trim()) 100 100 + await loadPasskeys() 101 101 + editingPasskeyId = null 102 102 + editPasskeyName = '' 103 103 + toast.success($_('security.passkeyRenamed')) 104 104 + } catch (e) { 105 105 + toast.error(e instanceof ApiError ? e.message : 'Failed to rename passkey') 106 106 + } 107 107 + } 108 108 + 109 109 + function startEditPasskey(passkey: Passkey) { 110 110 + editingPasskeyId = passkey.id 111 111 + editPasskeyName = passkey.friendlyName || '' 112 112 + } 113 113 + 114 114 + function cancelEditPasskey() { 115 115 + editingPasskeyId = null 116 116 + editPasskeyName = '' 117 117 + } 118 118 + </script> 119 119 + 120 120 + <section> 121 121 + <h3>{$_('security.passkeys')}</h3> 122 122 + 123 123 + {#if !loading} 124 124 + {#if passkeys.length > 0} 125 125 + <ul class="passkey-list"> 126 126 + {#each passkeys as passkey} 127 127 + <li class="passkey-item"> 128 128 + {#if editingPasskeyId === passkey.id} 129 129 + <div class="passkey-edit"> 130 130 + <input type="text" bind:value={editPasskeyName} placeholder={$_('security.passkeyName')} /> 131 131 + <button type="button" class="sm" onclick={handleSavePasskeyName}>{$_('common.save')}</button> 132 132 + <button type="button" class="sm secondary" onclick={cancelEditPasskey}>{$_('common.cancel')}</button> 133 133 + </div> 134 134 + {:else} 135 135 + <div class="passkey-info"> 136 136 + <span class="passkey-name">{passkey.friendlyName || $_('security.unnamedPasskey')}</span> 137 137 + <span class="passkey-meta"> 138 138 + {$_('security.added')} {formatDate(passkey.createdAt)} 139 139 + {#if passkey.lastUsed} 140 140 + - {$_('security.lastUsed')} {formatDate(passkey.lastUsed)} 141 141 + {/if} 142 142 + </span> 143 143 + </div> 144 144 + <div class="passkey-actions"> 145 145 + <button type="button" class="sm secondary" onclick={() => startEditPasskey(passkey)}>{$_('security.rename')}</button> 146 146 + {#if hasPassword || passkeys.length > 1} 147 147 + <button type="button" class="sm danger-outline" onclick={() => handleDeletePasskey(passkey.id)}>{$_('security.deletePasskey')}</button> 148 148 + {/if} 149 149 + </div> 150 150 + {/if} 151 151 + </li> 152 152 + {/each} 153 153 + </ul> 154 154 + {:else} 155 155 + <div class="status warning">{$_('security.noPasskeys')}</div> 156 156 + {/if} 157 157 + 158 158 + <div class="add-passkey"> 159 159 + <input type="text" bind:value={newPasskeyName} placeholder={$_('security.passkeyNamePlaceholder')} disabled={addingPasskey} /> 160 160 + <button onclick={handleAddPasskey} disabled={addingPasskey}> 161 161 + {addingPasskey ? $_('security.adding') : $_('security.addPasskey')} 162 162 + </button> 163 163 + </div> 164 164 + 165 165 + {/if} 166 166 + </section>

+265

frontend/src/components/dashboard/PasswordSection.svelte

··· 1 1 + <script lang="ts"> 2 2 + import { onMount } from 'svelte' 3 3 + import { getValidToken } from '../../lib/auth.svelte' 4 4 + import { api, ApiError } from '../../lib/api' 5 5 + import { _ } from '../../lib/i18n' 6 6 + import { toast } from '../../lib/toast.svelte' 7 7 + import type { Session } from '../../lib/types/api' 8 8 + 9 9 + interface Props { 10 10 + session: Session 11 11 + passkeyCount: number 12 12 + onPasswordChanged?: (hasPassword: boolean) => void 13 13 + onReauthRequired: (methods: string[], retryAction: () => Promise<void>) => void 14 14 + } 15 15 + 16 16 + let { session, passkeyCount, onPasswordChanged, onReauthRequired }: Props = $props() 17 17 + 18 18 + let hasPassword = $state(true) 19 19 + let loading = $state(true) 20 20 + 21 21 + let showChangePasswordForm = $state(false) 22 22 + let currentPassword = $state('') 23 23 + let newPassword = $state('') 24 24 + let confirmNewPassword = $state('') 25 25 + let changePasswordLoading = $state(false) 26 26 + 27 27 + let showSetPasswordForm = $state(false) 28 28 + let setNewPassword = $state('') 29 29 + let setConfirmPassword = $state('') 30 30 + let setPasswordLoading = $state(false) 31 31 + 32 32 + let showRemovePasswordForm = $state(false) 33 33 + let removePasswordLoading = $state(false) 34 34 + 35 35 + onMount(async () => { 36 36 + await loadPasswordStatus() 37 37 + }) 38 38 + 39 39 + async function loadPasswordStatus() { 40 40 + loading = true 41 41 + try { 42 42 + const status = await api.getPasswordStatus(session.accessJwt) 43 43 + hasPassword = status.hasPassword 44 44 + onPasswordChanged?.(hasPassword) 45 45 + } catch { 46 46 + hasPassword = true 47 47 + } finally { 48 48 + loading = false 49 49 + } 50 50 + } 51 51 + 52 52 + function handleReauthError(e: unknown, fallback: string, retryAction: () => Promise<void>) { 53 53 + if (e instanceof ApiError) { 54 54 + if (e.error === 'ReauthRequired') { 55 55 + onReauthRequired(e.reauthMethods || ['password'], retryAction) 56 56 + } else { 57 57 + toast.error(e.message) 58 58 + } 59 59 + } else { 60 60 + toast.error(fallback) 61 61 + } 62 62 + } 63 63 + 64 64 + async function handleChangePassword(e: Event) { 65 65 + e.preventDefault() 66 66 + if (!currentPassword || !newPassword || !confirmNewPassword) return 67 67 + if (newPassword !== confirmNewPassword) { 68 68 + toast.error($_('security.passwordsDoNotMatch')) 69 69 + return 70 70 + } 71 71 + if (newPassword.length < 8) { 72 72 + toast.error($_('security.passwordTooShort')) 73 73 + return 74 74 + } 75 75 + changePasswordLoading = true 76 76 + try { 77 77 + await api.changePassword(session.accessJwt, currentPassword, newPassword) 78 78 + toast.success($_('security.passwordChanged')) 79 79 + currentPassword = '' 80 80 + newPassword = '' 81 81 + confirmNewPassword = '' 82 82 + showChangePasswordForm = false 83 83 + } catch (e) { 84 84 + handleReauthError(e, $_('security.failedToChangePassword'), () => handleChangePassword(new Event('submit'))) 85 85 + } finally { 86 86 + changePasswordLoading = false 87 87 + } 88 88 + } 89 89 + 90 90 + async function handleSetPassword(e: Event) { 91 91 + e.preventDefault() 92 92 + if (!setNewPassword || !setConfirmPassword) return 93 93 + if (setNewPassword !== setConfirmPassword) { 94 94 + toast.error($_('security.passwordsDoNotMatch')) 95 95 + return 96 96 + } 97 97 + if (setNewPassword.length < 8) { 98 98 + toast.error($_('security.passwordTooShort')) 99 99 + return 100 100 + } 101 101 + setPasswordLoading = true 102 102 + try { 103 103 + await api.setPassword(session.accessJwt, setNewPassword) 104 104 + hasPassword = true 105 105 + toast.success($_('security.passwordSet')) 106 106 + setNewPassword = '' 107 107 + setConfirmPassword = '' 108 108 + showSetPasswordForm = false 109 109 + onPasswordChanged?.(true) 110 110 + } catch (e) { 111 111 + handleReauthError(e, $_('security.failedToSetPassword'), () => handleSetPassword(new Event('submit'))) 112 112 + } finally { 113 113 + setPasswordLoading = false 114 114 + } 115 115 + } 116 116 + 117 117 + async function handleRemovePassword() { 118 118 + removePasswordLoading = true 119 119 + try { 120 120 + const token = await getValidToken() 121 121 + if (!token) { 122 122 + toast.error($_('security.sessionExpired')) 123 123 + return 124 124 + } 125 125 + await api.removePassword(token) 126 126 + hasPassword = false 127 127 + showRemovePasswordForm = false 128 128 + toast.success($_('security.passwordRemoved')) 129 129 + onPasswordChanged?.(false) 130 130 + } catch (e) { 131 131 + handleReauthError(e, $_('security.failedToRemovePassword'), handleRemovePassword) 132 132 + } finally { 133 133 + removePasswordLoading = false 134 134 + } 135 135 + } 136 136 + </script> 137 137 + 138 138 + <section> 139 139 + <h3>{$_('security.password')}</h3> 140 140 + {#if !loading} 141 141 + {#if hasPassword} 142 142 + <div class="status success">{$_('security.passwordStatus')}</div> 143 143 + 144 144 + {#if !showChangePasswordForm && !showRemovePasswordForm} 145 145 + <div class="password-actions"> 146 146 + <button type="button" onclick={() => showChangePasswordForm = true}> 147 147 + {$_('security.changePassword')} 148 148 + </button> 149 149 + {#if passkeyCount > 0} 150 150 + <button type="button" class="danger-outline" onclick={() => showRemovePasswordForm = true}> 151 151 + {$_('security.removePassword')} 152 152 + </button> 153 153 + {/if} 154 154 + </div> 155 155 + {/if} 156 156 + 157 157 + {#if showChangePasswordForm} 158 158 + <form class="inline-form" onsubmit={handleChangePassword}> 159 159 + <h4>{$_('security.changePassword')}</h4> 160 160 + <div> 161 161 + <label for="current-password">{$_('security.currentPassword')}</label> 162 162 + <input 163 163 + id="current-password" 164 164 + type="password" 165 165 + bind:value={currentPassword} 166 166 + placeholder={$_('security.currentPasswordPlaceholder')} 167 167 + disabled={changePasswordLoading} 168 168 + required 169 169 + /> 170 170 + </div> 171 171 + <div> 172 172 + <label for="new-password">{$_('security.newPassword')}</label> 173 173 + <input 174 174 + id="new-password" 175 175 + type="password" 176 176 + bind:value={newPassword} 177 177 + placeholder={$_('security.newPasswordPlaceholder')} 178 178 + disabled={changePasswordLoading} 179 179 + required 180 180 + minlength="8" 181 181 + /> 182 182 + </div> 183 183 + <div> 184 184 + <label for="confirm-password">{$_('security.confirmPassword')}</label> 185 185 + <input 186 186 + id="confirm-password" 187 187 + type="password" 188 188 + bind:value={confirmNewPassword} 189 189 + placeholder={$_('security.confirmPasswordPlaceholder')} 190 190 + disabled={changePasswordLoading} 191 191 + required 192 192 + minlength="8" 193 193 + /> 194 194 + </div> 195 195 + <div class="actions"> 196 196 + <button type="button" class="secondary" onclick={() => { showChangePasswordForm = false; currentPassword = ''; newPassword = ''; confirmNewPassword = '' }}> 197 197 + {$_('common.cancel')} 198 198 + </button> 199 199 + <button type="submit" disabled={changePasswordLoading || !currentPassword || !newPassword || !confirmNewPassword}> 200 200 + {changePasswordLoading ? $_('security.changing') : $_('security.changePassword')} 201 201 + </button> 202 202 + </div> 203 203 + </form> 204 204 + {/if} 205 205 + 206 206 + {#if showRemovePasswordForm} 207 207 + <div class="remove-password-form"> 208 208 + <p class="warning-text">{$_('security.removePasswordWarning')}</p> 209 209 + <div class="actions"> 210 210 + <button type="button" class="ghost sm" onclick={() => showRemovePasswordForm = false}> 211 211 + {$_('common.cancel')} 212 212 + </button> 213 213 + <button type="button" class="danger sm" onclick={handleRemovePassword} disabled={removePasswordLoading}> 214 214 + {removePasswordLoading ? $_('security.removing') : $_('security.removePassword')} 215 215 + </button> 216 216 + </div> 217 217 + </div> 218 218 + {/if} 219 219 + {:else} 220 220 + <div class="status info">{$_('security.noPassword')}</div> 221 221 + 222 222 + {#if !showSetPasswordForm} 223 223 + <button type="button" onclick={() => showSetPasswordForm = true}> 224 224 + {$_('security.setPassword')} 225 225 + </button> 226 226 + {:else} 227 227 + <form class="inline-form" onsubmit={handleSetPassword}> 228 228 + <h4>{$_('security.setPassword')}</h4> 229 229 + <div> 230 230 + <label for="set-new-password">{$_('security.newPassword')}</label> 231 231 + <input 232 232 + id="set-new-password" 233 233 + type="password" 234 234 + bind:value={setNewPassword} 235 235 + placeholder={$_('security.newPasswordPlaceholder')} 236 236 + disabled={setPasswordLoading} 237 237 + required 238 238 + minlength="8" 239 239 + /> 240 240 + </div> 241 241 + <div> 242 242 + <label for="set-confirm-password">{$_('security.confirmPassword')}</label> 243 243 + <input 244 244 + id="set-confirm-password" 245 245 + type="password" 246 246 + bind:value={setConfirmPassword} 247 247 + placeholder={$_('security.confirmPasswordPlaceholder')} 248 248 + disabled={setPasswordLoading} 249 249 + required 250 250 + minlength="8" 251 251 + /> 252 252 + </div> 253 253 + <div class="actions"> 254 254 + <button type="button" class="secondary" onclick={() => { showSetPasswordForm = false; setNewPassword = ''; setConfirmPassword = '' }}> 255 255 + {$_('common.cancel')} 256 256 + </button> 257 257 + <button type="submit" disabled={setPasswordLoading || !setNewPassword || !setConfirmPassword}> 258 258 + {setPasswordLoading ? $_('security.setting') : $_('security.setPassword')} 259 259 + </button> 260 260 + </div> 261 261 + </form> 262 262 + {/if} 263 263 + {/if} 264 264 + {/if} 265 265 + </section>

+4 -4

frontend/src/components/dashboard/SessionsContent.svelte

··· 116 116 </div> 117 117 <div class="session-details"> 118 118 <div class="detail"> 119 119 - <span class="label">{$_('sessions.created')}</span> 120 120 - <span class="value">{timeAgo(s.createdAt)}</span> 119 119 + <span class="detail-label">{$_('sessions.created')}</span> 120 120 + <span class="detail-value">{timeAgo(s.createdAt)}</span> 121 121 </div> 122 122 <div class="detail"> 123 123 - <span class="label">{$_('sessions.expires')}</span> 124 124 - <span class="value">{formatDate(s.expiresAt)}</span> 123 123 + <span class="detail-label">{$_('sessions.expires')}</span> 124 124 + <span class="detail-value">{formatDate(s.expiresAt)}</span> 125 125 </div> 126 126 </div> 127 127 </div>

+279

frontend/src/components/dashboard/TotpSection.svelte

··· 1 1 + <script lang="ts"> 2 2 + import { onMount } from 'svelte' 3 3 + import { api, ApiError } from '../../lib/api' 4 4 + import { _ } from '../../lib/i18n' 5 5 + import { toast } from '../../lib/toast.svelte' 6 6 + import type { Session } from '../../lib/types/api' 7 7 + import { 8 8 + type TotpSetupState, 9 9 + idleState, 10 10 + qrState, 11 11 + verifyState, 12 12 + backupState, 13 13 + goBackToQr, 14 14 + finish, 15 15 + type TotpQr, 16 16 + } from '../../lib/types/totp-state' 17 17 + 18 18 + interface Props { 19 19 + session: Session 20 20 + onStatusChanged?: (enabled: boolean, hasBackupCodes: boolean) => void 21 21 + } 22 22 + 23 23 + let { session, onStatusChanged }: Props = $props() 24 24 + 25 25 + let totpEnabled = $state(false) 26 26 + let hasBackupCodes = $state(false) 27 27 + let totpSetup = $state<TotpSetupState>(idleState) 28 28 + let verifyCodeRaw = $state('') 29 29 + let verifyCode = $derived(verifyCodeRaw.replace(/\s/g, '')) 30 30 + let verifyLoading = $state(false) 31 31 + 32 32 + let disablePassword = $state('') 33 33 + let disableCode = $state('') 34 34 + let disableLoading = $state(false) 35 35 + let showDisableForm = $state(false) 36 36 + 37 37 + let regenPassword = $state('') 38 38 + let regenCode = $state('') 39 39 + let regenLoading = $state(false) 40 40 + let showRegenForm = $state(false) 41 41 + 42 42 + onMount(async () => { 43 43 + await loadTotpStatus() 44 44 + }) 45 45 + 46 46 + async function loadTotpStatus() { 47 47 + try { 48 48 + const status = await api.getTotpStatus(session.accessJwt) 49 49 + totpEnabled = status.enabled 50 50 + hasBackupCodes = status.hasBackupCodes 51 51 + onStatusChanged?.(totpEnabled, hasBackupCodes) 52 52 + } catch { 53 53 + toast.error($_('security.failedToLoadTotpStatus')) 54 54 + } 55 55 + } 56 56 + 57 57 + async function handleStartTotpSetup() { 58 58 + verifyLoading = true 59 59 + try { 60 60 + const result = await api.createTotpSecret(session.accessJwt) 61 61 + totpSetup = qrState(result.qrBase64, result.uri) 62 62 + } catch (e) { 63 63 + toast.error(e instanceof ApiError ? e.message : 'Failed to generate TOTP secret') 64 64 + } finally { 65 65 + verifyLoading = false 66 66 + } 67 67 + } 68 68 + 69 69 + async function handleVerifyTotp(e: Event) { 70 70 + e.preventDefault() 71 71 + if (!verifyCode || totpSetup.step !== 'verify') return 72 72 + verifyLoading = true 73 73 + try { 74 74 + const result = await api.enableTotp(session.accessJwt, verifyCode) 75 75 + totpSetup = backupState(totpSetup, result.backupCodes) 76 76 + totpEnabled = true 77 77 + hasBackupCodes = true 78 78 + verifyCodeRaw = '' 79 79 + onStatusChanged?.(true, true) 80 80 + } catch (e) { 81 81 + toast.error(e instanceof ApiError ? e.message : 'Invalid code') 82 82 + } finally { 83 83 + verifyLoading = false 84 84 + } 85 85 + } 86 86 + 87 87 + function handleFinishSetup() { 88 88 + if (totpSetup.step !== 'backup') return 89 89 + totpSetup = finish(totpSetup) 90 90 + toast.success($_('security.totpEnabledSuccess')) 91 91 + } 92 92 + 93 93 + function copyBackupCodes() { 94 94 + if (totpSetup.step !== 'backup') return 95 95 + navigator.clipboard.writeText(totpSetup.backupCodes.join('\n')) 96 96 + toast.success($_('security.backupCodesCopied')) 97 97 + } 98 98 + 99 99 + async function handleDisableTotp(e: Event) { 100 100 + e.preventDefault() 101 101 + if (!disablePassword || !disableCode) return 102 102 + disableLoading = true 103 103 + try { 104 104 + await api.disableTotp(session.accessJwt, disablePassword, disableCode) 105 105 + totpEnabled = false 106 106 + hasBackupCodes = false 107 107 + showDisableForm = false 108 108 + disablePassword = '' 109 109 + disableCode = '' 110 110 + toast.success($_('security.totpDisabledSuccess')) 111 111 + onStatusChanged?.(false, false) 112 112 + } catch (e) { 113 113 + toast.error(e instanceof ApiError ? e.message : $_('security.failedToDisableTotp')) 114 114 + } finally { 115 115 + disableLoading = false 116 116 + } 117 117 + } 118 118 + 119 119 + async function handleRegenerateBackupCodes(e: Event) { 120 120 + e.preventDefault() 121 121 + if (!regenPassword || !regenCode) return 122 122 + regenLoading = true 123 123 + try { 124 124 + const result = await api.regenerateBackupCodes(session.accessJwt, regenPassword, regenCode) 125 125 + const dummyVerify = verifyState(qrState('', '')) 126 126 + totpSetup = backupState(dummyVerify, result.backupCodes) 127 127 + showRegenForm = false 128 128 + regenPassword = '' 129 129 + regenCode = '' 130 130 + } catch (e) { 131 131 + toast.error(e instanceof ApiError ? e.message : $_('security.failedToRegenerateBackupCodes')) 132 132 + } finally { 133 133 + regenLoading = false 134 134 + } 135 135 + } 136 136 + </script> 137 137 + 138 138 + <section> 139 139 + <h3>{$_('security.totp')}</h3> 140 140 + 141 141 + {#if totpSetup.step === 'idle'} 142 142 + {#if totpEnabled} 143 143 + <div class="status success">{$_('security.totpEnabled')}</div> 144 144 + 145 145 + {#if !showDisableForm && !showRegenForm} 146 146 + <div class="totp-actions"> 147 147 + <button type="button" class="secondary" onclick={() => showRegenForm = true}> 148 148 + {$_('security.regenerateBackupCodes')} 149 149 + </button> 150 150 + <button type="button" class="danger-outline" onclick={() => showDisableForm = true}> 151 151 + {$_('security.disableTotp')} 152 152 + </button> 153 153 + </div> 154 154 + {/if} 155 155 + 156 156 + {#if showRegenForm} 157 157 + <form class="inline-form" onsubmit={handleRegenerateBackupCodes}> 158 158 + <h4>{$_('security.regenerateBackupCodes')}</h4> 159 159 + <p class="warning-text">{$_('security.regenerateConfirm')}</p> 160 160 + <div> 161 161 + <label for="regen-password">{$_('security.password')}</label> 162 162 + <input 163 163 + id="regen-password" 164 164 + type="password" 165 165 + bind:value={regenPassword} 166 166 + placeholder={$_('security.enterPassword')} 167 167 + disabled={regenLoading} 168 168 + required 169 169 + /> 170 170 + </div> 171 171 + <div> 172 172 + <label for="regen-code">{$_('security.totpCode')}</label> 173 173 + <input 174 174 + id="regen-code" 175 175 + type="text" 176 176 + bind:value={regenCode} 177 177 + placeholder={$_('security.totpCodePlaceholder')} 178 178 + disabled={regenLoading} 179 179 + required 180 180 + maxlength="6" 181 181 + inputmode="numeric" 182 182 + /> 183 183 + </div> 184 184 + <div class="actions"> 185 185 + <button type="button" class="secondary" onclick={() => { showRegenForm = false; regenPassword = ''; regenCode = '' }}> 186 186 + {$_('common.cancel')} 187 187 + </button> 188 188 + <button type="submit" disabled={regenLoading || !regenPassword || regenCode.length !== 6}> 189 189 + {regenLoading ? $_('security.regenerating') : $_('security.regenerateBackupCodes')} 190 190 + </button> 191 191 + </div> 192 192 + </form> 193 193 + {/if} 194 194 + 195 195 + {#if showDisableForm} 196 196 + <form class="inline-form danger-form" onsubmit={handleDisableTotp}> 197 197 + <h4>{$_('security.disableTotp')}</h4> 198 198 + <p class="warning-text">{$_('security.disableTotpWarning')}</p> 199 199 + <div> 200 200 + <label for="disable-password">{$_('security.password')}</label> 201 201 + <input 202 202 + id="disable-password" 203 203 + type="password" 204 204 + bind:value={disablePassword} 205 205 + placeholder={$_('security.enterPassword')} 206 206 + disabled={disableLoading} 207 207 + required 208 208 + /> 209 209 + </div> 210 210 + <div> 211 211 + <label for="disable-code">{$_('security.totpCode')}</label> 212 212 + <input 213 213 + id="disable-code" 214 214 + type="text" 215 215 + bind:value={disableCode} 216 216 + placeholder={$_('security.totpCodePlaceholder')} 217 217 + disabled={disableLoading} 218 218 + required 219 219 + maxlength="6" 220 220 + inputmode="numeric" 221 221 + /> 222 222 + </div> 223 223 + <div class="actions"> 224 224 + <button type="button" class="secondary" onclick={() => { showDisableForm = false; disablePassword = ''; disableCode = '' }}> 225 225 + {$_('common.cancel')} 226 226 + </button> 227 227 + <button type="submit" class="danger" disabled={disableLoading || !disablePassword || disableCode.length !== 6}> 228 228 + {disableLoading ? $_('security.disabling') : $_('security.disableTotp')} 229 229 + </button> 230 230 + </div> 231 231 + </form> 232 232 + {/if} 233 233 + {:else} 234 234 + <div class="status warning">{$_('security.totpDisabled')}</div> 235 235 + <button onclick={handleStartTotpSetup} disabled={verifyLoading}> 236 236 + {$_('security.enableTotp')} 237 237 + </button> 238 238 + {/if} 239 239 + {:else if totpSetup.step === 'qr'} 240 240 + {@const qrData = totpSetup as TotpQr} 241 241 + <div class="setup-step"> 242 242 + <p>{$_('security.totpSetupInstructions')}</p> 243 243 + <div class="qr-container"> 244 244 + <img src="data:image/png;base64,{qrData.qrBase64}" alt="TOTP QR Code" class="qr-code" /> 245 245 + </div> 246 246 + <details class="manual-entry"> 247 247 + <summary>{$_('security.cantScan')}</summary> 248 248 + <code class="secret-code">{qrData.totpUri.split('secret=')[1]?.split('&')[0] || ''}</code> 249 249 + </details> 250 250 + <button onclick={() => totpSetup = verifyState(qrData)}>{$_('security.next')}</button> 251 251 + </div> 252 252 + {:else if totpSetup.step === 'verify'} 253 253 + {@const verifyData = totpSetup} 254 254 + <div class="setup-step"> 255 255 + <p>{$_('security.totpCodePlaceholder')}</p> 256 256 + <form onsubmit={handleVerifyTotp}> 257 257 + <input type="text" bind:value={verifyCodeRaw} placeholder="000000" class="code-input" inputmode="numeric" disabled={verifyLoading} /> 258 258 + <div class="actions"> 259 259 + <button type="button" class="secondary" onclick={() => totpSetup = goBackToQr(verifyData)}>{$_('common.back')}</button> 260 260 + <button type="submit" disabled={verifyLoading || verifyCode.length !== 6}>{$_('security.verifyAndEnable')}</button> 261 261 + </div> 262 262 + </form> 263 263 + </div> 264 264 + {:else if totpSetup.step === 'backup'} 265 265 + <div class="setup-step"> 266 266 + <h4>{$_('security.backupCodes')}</h4> 267 267 + <p class="warning-text">{$_('security.backupCodesDescription')}</p> 268 268 + <div class="backup-codes"> 269 269 + {#each totpSetup.backupCodes as code} 270 270 + <code class="backup-code">{code}</code> 271 271 + {/each} 272 272 + </div> 273 273 + <div class="actions"> 274 274 + <button type="button" class="secondary" onclick={copyBackupCodes}>{$_('security.copyToClipboard')}</button> 275 275 + <button onclick={handleFinishSetup}>{$_('security.savedMyCodes')}</button> 276 276 + </div> 277 277 + </div> 278 278 + {/if} 279 279 + </section>

+17 -30

frontend/src/styles/dashboard.css

··· 279 279 display: flex; 280 280 align-items: center; 281 281 gap: var(--space-1); 282 282 - padding: 0; 282 282 + padding: var(--space-2) var(--space-3); 283 283 background: transparent; 284 284 border: none; 285 285 - color: var(--secondary); 285 285 + color: var(--text-secondary); 286 286 font-size: var(--text-base); 287 287 cursor: pointer; 288 288 margin-bottom: var(--space-2); 289 289 + min-height: 44px; 290 290 + } 291 291 + 292 292 + .back-button:hover:not(:disabled) { 293 293 + background: var(--bg-secondary); 294 294 + color: var(--text-primary); 289 295 } 290 296 291 297 .back-arrow { ··· 376 382 } 377 383 } 378 384 379 379 - .overview { 380 380 - background: var(--bg-secondary); 381 381 - padding: var(--space-6); 382 382 - } 383 383 - 384 385 .overview dl { 385 386 display: grid; 386 387 grid-template-columns: auto 1fr; ··· 429 430 } 430 431 } 431 432 432 432 - 433 433 .current { 434 434 color: var(--text-secondary); 435 435 font-size: var(--text-sm); ··· 607 607 } 608 608 609 609 .password-actions, 610 610 - .totp-actions, 610 610 + .totp-actions { 611 611 + display: flex; 612 612 + gap: var(--space-3); 613 613 + } 611 614 612 615 .remove-password-form { 613 616 background: var(--error-bg); ··· 949 952 font-size: var(--text-sm); 950 953 } 951 954 952 952 - .sessions .detail .label { 955 955 + .detail-label { 953 956 color: var(--text-secondary); 954 957 margin-right: var(--space-2); 955 958 } 956 959 957 957 - .sessions .detail .value { 960 960 + .detail-value { 958 961 color: var(--text-primary); 959 962 } 960 963 ··· 1688 1691 font-size: var(--text-sm); 1689 1692 } 1690 1693 1691 1691 - .controllers .detail .label { 1692 1692 - color: var(--text-secondary); 1693 1693 - margin-right: var(--space-2); 1694 1694 - } 1695 1695 - 1696 1696 - .controllers .detail .value { 1697 1697 - color: var(--text-primary); 1698 1698 - } 1699 1699 - 1700 1700 - .controllers .detail .value.did { 1694 1694 + .detail-value-did { 1701 1695 font-family: var(--font-mono); 1702 1696 font-size: var(--text-xs); 1703 1697 word-break: break-all; ··· 2092 2086 gap: var(--space-3); 2093 2087 } 2094 2088 2095 2095 - 2096 2096 - 2097 2089 .item-id { 2098 2090 font-weight: var(--font-medium); 2099 2091 font-family: var(--font-mono); ··· 2174 2166 font-size: var(--text-base); 2175 2167 } 2176 2168 2177 2177 - .feature-list { 2178 2178 - list-style: none; 2179 2179 - padding: 0; 2180 2180 - margin: 0 0 var(--space-4) 0; 2181 2181 - } 2182 2182 - 2183 2169 .feature-list li { 2184 2170 padding: var(--space-2) 0; 2185 2171 padding-left: var(--space-4); ··· 2263 2249 } 2264 2250 2265 2251 button.user-item-btn:hover { 2252 2252 + background: var(--bg-secondary); 2266 2253 border-color: var(--secondary); 2267 2254 } 2268 2255 ··· 2406 2393 margin-bottom: var(--space-5); 2407 2394 } 2408 2395 2409 2409 - .admin .definition-list .mono { 2396 2396 + .definition-mono { 2410 2397 font-family: var(--font-mono); 2411 2398 font-size: var(--text-xs); 2412 2399 word-break: break-all;