@alliance-droid/status-feedback-system 1.3.11 → 1.3.13

package/dist/components/DevFeedback.svelte

@@ -31,7 +31,7 @@
 		showOnboarding?: boolean;
 		/** URL to the feedback board page. If omitted, "View Open Issues" is hidden from the context menu. */
 		boardUrl?: string;
-		/** Pre-fill the email field (e.g. from the logged-in user's session) */
+		/** Authenticated user email. Required for submitting feedback. */
 		userEmail?: string;
 	}
 
@@ -115,7 +115,8 @@
 	let formType = $state<'bug' | 'feature'>('bug');
 	let formTitle = $state('');
 	let formMessage = $state('');
-	let formEmail = $state('');
+
+	let isAuthenticated = $derived(!!userEmail);
 	let submitting = $state(false);
 	let submitResult = $state<'success' | 'error' | null>(null);
 
@@ -233,7 +234,6 @@
 		formType = type;
 		formTitle = '';
 		formMessage = '';
-		formEmail = userEmail ?? '';
 		submitResult = null;
 		menuOpen = false;
 		formOpen = true;
@@ -249,7 +249,7 @@
 	}
 
 	async function handleSubmit() {
-		if (!formMessage.trim()) return;
+		if (!formMessage.trim() || !isAuthenticated) return;
 		submitting = true;
 		submitResult = null;
 
@@ -286,7 +286,7 @@
 				title: formTitle.trim() || undefined,
 				message: formMessage.trim(),
 				category: formType === 'bug' ? 'bug' : 'feature',
-				email: formEmail.trim() || undefined,
+				email: userEmail,
 				pageUrl: window.location.href,
 				metadata,
 			});
@@ -372,7 +372,17 @@
 								{formType === 'bug' ? "We'll look into this." : "Thanks for the suggestion!"}
 							</p>
 						</div>
+					{:else if !isAuthenticated}
+						<div class="text-center py-6 text-foreground-tertiary">
+							<i class="fa-solid fa-lock text-2xl" aria-hidden="true"></i>
+							<p class="mt-2 text-sm">Sign in to submit feedback</p>
+						</div>
 					{:else}
+						<div class="flex items-center gap-1.5 text-xs text-foreground-tertiary">
+							<i class="fa-solid fa-user" aria-hidden="true"></i>
+							<span>Submitting as <span class="font-medium text-foreground-secondary">{userEmail}</span></span>
+						</div>
+
 						<Input
 							bind:value={formTitle}
 							placeholder={formType === 'bug' ? 'Brief summary of the bug' : 'Feature title'}
@@ -388,13 +398,6 @@
 							rows={4}
 						/>
 
-						<Input
-							type="email"
-							bind:value={formEmail}
-							placeholder="your@email.com (optional)"
-							label="Email"
-						/>
-
 						<!-- Auto-captured context (bugs only) -->
 						{#if formType === 'bug'}
 							<div class="space-y-2">
@@ -470,7 +473,7 @@
 				</div>
 
 				<!-- Footer -->
-				{#if submitResult !== 'success'}
+				{#if submitResult !== 'success' && isAuthenticated}
 					<div class="flex justify-end gap-2 px-5 py-4 border-t border-border shrink-0">
 						<Button variant="neutral" style="outline" onclick={() => (formOpen = false)}>
 							Cancel

package/dist/components/DevFeedback.svelte.d.ts

@@ -9,7 +9,7 @@ interface Props {
     showOnboarding?: boolean;
     /** URL to the feedback board page. If omitted, "View Open Issues" is hidden from the context menu. */
     boardUrl?: string;
-    /** Pre-fill the email field (e.g. from the logged-in user's session) */
+    /** Authenticated user email. Required for submitting feedback. */
     userEmail?: string;
 }
 declare const DevFeedback: import("svelte").Component<Props, {}, "">;

package/dist/components/FeedbackBoard.svelte

@@ -16,6 +16,8 @@
 	interface Props {
 		apiUrl: string;
 		apiKey: string;
+		/** Authenticated user email. Required for submitting feedback and replies. */
+		userEmail?: string;
 		/** Category labels and icons — order determines sidebar order */
 		categoryConfig?: Record<string, CategoryConfig>;
 		/** Title shown at the top */
@@ -29,6 +31,7 @@
 	let {
 		apiUrl,
 		apiKey,
+		userEmail,
 		categoryConfig = {},
 		title = 'Feedback Board',
 		showSubmit = true,
@@ -36,7 +39,7 @@
 	}: Props = $props();
 
 	let board: FeedbackBoardState = $derived(
-		createFeedbackBoard({ apiUrl, apiKey, categoryConfig })
+		createFeedbackBoard({ apiUrl, apiKey, userEmail, categoryConfig })
 	);
 
 	let showForm = $state(false);

package/dist/components/FeedbackBoard.svelte.d.ts

@@ -2,6 +2,8 @@ import { type CategoryConfig } from './board/index.js';
 interface Props {
     apiUrl: string;
     apiKey: string;
+    /** Authenticated user email. Required for submitting feedback and replies. */
+    userEmail?: string;
     /** Category labels and icons — order determines sidebar order */
     categoryConfig?: Record<string, CategoryConfig>;
     /** Title shown at the top */

package/dist/components/board/FeedbackDetail.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { Badge, Spinner, Button, Textarea, Input } from '@alliance-droid/svelte-component-library';
+	import { Badge, Spinner, Button, Textarea } from '@alliance-droid/svelte-component-library';
 	import type { BoardItem } from '../../api.js';
 	import type { FeedbackResponse } from '../../types.js';
 	import type { FeedbackBoardState } from './state.svelte.js';
@@ -18,29 +18,26 @@
 
 	// Response form state
 	let replyMessage = $state('');
-	let replyAuthor = $state('');
 	let submittingReply = $state(false);
 	let replyError = $state('');
 	let replySuccess = $state(false);
 
+	let isAuthenticated = $derived(!!board.userEmail);
+
 	onMount(async () => {
 		responses = await board.getResponses(item.id);
 		loadingResponses = false;
 	});
 
 	async function handleSubmitReply() {
-		if (!replyMessage.trim()) return;
+		if (!replyMessage.trim() || !isAuthenticated) return;
 		submittingReply = true;
 		replyError = '';
 		try {
-			await board.submitResponse(item.id, {
-				message: replyMessage.trim(),
-				author: replyAuthor.trim() || undefined,
-			});
+			await board.submitResponse(item.id, replyMessage.trim());
 			// Refresh responses
 			responses = await board.getResponses(item.id);
 			replyMessage = '';
-			replyAuthor = '';
 			replySuccess = true;
 			setTimeout(() => { replySuccess = false; }, 2000);
 		} catch (err) {
@@ -134,24 +131,27 @@
 		<h4 class="text-sm font-semibold text-foreground">
 			<i class="fa-solid fa-reply mr-1" aria-hidden="true"></i> Add a Response
 		</h4>
-		{#if replySuccess}
+		{#if !isAuthenticated}
+			<p class="text-sm text-foreground-tertiary">
+				<i class="fa-solid fa-lock mr-1" aria-hidden="true"></i>
+				Sign in to respond
+			</p>
+		{:else if replySuccess}
 			<p class="text-sm text-green-400 font-semibold">
 				<i class="fa-solid fa-check-circle mr-1" aria-hidden="true"></i> Response submitted!
 			</p>
 		{:else}
+			<div class="flex items-center gap-1.5 text-xs text-foreground-tertiary">
+				<i class="fa-solid fa-user" aria-hidden="true"></i>
+				<span>Replying as <span class="font-medium text-foreground-secondary">{board.userEmail}</span></span>
+			</div>
 			<Textarea
 				value={replyMessage}
 				oninput={(e) => (replyMessage = (e.currentTarget as HTMLTextAreaElement).value)}
 				placeholder="Share your thoughts..."
 				rows={3}
 			/>
-			<div class="flex gap-2 items-center">
-				<div class="flex-1">
-					<Input
-						bind:value={replyAuthor}
-						placeholder="Your name (optional)"
-					/>
-				</div>
+			<div class="flex gap-2 items-center justify-end">
 				<Button
 					variant="primary"
 					size="sm"

package/dist/components/board/FeedbackSubmitForm.svelte

@@ -6,26 +6,25 @@
 		board: FeedbackBoardState;
 		/** Available category options for the dropdown */
 		categories?: string[];
-		/** Pre-fill the email field (e.g. from the logged-in user's session) */
-		userEmail?: string;
 	}
 
-	let { board, categories = [], userEmail }: Props = $props();
+	let { board, categories = [] }: Props = $props();
 
 	let title = $state('');
 	let message = $state('');
 	let category = $state('');
-	let email = $derived(userEmail ?? '');
 	let submitting = $state(false);
 	let success = $state(false);
 	let error = $state('');
 
+	let isAuthenticated = $derived(!!board.userEmail);
+
 	let categoryOptions = $derived(
 		categories.map((c) => ({ value: c, label: board.getCategoryLabel(c) }))
 	);
 
 	async function handleSubmit() {
-		if (!message.trim()) return;
+		if (!message.trim() || !isAuthenticated) return;
 		submitting = true;
 		error = '';
 		try {
@@ -33,13 +32,11 @@
 				title: title.trim() || undefined,
 				message: message.trim(),
 				category: category || undefined,
-				email: email.trim() || undefined,
 			});
 			success = true;
 			title = '';
 			message = '';
 			category = '';
-			email = '';
 			setTimeout(() => { success = false; }, 2000);
 		} catch (err) {
 			error = err instanceof Error ? err.message : 'Failed to submit';
@@ -50,12 +47,21 @@
 </script>
 
 <Card variant="outlined" padding="md">
-	{#if success}
+	{#if !isAuthenticated}
+		<div class="text-center py-3 text-foreground-tertiary">
+			<i class="fa-solid fa-lock mr-1" aria-hidden="true"></i>
+			<span class="text-sm">Sign in to submit feedback</span>
+		</div>
+	{:else if success}
 		<div class="text-center py-2 text-green-400 font-semibold">
 			<i class="fa-solid fa-check-circle mr-1"></i> Submitted!
 		</div>
 	{:else}
 		<div class="space-y-3">
+			<div class="flex items-center gap-1.5 text-xs text-foreground-tertiary">
+				<i class="fa-solid fa-user" aria-hidden="true"></i>
+				<span>Submitting as <span class="font-medium text-foreground-secondary">{board.userEmail}</span></span>
+			</div>
 			<Input
 				bind:value={title}
 				placeholder="Title (optional)"
@@ -81,13 +87,7 @@
 						/>
 					</div>
 				{/if}
-				<div class="flex-1">
-					<Input
-						type="email"
-						bind:value={email}
-						placeholder="Email (optional)"
-					/>
-				</div>
+				<div class="flex-1"></div>
 				<Button
 					variant="primary"
 					disabled={submitting || !message.trim()}

package/dist/components/board/FeedbackSubmitForm.svelte.d.ts

@@ -3,8 +3,6 @@ interface Props {
     board: FeedbackBoardState;
     /** Available category options for the dropdown */
     categories?: string[];
-    /** Pre-fill the email field (e.g. from the logged-in user's session) */
-    userEmail?: string;
 }
 declare const FeedbackSubmitForm: import("svelte").Component<Props, {}, "">;
 type FeedbackSubmitForm = ReturnType<typeof FeedbackSubmitForm>;

package/dist/components/board/state.svelte.d.ts

@@ -17,12 +17,15 @@ export interface FeedbackBoardOptions {
     apiUrl: string;
     apiKey: string;
     categoryConfig?: Record<string, CategoryConfig>;
+    /** Authenticated user email. Required for submitting feedback and replies. */
+    userEmail?: string;
     /** Items per page. Default: 50 */
     pageSize?: number;
 }
 export interface FeedbackBoardState {
     readonly client: StatusClient;
     readonly categoryConfig: Record<string, CategoryConfig>;
+    readonly userEmail: string | null;
     readonly items: BoardItem[];
     readonly categories: BoardCategory[];
     readonly total: number;
@@ -43,12 +46,8 @@ export interface FeedbackBoardState {
         title?: string;
         message: string;
         category?: string;
-        email?: string;
-    }): Promise<void>;
-    submitResponse(itemId: string, data: {
-        message: string;
-        author?: string;
     }): Promise<void>;
+    submitResponse(itemId: string, message: string): Promise<void>;
     getCategoryIcon(name: string): string;
     getCategoryLabel(name: string): string;
     getCategoryDescription(name: string): string;

package/dist/components/board/state.svelte.js

@@ -8,8 +8,9 @@
  */
 import { createStatusClient } from '../../api.js';
 export function createFeedbackBoard(options) {
-    const { apiUrl, apiKey, categoryConfig = {}, pageSize = 50 } = options;
+    const { apiUrl, apiKey, categoryConfig = {}, userEmail, pageSize = 50 } = options;
     const client = createStatusClient({ apiUrl, apiKey });
+    const resolvedEmail = userEmail?.trim() || null;
     // Reactive state
     let items = $state([]);
     let categories = $state([]);
@@ -125,14 +126,19 @@ export function createFeedbackBoard(options) {
         }
     }
     async function submitFeedback(data) {
+        if (!resolvedEmail)
+            throw new Error('Authentication required to submit feedback');
         await client.submitFeedback({
             ...data,
+            email: resolvedEmail,
             pageUrl: typeof window !== 'undefined' ? window.location.href : undefined,
         });
         await load();
     }
-    async function submitResponse(itemId, data) {
-        await client.submitResponse(itemId, data);
+    async function submitResponse(itemId, message) {
+        if (!resolvedEmail)
+            throw new Error('Authentication required to submit a response');
+        await client.submitResponse(itemId, { message, author: resolvedEmail });
         // Invalidate cache so next getResponses fetches fresh data
         delete responseCache[itemId];
         // Update response count on the item
@@ -143,6 +149,7 @@ export function createFeedbackBoard(options) {
     return {
         get client() { return client; },
         get categoryConfig() { return categoryConfig; },
+        get userEmail() { return resolvedEmail; },
         get items() { return items; },
         get categories() { return categories; },
         get total() { return total; },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alliance-droid/status-feedback-system",
-  "version": "1.3.11",
+  "version": "1.3.13",
   "type": "module",
   "description": "Drop-in system status pages and user feedback forms for SvelteKit apps",
   "svelte": "./dist/index.js",