feat(web/m7-user-mgmt): /reset-password page + admin SMTP card + tests (U3-T5b)
Completes the U3 frontend that T5a's crashed dispatch left half-done. - /reset-password/[token] — public; new password + confirm. Calls POST /api/auth/reset-password with the URL's token. invalid_token, password_too_short, and mismatched-passwords surface as inline errors. Success redirects to /login?reset=ok. - /admin/integrations gains an SMTP card (alongside Lidarr) with enabled toggle + all fields + Save and Send-test-email buttons. Password input is a separate state from the loaded form, so empty submission preserves the stored server-side value (matches the backend's empty-password-preserves contract). Test button error codes (no_email_on_file / not_configured / send_failed) surface as actionable toasts. Tests cover both new pages plus extensions to settings + integrations test files for the cards landed in T5a. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -12,7 +12,11 @@
|
||||
createCoverProvidersQuery,
|
||||
updateCoverProvider,
|
||||
testCoverProvider,
|
||||
type CoverProvider
|
||||
updateSMTPConfig,
|
||||
testSMTPConfig,
|
||||
createSMTPConfigQuery,
|
||||
type CoverProvider,
|
||||
type SMTPConfig
|
||||
} from '$lib/api/admin';
|
||||
import { qk } from '$lib/api/queries';
|
||||
import type { LidarrConfig, LidarrTestResult } from '$lib/api/types';
|
||||
@@ -226,10 +230,81 @@
|
||||
coverTesting[provider.id] = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Toast -------------------------------------------------------------------
|
||||
|
||||
let toast = $state<string | null>(null);
|
||||
let toastTimer: ReturnType<typeof setTimeout> | undefined;
|
||||
|
||||
function showToast(msg: string) {
|
||||
toast = msg;
|
||||
if (toastTimer) clearTimeout(toastTimer);
|
||||
toastTimer = setTimeout(() => { toast = null; }, 4000);
|
||||
}
|
||||
|
||||
// SMTP config -------------------------------------------------------------
|
||||
|
||||
const smtpStore = $derived(createSMTPConfigQuery());
|
||||
const smtpQ = $derived($smtpStore);
|
||||
|
||||
let smtpForm = $state<SMTPConfig>({
|
||||
enabled: false, host: '', port: 587, username: '',
|
||||
password: '', from_address: '', from_name: 'Minstrel', use_tls: true,
|
||||
});
|
||||
let smtpPasswordInput = $state('');
|
||||
let smtpSaving = $state(false);
|
||||
let smtpTesting = $state(false);
|
||||
|
||||
$effect(() => {
|
||||
if (smtpQ.data) {
|
||||
smtpForm = smtpQ.data;
|
||||
smtpPasswordInput = '';
|
||||
}
|
||||
});
|
||||
|
||||
async function onSaveSMTP() {
|
||||
smtpSaving = true;
|
||||
try {
|
||||
await updateSMTPConfig({ ...smtpForm, password: smtpPasswordInput });
|
||||
await client.invalidateQueries({ queryKey: qk.smtpConfig() });
|
||||
smtpPasswordInput = '';
|
||||
showToast('SMTP config saved.');
|
||||
} catch (e: unknown) {
|
||||
const code = (e as { code?: string })?.code;
|
||||
if (code === 'missing_fields') showToast('Host and from address are required when enabled.');
|
||||
else showToast(`Save failed: ${code ?? 'unknown'}`);
|
||||
} finally {
|
||||
smtpSaving = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function onTestSMTP() {
|
||||
smtpTesting = true;
|
||||
try {
|
||||
await testSMTPConfig();
|
||||
showToast('Test email sent. Check your inbox.');
|
||||
} catch (e: unknown) {
|
||||
const code = (e as { code?: string })?.code;
|
||||
const message = (e as { message?: string })?.message;
|
||||
if (code === 'no_email_on_file') showToast('Set your email in /settings before testing.');
|
||||
else if (code === 'not_configured') showToast('Save the SMTP config first.');
|
||||
else if (code === 'send_failed') showToast(`Send failed: ${message || 'see server logs'}`);
|
||||
else showToast(`Test failed: ${code ?? 'unknown'}`);
|
||||
} finally {
|
||||
smtpTesting = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head><title>{pageTitle('Admin · Integrations')}</title></svelte:head>
|
||||
|
||||
{#if toast}
|
||||
<div data-testid="toast" role="status"
|
||||
class="fixed bottom-4 right-4 z-50 rounded-md border border-border bg-surface px-4 py-2 text-sm text-text-primary shadow">
|
||||
{toast}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="space-y-6">
|
||||
<header class="flex items-center justify-between">
|
||||
<h2 class="font-display text-2xl font-medium text-text-primary">Integrations</h2>
|
||||
@@ -476,6 +551,67 @@
|
||||
<p class="text-sm text-text-muted">No providers registered.</p>
|
||||
{/if}
|
||||
</section>
|
||||
<!-- SMTP / email config -->
|
||||
<section class="space-y-4 rounded-xl border border-border bg-surface p-5">
|
||||
<div>
|
||||
<h3 class="font-display text-lg font-medium text-text-primary">Email (SMTP)</h3>
|
||||
<p class="mt-1 text-sm text-text-secondary">
|
||||
Configure outgoing email for password resets. The "Send test email"
|
||||
button verifies your config end-to-end.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<label class="flex items-center gap-2 text-sm">
|
||||
<input type="checkbox" bind:checked={smtpForm.enabled} />
|
||||
Enabled
|
||||
</label>
|
||||
|
||||
<div class="grid gap-3 sm:grid-cols-[auto_1fr] items-center">
|
||||
<label for="smtp-host" class="text-sm text-text-secondary">Host</label>
|
||||
<input id="smtp-host" type="text" bind:value={smtpForm.host}
|
||||
class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-accent" />
|
||||
|
||||
<label for="smtp-port" class="text-sm text-text-secondary">Port</label>
|
||||
<input id="smtp-port" type="number" min="1" max="65535"
|
||||
bind:value={smtpForm.port}
|
||||
class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-accent" />
|
||||
|
||||
<label for="smtp-username" class="text-sm text-text-secondary">Username</label>
|
||||
<input id="smtp-username" type="text" bind:value={smtpForm.username}
|
||||
class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-accent" />
|
||||
|
||||
<label for="smtp-password" class="text-sm text-text-secondary">Password</label>
|
||||
<input id="smtp-password" type="password"
|
||||
placeholder={smtpForm.password === '***' ? 'Leave blank to keep current' : ''}
|
||||
bind:value={smtpPasswordInput}
|
||||
class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-accent" />
|
||||
|
||||
<label for="smtp-from" class="text-sm text-text-secondary">From address</label>
|
||||
<input id="smtp-from" type="email" bind:value={smtpForm.from_address}
|
||||
class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-accent" />
|
||||
|
||||
<label for="smtp-from-name" class="text-sm text-text-secondary">From name</label>
|
||||
<input id="smtp-from-name" type="text" bind:value={smtpForm.from_name}
|
||||
class="mt-1 w-full rounded-md border border-border bg-background px-3 py-2 font-mono text-sm text-text-primary placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-accent" />
|
||||
|
||||
<label class="text-sm text-text-secondary">TLS</label>
|
||||
<label class="flex items-center gap-2 text-sm">
|
||||
<input type="checkbox" bind:checked={smtpForm.use_tls} />
|
||||
Use STARTTLS
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2 pt-2">
|
||||
<button type="button" disabled={smtpSaving} onclick={onSaveSMTP}
|
||||
class="inline-flex items-center gap-2 rounded-md bg-action-primary px-3 py-1.5 text-sm text-action-fg disabled:opacity-50">
|
||||
{smtpSaving ? 'Saving…' : 'Save'}
|
||||
</button>
|
||||
<button type="button" disabled={smtpTesting} onclick={onTestSMTP}
|
||||
class="inline-flex items-center gap-2 rounded-md border border-border bg-transparent px-3 py-1.5 text-sm text-text-secondary hover:text-text-primary disabled:opacity-50">
|
||||
{smtpTesting ? 'Sending…' : 'Send test email'}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{#if modalOpen}
|
||||
|
||||
@@ -2,7 +2,7 @@ import { afterEach, describe, expect, test, vi } from 'vitest';
|
||||
import { render, screen, fireEvent, waitFor, within } from '@testing-library/svelte';
|
||||
import { mockQuery } from '../../../test-utils/query';
|
||||
import type { LidarrConfig } from '$lib/api/types';
|
||||
import type { CoverProvider } from '$lib/api/admin';
|
||||
import type { CoverProvider, SMTPConfig } from '$lib/api/admin';
|
||||
|
||||
// useQueryClient is wrapped so the page can call invalidateQueries() without
|
||||
// a real QueryClient context. Everything else from svelte-query passes through.
|
||||
@@ -21,7 +21,10 @@ vi.mock('$lib/api/admin', () => ({
|
||||
testLidarrConnection: vi.fn(),
|
||||
createCoverProvidersQuery: vi.fn(),
|
||||
updateCoverProvider: vi.fn(),
|
||||
testCoverProvider: vi.fn()
|
||||
testCoverProvider: vi.fn(),
|
||||
createSMTPConfigQuery: vi.fn(),
|
||||
updateSMTPConfig: vi.fn(),
|
||||
testSMTPConfig: vi.fn()
|
||||
}));
|
||||
|
||||
import IntegrationsPage from './+page.svelte';
|
||||
@@ -34,7 +37,10 @@ import {
|
||||
testLidarrConnection,
|
||||
createCoverProvidersQuery,
|
||||
updateCoverProvider,
|
||||
testCoverProvider
|
||||
testCoverProvider,
|
||||
createSMTPConfigQuery,
|
||||
updateSMTPConfig,
|
||||
testSMTPConfig
|
||||
} from '$lib/api/admin';
|
||||
|
||||
const cfgConnected: LidarrConfig = {
|
||||
@@ -88,12 +94,34 @@ const defaultCoverProviders = {
|
||||
sources_version: 1
|
||||
};
|
||||
|
||||
const smtpUnset: SMTPConfig = {
|
||||
enabled: false,
|
||||
host: '',
|
||||
port: 587,
|
||||
username: '',
|
||||
password: '',
|
||||
from_address: '',
|
||||
from_name: 'Minstrel',
|
||||
use_tls: true
|
||||
};
|
||||
|
||||
const smtpConfigured: SMTPConfig = {
|
||||
enabled: true,
|
||||
host: 'smtp.example.com',
|
||||
port: 587,
|
||||
username: 'user@example.com',
|
||||
password: '***',
|
||||
from_address: 'noreply@example.com',
|
||||
from_name: 'Minstrel',
|
||||
use_tls: true
|
||||
};
|
||||
|
||||
afterEach(() => {
|
||||
vi.clearAllMocks();
|
||||
invalidateQueries.mockReset();
|
||||
});
|
||||
|
||||
function setup(opts: { config?: LidarrConfig; coverProviders?: typeof defaultCoverProviders | null } = {}) {
|
||||
function setup(opts: { config?: LidarrConfig; coverProviders?: typeof defaultCoverProviders | null; smtp?: SMTPConfig } = {}) {
|
||||
(createLidarrConfigQuery as ReturnType<typeof vi.fn>).mockReturnValue(
|
||||
mockQuery({ data: opts.config ?? cfgConnected })
|
||||
);
|
||||
@@ -120,6 +148,9 @@ function setup(opts: { config?: LidarrConfig; coverProviders?: typeof defaultCov
|
||||
(createCoverProvidersQuery as ReturnType<typeof vi.fn>).mockReturnValue(
|
||||
mockQuery({ data: cpData, isPending: opts.coverProviders === null })
|
||||
);
|
||||
(createSMTPConfigQuery as ReturnType<typeof vi.fn>).mockReturnValue(
|
||||
mockQuery({ data: opts.smtp ?? smtpUnset })
|
||||
);
|
||||
return render(IntegrationsPage);
|
||||
}
|
||||
|
||||
@@ -412,3 +443,68 @@ describe('/admin/integrations — cover art providers', () => {
|
||||
expect(screen.getByText(/loading…/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
function smtpSection(): HTMLElement {
|
||||
return screen.getByRole('heading', { name: /email \(smtp\)/i, level: 3 }).closest('section') as HTMLElement;
|
||||
}
|
||||
|
||||
describe('/admin/integrations — SMTP card', () => {
|
||||
test('renders "Email (SMTP)" heading', () => {
|
||||
setup();
|
||||
expect(screen.getByRole('heading', { name: /email \(smtp\)/i, level: 3 })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
test('Save calls updateSMTPConfig with form values; empty password preserves stored value', async () => {
|
||||
setup({ smtp: smtpConfigured });
|
||||
(updateSMTPConfig as ReturnType<typeof vi.fn>).mockResolvedValue(undefined);
|
||||
// password input starts empty — should send '' which tells backend to preserve
|
||||
const section = smtpSection();
|
||||
await fireEvent.click(within(section).getByRole('button', { name: /^save$/i }));
|
||||
await waitFor(() =>
|
||||
expect(updateSMTPConfig).toHaveBeenCalledWith(
|
||||
expect.objectContaining({ password: '' })
|
||||
)
|
||||
);
|
||||
});
|
||||
|
||||
test('Save with a typed password sends the typed value', async () => {
|
||||
setup({ smtp: smtpConfigured });
|
||||
(updateSMTPConfig as ReturnType<typeof vi.fn>).mockResolvedValue(undefined);
|
||||
const section = smtpSection();
|
||||
const pwInput = within(section).getByLabelText(/password/i);
|
||||
await fireEvent.input(pwInput, { target: { value: 'newsecret' } });
|
||||
await fireEvent.click(within(section).getByRole('button', { name: /^save$/i }));
|
||||
await waitFor(() =>
|
||||
expect(updateSMTPConfig).toHaveBeenCalledWith(
|
||||
expect.objectContaining({ password: 'newsecret' })
|
||||
)
|
||||
);
|
||||
});
|
||||
|
||||
test('Test button calls testSMTPConfig', async () => {
|
||||
setup();
|
||||
(testSMTPConfig as ReturnType<typeof vi.fn>).mockResolvedValue(undefined);
|
||||
const section = smtpSection();
|
||||
await fireEvent.click(within(section).getByRole('button', { name: /send test email/i }));
|
||||
await waitFor(() => expect(testSMTPConfig).toHaveBeenCalled());
|
||||
});
|
||||
|
||||
test('no_email_on_file error from testSMTPConfig surfaces actionable toast', async () => {
|
||||
setup();
|
||||
(testSMTPConfig as ReturnType<typeof vi.fn>).mockRejectedValueOnce({ code: 'no_email_on_file' });
|
||||
const section = smtpSection();
|
||||
await fireEvent.click(within(section).getByRole('button', { name: /send test email/i }));
|
||||
await waitFor(() =>
|
||||
expect(screen.getByTestId('toast').textContent).toMatch(/set your email in \/settings/i)
|
||||
);
|
||||
});
|
||||
|
||||
test('password input placeholder shows hint when existing password is masked', async () => {
|
||||
setup({ smtp: smtpConfigured });
|
||||
// smtpConfigured has password: '***' — placeholder should show "Leave blank to keep current"
|
||||
const section = smtpSection();
|
||||
await waitFor(() =>
|
||||
expect(within(section).getByPlaceholderText(/leave blank to keep current/i)).toBeInTheDocument()
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user