k1nq/TREK
1
0
Fork 0
mirror of https://github.com/mauriceboe/TREK.git synced 2026-10-20 22:16:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: clear every open Sonar security issue, and half the reliability ones (#2037)

Browse Source 
* fix(security): mint idempotency keys properly, and resolve the extractor by path

Three findings out of a sweep of every open Sonar security issue. The other 49
turned out to be false positives and are documented in sonar-project.properties
rather than changed — each entry scoped to a file, never a whole rule, so a
future Math.random() on an auth path still fails.

The idempotency key is the one that can lose data. Both producers fell back to
Math.random when crypto.randomUUID was missing, and randomUUID needs a secure
context — TREK's own quickstart is http://localhost:3000 and LAN installs run on
http://192.168.x.x, so on the deployments the README documents the fallback is
what actually runs. The axios one was
`Math.random().toString(36).slice(2)`, which is not length-stable: 0.5 yields a
single character and 0 yields the empty string, which the interceptor reads as
"no key" and skips deduplication for entirely. Two writes sharing a key collapse
into one — the second gets the first one's cached response and the edit is gone
with no error anywhere. Both now come from utils/randomId, which has the
getRandomValues rung that works in insecure contexts too.

The extractor probe stored the bare binary name, so every extraction re-resolved
it through whatever PATH held at that moment. The official image sets
KITINERARY_EXTRACTOR_PATH and never reaches that branch, but a bare-metal install
without it ran an unqualified name from a PATH it does not control. It now walks
the search path itself and keeps the absolute path of the file it verified;
execFileSync also drops the /bin/sh hop the old probe needed. PATH comes through
app-config because process.env is walled off in src/.

* fix: four tests and sorts that were not doing what they claimed

Sonar reported 43 high-impact reliability issues. Reading all of them, four are
real; the rest are cosmetic or would be made worse by the suggested change.

budget.test.ts hand-built `paid: true`, but both emitters send `paid: body.paid
? 1 : 0` and the handler stores the value verbatim — the test asserted a payload
the server never sends. The line below it already used a number.

admin.controller.test.ts had a `.resolves` assertion with no await. The promise
was dropped, so that line could not fail the test.

The two to-do category lists sorted with a bare .sort(), which is byte order:
every accented name files behind the whole ASCII range, so in a German trip
"Übernachtung" lands after "Zelt". TREK ships 23 locales, so this is real data.
One side effect worth knowing: katColor picks a category's dot colour by its
index, so re-sorting can move which category shows which colour — it already
moves whenever a category is added, and the colour carries no meaning.

Deliberately not changed: the two `| 0` truncations (Math.trunc is not
equivalent — `| 0` wraps at 32 bits and these carry millisecond timestamps), the
two .map() callbacks whose second parameter is declared and used, and the sha1
in thumbnail.service (its own comment says a swap would orphan every existing
thumbnail).

* refactor: give every button a type, and prefer the Number statics

Two mechanical sweeps, no behaviour change intended in either.

A <button> with no type attribute is type="submit" per the HTML spec. Outside a
form that does nothing today, but it turns into a surprise the moment the markup
is wrapped in one, which is what Sonar's S9011 is warning about. 870 buttons get
an explicit type="button". Two things were left alone on purpose: buttons that
take a {...spread}, because the spread may carry a type and the merge order
decides which wins, and anything inside a <form> — there the answer is a
judgement call, and checking all eleven form files found every real submit button
already carrying type="submit".

The Number sweep covers only the three globals that are exactly equivalent to
their Number twin: parseInt, parseFloat and NaN. isNaN is NOT in it — the global
coerces its argument, so isNaN('abc') is true where Number.isNaN('abc') is false,
and renaming it would change what the code does. It reaches server and plugin-sdk
as well as the client; both copies of egress-policy.ts got the identical edit, so
the mirror the SDK's parity test guards stays intact.
This commit is contained in:
Maurice
2026-08-25 15:22:38 +02:00
committed by GitHub
parent 7da0080557
commit 2c2d008dc2
239 changed files with 1303 additions and 1097 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Settings/AccountTab.tsx
+8 -8
View File
@@ -198,7 +198,7 @@ export default function AccountTab(): React.ReactElement {
placeholder={t('settings.confirmPassword')}
className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
/>
<button
<button type="button"
onClick={async () => {
if (!currentPassword) return toast.error(t('settings.currentPasswordRequired'))
if (!newPassword) return toast.error(t('settings.passwordRequired'))
@@ -415,7 +415,7 @@ export default function AccountTab(): React.ReactElement {
</div>
)}
<input ref={avatarInputRef} type="file" accept="image/*" onChange={handleAvatarUpload} style={{ display: 'none' }} />
<button
<button type="button"
onClick={() => avatarInputRef.current?.click()}
style={{
position: 'absolute', bottom: -3, right: -3,
@@ -431,7 +431,7 @@ export default function AccountTab(): React.ReactElement {
<Camera size={14} />
</button>
{user?.avatar_url && (
<button
<button type="button"
onClick={handleAvatarRemove}
className="bg-[#ef4444] text-white"
style={{
@@ -470,7 +470,7 @@ export default function AccountTab(): React.ReactElement {
</div>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 12 }}>
<button
<button type="button"
onClick={saveProfile}
disabled={saving}
className="flex items-center gap-2 px-4 py-2 bg-slate-900 text-white rounded-lg text-sm hover:bg-slate-700 disabled:bg-slate-400"
@@ -479,7 +479,7 @@ export default function AccountTab(): React.ReactElement {
<span className="hidden sm:inline">{t('settings.saveProfile')}</span>
<span className="sm:hidden">{t('common.save')}</span>
</button>
<button
<button type="button"
onClick={async () => {
if (user?.role === 'admin') {
try {
@@ -523,7 +523,7 @@ export default function AccountTab(): React.ReactElement {
{t('settings.deleteBlockedMessage')}
</p>
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
<button
<button type="button"
onClick={() => setShowDeleteConfirm(false)}
className="border border-edge bg-surface-card text-content-secondary"
style={{
@@ -559,7 +559,7 @@ export default function AccountTab(): React.ReactElement {
{t('settings.deleteAccountWarning')}
</p>
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
<button
<button type="button"
onClick={() => setShowDeleteConfirm(false)}
className="border border-edge bg-surface-card text-content-secondary"
style={{
@@ -569,7 +569,7 @@ export default function AccountTab(): React.ReactElement {
>
{t('common.cancel')}
</button>
<button
<button type="button"
onClick={async () => {
try {
await authApi.deleteOwnAccount()
client/src/components/Settings/AirTrailConnectionSection.tsx
+2 -2
View File
@@ -118,14 +118,14 @@ export default function AirTrailConnectionSection(): React.ReactElement {
</div>
<div className="flex flex-wrap items-center gap-3">
<button
<button type="button"
onClick={handleSave}
disabled={saving || loading || !canSave}
className="flex items-center gap-2 px-4 py-2 bg-slate-900 text-white rounded-lg text-sm hover:bg-slate-700 disabled:bg-slate-400"
>
<Save className="w-4 h-4" /> {t('common.save')}
</button>
<button
<button type="button"
onClick={handleTest}
disabled={testing || loading || !url.trim()}
className="flex items-center gap-2 px-4 py-2 border border-slate-200 rounded-lg text-sm hover:bg-slate-50"
client/src/components/Settings/AppearanceSettingsTab.tsx
+9 -9
View File
@@ -22,9 +22,9 @@ function channelLum(v: number): number {
function relLuminance(hex: string): number {
const c = hex.replace('#', '')
const full = c.length === 3 ? c.split('').map((x) => x + x).join('') : c
const r = channelLum(parseInt(full.slice(0, 2), 16) / 255)
const g = channelLum(parseInt(full.slice(2, 4), 16) / 255)
const b = channelLum(parseInt(full.slice(4, 6), 16) / 255)
const r = channelLum(Number.parseInt(full.slice(0, 2), 16) / 255)
const g = channelLum(Number.parseInt(full.slice(2, 4), 16) / 255)
const b = channelLum(Number.parseInt(full.slice(4, 6), 16) / 255)
return 0.2126 * r + 0.7152 * g + 0.0722 * b
}
function contrastRatio(a: string, b: string): number {
@@ -162,7 +162,7 @@ export default function AppearanceSettingsTab(): React.ReactElement {
(opt.value === 'light' && cur === false) ||
(opt.value === 'dark' && cur === true)
return (
<button key={opt.value} onClick={() => setMode(opt.value)} style={segStyle(active)}>
<button type="button" key={opt.value} onClick={() => setMode(opt.value)} style={segStyle(active)}>
<span className="hidden sm:inline-flex"><opt.icon size={16} /></span>
{opt.value === 'auto' ? (
<>
@@ -186,7 +186,7 @@ export default function AppearanceSettingsTab(): React.ReactElement {
const active = cfg.schemeId === s.id
const dot = isDark ? s.swatch.dark : s.swatch.light
return (
<button
<button type="button"
key={s.id}
onClick={() => update({ schemeId: s.id })}
style={{
@@ -205,7 +205,7 @@ export default function AppearanceSettingsTab(): React.ReactElement {
)
})}
{/* Custom */}
<button
<button type="button"
onClick={() => update({ schemeId: 'custom', accent: cfg.accent ?? { light: accentLight, dark: accentDark } })}
style={{
display: 'flex', alignItems: 'center', gap: 8, padding: '10px 12px', borderRadius: 10,
@@ -229,7 +229,7 @@ export default function AppearanceSettingsTab(): React.ReactElement {
</label>
<div className="flex flex-wrap gap-2 mb-3">
{CUSTOM_ACCENT_PRESETS.map((c) => (
<button
<button type="button"
key={c}
aria-label={c}
onClick={() => update({ accent: { light: c, dark: c } })}
@@ -296,7 +296,7 @@ export default function AppearanceSettingsTab(): React.ReactElement {
{ value: 'comfortable', label: tr('settings.appearance.comfortable', 'Comfortable') },
{ value: 'compact', label: tr('settings.appearance.compact', 'Compact') },
].map((opt) => (
<button key={opt.value} onClick={() => update({ density: opt.value as AppearanceConfig['density'] })} style={segStyle(cfg.density === opt.value)}>
<button type="button" key={opt.value} onClick={() => update({ density: opt.value as AppearanceConfig['density'] })} style={segStyle(cfg.density === opt.value)}>
{opt.label}
</button>
))}
@@ -413,7 +413,7 @@ export default function AppearanceSettingsTab(): React.ReactElement {
</Section>
<div className="flex justify-end mb-6">
<button
<button type="button"
onClick={resetAll}
className="flex items-center gap-2 text-sm font-medium text-content-muted hover:text-content"
style={{ background: 'none', border: 'none', cursor: 'pointer', padding: '6px 4px' }}
client/src/components/Settings/DisplaySettingsTab.tsx
+10 -10
View File
@@ -50,7 +50,7 @@ export default function DisplaySettingsTab(): React.ReactElement {
{ value: 'dashboard', label: t('settings.startPageDashboard') },
{ value: 'active_trip', label: t('settings.startPageActiveTrip') },
] as const).map(opt => (
<button
<button type="button"
key={opt.value}
onClick={async () => {
try { await updateSetting('start_page', opt.value) }
@@ -117,7 +117,7 @@ export default function DisplaySettingsTab(): React.ReactElement {
{/* Desktop: Button grid */}
<div className="hidden sm:flex flex-wrap gap-3">
{SUPPORTED_LANGUAGES.map(opt => (
<button
<button type="button"
key={opt.value}
onClick={async () => {
try { await updateSetting('language', opt.value) }
@@ -201,7 +201,7 @@ export default function DisplaySettingsTab(): React.ReactElement {
{ value: 'celsius', label: '°C Celsius' },
{ value: 'fahrenheit', label: '°F Fahrenheit' },
].map(opt => (
<button
<button type="button"
key={opt.value}
onClick={async () => {
setTempUnit(opt.value)
@@ -232,7 +232,7 @@ export default function DisplaySettingsTab(): React.ReactElement {
{ value: 'metric', label: 'km Metric' },
{ value: 'imperial', label: 'mi Imperial' },
] as const).map(opt => (
<button
<button type="button"
key={opt.value}
onClick={async () => {
setDistanceUnit(opt.value)
@@ -263,7 +263,7 @@ export default function DisplaySettingsTab(): React.ReactElement {
{ value: '24h', short: '24h', example: '14:30' },
{ value: '12h', short: '12h', example: '2:30 PM' },
].map(opt => (
<button
<button type="button"
key={opt.value}
onClick={async () => {
try { await updateSetting('time_format', opt.value) }
@@ -296,7 +296,7 @@ export default function DisplaySettingsTab(): React.ReactElement {
{ value: true, label: t('settings.on') || 'On' },
{ value: false, label: t('settings.off') || 'Off' },
].map(opt => (
<button
<button type="button"
key={String(opt.value)}
onClick={async () => {
try { await updateSetting('map_booking_labels', opt.value) }
@@ -327,7 +327,7 @@ export default function DisplaySettingsTab(): React.ReactElement {
{ value: true, label: t('settings.on') || 'On' },
{ value: false, label: t('settings.off') || 'Off' },
].map(opt => (
<button
<button type="button"
key={String(opt.value)}
onClick={async () => {
try { await updateSetting('map_always_show_routes', opt.value) }
@@ -358,7 +358,7 @@ export default function DisplaySettingsTab(): React.ReactElement {
{ value: true, label: t('settings.on') || 'On' },
{ value: false, label: t('settings.off') || 'Off' },
].map(opt => (
<button
<button type="button"
key={String(opt.value)}
onClick={async () => {
try { await updateSetting('map_poi_pill_enabled', opt.value) }
@@ -389,7 +389,7 @@ export default function DisplaySettingsTab(): React.ReactElement {
{ value: true, label: t('settings.on') || 'On' },
{ value: false, label: t('settings.off') || 'Off' },
].map(opt => (
<button
<button type="button"
key={String(opt.value)}
onClick={async () => {
try { await updateSetting('blur_booking_codes', opt.value) }
@@ -419,7 +419,7 @@ export default function DisplaySettingsTab(): React.ReactElement {
{ value: true, label: t('settings.on') || 'On' },
{ value: false, label: t('settings.off') || 'Off' },
].map(opt => (
<button
<button type="button"
key={String(opt.value)}
onClick={async () => {
try { await updateSetting('optimize_from_accommodation', opt.value) }
client/src/components/Settings/IntegrationsTab.tsx
+32 -32
View File
@@ -320,7 +320,7 @@ function IntegrationsMcpSection(props: any) {
<code className="flex-1 px-3 py-2 rounded-lg text-sm font-mono border bg-surface-secondary border-edge text-content">
{mcpEndpoint}
</code>
<button onClick={() => handleCopy(mcpEndpoint, 'endpoint')}
<button type="button" onClick={() => handleCopy(mcpEndpoint, 'endpoint')}
className="p-2 rounded-lg border border-edge transition-colors hover:bg-slate-100 dark:hover:bg-slate-700"
title={t('settings.mcp.copy')}>
{copiedKey === 'endpoint' ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4 text-content-secondary" />}
@@ -330,14 +330,14 @@ function IntegrationsMcpSection(props: any) {
{/* Sub-tab bar */}
<div className="flex gap-1 rounded-lg p-1 border bg-surface-secondary border-edge">
<button
<button type="button"
onClick={() => setActiveMcpTab('oauth')}
className={`flex-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${
activeMcpTab === 'oauth' ? 'bg-slate-900 text-white' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-50'
}`}>
{t('settings.oauth.clients')}
</button>
<button
<button type="button"
onClick={() => setActiveMcpTab('apitokens')}
className={`flex-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors flex items-center justify-center gap-2 ${
activeMcpTab === 'apitokens' ? 'bg-slate-900 text-white' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-50'
@@ -354,7 +354,7 @@ function IntegrationsMcpSection(props: any) {
<>
{/* JSON config — OAuth (collapsible) */}
<div className="rounded-lg border overflow-hidden border-edge">
<button
<button type="button"
onClick={() => setConfigOpenOAuth(o => !o)}
className="w-full flex items-center justify-between px-3 py-2.5 transition-colors hover:bg-slate-50 dark:hover:bg-slate-800 bg-surface-secondary">
<span className="text-sm font-medium text-content-secondary">{t('settings.mcp.clientConfig')}</span>
@@ -363,7 +363,7 @@ function IntegrationsMcpSection(props: any) {
{configOpenOAuth && (
<div className="p-3 border-t border-edge">
<div className="flex justify-end mb-1.5">
<button onClick={() => handleCopy(mcpJsonConfigOAuth, 'json-oauth')}
<button type="button" onClick={() => handleCopy(mcpJsonConfigOAuth, 'json-oauth')}
className="flex items-center gap-1.5 px-2.5 py-1 rounded text-xs border transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 border-edge text-content-secondary">
{copiedKey === 'json-oauth' ? <Check className="w-3 h-3 text-green-500" /> : <Copy className="w-3 h-3" />}
{copiedKey === 'json-oauth' ? t('settings.mcp.copied') : t('settings.mcp.copy')}
@@ -381,7 +381,7 @@ function IntegrationsMcpSection(props: any) {
<p className="text-xs mb-3" style={{ color: 'var(--text-tertiary)' }}>{t('settings.oauth.clientsHint')}</p>
<div className="flex justify-end mb-2">
<button onClick={() => { setOauthCreateOpen(true); setOauthCreatedClient(null); setOauthNewName(''); setOauthNewUris(''); setOauthNewScopes([]); setOauthIsMachine(false) }}
<button type="button" onClick={() => { setOauthCreateOpen(true); setOauthCreatedClient(null); setOauthNewName(''); setOauthNewUris(''); setOauthNewScopes([]); setOauthIsMachine(false) }}
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors bg-slate-900 text-white hover:bg-slate-700">
<Plus className="w-3.5 h-3.5" /> {t('settings.oauth.createClient')}
</button>
@@ -424,12 +424,12 @@ function IntegrationsMcpSection(props: any) {
)}
</div>
</div>
<button onClick={() => setOauthRotateId(client.id)}
<button type="button" onClick={() => setOauthRotateId(client.id)}
className="p-1.5 rounded-lg transition-colors hover:bg-amber-50 hover:text-amber-600 dark:hover:bg-amber-900/20"
style={{ color: 'var(--text-tertiary)' }} title={t('settings.oauth.rotateSecret')}>
<RefreshCw className="w-4 h-4" />
</button>
<button onClick={() => setOauthDeleteId(client.id)}
<button type="button" onClick={() => setOauthDeleteId(client.id)}
className="p-1.5 rounded-lg transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20"
style={{ color: 'var(--text-tertiary)' }} title={t('settings.oauth.deleteClient')}>
<Trash2 className="w-4 h-4" />
@@ -455,7 +455,7 @@ function IntegrationsMcpSection(props: any) {
<span className="ml-3">{t('settings.oauth.sessionExpires')} {new Date(session.access_token_expires_at).toLocaleDateString(locale)}</span>
</p>
</div>
<button onClick={() => setOauthRevokeId(session.id)}
<button type="button" onClick={() => setOauthRevokeId(session.id)}
className="px-2.5 py-1 rounded text-xs border transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20 border-edge"
style={{ color: 'var(--text-tertiary)' }}>
{t('settings.oauth.revoke')}
@@ -478,7 +478,7 @@ function IntegrationsMcpSection(props: any) {
{/* JSON config — API Token (collapsible) */}
<div className="rounded-lg border overflow-hidden border-edge">
<button
<button type="button"
onClick={() => setConfigOpenToken(o => !o)}
className="w-full flex items-center justify-between px-3 py-2.5 transition-colors hover:bg-slate-50 dark:hover:bg-slate-800 bg-surface-secondary">
<span className="text-sm font-medium text-content-secondary">{t('settings.mcp.clientConfig')}</span>
@@ -487,7 +487,7 @@ function IntegrationsMcpSection(props: any) {
{configOpenToken && (
<div className="p-3 border-t border-edge">
<div className="flex justify-end mb-1.5">
<button onClick={() => handleCopy(mcpJsonConfig, 'json-token')}
<button type="button" onClick={() => handleCopy(mcpJsonConfig, 'json-token')}
className="flex items-center gap-1.5 px-2.5 py-1 rounded text-xs border transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 border-edge text-content-secondary">
{copiedKey === 'json-token' ? <Check className="w-3 h-3 text-green-500" /> : <Copy className="w-3 h-3" />}
{copiedKey === 'json-token' ? t('settings.mcp.copied') : t('settings.mcp.copy')}
@@ -502,7 +502,7 @@ function IntegrationsMcpSection(props: any) {
</div>
<div className="flex justify-end">
<button onClick={() => { setMcpModalOpen(true); setMcpCreatedToken(null); setMcpNewName('') }}
<button type="button" onClick={() => { setMcpModalOpen(true); setMcpCreatedToken(null); setMcpNewName('') }}
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors opacity-60 text-content-secondary bg-surface-tertiary">
<Plus className="w-3.5 h-3.5" /> {t('settings.mcp.createToken')}
</button>
@@ -526,7 +526,7 @@ function IntegrationsMcpSection(props: any) {
)}
</p>
</div>
<button onClick={() => setMcpDeleteId(token.id)}
<button type="button" onClick={() => setMcpDeleteId(token.id)}
className="p-1.5 rounded-lg transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20"
style={{ color: 'var(--text-tertiary)' }} title={t('settings.mcp.deleteTokenTitle')}>
<Trash2 className="w-4 h-4" />
@@ -564,11 +564,11 @@ function McpTokenModals(props: any) {
autoFocus />
</div>
<div className="flex gap-2 justify-end pt-1">
<button onClick={() => setMcpModalOpen(false)}
<button type="button" onClick={() => setMcpModalOpen(false)}
className="px-4 py-2 rounded-lg text-sm border border-edge text-content-secondary">
{t('common.cancel')}
</button>
<button onClick={handleCreateMcpToken} disabled={!mcpNewName.trim() || mcpCreating}
<button type="button" onClick={handleCreateMcpToken} disabled={!mcpNewName.trim() || mcpCreating}
className="px-4 py-2 rounded-lg text-sm font-medium text-white bg-slate-900 hover:bg-slate-700 disabled:opacity-50">
{mcpCreating ? t('settings.mcp.modal.creating') : t('settings.mcp.modal.create')}
</button>
@@ -585,14 +585,14 @@ function McpTokenModals(props: any) {
<pre className="p-3 pr-10 rounded-lg text-xs font-mono break-all border whitespace-pre-wrap bg-surface-secondary border-edge text-content">
{mcpCreatedToken}
</pre>
<button onClick={() => handleCopy(mcpCreatedToken, 'new-token')}
<button type="button" onClick={() => handleCopy(mcpCreatedToken, 'new-token')}
className="absolute top-2 right-2 p-1.5 rounded transition-colors hover:bg-slate-200 dark:hover:bg-slate-600 text-content-secondary"
title={t('settings.mcp.copy')}>
{copiedKey === 'new-token' ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
</button>
</div>
<div className="flex justify-end">
<button onClick={() => { setMcpModalOpen(false); setMcpCreatedToken(null) }}
<button type="button" onClick={() => { setMcpModalOpen(false); setMcpCreatedToken(null) }}
className="px-4 py-2 rounded-lg text-sm font-medium text-white bg-slate-900 hover:bg-slate-700">
{t('settings.mcp.modal.done')}
</button>
@@ -611,11 +611,11 @@ function McpTokenModals(props: any) {
<h3 className="text-base font-semibold text-content">{t('settings.mcp.deleteTokenTitle')}</h3>
<p className="text-sm text-content-secondary">{t('settings.mcp.deleteTokenMessage')}</p>
<div className="flex gap-2 justify-end">
<button onClick={() => setMcpDeleteId(null)}
<button type="button" onClick={() => setMcpDeleteId(null)}
className="px-4 py-2 rounded-lg text-sm border border-edge text-content-secondary">
{t('common.cancel')}
</button>
<button onClick={() => handleDeleteMcpToken(mcpDeleteId)}
<button type="button" onClick={() => handleDeleteMcpToken(mcpDeleteId)}
className="px-4 py-2 rounded-lg text-sm font-medium text-white bg-red-600 hover:bg-red-700">
{t('settings.mcp.deleteTokenTitle')}
</button>
@@ -697,11 +697,11 @@ function OAuthClientModals(props: any) {
</div>
<div className="flex gap-2 justify-end pt-1">
<button onClick={() => setOauthCreateOpen(false)}
<button type="button" onClick={() => setOauthCreateOpen(false)}
className="px-4 py-2 rounded-lg text-sm border border-edge text-content-secondary">
{t('common.cancel')}
</button>
<button onClick={handleCreateOAuthClient}
<button type="button" onClick={handleCreateOAuthClient}
disabled={!oauthNewName.trim() || (!oauthIsMachine && !oauthNewUris.trim()) || oauthCreating}
className="px-4 py-2 rounded-lg text-sm font-medium text-white bg-slate-900 hover:bg-slate-700 disabled:opacity-50">
{oauthCreating ? t('settings.oauth.modal.creating') : t('settings.oauth.modal.create')}
@@ -723,7 +723,7 @@ function OAuthClientModals(props: any) {
<code className="flex-1 px-3 py-2 rounded-lg text-xs font-mono border bg-surface-secondary border-edge text-content">
{oauthCreatedClient.client_id}
</code>
<button onClick={() => handleCopy(oauthCreatedClient.client_id, 'new-client-id')}
<button type="button" onClick={() => handleCopy(oauthCreatedClient.client_id, 'new-client-id')}
className="p-2 rounded-lg border transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 border-edge">
{copiedKey === 'new-client-id' ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4 text-content-secondary" />}
</button>
@@ -735,7 +735,7 @@ function OAuthClientModals(props: any) {
<code className="flex-1 px-3 py-2 rounded-lg text-xs font-mono border break-all bg-surface-secondary border-edge text-content">
{oauthCreatedClient.client_secret}
</code>
<button onClick={() => handleCopy(oauthCreatedClient.client_secret!, 'new-client-secret')}
<button type="button" onClick={() => handleCopy(oauthCreatedClient.client_secret!, 'new-client-secret')}
className="p-2 rounded-lg border transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 border-edge">
{copiedKey === 'new-client-secret' ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4 text-content-secondary" />}
</button>
@@ -750,7 +750,7 @@ function OAuthClientModals(props: any) {
)}
<div className="flex justify-end">
<button onClick={() => { setOauthCreateOpen(false); setOauthCreatedClient(null) }}
<button type="button" onClick={() => { setOauthCreateOpen(false); setOauthCreatedClient(null) }}
className="px-4 py-2 rounded-lg text-sm font-medium text-white bg-slate-900 hover:bg-slate-700">
{t('settings.mcp.modal.done')}
</button>
@@ -769,11 +769,11 @@ function OAuthClientModals(props: any) {
<h3 className="text-base font-semibold text-content">{t('settings.oauth.deleteClient')}</h3>
<p className="text-sm text-content-secondary">{t('settings.oauth.deleteClientMessage')}</p>
<div className="flex gap-2 justify-end">
<button onClick={() => setOauthDeleteId(null)}
<button type="button" onClick={() => setOauthDeleteId(null)}
className="px-4 py-2 rounded-lg text-sm border border-edge text-content-secondary">
{t('common.cancel')}
</button>
<button onClick={() => handleDeleteOAuthClient(oauthDeleteId)}
<button type="button" onClick={() => handleDeleteOAuthClient(oauthDeleteId)}
className="px-4 py-2 rounded-lg text-sm font-medium text-white bg-red-600 hover:bg-red-700">
{t('settings.oauth.deleteClient')}
</button>
@@ -790,11 +790,11 @@ function OAuthClientModals(props: any) {
<h3 className="text-base font-semibold text-content">{t('settings.oauth.rotateSecret')}</h3>
<p className="text-sm text-content-secondary">{t('settings.oauth.rotateSecretMessage')}</p>
<div className="flex gap-2 justify-end">
<button onClick={() => setOauthRotateId(null)}
<button type="button" onClick={() => setOauthRotateId(null)}
className="px-4 py-2 rounded-lg text-sm border border-edge text-content-secondary">
{t('common.cancel')}
</button>
<button onClick={() => handleRotateSecret(oauthRotateId)} disabled={oauthRotating}
<button type="button" onClick={() => handleRotateSecret(oauthRotateId)} disabled={oauthRotating}
className="px-4 py-2 rounded-lg text-sm font-medium text-white bg-slate-900 hover:bg-slate-700 disabled:opacity-50">
{oauthRotating ? t('settings.oauth.rotateSecretConfirming') : t('settings.oauth.rotateSecretConfirm')}
</button>
@@ -818,14 +818,14 @@ function OAuthClientModals(props: any) {
<code className="flex-1 px-3 py-2 rounded-lg text-xs font-mono border break-all bg-surface-secondary border-edge text-content">
{oauthRotatedSecret}
</code>
<button onClick={() => handleCopy(oauthRotatedSecret, 'rotated-secret')}
<button type="button" onClick={() => handleCopy(oauthRotatedSecret, 'rotated-secret')}
className="p-2 rounded-lg border transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 border-edge">
{copiedKey === 'rotated-secret' ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4 text-content-secondary" />}
</button>
</div>
</div>
<div className="flex justify-end">
<button onClick={() => setOauthRotatedSecret(null)}
<button type="button" onClick={() => setOauthRotatedSecret(null)}
className="px-4 py-2 rounded-lg text-sm font-medium text-white bg-slate-900 hover:bg-slate-700">
{t('settings.mcp.modal.done')}
</button>
@@ -842,11 +842,11 @@ function OAuthClientModals(props: any) {
<h3 className="text-base font-semibold text-content">{t('settings.oauth.revokeSession')}</h3>
<p className="text-sm text-content-secondary">{t('settings.oauth.revokeSessionMessage')}</p>
<div className="flex gap-2 justify-end">
<button onClick={() => setOauthRevokeId(null)}
<button type="button" onClick={() => setOauthRevokeId(null)}
className="px-4 py-2 rounded-lg text-sm border border-edge text-content-secondary">
{t('common.cancel')}
</button>
<button onClick={() => handleRevokeSession(oauthRevokeId)}
<button type="button" onClick={() => handleRevokeSession(oauthRevokeId)}
className="px-4 py-2 rounded-lg text-sm font-medium text-white bg-red-600 hover:bg-red-700">
{t('settings.oauth.revoke')}
</button>
client/src/components/Settings/LlmConnectionSection.tsx
+1 -1
View File
@@ -143,7 +143,7 @@ export default function LlmConnectionSection(): React.ReactElement {
<p className="mt-1 text-xs text-content-faint">{t('settings.aiParsing.multimodalHint')}</p>
</div>
<button
<button type="button"
onClick={handleSave}
disabled={saving || !isLoaded}
className="flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium text-white bg-slate-900 hover:bg-slate-700 disabled:opacity-50"
client/src/components/Settings/MapSettingsTab.tsx
+1 -1
View File
@@ -449,7 +449,7 @@ export default function MapSettingsTab(): React.ReactElement {
</div>
</div>
<button
<button type="button"
onClick={saveMapSettings}
disabled={saving}
className="flex items-center gap-2 px-4 py-2 bg-slate-900 text-white rounded-lg text-sm hover:bg-slate-700 disabled:bg-slate-400"
client/src/components/Settings/NotificationsTab.tsx
+6 -6
View File
@@ -243,14 +243,14 @@ export default function NotificationsTab(): React.ReactElement {
placeholder={webhookIsSet ? '••••••••' : t('settings.webhookUrl.placeholder')}
style={{ flex: 1, fontSize: 'calc(13px * var(--fs-scale-body, 1))', padding: '6px 10px', border: '1px solid var(--border-primary)', borderRadius: 6, background: 'var(--bg-primary)', color: 'var(--text-primary)' }}
/>
<button
<button type="button"
onClick={saveWebhookUrl}
disabled={webhookSaving}
style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', padding: '6px 12px', background: 'var(--text-primary)', color: 'var(--bg-primary)', border: 'none', borderRadius: 6, cursor: webhookSaving ? 'not-allowed' : 'pointer', opacity: webhookSaving ? 0.6 : 1 }}
>
{t('common.save')}
</button>
<button
<button type="button"
onClick={testWebhookUrl}
disabled={(!webhookUrl && !webhookIsSet) || webhookTesting}
style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', padding: '6px 12px', background: 'transparent', color: 'var(--text-secondary)', border: '1px solid var(--border-primary)', borderRadius: 6, cursor: ((!webhookUrl && !webhookIsSet) || webhookTesting) ? 'not-allowed' : 'pointer', opacity: ((!webhookUrl && !webhookIsSet) || webhookTesting) ? 0.5 : 1 }}
@@ -296,21 +296,21 @@ export default function NotificationsTab(): React.ReactElement {
style={{ flex: 1, fontSize: 'calc(13px * var(--fs-scale-body, 1))', padding: '6px 10px', border: '1px solid var(--border-primary)', borderRadius: 6, background: 'var(--bg-primary)', color: 'var(--text-primary)' }}
/>
{ntfyTokenIsSet && (
<button
<button type="button"
onClick={clearNtfyToken}
style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', padding: '6px 12px', background: 'transparent', color: 'var(--color-danger, #e53e3e)', border: '1px solid var(--color-danger, #e53e3e)', borderRadius: 6, cursor: 'pointer' }}
>
{t('common.clear')}
</button>
)}
<button
<button type="button"
onClick={saveNtfySettings}
disabled={ntfySaving}
style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', padding: '6px 12px', background: 'var(--text-primary)', color: 'var(--bg-primary)', border: 'none', borderRadius: 6, cursor: ntfySaving ? 'not-allowed' : 'pointer', opacity: ntfySaving ? 0.6 : 1 }}
>
{t('common.save')}
</button>
<button
<button type="button"
onClick={testNtfySettings}
disabled={!ntfyTopic || ntfyTesting}
style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', padding: '6px 12px', background: 'transparent', color: 'var(--text-secondary)', border: '1px solid var(--border-primary)', borderRadius: 6, cursor: (!ntfyTopic || ntfyTesting) ? 'not-allowed' : 'pointer', opacity: (!ntfyTopic || ntfyTesting) ? 0.5 : 1 }}
@@ -341,7 +341,7 @@ export default function NotificationsTab(): React.ReactElement {
{t('settings.notificationPreferences.configure')}
</Link>
)}
<button
<button type="button"
onClick={() => testChannel(ch)}
disabled={!ch.configured || channelTesting === ch.id}
style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', padding: '6px 12px', background: 'transparent', color: 'var(--text-secondary)', border: '1px solid var(--border-primary)', borderRadius: 6, cursor: (!ch.configured || channelTesting === ch.id) ? 'not-allowed' : 'pointer', opacity: (!ch.configured || channelTesting === ch.id) ? 0.5 : 1 }}
client/src/components/Settings/OfflineTab.tsx
+5 -5
View File
@@ -202,7 +202,7 @@ export default function OfflineTab(): React.ReactElement {
{t('settings.offline.prepare.hint')}
</p>
<div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
<button
<button type="button"
onClick={runPrepare}
disabled={preparing || offline}
className="border border-edge bg-surface-secondary text-content"
@@ -213,7 +213,7 @@ export default function OfflineTab(): React.ReactElement {
: <Download size={14} />}
{preparing ? t('settings.offline.prepare.running') : t('settings.offline.prepare.button')}
</button>
<button
<button type="button"
onClick={handleResync}
disabled={syncing || offline}
className="border border-edge bg-surface-secondary text-content"
@@ -259,10 +259,10 @@ export default function OfflineTab(): React.ReactElement {
{t('settings.offline.conflicts.item', { name: conflictName(c) })}
</span>
<div style={{ display: 'flex', gap: 8 }}>
<button onClick={() => resolveConflict(c.id, true)} className="border border-edge bg-surface-card text-content" style={smallBtnStyle()}>
<button type="button" onClick={() => resolveConflict(c.id, true)} className="border border-edge bg-surface-card text-content" style={smallBtnStyle()}>
{t('settings.offline.conflicts.keepMine')}
</button>
<button onClick={() => resolveConflict(c.id, false)} className="border border-edge bg-surface-card text-content" style={smallBtnStyle()}>
<button type="button" onClick={() => resolveConflict(c.id, false)} className="border border-edge bg-surface-card text-content" style={smallBtnStyle()}>
{t('settings.offline.conflicts.keepServer')}
</button>
</div>
@@ -334,7 +334,7 @@ export default function OfflineTab(): React.ReactElement {
</div>
<div style={{ display: 'flex', gap: 8 }}>
<button
<button type="button"
onClick={handleClear}
disabled={clearing || rows.length === 0}
className="border border-edge bg-surface-secondary text-[#ef4444]"
client/src/components/Settings/PhotoProvidersSection.tsx
+2 -2
View File
@@ -253,7 +253,7 @@ export default function PhotoProvidersSection(): React.ReactElement {
{/* Wraps on mobile so the connection badge drops to its own row
instead of clipping off the side of the card. */}
<div className="flex flex-wrap items-center gap-3">
<button
<button type="button"
onClick={() => handleSaveProvider(provider)}
disabled={!canSave || !!saving[provider.id] || isProviderSaveDisabled(provider)}
className="flex items-center gap-2 px-4 py-2 bg-slate-900 text-white rounded-lg text-sm hover:bg-slate-700 disabled:bg-slate-400"
@@ -261,7 +261,7 @@ export default function PhotoProvidersSection(): React.ReactElement {
>
<Save className="w-4 h-4" /> {t('common.save')}
</button>
<button
<button type="button"
onClick={() => handleTestProvider(provider)}
disabled={!canTest || testing}
className="flex items-center gap-2 px-4 py-2 border border-slate-200 rounded-lg text-sm hover:bg-slate-50"
client/src/components/Settings/PluginSettingsTab.tsx
+4 -4
View File
@@ -45,8 +45,8 @@ function PluginOAuthSection({ id, state, setState }: {
: <>{t('settings.plugins.oauth.notConnected')}</>}
</span>
{state.connected
? <button onClick={disconnect} disabled={busy} className="inline-flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-sm font-semibold text-content disabled:opacity-60"><Unlink className="w-4 h-4" />{t('settings.plugins.oauth.disconnect')}</button>
: <button onClick={connect} disabled={busy} className="inline-flex items-center gap-1.5 rounded-lg bg-accent px-3 py-1.5 text-sm font-semibold text-white disabled:opacity-60">{busy ? <Loader2 className="w-4 h-4 animate-spin" /> : <Link2 className="w-4 h-4" />}{t('settings.plugins.oauth.connect')}</button>}
? <button type="button" onClick={disconnect} disabled={busy} className="inline-flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-sm font-semibold text-content disabled:opacity-60"><Unlink className="w-4 h-4" />{t('settings.plugins.oauth.disconnect')}</button>
: <button type="button" onClick={connect} disabled={busy} className="inline-flex items-center gap-1.5 rounded-lg bg-accent px-3 py-1.5 text-sm font-semibold text-white disabled:opacity-60">{busy ? <Loader2 className="w-4 h-4 animate-spin" /> : <Link2 className="w-4 h-4" />}{t('settings.plugins.oauth.connect')}</button>}
</div>
)
}
@@ -176,7 +176,7 @@ function PluginSettingsForm({ id, name, icon }: { id: string; name: string; icon
))}
</div>
{hasFields && (
<button
<button type="button"
onClick={save}
disabled={saving}
className="mt-4 inline-flex items-center gap-2 rounded-lg bg-accent px-4 py-2 text-sm font-semibold text-white disabled:opacity-60"
@@ -195,7 +195,7 @@ function PluginSettingsForm({ id, name, icon }: { id: string; name: string; icon
const res = actionResult[a.key]
return (
<div key={a.key} className="flex flex-wrap items-center gap-2">
<button
<button type="button"
onClick={() => runAction(a)}
disabled={running !== null}
className={`inline-flex items-center gap-2 rounded-lg border px-3 py-1.5 text-sm font-semibold disabled:opacity-60 ${