From 858d5d1d25a00c97655cf65cbf876c3fca0fac88 Mon Sep 17 00:00:00 2001
From: elpatron <m.busche@gmail.com>
Date: Sat, 30 May 2026 13:24:43 +0200
Subject: [PATCH] feat(feedback): optionales E-Mail-Kontaktfeld im Formular
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Nutzer können optional eine E-Mail hinterlassen; Validierung client-/serverseitig, Weitergabe in Ntfy-Benachrichtigungen.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 client/src/App.css                      |  2 ++
 client/src/components/FeedbackModal.tsx | 26 ++++++++++++++++++++++++-
 client/src/i18n/locales/de.json         |  3 +++
 client/src/i18n/locales/en.json         |  3 +++
 client/src/services/feedback.ts         | 20 +++++++++++++++++--
 server/src/routes/feedback.ts           | 26 ++++++++++++++++++++++++-
 server/src/services/ntfyNotify.ts       |  5 +++++
 7 files changed, 81 insertions(+), 4 deletions(-)

diff --git a/client/src/App.css b/client/src/App.css
index dc433d6..30ced04 100644
--- a/client/src/App.css
+++ b/client/src/App.css
@@ -457,6 +457,7 @@ html.scheme-dark .themed-select-option.is-selected {
 }
 
 .feedback-form__field select,
+.feedback-form__field input,
 .feedback-form__field textarea {
   width: 100%;
   padding: 10px 12px;
@@ -469,6 +470,7 @@ html.scheme-dark .themed-select-option.is-selected {
 }
 
 .feedback-form__field select:focus,
+.feedback-form__field input:focus,
 .feedback-form__field textarea:focus {
   outline: none;
   border-color: var(--app-accent, #38bdf8);
diff --git a/client/src/components/FeedbackModal.tsx b/client/src/components/FeedbackModal.tsx
index b55a3c3..826f34b 100644
--- a/client/src/components/FeedbackModal.tsx
+++ b/client/src/components/FeedbackModal.tsx
@@ -22,6 +22,7 @@ export default function FeedbackModal({
 }: FeedbackModalProps) {
   const { t } = useTranslation()
   const [category, setCategory] = useState<FeedbackCategory>('general')
+  const [contactEmail, setContactEmail] = useState('')
   const [message, setMessage] = useState('')
   const [submitState, setSubmitState] = useState<SubmitState>('idle')
   const [statusMessage, setStatusMessage] = useState<string | null>(null)
@@ -53,6 +54,7 @@ export default function FeedbackModal({
     if (!open) {
       clearCloseTimer()
       setCategory('general')
+      setContactEmail('')
       setMessage('')
       setSubmitState('idle')
       setStatusMessage(null)
@@ -70,6 +72,7 @@ export default function FeedbackModal({
       await sendFeedback({
         category,
         message: message.trim(),
+        contactEmail: contactEmail.trim() || undefined,
         logbookId,
         logbookTitle
       })
@@ -84,7 +87,9 @@ export default function FeedbackModal({
       setStatusMessage(
         error instanceof FeedbackApiError && error.code === 'NOT_CONFIGURED'
           ? t('feedback.error_not_configured')
-          : t('feedback.error_send')
+          : error instanceof FeedbackApiError && error.code === 'INVALID_EMAIL'
+            ? t('feedback.error_invalid_email')
+            : t('feedback.error_send')
       )
     }
   }
@@ -139,6 +144,25 @@ export default function FeedbackModal({
                   </select>
                 </label>
 
+                <label className="feedback-form__field">
+                  <span>{t('feedback.contact_label')}</span>
+                  <input
+                    type="email"
+                    value={contactEmail}
+                    onChange={(event) => {
+                      setContactEmail(event.target.value)
+                      if (submitState === 'error') {
+                        setSubmitState('idle')
+                        setStatusMessage(null)
+                      }
+                    }}
+                    placeholder={t('feedback.contact_placeholder')}
+                    autoComplete="email"
+                    maxLength={254}
+                    disabled={submitState === 'submitting'}
+                  />
+                </label>
+
                 <label className="feedback-form__field">
                   <span>{t('feedback.message_label')}</span>
                   <textarea
diff --git a/client/src/i18n/locales/de.json b/client/src/i18n/locales/de.json
index c159b2f..d680d22 100644
--- a/client/src/i18n/locales/de.json
+++ b/client/src/i18n/locales/de.json
@@ -406,6 +406,8 @@
       "category_general": "Allgemein",
       "category_bug": "Fehler melden",
       "category_feature": "Feature-Wunsch",
+      "contact_label": "E-Mail (optional)",
+      "contact_placeholder": "ihre@email.beispiel",
       "message_label": "Nachricht",
       "message_placeholder": "Beschreiben Sie Ihr Feedback…",
       "send": "Senden",
@@ -413,6 +415,7 @@
       "cancel": "Abbrechen",
       "success": "Vielen Dank! Ihr Feedback wurde gesendet.",
       "error_send": "Feedback konnte nicht gesendet werden. Bitte versuchen Sie es später erneut.",
+      "error_invalid_email": "Bitte geben Sie eine gültige E-Mail-Adresse ein.",
       "error_not_configured": "Feedback ist auf diesem Server nicht verfügbar."
     },
     "demo": {
diff --git a/client/src/i18n/locales/en.json b/client/src/i18n/locales/en.json
index 018aaa6..fa3cb14 100644
--- a/client/src/i18n/locales/en.json
+++ b/client/src/i18n/locales/en.json
@@ -406,6 +406,8 @@
       "category_general": "General",
       "category_bug": "Bug report",
       "category_feature": "Feature request",
+      "contact_label": "Email (optional)",
+      "contact_placeholder": "your@email.example",
       "message_label": "Message",
       "message_placeholder": "Describe your feedback…",
       "send": "Send",
@@ -413,6 +415,7 @@
       "cancel": "Cancel",
       "success": "Thank you! Your feedback has been sent.",
       "error_send": "Could not send feedback. Please try again later.",
+      "error_invalid_email": "Please enter a valid email address.",
       "error_not_configured": "Feedback is not available on this server."
     },
     "demo": {
diff --git a/client/src/services/feedback.ts b/client/src/services/feedback.ts
index cb438ef..71ef1ef 100644
--- a/client/src/services/feedback.ts
+++ b/client/src/services/feedback.ts
@@ -1,15 +1,24 @@
 export type FeedbackCategory = 'bug' | 'feature' | 'general'
 
 export class FeedbackApiError extends Error {
-  code: 'NOT_CONFIGURED' | 'REQUEST_FAILED'
+  code: 'NOT_CONFIGURED' | 'REQUEST_FAILED' | 'INVALID_EMAIL'
 
-  constructor(message: string, code: 'NOT_CONFIGURED' | 'REQUEST_FAILED' = 'REQUEST_FAILED') {
+  constructor(
+    message: string,
+    code: 'NOT_CONFIGURED' | 'REQUEST_FAILED' | 'INVALID_EMAIL' = 'REQUEST_FAILED'
+  ) {
     super(message)
     this.name = 'FeedbackApiError'
     this.code = code
   }
 }
 
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+
+export function isValidFeedbackEmail(email: string): boolean {
+  return EMAIL_PATTERN.test(email.trim())
+}
+
 function buildFeedbackHeaders(): Record<string, string> {
   const headers: Record<string, string> = {
     'Content-Type': 'application/json'
@@ -22,15 +31,22 @@ function buildFeedbackHeaders(): Record<string, string> {
 export async function sendFeedback(payload: {
   category: FeedbackCategory
   message: string
+  contactEmail?: string | null
   logbookId?: string | null
   logbookTitle?: string | null
 }): Promise<void> {
+  const contactEmail = payload.contactEmail?.trim()
+  if (contactEmail && !isValidFeedbackEmail(contactEmail)) {
+    throw new FeedbackApiError('Invalid email address', 'INVALID_EMAIL')
+  }
+
   const res = await fetch('/api/feedback', {
     method: 'POST',
     headers: buildFeedbackHeaders(),
     body: JSON.stringify({
       category: payload.category,
       message: payload.message,
+      contactEmail: contactEmail || undefined,
       username: localStorage.getItem('active_username') || undefined,
       logbookId: payload.logbookId || undefined,
       logbookTitle: payload.logbookTitle || undefined,
diff --git a/server/src/routes/feedback.ts b/server/src/routes/feedback.ts
index afa1d96..1c4f03f 100644
--- a/server/src/routes/feedback.ts
+++ b/server/src/routes/feedback.ts
@@ -5,6 +5,20 @@ const router = Router()
 
 const VALID_CATEGORIES = new Set(['bug', 'feature', 'general'])
 const MAX_MESSAGE_LENGTH = 2000
+const MAX_EMAIL_LENGTH = 254
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+
+function parseOptionalEmail(value: unknown): string | undefined {
+  if (value === undefined || value === null || value === '') return undefined
+  if (typeof value !== 'string') return undefined
+
+  const trimmed = value.trim()
+  if (!trimmed) return undefined
+  if (trimmed.length > MAX_EMAIL_LENGTH) return undefined
+  if (!EMAIL_PATTERN.test(trimmed)) return undefined
+
+  return trimmed
+}
 
 const requireUser = (req: any, res: any, next: any) => {
   const userId = req.headers['x-user-id']
@@ -25,7 +39,8 @@ router.post('/', requireUser, async (req: any, res) => {
       return res.status(503).json({ error: 'Feedback is not configured on this server' })
     }
 
-    const { category, message, username, logbookId, logbookTitle, appVersion, pageUrl } = req.body ?? {}
+    const { category, message, username, contactEmail, logbookId, logbookTitle, appVersion, pageUrl } =
+      req.body ?? {}
 
     if (typeof category !== 'string' || !VALID_CATEGORIES.has(category)) {
       return res.status(400).json({ error: 'Invalid category' })
@@ -40,10 +55,19 @@ router.post('/', requireUser, async (req: any, res) => {
       return res.status(400).json({ error: `Message must be at most ${MAX_MESSAGE_LENGTH} characters` })
     }
 
+    let parsedContactEmail: string | undefined
+    if (contactEmail !== undefined && contactEmail !== null && String(contactEmail).trim()) {
+      parsedContactEmail = parseOptionalEmail(contactEmail)
+      if (!parsedContactEmail) {
+        return res.status(400).json({ error: 'Invalid email address' })
+      }
+    }
+
     await sendFeedbackViaNtfy({
       category,
       message: trimmedMessage,
       username: typeof username === 'string' ? username.trim() : undefined,
+      contactEmail: parsedContactEmail,
       userId: req.userId,
       logbookId: typeof logbookId === 'string' ? logbookId.trim() : undefined,
       logbookTitle: typeof logbookTitle === 'string' ? logbookTitle.trim() : undefined,
diff --git a/server/src/services/ntfyNotify.ts b/server/src/services/ntfyNotify.ts
index 40a2e5b..5fdb899 100644
--- a/server/src/services/ntfyNotify.ts
+++ b/server/src/services/ntfyNotify.ts
@@ -2,6 +2,7 @@ export interface FeedbackPayload {
   category: string
   message: string
   username?: string
+  contactEmail?: string
   userId: string
   logbookId?: string
   logbookTitle?: string
@@ -40,6 +41,10 @@ export async function sendFeedbackViaNtfy(payload: FeedbackPayload): Promise<voi
     `User ID: ${payload.userId}`
   ]
 
+  if (payload.contactEmail) {
+    lines.push(`Contact: ${payload.contactEmail}`)
+  }
+
   if (payload.logbookTitle || payload.logbookId) {
     lines.push(`Logbook: ${payload.logbookTitle || payload.logbookId}`)
   }