plum-e2e 1.3.7 → 2.2.0

package/frontend/src/routes/login/+page.svelte

@@ -0,0 +1,209 @@
+<!--
+ * This file is part of Plum.
+ *
+ * Plum is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Plum is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with Plum. If not, see https://www.gnu.org/licenses/.
+ -->
+
+<script>
+	import { auth } from '$lib/stores/auth';
+	import { login } from '$lib/api/auth';
+	import { theme } from '$lib/stores/theme';
+
+	let email = '';
+	let password = '';
+	let error = '';
+	let loading = false;
+
+	async function handleSubmit() {
+		error = '';
+		loading = true;
+		try {
+			const { token, user } = await login({ email, password });
+			auth.login(token, user);
+			window.location.href = '/';
+		} catch (e) {
+			error = e.message || 'Login failed';
+		} finally {
+			loading = false;
+		}
+	}
+
+	function onKeydown(e) {
+		if (e.key === 'Enter') handleSubmit();
+	}
+</script>
+
+<svelte:head><title>Sign in — Plum</title></svelte:head>
+
+<div class="page" data-theme={$theme}>
+	<div class="card">
+		<div class="brand">
+			<span class="brand-serif">Pl</span><span class="brand-sans">um</span>
+		</div>
+		<h1 class="title">Sign in</h1>
+		<p class="subtitle">Access your test workspace</p>
+
+		<div class="fields">
+			<div class="field">
+				<label class="label" for="email">Email</label>
+				<input
+					id="email"
+					type="email"
+					class="input"
+					bind:value={email}
+					placeholder="jane@example.com"
+					autocomplete="email"
+					on:keydown={onKeydown}
+				/>
+			</div>
+			<div class="field">
+				<label class="label" for="password">Password</label>
+				<input
+					id="password"
+					type="password"
+					class="input"
+					bind:value={password}
+					placeholder="••••••••"
+					autocomplete="current-password"
+					on:keydown={onKeydown}
+				/>
+			</div>
+		</div>
+
+		{#if error}
+			<p class="error">{error}</p>
+		{/if}
+
+		<button class="submit-btn" on:click={handleSubmit} disabled={loading || !email || !password}>
+			{loading ? 'Signing in…' : 'Sign in'}
+		</button>
+	</div>
+</div>
+
+<style>
+	.page {
+		min-height: 100vh;
+		background: var(--bg);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 1rem;
+	}
+
+	.card {
+		width: 100%;
+		max-width: 380px;
+		background: var(--bg-elevated);
+		border: 1px solid var(--border);
+		border-radius: var(--radius-lg);
+		padding: 2.5rem 2rem;
+		display: flex;
+		flex-direction: column;
+		gap: 1.25rem;
+	}
+
+	.brand {
+		font-size: 1.5rem;
+		letter-spacing: -0.02em;
+		margin-bottom: -0.25rem;
+	}
+
+	.brand-serif {
+		font-family: var(--font-display);
+		font-weight: 400;
+		color: var(--accent);
+	}
+
+	.brand-sans {
+		font-family: var(--font-body);
+		font-weight: 400;
+		color: var(--text);
+	}
+
+	.title {
+		font-size: 1.5rem;
+		font-weight: 600;
+		color: var(--text);
+		margin: 0;
+	}
+
+	.subtitle {
+		font-size: 0.875rem;
+		color: var(--text-muted);
+		margin: -0.75rem 0 0;
+	}
+
+	.fields {
+		display: flex;
+		flex-direction: column;
+		gap: 0.875rem;
+	}
+
+	.field {
+		display: flex;
+		flex-direction: column;
+		gap: 0.375rem;
+	}
+
+	.label {
+		font-size: 0.8125rem;
+		font-weight: 500;
+		color: var(--text);
+	}
+
+	.input {
+		height: 38px;
+		padding: 0 0.75rem;
+		font-family: var(--font-body);
+		font-size: 0.875rem;
+		color: var(--text);
+		background: var(--bg);
+		border: 1px solid var(--border);
+		border-radius: var(--radius-sm);
+		outline: none;
+		transition: border-color var(--duration-fast);
+	}
+
+	.input:focus {
+		border-color: var(--accent);
+	}
+
+	.error {
+		font-size: 0.8125rem;
+		color: var(--fail);
+		margin: -0.25rem 0 0;
+	}
+
+	.submit-btn {
+		height: 40px;
+		background: var(--accent);
+		color: #fff;
+		border: none;
+		border-radius: var(--radius-sm);
+		font-family: var(--font-body);
+		font-size: 0.875rem;
+		font-weight: 500;
+		cursor: pointer;
+		transition: opacity var(--duration-fast);
+	}
+
+	.submit-btn:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.submit-btn:not(:disabled):hover {
+		opacity: 0.88;
+	}
+</style>

package/frontend/src/routes/scheduled-tests/+page.svelte

@@ -25,6 +25,7 @@
 		toggleCronJob
 	} from '$lib/api/schedules';
 	import { fetchRunners } from '$lib/api/runners';
+	import { fetchIntegrations } from '$lib/api/settings';
 	import { activeCronJobs } from '$lib/stores/runner';
 	import { BROWSERS, TOAST_TIMEOUT_MS } from '$lib/constants';
 	import { stagger } from '$lib/utils/format';
@@ -50,6 +51,7 @@
 
 	let cronJobs = [];
 	let availableRunners = [];
+	let integrations = { discordWebhookUrl: '', slackWebhookUrl: '', notifyPublicUrl: '' };
 	let toast = null;
 
 	let modalOpen = false;
@@ -64,7 +66,9 @@
 		tags: '',
 		workers: 1,
 		browser: 'chromium',
-		runnerIds: ['built-in']
+		runnerIds: ['built-in'],
+		notifyDiscord: false,
+		notifySlack: false
 	};
 	let selectedSchedule = '';
 	let useCustomCron = false;
@@ -137,7 +141,9 @@
 			tags: '',
 			workers: 1,
 			browser: 'chromium',
-			runnerIds: ['built-in']
+			runnerIds: ['built-in'],
+			notifyDiscord: false,
+			notifySlack: false
 		};
 		selectedSchedule = '';
 		useCustomCron = false;
@@ -157,7 +163,9 @@
 			tags: job.tags,
 			workers: job.workers ?? 1,
 			browser: job.browser ?? 'chromium',
-			runnerIds: prunedIds.length > 0 ? prunedIds : ['built-in']
+			runnerIds: prunedIds.length > 0 ? prunedIds : ['built-in'],
+			notifyDiscord: job.notifyDiscord ?? false,
+			notifySlack: job.notifySlack ?? false
 		};
 		const isPreset = scheduleOptions.some((o) => o.value === job.cronExpression);
 		useCustomCron = !isPreset;
@@ -231,10 +239,15 @@
 	}
 
 	onMount(async () => {
-		cronJobs = await fetchCronJobs();
-		try {
-			availableRunners = await fetchRunners();
-		} catch {}
+		[cronJobs, availableRunners, integrations] = await Promise.all([
+			fetchCronJobs(),
+			fetchRunners().catch(() => []),
+			fetchIntegrations().catch(() => ({
+				discordWebhookUrl: '',
+				slackWebhookUrl: '',
+				notifyPublicUrl: ''
+			}))
+		]);
 	});
 </script>
 
@@ -373,6 +386,26 @@
 			</div>
 		</div>
 
+		{#if integrations.discordWebhookUrl || integrations.slackWebhookUrl}
+			<div class="field">
+				<div class="field-label"><span>Notifications</span></div>
+				<div class="notify-checks">
+					{#if integrations.discordWebhookUrl}
+						<label class="notify-check-option">
+							<input type="checkbox" bind:checked={form.notifyDiscord} />
+							<span>Discord</span>
+						</label>
+					{/if}
+					{#if integrations.slackWebhookUrl}
+						<label class="notify-check-option">
+							<input type="checkbox" bind:checked={form.notifySlack} />
+							<span>Slack</span>
+						</label>
+					{/if}
+				</div>
+			</div>
+		{/if}
+
 		{#if formError}
 			<p class="form-error">{formError}</p>
 		{/if}
@@ -859,4 +892,29 @@
 		text-overflow: ellipsis;
 		max-width: 180px;
 	}
+
+	/* Notification checkboxes in modal */
+	.notify-checks {
+		display: flex;
+		flex-direction: row;
+		gap: 1rem;
+		padding: 0.375rem 0;
+	}
+
+	.notify-check-option {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		font-size: 0.8125rem;
+		color: var(--text);
+		cursor: pointer;
+	}
+
+	.notify-check-option input[type='checkbox'] {
+		accent-color: var(--accent);
+		width: 13px;
+		height: 13px;
+		flex-shrink: 0;
+		cursor: pointer;
+	}
 </style>